fix(grid): hydrate saved sort BEFORE first /api/products call

d3b1cfceddeb9e9cc1612dc11b9210ec9e7f039e · 2026-05-19 15:16:02 -0700 · Steve Abrams

Two bugs combined to make the saved sort effectively write-only:
1. loadGridPage() didn't pass state.sort to the server, so the API
   always defaulted to 'newest' regardless of the slider state.
2. The sort-select wire-up that reads localStorage and assigns
   state.sort runs AFTER loadGridPage(), so even if the API had read
   state.sort it would have seen the default 'newest'.

Fix: hydrate state.sort from localStorage in the early state-init block
(alongside view), and include state.sort in the /api/products query string.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M public/index.html

Diff

commit d3b1cfceddeb9e9cc1612dc11b9210ec9e7f039e
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 15:16:02 2026 -0700

    fix(grid): hydrate saved sort BEFORE first /api/products call
    
    Two bugs combined to make the saved sort effectively write-only:
    1. loadGridPage() didn't pass state.sort to the server, so the API
       always defaulted to 'newest' regardless of the slider state.
    2. The sort-select wire-up that reads localStorage and assigns
       state.sort runs AFTER loadGridPage(), so even if the API had read
       state.sort it would have seen the default 'newest'.
    
    Fix: hydrate state.sort from localStorage in the early state-init block
    (alongside view), and include state.sort in the /api/products query string.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 94d4c18..0636a45 100644
--- a/public/index.html
+++ b/public/index.html
@@ -609,12 +609,17 @@ const state = { q:'', facet:'all', sort:'newest', view:'grid', page:1, pages:1,
 // Touch device = no hover. Drives tap-to-reveal card behavior.
 const TOUCH = window.matchMedia('(hover: none)').matches;
 const HOSTKEY = location.hostname.replace(/\./g, '_');
-// DW STANDARD: hydrate saved view BEFORE the first grid load (sort hydrates in the sort-select wire-up below).
+// DW STANDARD: hydrate saved view AND sort BEFORE the first grid load.
+// The change listener for the sort <select> is still attached later in the
+// file; this block just ensures state.sort/state.view are right when
+// loadGridPage() fires for the first time.
 (function(){
   try {
     const savedView = localStorage.getItem(HOSTKEY + '_view');
     if (savedView === 'list' || savedView === 'grid') state.view = savedView;
     document.documentElement.dataset.view = state.view;
+    const savedSort = localStorage.getItem(HOSTKEY + '_sort');
+    if (savedSort) state.sort = savedSort;
   } catch(e){}
 })();
 const LABELS = {"all":"All"};
@@ -742,6 +747,7 @@ async function loadGridPage() {
   const params = new URLSearchParams({ page:state.page, limit:24 });
   if (state.q) params.set('q', state.q);
   if (state.facet !== 'all') params.set('aesthetic', state.facet);
+  if (state.sort && state.sort !== 'newest') params.set('sort', state.sort);
   let data;
   try {
     const r = await fetch('/api/products?' + params);

← daad56e chore(gitignore): cover *.bak.* and *.pre-* snapshot pattern · back to Retrowalls · sort: hydrate saved sort from localStorage before first grid a2f77f5 →