Merge pull request rescript-lang#139 from fhammerschmidt/packages-search-query

Package index: Add search query parameter.

Author: ryyppy

bindings/Next.res

@@ -102,10 +102,18 @@ module Router = {
     query: Js.Dict.t<string>,
   }
 
+  type pathObj = {
+    pathname: string,
+    query: Js.Dict.t<string>,
+  }
+
   @bs.send external push: (router, string) => unit = "push"
+  @bs.send external pushObj: (router, pathObj) => unit = "push"
 
   @bs.module("next/router") external useRouter: unit => router = "useRouter"
+
   @bs.send external replace: (router, string) => unit = "replace"
+  @bs.send external replaceObj: (router, pathObj) => unit = "replace"
 }
 
 module Head = {

re_pages/Packages.js

@@ -457,7 +457,6 @@ let default = (props: props) => {
       | value => Filtered(value)
       }
     })
-    ()
   }
 
   let searchValue = switch state {
@@ -516,6 +515,40 @@ let default = (props: props) => {
     </Category>
   }
 
+  let router = Next.Router.useRouter()
+
+  // On first render, the router query is undefined so we set a flag.
+  let firstRenderDone = React.useRef(false)
+
+  React.useEffect0(() => {
+    firstRenderDone.current = true
+
+    None
+  })
+
+  // On second render, this hook runs one more time to actually trigger the search.
+  React.useEffect1(() => {
+    router.query->Js.Dict.get("search")->Belt.Option.forEach(onValueChange)
+
+    None
+  }, [firstRenderDone.current])
+
+  let updateQuery = value =>
+    router->Next.Router.replaceObj({
+      pathname: router.pathname,
+      query: value === "" ? Js.Dict.empty() : Js.Dict.fromArray([("search", value)]),
+    })
+
+  // When the search term changes, update the router query accordingly.
+  React.useEffect1(() => {
+    switch state {
+    | All => updateQuery("")
+    | Filtered(value) => updateQuery(value)
+    }
+
+    None
+  }, [state])
+
   let overlayState = React.useState(() => false)
   <>
     <Meta