Wire sort param into grid fetch and hydrate before first load

be95b4a9bb465a4212f945662860191f937e19a0 · 2026-05-19 08:24:25 -0700 · SteveStudio2

state.sort was never sent to /api/products and the sort-select wire-up
ran after the initial loadGridPage(). Added sort to URLSearchParams,
added sort to the state object, and converted the sort IIFE into
initSort() called before the first grid load.

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

Files touched

M public/index.html

Diff

commit be95b4a9bb465a4212f945662860191f937e19a0
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Tue May 19 08:24:25 2026 -0700

    Wire sort param into grid fetch and hydrate before first load
    
    state.sort was never sent to /api/products and the sort-select wire-up
    ran after the initial loadGridPage(). Added sort to URLSearchParams,
    added sort to the state object, and converted the sort IIFE into
    initSort() called before the first grid load.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 976b3b4..3f154cf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -430,7 +430,7 @@ textarea:focus-visible,
 </script>
 
 <script>
-const state = { q:'', facet:'all', page:1, pages:1, total:0, loading:false, exhausted:false };
+const state = { q:'', facet:'all', sort:'newest', page:1, pages:1, total:0, loading:false, exhausted:false };
 const LABELS = {"all":"All"};
 
 function escAttr(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c])); }
@@ -543,6 +543,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);
@@ -601,6 +602,7 @@ setTheme(document.documentElement.dataset.theme || 'light');
 tb.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
 
 loadFacets();
+initSort();
 loadGridPage();
 </script>
 <!-- ============================================================
@@ -901,7 +903,9 @@ loadGridPage();
 
 
 // DW STANDARD sort-select wire-up (added by fleet patcher)
-(function(){
+// initSort() is invoked BEFORE the first loadGridPage() so the saved sort
+// is applied to state.sort before the initial /api/products fetch.
+function initSort(){
   const sortSel = document.getElementById('sortSelect');
   if (!sortSel) return;
   const KEY = location.hostname.replace(/\./g, '_') + '_sort';
@@ -915,7 +919,7 @@ loadGridPage();
     if (typeof resetGrid === 'function') resetGrid();
     else location.reload();
   });
-})();
+}
 
 // graphics-loop pass 11: hydrate Ideas rails from /api/products
 (async function hydrateIdeas() {

← 51ee858 hero-4grid: relocate json from data/ to public/ for Express · back to 1940swallpaper · Fix facets total, untrack snapshot files, add .bak 404-guard aaffdb5 →