Fix back/forward in the browser (__path was being read properly)

script.js

@@ -11,6 +11,10 @@ function prepend(elem, children) {
 
 function _log() {
     for (var arg of arguments) {
+        if (arg == null) {
+            continue;
+        }
+
         var pre = document.createElement('pre');
         pre.appendChild(text(arg.toString()));
         document.body.appendChild(pre);
@@ -32,8 +36,6 @@ var console = {
 };
 */
 
-var CurrentScore = null;
-
 var global_elements;
 var GlobalElemSelectors =
     [ 'style'
@@ -149,22 +151,16 @@ function createPagination(start_page_num, url, name, page_size, renderContent) {
 
     // Helper function to update the URL with the new page number
     function updatePageNumberInURL(pageNum) {
-        let params;
+        const url = new URL(window.location.href);
-
+        const query_params = url.searchParams;
-        if (window.location.search == "") {
+        console.log("updatePageNumberInURL", query_params.constructor.name);
-            params = {}
+        query_params.set(replaceAll(name, ' ', '_'), pageNum);
-        } else {
+        console.log("Hello World 1");
-            console.log("calling parseQueryParams. window.location.search:", window.location.search);
+        changeUrl("/", query_params, true);
-            params = parseQueryParams(window.location.search.substring(1));
-        }
-
-        console.log("updatePageNumberInURL", params);
-        params[name.replaceAll(' ', '_')] = pageNum;
-        changeUrl("/", params, true);
     }
 
     function createPaginationControls(page_num, dataset_size) {
-        const container = div();
+        const container = document.createElement('nav');
         container.classList.add('pagination');
 
         // Calculate the total number of pages
@@ -264,9 +260,6 @@ function createPagination(start_page_num, url, name, page_size, renderContent) {
         pageInfoText.innerText = `Loading page ${page_num} of ${name}`;
         cancelGlobalEvts();
 
-        if (page_num > 0) {
-        }
-
         return get(url, cancel, headers)
             .then(function(response) {
                 // Retrieve the range and total number of results from the HTTP headers
@@ -276,7 +269,7 @@ function createPagination(start_page_num, url, name, page_size, renderContent) {
                 const controlsA = createPaginationControls(page_num, total_results);
                 const controlsB = createPaginationControls(page_num, total_results);
                 renderContent(json, controlsA, controlsB);
-                pageInfoText.innerText = `${name} ${page_num + 1}/${Math.ceil(total_results / page_size)}`;
+                pageInfoText.innerText = `${name} page ${page_num + 1}/${Math.ceil(total_results / page_size)}`;
             })
             .catch(caught.bind(this, `Failed to load ${url} page ${page_num}. Reason:`));
     }
@@ -559,7 +552,7 @@ function renderNav() {
     var a_elem = _mkelem('a', text('All Known Spam Posts'));
     a_elem.addEventListener('click', function(e) {
         e.preventDefault();
-        changeUrl('/', null, true);
+        changeUrl('/', new URLSearchParams(), true);
     });
     a_elem.setAttribute('href', '#');
     nav.appendChild(a_elem);
@@ -711,18 +704,23 @@ function renderOverviewPost(post) {
     return postContainer;
 }
 
+function replaceAll(input, find, replace) {
+    var regex = new RegExp(find, "g");
+    return input.replace(regex, replace);
+}
+
 function loadKnownSpamPosts(params) {
-    if (params == null) {
+    console.log("loadKnownSpamPosts");
-        params = {};
-    }
 
     const pageName = "known spam posts";
+
+    console.log("HELLO WORLD 1");
+
     var url = GlobalVars.settings.postgrest_url + '/known_spam_post?select=*,known_spam_post_attachment(*,phash::text)'
 
-    const pageNum = Number(params[pageName.replaceAll(' ', '_')] || 0);
+    const pageNum = Number(params.get(replaceAll(pageName, ' ', '_')) || 0);
 
     function renderContent(json, controlsA, controlsB) {
-        pageInfoText.innerText = 'Have these known spam posts:';
         var mainElem = document.querySelector('main');
         mainElem.innerHTML = '';
         mainElem.appendChild(controlsA);
@@ -731,7 +729,7 @@ function loadKnownSpamPosts(params) {
             var postElem = renderOverviewPost(post);
 
             postElem.addEventListener('click', function() {
-                changeUrl('/spam_post/' + post.text_post_id, null, true);
+                changeUrl('/spam_post/' + post.text_post_id, new URLSearchParams(), true);
             });
 
             mainElem.appendChild(postElem);
@@ -744,6 +742,8 @@ function loadKnownSpamPosts(params) {
 }
 
 function changeUrl(path, search_query, push_state) {
+    console.log('changeURL');
+
     var event = new CustomEvent(
         'urlchange',
         {
@@ -824,12 +824,14 @@ function showSpamPost(path_data, _) {
 }
 
 function onUrlChange(e) {
+    console.log('Hello World 2');
     var path = e.detail.path.split('/').filter(function(s){ return s.length; });
     console.log(e, e.detail, path);
 
     if (e.detail.push_state) {
-        var params = Object.assign({ __path: e.detail.path }, e.detail.query);
+        var search_query = e.detail.query;
-        var search_query = new URLSearchParams(params);
+        search_query.set('__path', e.detail.path);
+        console.log("onUrlChange push_state search_query:", search_query, typeof search_query);
 
         window.history.pushState(null, "",
             window.location.origin + window.location.pathname + '?' + search_query.toString());
@@ -849,6 +851,14 @@ function aClickNav(e) {
 function bindEventHandlers() {
     window.addEventListener('urlchange', onUrlChange);
     window.addEventListener('popstate', onRealUrlChange);
+
+    function on_pushstate(e) {
+      for (var i=0; i < 10; i++) {
+        console.log("pushstate", e);
+      }
+    }
+
+    window.addEventListener('pushstate', on_pushstate);
 }
 
 function gatherElements() {
@@ -862,27 +872,11 @@ function gatherElements() {
     }
 }
 
-function parseQueryParams(querystring) {
-    console.log('parseQueryParams', querystring, querystring.split('&'));
-    return querystring.split('&')
-        .map(function(part) {
-            console.log(part);
-            return part.split('=').map(decodeURIComponent);
-        })
-        .reduce(function(acc, pair) { return { [pair[0]]: pair[1] } }, {});
-}
-
 function onRealUrlChange() {
-    //var path = window.location.pathname;
+    const url = new URL(window.location.href);
-    var path;
+    const query_params = url.searchParams;
-    var query_params = parseQueryParams(window.location.search.substring(1));
 
-    if (query_params.__path != null) {
+    const path = query_params.get('__path') || '/';
-        path = query_params.__path;
-        console.log("NEW PATH", path);
-    } else {
-        path = '/';
-    }
 
     changeUrl(path, query_params);
 }

style.css

@@ -8,7 +8,7 @@ header {
 
 .post {
   background-color: white;
-  margin: 1em 1em;
+  margin: 1em 0;
   box-shadow: .4em .4em .4em grey;
   border: 1px solid grey;
   padding: 1em;
@@ -23,17 +23,17 @@ header {
     margin-right: 1em;
 }
 
+.post--image_container img {
+  max-width: 100%;
+}
+
 .post--body_container,
 .attachment-reason,
 .attachment {
   display: flow-root;
 }
 
-.pagination a {
+nav a {
-    margin: 1em;
+    margin: 1rem;
-    font-size: 2em;
+    font-size: 1.5em;
-}
-
-main nav {
-    margin: 1em;
 }