diff --git a/public/compiled-lang/br.json b/public/compiled-lang/br.json index f6c9e9b52..f25db8298 100644 --- a/public/compiled-lang/br.json +++ b/public/compiled-lang/br.json @@ -4109,6 +4109,18 @@ "value": "Nossa História" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/compiled-lang/de.json b/public/compiled-lang/de.json index 8a2a918b8..6b0ef2cb6 100644 --- a/public/compiled-lang/de.json +++ b/public/compiled-lang/de.json @@ -4109,6 +4109,18 @@ "value": "Our Story" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/compiled-lang/en.json b/public/compiled-lang/en.json index e3a09ec08..eb998c6ef 100644 --- a/public/compiled-lang/en.json +++ b/public/compiled-lang/en.json @@ -4105,6 +4105,18 @@ "value": "Our Story" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/compiled-lang/es.json b/public/compiled-lang/es.json index 3566d90cf..896d554a9 100644 --- a/public/compiled-lang/es.json +++ b/public/compiled-lang/es.json @@ -4125,6 +4125,18 @@ "value": "Our Story" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/compiled-lang/fr.json b/public/compiled-lang/fr.json index eb1836c64..399360d88 100644 --- a/public/compiled-lang/fr.json +++ b/public/compiled-lang/fr.json @@ -4101,6 +4101,18 @@ "value": "Our Story" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/compiled-lang/ja.json b/public/compiled-lang/ja.json index f3040f7ba..59ff04014 100644 --- a/public/compiled-lang/ja.json +++ b/public/compiled-lang/ja.json @@ -4117,6 +4117,18 @@ "value": "Our Story" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/compiled-lang/ru.json b/public/compiled-lang/ru.json index a9b5bd942..47000264b 100644 --- a/public/compiled-lang/ru.json +++ b/public/compiled-lang/ru.json @@ -4109,6 +4109,18 @@ "value": "Our Story" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/compiled-lang/zh.json b/public/compiled-lang/zh.json index 4a109d9b0..a632c2453 100644 --- a/public/compiled-lang/zh.json +++ b/public/compiled-lang/zh.json @@ -4125,6 +4125,18 @@ "value": "Our Story" } ], + "passageNavigation__selector-grid": [ + { + "type": 0, + "value": "Grid" + } + ], + "passageNavigation__selector-list": [ + { + "type": 0, + "value": "List" + } + ], "personTypeLockup_type": [ { "type": 0, diff --git a/public/lang/br.json b/public/lang/br.json index fb71aeca7..4761cd81b 100644 --- a/public/lang/br.json +++ b/public/lang/br.json @@ -2735,5 +2735,13 @@ }, "bibles__history": { "string": "Histórico" + }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" } } \ No newline at end of file diff --git a/public/lang/de.json b/public/lang/de.json index ba8e32e66..e5eaa67ad 100644 --- a/public/lang/de.json +++ b/public/lang/de.json @@ -2735,5 +2735,13 @@ }, "bibles__history": { "string": "Verlauf" + }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" } } \ No newline at end of file diff --git a/public/lang/en.json b/public/lang/en.json index 17e59c891..5605d33d0 100644 --- a/public/lang/en.json +++ b/public/lang/en.json @@ -1974,6 +1974,14 @@ "ourStory__title": { "string": "Our Story" }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" + }, "personTypeLockup_type": { "string": "Presenter" }, diff --git a/public/lang/es.json b/public/lang/es.json index 2d413bdec..d12bde048 100644 --- a/public/lang/es.json +++ b/public/lang/es.json @@ -2735,5 +2735,13 @@ }, "bibles__history": { "string": "Historial" + }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" } } \ No newline at end of file diff --git a/public/lang/fr.json b/public/lang/fr.json index 3c40ee7f7..337c69e50 100644 --- a/public/lang/fr.json +++ b/public/lang/fr.json @@ -2735,5 +2735,13 @@ }, "bibles__history": { "string": "Historique" + }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" } } \ No newline at end of file diff --git a/public/lang/ja.json b/public/lang/ja.json index 7424b4c39..5dac142e6 100644 --- a/public/lang/ja.json +++ b/public/lang/ja.json @@ -2735,5 +2735,13 @@ }, "bibles__history": { "string": "履歴" + }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" } } \ No newline at end of file diff --git a/public/lang/ru.json b/public/lang/ru.json index 59c1afd65..a3d2e57ba 100644 --- a/public/lang/ru.json +++ b/public/lang/ru.json @@ -2735,5 +2735,13 @@ }, "bibles__history": { "string": "История" + }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" } } \ No newline at end of file diff --git a/public/lang/zh.json b/public/lang/zh.json index 62189b2f8..8fb2cd7bf 100644 --- a/public/lang/zh.json +++ b/public/lang/zh.json @@ -2735,5 +2735,13 @@ }, "bibles__history": { "string": "历史" + }, + "passageNavigation__selector-grid": { + "comment": "Switch to grid view", + "string": "Grid" + }, + "passageNavigation__selector-list": { + "comment": "Switch to list view", + "string": "List" } } \ No newline at end of file diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx index f2cc4a7d2..bf2f7d93f 100644 --- a/src/components/organisms/passageNavigation.tsx +++ b/src/components/organisms/passageNavigation.tsx @@ -1,5 +1,8 @@ import clsx from 'clsx'; -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { useLocalStorage } from '~src/lib/hooks/useLocalStorage'; import { PassageNavigationFragment } from './__generated__/passageNavigation'; import BookGrid from './bookGrid'; @@ -57,7 +60,10 @@ export default function PassageNavigation({ books }: Props): JSX.Element { const [selectedBook, setSelectedBook] = useState( null, ); - const [selectedView, setSelectedView] = useState<'grid' | 'list'>('grid'); + const [selectedView, setSelectedView] = useLocalStorage<'grid' | 'list'>( + 'passageNavLayout', + 'grid', + ); return (
@@ -66,13 +72,21 @@ export default function PassageNavigation({ books }: Props): JSX.Element { className={clsx({ active: selectedView === 'grid' })} onClick={() => setSelectedView('grid')} > - Grid +