encode search sort style in url

src/app.nim

@@ -2,7 +2,7 @@ import std/strutils
 import karax/[karax, karaxdsl, vdom]
 import components/[header, button, footer]
 import pages/pages
-import context, utils
+import context, lib
 
 proc render(data: RouterData): VNode =
   when defined(debug): console.log ctx

src/components/package.nim

@@ -4,7 +4,7 @@ import karax/[kbase, karax, karaxdsl, vdom, jstrutils, ]
 
 import ../[packages, style, context]
 import ../components/tag
-import ../utils
+import ../lib
 
 randomize()
 

src/components/search.nim

@@ -3,8 +3,7 @@ import std/[strutils, uri]
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils]
 
 import ../[packages, style, context]
-# import ../components/package
+import ../lib
-import ../utils
 
 type
   Query* = object
@@ -55,15 +54,21 @@ proc searchPackages*(q: Query): seq[NimPackage] =
       if q ~= pkg: pkg
 
 proc getSearchFromUri*(): kstring =
+  result = ""
   var url = currentUri()
-  if url.query == "": return ""
+  if url.query == "": return
   for k, v in decodeQuery(url.query):
     if k == "query":
       return v.kstring
 
 proc getSearchInput*() =
   let searchInput = getVNodeById("search").getInputText
-  setSearchUrl(searchInput)()
+  let sortNode = getVNodeById("sort-select")
+  let sortMethod = SortMethod(
+      if sortNode != nil: parseInt(sortNode.getInputText)
+      else: 0
+    )
+  setSearchUrl(searchInput, sortMethod)()
 
 proc searchBar*(value = jss""): Vnode =
   buildHtml(tdiv(class = "flex flex-row my-2 grow")):

src/components/tag.nim

@@ -1,7 +1,7 @@
 import std/[uri, tables, random]
 import karax/[kbase, karaxdsl, vdom, jstrutils]
 
-import ../[packages, style, context, utils]
+import ../[packages, style, context, lib]
 
 randomize()
 

src/context.nim

@@ -2,7 +2,7 @@ import std/[
   asyncjs, jsconsole, jsfetch, sequtils, sugar, tables
 ]
 import karax/[kbase, karax], jsony
-import packages, utils
+import packages, lib
 
 export tables
 

src/lib.nim

@@ -20,11 +20,21 @@ proc currentUri*(): Uri {.inline.} =
 func replace*(c: kstring, sub: string, by = " "): kstring =
   ($c).replace(sub, by).jss
 
-proc setSearchUrl*(searchQuery: kstring): proc() =
+type
+  SortMethod* = enum
+    smAlphabetical = "smAlphabetical", smCommitAge = "commit", smVersionAge = "version"
+
+proc setSearchUrl*(searchQuery: kstring, sortMethod = smAlphabetical): proc() =
   proc() =
-    var url = currentUri()
+    var 
+      url = currentUri()
+      params: seq[(string, string)]
+    if searchQuery != "":
+      params.add ("query", $searchQuery)
+    if sortMethod != smAlphabetical:
+      params.add ("sort", $sortMethod)
     url.anchor = "/search"
-    url = url ? {"query": $searchQuery}
+    url = url ? params
     window.history.pushState(js{}, "".jss, url.jss)
     let d = getVNodeById("search")
     let node = d.dom

src/packages.nim

@@ -5,7 +5,7 @@ import std/[
 import karax/[kbase]
 import jsony
 
-import ./utils
+import ./lib
 export algorithm, tables, times, asyncjs, sugar
 
 proc parseHook*(s: string, i: var int, v: var kstring) =

src/pages/metrics.nim

@@ -1,7 +1,7 @@
 import std/[algorithm, sequtils, tables, uri, strutils, times]
 import karax/[kbase, karaxdsl, vdom, jstrutils]
 
-import ../[context, packages, style, utils]
+import ../[context, packages, style, lib]
 
 type
   Metrics = object

src/pages/package.nim

@@ -3,7 +3,7 @@ import karax/[kbase, karax, karaxdsl, kdom, vdom, jstrutils, ]
 
 import ../[context, packages, style]
 import ../components/[tag, package]
-import ../utils
+import ../lib
 import notfound
 
 proc openLink(link: kstring): proc() =

src/pages/search.nim

@@ -1,14 +1,15 @@
-import std/[algorithm, strutils, sequtils, dom]
+import std/[algorithm, strutils, sequtils, dom, uri]
 
 import karax/[kbase, karax, karaxdsl, vdom, jstrutils, kdom]
 
 import ../[packages, context]
 import ../components/[package, search]
-import ../utils
+import ../lib
 
 type
-  SortMethod = enum
+  # SortMethod = enum
-    smAlphabetical, smCommitAge, smVersionAge
+    # smAlphabetical, smCommitAge, smVersionAge
+    #
   PageContext = object
     sortMethod: SortMethod = smAlphabetical
     filteredPackages: seq[NimPackage]
@@ -52,15 +53,15 @@ proc alphabeticalPackageList(pkgs: seq[NimPackage]): VNode =
       for pkg in packages:
         pkg.card
 
-proc selectSortMethod() =
-  let v = getVNodeById("sort-select").getInputText
-  pgCtx.sortMethod = SortMethod(parseInt(v))
-
 proc sortSelector(): VNode =
   buildHtml(tdiv(class = "flex items-center")):
     label(`for` = "sort-select"): text "sort:"
-    select(class = "bg-ctp-crust rounded p-3", name = "sort",
+    select(
-        `id` = "sort-select", onChange = selectSortMethod):
+      class = "bg-ctp-crust rounded p-3",
+      name = "sort",
+      `id` = "sort-select",
+      onChange = getSearchInput
+    ):
       for i, msg in ["alphabetical", "recent commit", "recent version"]:
         if i == ord(pgCtx.sortMethod):
           option(value = ($i).cstring, selected = ""): text msg
@@ -89,8 +90,22 @@ proc filteredPackagesDom(): VNode =
           for pkg in pgCtx.filteredPackages:
             pkg.card
 
+# TODO: combine with 'getSearchFromUri'
+proc getSortMethodFromUri*(): SortMethod =
+  result = smAlphabetical
+  var url = currentUri()
+  for k, v in decodeQuery(url.query):
+    if k == "sort":
+      case v
+      of "commit":
+        result = smCommitAge
+      of "version":
+        result = smVersionAge
+      else: discard
+
 proc update(pgCtx: var PageContext) =
   pgCtx.filteredPackages = nimpkgsList()
+  pgCtx.sortMethod = getSortMethodFromUri()
   pgCtx.search = getSearchFromUri()
   pgCtx.filteredPackages = searchPackages(parseQuery(pgCtx.search))