diff --git a/package.json b/package.json index b6ff2a0..da2ef9c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "knowledge", - "version": "0.1.7", + "version": "0.1.8", "license": "MIT", "dependencies": { "@emotion/react": "^11.7.1", diff --git a/src/components/pages/service/BlocFilter.js b/src/components/pages/service/BlocFilter.js index 584f54e..5c3883a 100644 --- a/src/components/pages/service/BlocFilter.js +++ b/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 ( diff --git a/src/utils/hooks/queryParam.js b/src/utils/hooks/queryParam.js index e0bb5ba..8bc12a0 100644 --- a/src/utils/hooks/queryParam.js +++ b/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 }; };