refactor: improve facet handling and state management in FacetsPanel …

…and Facet components

keep-ui/features/filter/facet-panel-server-side.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { FacetOptionsQueries, FacetOptionsQuery, FacetsConfig } from "./models";
+import {
+  FacetDto,
+  FacetOptionsQueries,
+  FacetOptionsQuery,
+  FacetsConfig,
+} from "./models";
 import { useFacetActions, useFacetOptions, useFacets } from "./hooks";
 import { InitialFacetsData } from "./api";
 import { FacetsPanel } from "./facets-panel";
@@ -94,62 +99,21 @@ export const FacetsPanelServerSide: React.FC<FacetsPanelProps> = ({
     revalidationToken
   );
 
-  useEffect(
-    function reloadOptions() {
-      if (
-        facetsData === initialFacetsData?.facets &&
-        initialFacetsData?.facetOptions
-      ) {
-        return;
-      }
-
-      const newFacetQueriesState = buildFacetsQueriesState();
-
-      if (newFacetQueriesState) {
-        // setFacetQueriesState(newFacetQueriesState);
-      }
-    },
-    // disabled because this effect uses currentFacetQueriesState that's also change in that effect
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [facetsData]
-  );
-
-  function buildFacetsQueriesState() {
-    let newFacetQueriesState: { [key: string]: string } | undefined = undefined;
-
-    facetsData?.forEach((facet) => {
-      if (!newFacetQueriesState) {
-        newFacetQueriesState = {};
-      }
-      if (facetQueriesState && facet.id in facetQueriesState) {
-        newFacetQueriesState[facet.id] = facetQueriesState[facet.id];
-      } else {
-        newFacetQueriesState[facet.id] = "";
-      }
-    });
-
-    if (newFacetQueriesState) {
-      return newFacetQueriesState;
-    }
-
-    return null;
-  }
-
   return (
     <>
       <FacetsPanel
         panelId={entityName}
         className={className || ""}
-        facets={facetsData?.slice(0, 1) as any}
+        facets={facetsData as FacetDto[]}
         facetOptions={facetOptions as any}
         areFacetOptionsLoading={!isSilentReloading && facetOptionsLoading}
         clearFiltersToken={clearFiltersToken}
         facetsConfig={facetsConfig}
         onCelChange={onCelChange}
         onAddFacet={() => setIsModalOpen(true)}
-        onLoadFacetOptions={(facetId) => {
-          setFacetQueriesState({ ...facetQueriesState, [facetId]: "" });
-        }}
+        onLoadFacetOptions={(facetId) =>
+          setFacetQueriesState({ ...facetQueriesState, [facetId]: "" })
+        }
         onDeleteFacet={(facetId) => facetActions.deleteFacet(facetId)}
         onReloadFacetOptions={(facetQueries) =>
           setFacetQueriesState({ ...facetQueries })

keep-ui/features/filter/facet.tsx

@@ -7,6 +7,7 @@ import Skeleton from "react-loading-skeleton";
 import { FacetValue } from "./facet-value";
 import { FacetConfig, FacetDto, FacetOptionDto, FacetState } from "./models";
 import { TrashIcon } from "@heroicons/react/24/outline";
+import { useExistingFacetStore } from "./store";
 
 export interface FacetProps {
   facet: FacetDto;
@@ -16,7 +17,6 @@ export interface FacetProps {
   optionsReloading: boolean;
   showIcon?: boolean;
   facetConfig?: FacetConfig;
-  onCelChange?: (cel: string) => void;
   onLoadOptions?: () => void;
   onDelete?: () => void;
 }
@@ -27,10 +27,8 @@ export const Facet: React.FC<FacetProps> = ({
   showIcon = true,
   optionsLoading,
   optionsReloading,
-  onCelChange,
   onLoadOptions,
   onDelete,
-  isOpenByDefault,
   facetConfig,
 }) => {
   function getInitialFacetState(): Set<string> {
@@ -58,9 +56,13 @@ export const Facet: React.FC<FacetProps> = ({
   );
   const facetStateRef = useRef(facetState);
   facetStateRef.current = facetState;
-  const onCelChangeRef = useRef(onCelChange);
-  onCelChangeRef.current = onCelChange;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const facetRef = useRef(facet);
+  facetRef.current = facet;
   const [isInitialized, setIsInitialized] = useState(false);
+  const clearFiltersToken = useExistingFacetStore((s) => s.clearFiltersToken);
+  const setFacetCelState = useExistingFacetStore((s) => s.setFacetCelState);
 
   function valueToString(value: any): string {
     if (typeof value === "string") {
@@ -70,6 +72,7 @@ export const Facet: React.FC<FacetProps> = ({
     } else if (value == null) {
       return "null";
     }
+
     return `${value}`;
   }
 
@@ -82,21 +85,46 @@ export const Facet: React.FC<FacetProps> = ({
       return;
     }
 
-    setFacetState(new Set(options.map((opt) => opt.value)));
+    setFacetState(new Set(options.map((opt) => valueToString(opt.value))));
     setIsInitialized(true);
   }, [isInitialized, setIsInitialized, options, facetConfig]);
 
   const currentCel = useMemo(() => {
     const values = Array.from(facetState);
 
+    if (values.length === optionsRef.current?.length) {
+      return "";
+    }
+
     if (!values.length) {
       return "";
     }
 
     return `${facet.property_path} in [${values.join(", ")}]`;
   }, [facet.property_path, facetState]);
 
-  useEffect(() => onCelChangeRef.current?.(currentCel), [currentCel]);
+  useEffect(
+    () => setFacetCelState(facet.id, currentCel),
+    [setFacetCelState, facet.id, currentCel]
+  );
+
+  useEffect(() => {
+    if (clearFiltersToken && facetRef.current && optionsRef.current) {
+      const facetState = new Set<string>();
+
+      if (facetConfig?.checkedByDefaultOptionValues) {
+        facetConfig.checkedByDefaultOptionValues.forEach((optionValue) => {
+          facetState.add(valueToString(optionValue));
+        });
+      } else {
+        optionsRef.current.forEach((option) => {
+          facetState.add(valueToString(option.value));
+        });
+      }
+
+      setFacetState(facetState);
+    }
+  }, [clearFiltersToken, setFacetState]);
 
   useEffect(() => {
     setIsLoaded(!!options); // Sync prop change with state
@@ -115,12 +143,13 @@ export const Facet: React.FC<FacetProps> = ({
   );
 
   const isOptionSelected = (optionValue: string) => {
-    return facetState.has(valueToString(optionValue));
+    const strValue = valueToString(optionValue);
+    return facetState.has(strValue);
   };
 
   function toggleFacetOption(value: any) {
     const strValue = valueToString(value);
-    if (isOptionSelected(strValue)) {
+    if (isOptionSelected(value)) {
       facetState.delete(strValue);
     } else {
       facetState.add(strValue);

keep-ui/features/filter/facets-panel.tsx

@@ -5,12 +5,13 @@ import {
   FacetOptionDto,
   FacetOptionsQueries,
   FacetsConfig,
-  FacetState,
 } from "./models";
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import "react-loading-skeleton/dist/skeleton.css";
 import clsx from "clsx";
 import { useDebouncedValue } from "@/utils/hooks/useDebouncedValue";
+import { FacetStoreProvider, useNewFacetStore } from "./store";
+import { useStore } from "zustand";
 
 export interface FacetsPanelProps {
   panelId: string;
@@ -54,20 +55,15 @@ export const FacetsPanel: React.FC<FacetsPanelProps> = ({
   onLoadFacetOptions = undefined,
   onReloadFacetOptions = undefined,
 }) => {
-  const defaultStateHandledForFacetIds = useMemo(() => new Set<string>(), []);
-  const [facetsState, setFacetsState] = useState<FacetState>({});
-  const [facetCelState, setFacetCelState] = useState<Record<
-    string,
-    string
-  > | null>(null);
-  const [debouncedFacetCelState] = useDebouncedValue(facetCelState, 100);
-
   const [facetOptionQueries, setFacetOptionQueries] =
     useState<FacetOptionsQueries | null>(null);
   const facetOptionsRef = useRef<any>(facetOptions);
   facetOptionsRef.current = facetOptions;
   const onCelChangeRef = useRef(onCelChange);
   onCelChangeRef.current = onCelChange;
+  const store = useNewFacetStore();
+  const state = useStore(store);
+  const [debouncedFacetCelState] = useDebouncedValue(state.facetCelState, 100);
 
   const facetsConfigIdBased = useMemo(() => {
     const result: FacetsConfig = {};
@@ -99,29 +95,6 @@ export const FacetsPanel: React.FC<FacetsPanelProps> = ({
 
     return result;
   }, [facetsConfig, facets]);
-  const facetsConfigIdBasedRef = useRef(facetsConfigIdBased);
-  facetsConfigIdBasedRef.current = facetsConfigIdBased;
-
-  function getFacetState(facetId: string): Set<string> {
-    if (
-      !defaultStateHandledForFacetIds.has(facetId) &&
-      facetsConfigIdBased[facetId]?.checkedByDefaultOptionValues
-    ) {
-      const facetState = new Set<string>(...(facetsState[facetId] || []));
-      const facet = facets.find((f) => f.id === facetId);
-
-      if (facet) {
-        facetsConfigIdBased[facetId]?.checkedByDefaultOptionValues.forEach(
-          (optionValue) => facetState.add(optionValue)
-        );
-        defaultStateHandledForFacetIds.add(facetId);
-      }
-
-      facetsState[facetId] = facetState;
-    }
-
-    return facetsState[facetId] || new Set<string>();
-  }
 
   useEffect(() => {
     if (facetOptionQueries) {
@@ -152,41 +125,24 @@ export const FacetsPanel: React.FC<FacetsPanelProps> = ({
     });
 
     setFacetOptionQueries(facetOptionQueries);
+
     const filterCel = Object.values(debouncedFacetCelState || {})
       .filter(Boolean)
       .map((cel) => `(${cel})`)
       .join(" && ");
     onCelChangeRef.current && onCelChangeRef.current(filterCel);
   }, [debouncedFacetCelState, setFacetOptionQueries]);
 
-  function clearFilters(): void {
-    Object.keys(facetsState).forEach((facetId) => facetsState[facetId].clear());
-    defaultStateHandledForFacetIds.clear();
-
-    const newFacetsState: FacetState = {};
-
-    facets.forEach((facet) => {
-      newFacetsState[facet.id] = getFacetState(facet.id);
-    });
-    setFacetsState(newFacetsState);
-  }
-
   useEffect(
     function clearFiltersWhenTokenChange(): void {
       if (clearFiltersToken) {
-        clearFilters();
+        state.clearFilters();
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     },
     [clearFiltersToken]
   );
 
-  const updateFacetsCelState = (facetId: string, facetCel: string) =>
-    setFacetCelState({
-      ...(facetCelState || {}),
-      [facetId]: facetCel,
-    });
-
   return (
     <section
       id={`${panelId}-facets`}
@@ -204,47 +160,46 @@ export const FacetsPanel: React.FC<FacetsPanelProps> = ({
             Add Facet
           </button>
           <button
-            onClick={() => clearFilters()}
+            onClick={() => state.clearFilters()}
             className="p-1 pr-2 text-sm text-gray-600 hover:bg-gray-100 rounded flex items-center gap-1"
           >
             <XMarkIcon className="h-4 w-4" />
             Reset
           </button>
         </div>
-
-        {!facets &&
-          [undefined, undefined, undefined].map((_, index) => (
-            <Facet
-              facet={
-                {
-                  id: "",
-                  name: "",
-                  is_static: true,
-                } as FacetDto
-              }
-              key={index}
-              isOpenByDefault={true}
-              optionsLoading={true}
-              optionsReloading={false}
-            />
-          ))}
-
-        {facets &&
-          facets.map((facet, index) => (
-            <Facet
-              key={facet.id + index}
-              facet={facet}
-              onCelChange={(cel) => updateFacetsCelState(facet.id, cel)}
-              options={facetOptions?.[facet.id]}
-              optionsLoading={!facetOptions?.[facet.id]}
-              optionsReloading={areFacetOptionsLoading && !!facet.id}
-              facetConfig={facetsConfigIdBased[facet.id]}
-              onLoadOptions={() =>
-                onLoadFacetOptions && onLoadFacetOptions(facet.id)
-              }
-              onDelete={() => onDeleteFacet && onDeleteFacet(facet.id)}
-            />
-          ))}
+        <FacetStoreProvider store={store}>
+          {!facets &&
+            [undefined, undefined, undefined].map((_, index) => (
+              <Facet
+                facet={
+                  {
+                    id: "",
+                    name: "",
+                    is_static: true,
+                  } as FacetDto
+                }
+                key={index}
+                isOpenByDefault={true}
+                optionsLoading={true}
+                optionsReloading={false}
+              />
+            ))}
+          {facets &&
+            facets.map((facet, index) => (
+              <Facet
+                key={facet.id + index}
+                facet={facet}
+                options={facetOptions?.[facet.id]}
+                optionsLoading={!facetOptions?.[facet.id]}
+                optionsReloading={areFacetOptionsLoading && !!facet.id}
+                facetConfig={facetsConfigIdBased[facet.id]}
+                onLoadOptions={() =>
+                  onLoadFacetOptions && onLoadFacetOptions(facet.id)
+                }
+                onDelete={() => onDeleteFacet && onDeleteFacet(facet.id)}
+              />
+            ))}
+        </FacetStoreProvider>
       </div>
     </section>
   );