queryParam ok

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knowledge",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "license": "MIT",
   "dependencies": {
     "@emotion/react": "^11.7.1",

src/components/pages/service/BlocFilter.js

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useQueryParam } from "utils/hooks";
-// import { useSearchParams } from "react-router-dom";
 import Card from "@mui/material/Card";
 import { makeStyles } from "tss-react/mui";
 import TreeView from "@mui/lab/TreeView";
@@ -74,38 +73,33 @@ const renderTree = (nodes, nodeKey) => (
 const BlocFilter = () => {
   const { classes } = useStyles();
 
-  const [, setFilter] = useQueryParam("filter");
-  const [expanded, setExpanded] = useQueryParam("expanded");
-  const [selected, setSelected] = useQueryParam("selected");
+  const { get, post } = useQueryParam();
+  const expanded = get("expanded");
+  const selected = get("selected");
+
   const [value, setValue] = useState([]); // TODO Init value (when filter isnt empy at start)
 
   const handleAutocomplete = (_, newValue) => {
     setValue(newValue);
-    setFilter(newValue.map((e) => e.title));
+    post("filter")(newValue.map((e) => e.title));
   };
 
   const handleToggle = (_, nodeIds) => {
-    setExpanded(nodeIds);
+    console.log("handleToggle");
+    post("expanded")(nodeIds);
   };
 
   const handleSelect = (_, nodeIds) => {
-    setSelected(nodeIds);
+    console.log("handleSelect");
+    post("selected")(nodeIds);
   };
 
-  useEffect(() => {
-    console.log(`expanded : ${expanded}`);
-  }, [expanded]);
-
-  useEffect(() => {
-    console.log(`selected : ${selected}`);
-  }, [selected]);
-
   const handleCollapseClick = () => {
-    setExpanded([]);
+    post("expanded")([]);
   };
 
   const handleUnselectClick = () => {
-    setSelected([]);
+    post("selected")([]);
   };
 
   return (

src/utils/hooks/queryParam.js

@@ -1,21 +1,26 @@
-import { useMemo, useCallback } from "react";
-import * as JSURL from "jsurl";
+// import * as JSURL from "jsurl";
+import { useCallback, useState, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 
-export const useQueryParam = (key) => {
+export const useQueryParam = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const paramValue = searchParams.get(key);
+  // We assume that searchParam is fresh only at init
+  const [freshSearchParams, setFreshSearchParams] = useState(() => {
+    return Object.entries([...searchParams]).reduce(
+      (acc, [k, v]) => ({ ...acc, [k]: v }),
+      {}
+    );
+  });
 
-  const value = useMemo(() => JSURL.parse(paramValue) || [], [paramValue]);
+  const get = (key) => freshSearchParams[key] || [];
 
-  const setValue = useCallback(
-    (newValue) => {
-      const newSearchParams = new URLSearchParams(searchParams);
-      newSearchParams.set(key, JSURL.stringify(newValue));
-      setSearchParams(newSearchParams);
+  const post = useCallback(
+    (key) => (value) => {
+      setSearchParams({ ...freshSearchParams, [key]: value });
+      setFreshSearchParams((t) => ({ ...t, [key]: value }));
     },
-    [key, searchParams, setSearchParams]
+    [freshSearchParams, setSearchParams]
   );
 
-  return [value, setValue];
+  return { get, post };
 };