Fix URL not updating on back/delete

NotWoods · Dec 28, 2018 · 7f30f30 · 7f30f30
1 parent 7519ab0
commit 7f30f30
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 14 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,5 +8,9 @@
     "typescript.tsdk": "node_modules/typescript/lib",
     "typescript.referencesCodeLens.enabled": true,
     // "editor.formatOnSave": true,
-    "cSpell.words": ["Quantizer", "readwrite"]
+    "cSpell.words": [
+        "Quantizer",
+        "firstload",
+        "readwrite"
+    ]
 }
diff --git a/src/db-worker/handle-message.ts b/src/db-worker/handle-message.ts
@@ -53,6 +53,7 @@ export async function handleMessage(
                         payload: {
                             entry: processEntry(entries[0]),
                             firstLoad: false,
+                            updateHash: true,
                         },
                     });
                     postMessage({
@@ -68,20 +69,18 @@ export async function handleMessage(
                 );
                 return;
             case 'OPEN':
+                let entry: PaletteEntry | null = null;
                 if (!Number.isNaN(action.payload.timestamp)) {
-                    const entry = await loadItemFromDB(
-                        action.payload.timestamp,
-                    );
-                    if (entry != null) {
-                        postMessage({
-                            type: 'DISPLAY',
-                            payload: {
-                                entry,
-                                firstLoad: action.payload.firstLoad,
-                            },
-                        });
-                    }
+                    entry = await loadItemFromDB(action.payload.timestamp);
                 }
+                postMessage({
+                    type: 'DISPLAY',
+                    payload: {
+                        entry,
+                        firstLoad: action.payload.firstLoad,
+                        updateHash: false,
+                    },
+                });
                 return;
             case 'DELETE':
                 if (!Number.isNaN(action.payload.timestamp)) {
@@ -97,6 +96,7 @@ export async function handleMessage(
                             payload: {
                                 entry: otherEntry,
                                 firstLoad: false,
+                                updateHash: true,
                             },
                         });
                     }

diff --git a/src/page/__tests__/handle-messages.spec.ts b/src/page/__tests__/handle-messages.spec.ts
@@ -72,6 +72,7 @@ describe('handleMessage', () => {
                     },
                 },
                 firstLoad: false,
+                updateHash: false,
             },
         });
         expect(displayMainPalette).toBeCalledWith({
@@ -87,6 +88,7 @@ describe('handleMessage', () => {
                 },
             },
             firstLoad: false,
+            updateHash: false,
         });
     });
 });
diff --git a/src/page/handle-message.ts b/src/page/handle-message.ts
@@ -17,6 +17,7 @@ interface DisplayAction {
     payload: {
         entry: PaletteEntry | null;
         firstLoad: boolean;
+        updateHash: boolean;
     };
 }
 
@@ -40,6 +41,7 @@ export function handleMessage(action: UiAction) {
             displayMainPalette({
                 data: action.payload.entry,
                 firstLoad: action.payload.firstLoad,
+                updateHash: action.payload.updateHash,
             });
             return;
         case 'ERROR':

diff --git a/src/page/main-palette.ts b/src/page/main-palette.ts
@@ -4,8 +4,19 @@ import { renderImage } from './render-image';
 import { renderPalette } from './render-palette';
 
 interface DisplayMainPaletteProps {
+    /** Data to display on the main palette */
     data: PaletteEntry | null;
+    /**
+     * True if this image was loaded when the document loaded.
+     * Changes back button behavior so that it doesn't navigate away
+     * from the page accidentally.
+     */
     firstLoad: boolean;
+    /**
+     * True if the page URL should be updated with this image's ID.
+     * Unnecessary if a link was clicked to open this image.
+     */
+    updateHash: boolean;
 }
 
 const MAIN_PALETTE_ELEMENT = document.getElementById('palette')!;
@@ -56,7 +67,12 @@ export function displayMainPalette(props: DisplayMainPaletteProps) {
         listener = render;
 
         MAIN_PALETTE_ELEMENT.classList.add('is-open'); // Open on mobile
-        document.title = `${props.data.name} | ${TITLE}`;
+        const title = `${props.data.name} | ${TITLE}`;
+        document.title = title;
+
+        if (props.updateHash) {
+            history.replaceState(true, title, `#${props.data.timestamp}`);
+        }
     } else {
         renderPalette(
             {