Handle navigation/history in a single component (#649)

sillsdev · Jul 22, 2024 · 88844ee · 88844ee
1 parent 4d52698
commit 88844ee
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 75 deletions.
diff --git a/src/lib/components/BookSelector.svelte b/src/lib/components/BookSelector.svelte
@@ -6,21 +6,12 @@ The navbar component.
     import Dropdown from './Dropdown.svelte';
     import SelectGrid from './SelectGrid.svelte';
     import TabsMenu from './TabsMenu.svelte';
-    import {
-        refs,
-        nextRef,
-        s,
-        t,
-        convertStyle,
-        userSettings,
-        userSettingsOrDefault
-    } from '$lib/data/stores';
-    import { addHistory } from '$lib/data/history';
+    import { refs, nextRef, s, t, convertStyle, userSettingsOrDefault } from '$lib/data/stores';
+    import { navigateToText, navigateToUrl } from '$lib/navigate';
     import { DropdownIcon } from '$lib/icons';
     import config from '$lib/data/config';
     import SelectList from './SelectList.svelte';
     import * as numerals from '$lib/scripts/numeralSystem';
-    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
 
     export let displayLabel = undefined;
@@ -64,14 +55,11 @@ The navbar component.
     async function navigateReference(e) {
         // Handle special book navigation first
         if (e.detail.tab === b && e.detail?.url) {
-            const book = e.detail.text;
-            addHistory({
+            navigateToUrl({
                 collection: $refs.collection,
-                book,
-                chapter: '',
+                book: e.detail.text,
                 url: e.detail.url
             });
-            goto(e.detail.url);
             return;
         }
         if (!showChapterSelector) {
@@ -121,15 +109,13 @@ The navbar component.
     }
 
     async function completeNavigation() {
-        await refs.set({ book: $nextRef.book, chapter: $nextRef.chapter, verse: $nextRef.verse });
-        addHistory({
+        await navigateToText({
             collection: $refs.collection,
             book: $nextRef.book,
             chapter: $nextRef.chapter,
             verse: $nextRef.verse
         });
         document.activeElement.blur();
-        goto(`${base}/`);
     }
 
     function resetNavigation() {

diff --git a/src/lib/components/ChapterSelector.svelte b/src/lib/components/ChapterSelector.svelte
@@ -6,20 +6,11 @@ The navbar component.
     import Dropdown from './Dropdown.svelte';
     import SelectGrid from './SelectGrid.svelte';
     import TabsMenu from './TabsMenu.svelte';
-    import {
-        refs,
-        nextRef,
-        s,
-        t,
-        convertStyle,
-        userSettings,
-        defaultSettings,
-        userSettingsOrDefault
-    } from '$lib/data/stores';
-    import { addHistory } from '$lib/data/history';
+    import { refs, nextRef, s, t, convertStyle, userSettingsOrDefault } from '$lib/data/stores';
     import { DropdownIcon } from '$lib/icons';
     import config from '$lib/data/config';
     import * as numerals from '$lib/scripts/numeralSystem';
+    import { navigateToText } from '$lib/navigate';
 
     /**reference to chapter selector so code can use TabsMenu.setActive*/
     let chapterSelector;
@@ -65,9 +56,7 @@ The navbar component.
     }
 
     async function completeNavigation() {
-        await refs.set({ chapter: $nextRef.chapter, verse: $nextRef.verse });
-
-        addHistory({
+        await navigateToText({
             collection: $refs.collection,
             book: $refs.book,
             chapter: $nextRef.chapter,

diff --git a/src/lib/components/SearchResultCard.svelte b/src/lib/components/SearchResultCard.svelte
@@ -3,13 +3,10 @@
 A clickable verse card representing a single search result.
 -->
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import config from '$lib/data/config';
-    import { addHistory } from '$lib/data/history';
-    import { refs } from '$lib/data/stores';
     import type { Reference, SearchResult } from '$lib/search/domain/entities';
     import * as numerals from '$lib/scripts/numeralSystem';
+    import { navigateToText } from '$lib/navigate';
 
     export let docSet: string;
     export let collection: string;
@@ -60,19 +57,13 @@ A clickable verse card representing a single search result.
     }
 
     function onClick() {
-        refs.set({
+        navigateToText({
             docSet,
-            book: result.reference.bookCode,
-            chapter: result.reference.chapter,
-            verse: result.reference.verses
-        });
-        addHistory({
             collection,
             book: result.reference.bookCode,
             chapter: result.reference.chapter,
             verse: result.reference.verses
         });
-        goto(`${base}/`);
     }
 </script>
 

diff --git a/src/lib/data/history.ts b/src/lib/data/history.ts
@@ -35,13 +35,16 @@ async function openHistory() {
 let nextItem: HistoryItem = null;
 let nextTimer: NodeJS.Timeout = null;
 
-export async function addHistory(item: {
-    collection: string;
-    book: string;
-    chapter: string;
-    verse?: string;
-    url?: string;
-}) {
+export async function addHistory(
+    item: {
+        collection: string;
+        book: string;
+        chapter: string;
+        verse?: string;
+        url?: string;
+    },
+    callback?: (addedItem: HistoryItem) => void
+) {
     let history = await openHistory();
     if (nextTimer) {
         clearTimeout(nextTimer);
@@ -52,7 +55,9 @@ export async function addHistory(item: {
     //console.log("setNextItem", nextItem);
     nextTimer = setTimeout(async () => {
         await history.add('history', nextItem);
-        //console.log("addHistory", nextItem);
+        if (callback) {
+            callback(nextItem);
+        }
         clearTimeout(nextTimer);
         nextTimer = null;
         nextItem = null;

diff --git a/src/lib/navigate/index.ts b/src/lib/navigate/index.ts
@@ -0,0 +1,48 @@
+import { refs } from '$lib/data/stores';
+import { addHistory, type HistoryItem } from '$lib/data/history';
+import { goto } from '$app/navigation';
+import { base } from '$app/paths';
+import { get } from 'svelte/store';
+
+function logHistoryItemAdded(itemAdded: HistoryItem) {
+    console.log('History item added:', itemAdded);
+}
+
+export function navigateToUrl(item: { collection: string; book: string; url: string }) {
+    addHistory({ ...item, chapter: '' }, logHistoryItemAdded);
+    goto(item.url);
+}
+
+export async function navigateToText(item: {
+    docSet?: string;
+    collection?: string;
+    book: string;
+    chapter: string;
+    verse?: string;
+}) {
+    await refs.set({
+        docSet: item.docSet,
+        book: item.book,
+        chapter: item.chapter,
+        verse: item.verse
+    });
+    addHistory(
+        { collection: item.collection, book: item.book, chapter: item.chapter, verse: item.verse },
+        logHistoryItemAdded
+    );
+    goto(`${base}/`);
+}
+
+export async function navigateToTextChapterInDirection(direction: number) {
+    await refs.skip(direction);
+    const nowRef: any = get(refs);
+    console.log('navigateToTextInDirection: next=', nowRef);
+    addHistory(
+        {
+            collection: nowRef.collection,
+            book: nowRef.book,
+            chapter: nowRef.chapter
+        },
+        logHistoryItemAdded
+    );
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -30,10 +30,8 @@
         MODAL_TEXT_APPERANCE,
         MODAL_COLLECTION,
         NAVBAR_HEIGHT,
-        defaultSettings,
         userSettingsOrDefault
     } from '$lib/data/stores';
-    import { addHistory } from '$lib/data/history';
     import { updateAudioPlayer, seekToVerse } from '$lib/data/audio';
     import {
         AudioIcon,
@@ -56,6 +54,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { onDestroy, onMount, afterUpdate } from 'svelte';
+    import { navigateToTextChapterInDirection } from '$lib/navigate';
 
     let savedScrollPosition = 0;
     function saveScrollPosition() {
@@ -73,32 +72,14 @@
     });
     async function doSwipe(event) {
         console.log('SWIPE', event.detail.direction);
-        const prev = $refs;
-        await refs.skip(event.detail.direction === 'right' ? -1 : 1);
-        if (prev !== $refs) {
-            addHistory({
-                collection: $refs.collection,
-                book: $refs.book,
-                chapter: $refs.chapter
-            });
-        }
+        await navigateToTextChapterInDirection(event.detail.direction === 'right' ? -1 : 1);
     }
 
     async function prevChapter() {
-        await refs.skip(-1);
-        addHistory({
-            collection: $refs.collection,
-            book: $refs.book,
-            chapter: $refs.chapter
-        });
+        await navigateToTextChapterInDirection(-1);
     }
     async function nextChapter() {
-        await refs.skip(1);
-        addHistory({
-            collection: $refs.collection,
-            book: $refs.book,
-            chapter: $refs.chapter
-        });
+        await navigateToTextChapterInDirection(1);
     }
 
     $: hasPrev = $refs.prev.chapter !== null;