diff --git a/ui/src/pages/layers/Layers.tsx b/ui/src/pages/layers/Layers.tsx index 7ae6bf92..ea60fcee 100644 --- a/ui/src/pages/layers/Layers.tsx +++ b/ui/src/pages/layers/Layers.tsx @@ -1,4 +1,5 @@ -import React, { useState, useContext } from "react"; +import React, { useState, useContext, useCallback, useMemo } from "react"; +import { useSearchParams } from "react-router-dom"; import { useQuery } from "@tanstack/react-query"; import { fetchLayers } from "@/clients/layers/client"; @@ -25,11 +26,42 @@ import BarsIcon from "@/assets/icons/BarsIcon"; const Layers: React.FC = () => { const { theme } = useContext(ThemeContext); - const [search, setSearch] = useState(""); const [view, setView] = useState<"grid" | "table">("grid"); - const [stateFilter, setStateFilter] = useState([]); - const [repositoryFilter, setRepositoryFilter] = useState([]); - const [hidePRFilter, setHidePRFilter] = useState(true); + const [searchParams, setSerchParams] = useSearchParams(); + + const search = useMemo(() => searchParams.get("search") || "", [searchParams]); + + const setSearch = useCallback((search: string) => { + searchParams.set("search", search); + setSerchParams(searchParams); + }, [searchParams, setSerchParams]); + + const hidePRFilter = useMemo(() => searchParams.get("hidepr") !== "false", [searchParams]); + + const setHidePRFilter = useCallback((hidePRFilter: boolean) => { + searchParams.set("hidepr", hidePRFilter.toString()); + setSerchParams(searchParams); + }, [searchParams, setSerchParams]); + + const stateFilter = useMemo(() => { + const param = searchParams.get("state"); + return (param ? param.split(",") : []) as LayerState[]; + }, [searchParams]); + + const setStateFilter = useCallback((stateFilter: LayerState[]) => { + searchParams.set("state", stateFilter.join(",")); + setSerchParams(searchParams); + }, [searchParams, setSerchParams]); + + const repositoryFilter = useMemo(() => { + const param = searchParams.get("repositories"); + return param ? param.split(",") : []; + }, [searchParams]); + + const setRepositoryFilter = useCallback((repositoryFilter: string[]) => { + searchParams.set("repositories", repositoryFilter.join(",")); + setSerchParams(searchParams); + }, [searchParams, setSerchParams]); const layersQuery = useQuery({ queryKey: reactQueryKeys.layers,