fix bug in pagination, clean up the approach a bit more

serve.py

@@ -294,8 +294,6 @@ def main():
     context['gvars']['search_query'] = opt_q
     context['gvars']['svm_c'] = str(C)
     context['gvars']['page_number'] = str(page_number)
-    context['gvars']['prev_page_number'] = str(page_number - 1)
-    context['gvars']['next_page_number'] = str(page_number + 1)
     return render_template('index.html', **context)
 
 @app.route('/inspect', methods=['GET'])

static/style.css

@@ -291,4 +291,7 @@ body {
 #link-prev-page, #link-next-page {
     margin: 0 5px 0 5px;
     font-size: 16px;
+    cursor: pointer;
+    color: #009;
+    text-decoration: underline;
 }

static/word_list.js

@@ -26,5 +26,7 @@ const WordList = props => {
     )
 }
 
-ReactDOM.render(<WordList words={words} words_desc={words_desc} />,
+var elt = document.getElementById('wordwrap');
-                document.getElementById('wordwrap'));
+if(elt) {
+    ReactDOM.render(<WordList words={words} words_desc={words_desc} />, elt);
+}

templates/index.html

@@ -7,47 +7,19 @@ var tags = {{ tags | tojson }};
 var words = {{ words | tojson }};
 var words_desc = {{ words_desc | tojson }};
 var gvars = {{ gvars | tojson }};
+
+/*
+JS code here handles pagination. I really don't super love this approach,
+if anyone can think of a cleaner / shorter way please let me know.
+*/
+var move_page = function(int_offset) {
+    var queryParams = new URLSearchParams(window.location.search);
+    queryParams.set("page_number", Math.max(1, parseInt(gvars.page_number) + int_offset));
+    window.location.href = '/?' + queryParams.toString();
+}
 </script>
 {% endblock %}
 
-<script>
-/*
-The JS code in here handles pagination. I really quite dislike it,
-if anyone can think of a cleaner and shorter way please let me know.
-*/
-
-// mod from https://stackoverflow.com/questions/13063838/add-change-parameter-of-url-and-redirect-to-the-new-url/13064060
-function setGetParameter(paramName, paramValue)
-{
-    var url = window.location.href;
-    var hash = location.hash;
-    url = url.replace(hash, ''); // ?
-    if (url.indexOf(paramName + "=") >= 0) {
-        var prefix = url.substring(0, url.indexOf(paramName + "="));
-        var suffix = url.substring(url.indexOf(paramName + "="));
-        suffix = suffix.substring(suffix.indexOf("=") + 1);
-        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
-        url = prefix + paramName + "=" + paramValue + suffix;
-    } else {
-        var pre = url.indexOf("?") < 0 ? "?" : "&";
-        url = url + pre + paramName + "=" + paramValue;
-    }
-    window.location.href = url + hash;
-}
-
-// handle pagination by overriding the a href= links
-window.onload = function() {
-    document.getElementById("link-prev-page").onclick = function() {
-        setGetParameter("page", gvars.page - 1);
-        return true;
-    }
-    document.getElementById("link-next-page").onclick = function() {
-        setGetParameter("page", gvars.page + 1);
-        return true;
-    }
-}
-</script>
-
 {% block content %}
 
 {% if not user %}
@@ -130,9 +102,9 @@ window.onload = function() {
 
 <!-- links to previous and next pages -->
 <div id="pagination">
-    <a href="/?page_number={{ gvars.prev_page_number }}" id="link-prev-page">prev</a>
+    <span id="link-prev-page" onclick='move_page(-1);'>prev</span>
     <span>current page: {{ gvars.page_number }} </span>
-    <a href="/?page_number={{ gvars.next_page_number }}" id="link-next-page">next</a>
+    <span id="link-next-page" onclick='move_page(1);'>next</span>
 </div>
 {% endblock %}