refactor: use Redux for contents/models state management

geodem127 · geodem127 · commit 76df6cb7361b · 2025-11-07T20:14:40.000+08:00
diff --git a/src/shell/components/GlobalSearch/index.tsx b/src/shell/components/GlobalSearch/index.tsx
@@ -21,18 +21,14 @@ import { isEmpty } from "lodash";
 import { theme } from "@zesty-io/material";
 
 import { useMetaKey } from "../../../shell/hooks/useMetaKey";
-import {
-  useGetContentModelsQuery,
-  useSearchContentQuery,
-} from "../../services/instance";
 import { notify } from "../../store/notifications";
 import { AdvancedSearch } from "./components/AdvancedSearch";
 import useRecentSearches from "../../hooks/useRecentSearches";
 import { GlobalSearchItem } from "./components/GlobalSearchItem";
 import { getContentTitle, getItemIcon } from "./utils";
 import { useSearchModelsByKeyword } from "../../hooks/useSearchModelsByKeyword";
 import { useSearchCodeFilesByKeywords } from "../../hooks/useSearchCodeFilesByKeyword";
-import { ResourceType } from "../../services/types";
+import { ContentItem, Language, ResourceType } from "../../services/types";
 import { SearchAccelerator } from "./components/SearchAccelerator";
 import { SEARCH_ACCELERATORS } from "./components/config";
 import { useGetActiveApp } from "../../hooks/useGetActiveApp";
@@ -47,6 +43,10 @@ import { KeywordSearchItem } from "./components/KeywordSearchItem";
 import { useParams } from "../../hooks/useParams";
 import { withCursorPosition } from "../../components/withCursorPosition";
 import { useSearchBlocksByKeyword } from "../../hooks/useSearchBlocksByKeyword";
+import { AppState } from "shell/store/types";
+import { fetchModels } from "shell/store/models";
+import { useDebounce } from "react-use";
+import { searchItems } from "shell/store/content";
 
 // List of dropdown options that are NOT suggestions
 const AdditionalDropdownOptions = [
@@ -81,11 +81,7 @@ export const GlobalSearch = () => {
   const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(false);
   const [recentSearches, addSearchTerm, deleteSearchTerm] = useRecentSearches();
   const [models, setModelKeyword] = useSearchModelsByKeyword();
-  const {
-    blocks,
-    setBlockKeyword,
-    isLoading: isFetchingBlocksResults,
-  } = useSearchBlocksByKeyword();
+
   const [codeFiles, setFileKeyword] = useSearchCodeFilesByKeywords();
   const [mediaFolders, setMediaFolderKeyword] =
     useSearchMediaFoldersByKeyword();
@@ -97,22 +93,29 @@ export const GlobalSearch = () => {
   const dispatch = useDispatch();
   const [params, setParams] = useParams();
   const textfieldRef = useRef<HTMLDivElement>();
-  const { data: allModels } = useGetContentModelsQuery();
-
-  const apiQueryTerm = useMemo(() => {
-    if (!!typedSearchAccelerator && !!searchKeyword) {
-      // Remove the accelerator from the keyword
-      return searchKeyword.replace(typedAcceleratorRegex, "")?.trim();
-    }
-
-    return searchKeyword;
-  }, [searchKeyword]);
-
-  const {
-    data: contents,
-    isError: isContentFetchingFailed,
-    isFetching: isFetchingContentSearchResults,
-  } = useSearchContentQuery({ query: apiQueryTerm });
+  const allModels = useSelector((state: AppState) => state?.models);
+  const [searchedContents, setSearchedContents] = useState<ContentItem[] | []>(
+    []
+  );
+  const [isFetchingContentSearchResults, setIsFetchingContentSearchResults] =
+    useState(false);
+
+  const [apiQueryTerm, setApiQueryTerm] = useState("");
+
+  //debounce to reduce API calls during user input.
+  useDebounce(
+    () => {
+      if (!!typedSearchAccelerator && !!searchKeyword) {
+        // Remove the accelerator from the keyword
+        setApiQueryTerm(
+          searchKeyword.replace(typedAcceleratorRegex, "")?.trim()
+        );
+      }
+      setApiQueryTerm(searchKeyword);
+    },
+    700,
+    [searchKeyword]
+  );
 
   const { data: bins } = useGetBinsQuery({ instanceId, ecoId });
   const { data: mediaFiles, isFetching: isFetchingMediaSearchResults } =
@@ -128,35 +131,57 @@ export const GlobalSearch = () => {
       { skip: !bins?.length }
     );
 
+  const { blocks, setBlockKeyword } = useSearchBlocksByKeyword({
+    isLoading: isFetchingContentSearchResults,
+  });
+
   const isLoading =
     isFetchingAllMediaFiles ||
     isFetchingMediaSearchResults ||
-    isFetchingContentSearchResults ||
-    isFetchingBlocksResults;
+    isFetchingContentSearchResults;
+
+  useEffect(() => {
+    //Update models in store to provide access to other search hooks
+    dispatch(fetchModels());
+  }, []);
+
+  useEffect(() => {
+    if (isEmpty(apiQueryTerm)) return setSearchedContents([]);
+    setIsFetchingContentSearchResults(true);
+    //Update contents in store to provide access to other search hooks
+    dispatch(searchItems(apiQueryTerm))
+      //@ts-ignore
+      .then((res) => {
+        if (!!res?.data?.length) {
+          setSearchedContents(res?.data);
+        } else {
+          setSearchedContents([]);
+        }
+        setIsFetchingContentSearchResults(false);
+      });
+  }, [apiQueryTerm]);
 
   const suggestions: Suggestion[] = useMemo(() => {
+    //Filter out redundant block model items
+    const filteredContents = searchedContents?.filter(
+      (item: ContentItem) =>
+        allModels?.[item?.meta?.contentModelZUID]?.type !== "block"
+    );
     // Content data needs to be reset to [] when api call fails
-    const contentSuggestions: Suggestion[] =
-      isContentFetchingFailed || isEmpty(contents)
-        ? []
-        : contents?.map((content) => {
-            return {
-              type: "content",
-              ZUID: content.meta?.ZUID,
-              title: getContentTitle(content, languages),
-              updatedAt: content.meta?.updatedAt,
-              url: isEmpty(content.meta)
-                ? ""
-                : `/${
-                    allModels?.find(
-                      (model) => model.ZUID === content.meta.contentModelZUID
-                    )?.type === "block"
-                      ? "blocks"
-                      : "content"
-                  }/${content.meta.contentModelZUID}/${content.meta.ZUID}`,
-              noUrlErrorMessage: "Selected item is missing meta data",
-            };
-          });
+    const contentSuggestions: Suggestion[] = isEmpty(filteredContents)
+      ? []
+      : filteredContents?.map((content) => {
+          return {
+            type: "content",
+            ZUID: content.meta?.ZUID,
+            title: getContentTitle(content, languages),
+            updatedAt: content.meta?.updatedAt,
+            url: isEmpty(content.meta)
+              ? ""
+              : `/content/${content.meta.contentModelZUID}/${content.meta.ZUID}`,
+            noUrlErrorMessage: "Selected item is missing meta data",
+          };
+        });
 
     const modelSuggestions: Suggestion[] =
       models?.map((model) => {
@@ -171,12 +196,17 @@ export const GlobalSearch = () => {
 
     const blocksSuggestions: Suggestion[] =
       blocks?.map((block) => {
+        const langCode = languages?.find(
+          (lang: Language) => lang?.ID === block?.langID
+        )?.code;
+        const titlePrefix = !!langCode ? `(${langCode}) ` : "";
+
         return {
           type: "block",
           ZUID: block?.ZUID,
-          title: block?.label,
+          title: block?.title, //`${titlePrefix}${block?.label}`,
           updatedAt: block?.updatedAt,
-          url: `/blocks/${block?.ZUID}`,
+          url: block?.url,
         };
       }) || [];
 
@@ -265,13 +295,12 @@ export const GlobalSearch = () => {
         new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
     );
   }, [
-    contents,
+    searchedContents,
     models,
     blocks,
     codeFiles,
     mediaFiles,
     mediaFolders,
-    isContentFetchingFailed,
     chipSearchAccelerator,
     allMediaFiles,
   ]);
@@ -356,7 +385,7 @@ export const GlobalSearch = () => {
     });
     const url = `/search?${searchParams.toString()}`;
 
-    // Do not save term as a recent keyword if it's empty
+    // Do not save term as a recent keyword if it's empty1
     if (!!queryTerm.trim()) {
       // If the user has selected a search accelerator, also save it in
       // the format of `[in:RESOURCE_TYPE]`
diff --git a/src/shell/hooks/useSearchBlocksByKeyword.ts b/src/shell/hooks/useSearchBlocksByKeyword.ts
@@ -1,20 +1,15 @@
 import { useEffect, useMemo, useState } from "react";
-import { ContentItem, ContentModel } from "../services/types";
-import {
-  useGetContentModelsQuery,
-  useGetLangsQuery,
-  useSearchContentQuery,
-} from "../services/instance";
-import { useGetUsersQuery } from "../services/accounts";
+import { ContentItem, ContentModel, Language, User } from "../services/types";
 import { BlockModel } from "../../shell/views/SearchPage/List/Block";
+import { AppState } from "shell/store/types";
+import { useSelector } from "react-redux";
 
 type UsersMap = Record<string, string>;
 type LanguageMap = Record<string, { code: string }>;
 
 type SearchResult = {
   blocks: BlockModel[];
   setBlockKeyword: (term: string) => void;
-  isLoading: boolean;
 };
 
 const toProperCase = (str?: string): string => {
@@ -27,23 +22,36 @@ const toProperCase = (str?: string): string => {
     .trim();
 };
 
-export const useSearchBlocksByKeyword = (): SearchResult => {
+export const useSearchBlocksByKeyword = (
+  contents?: ContentItem[],
+  isLoading?: boolean
+): SearchResult => {
   const [searchTerm, setSearchTerm] = useState("");
+  const [blockVariants, setBlockVariants] = useState([]);
 
-  const { data: modelsRaw, isLoading: isLoadingModels } =
-    useGetContentModelsQuery();
-  const { data: contentsRaw, isLoading: isLoadingContents } =
-    useSearchContentQuery({ query: "", limit: 10000 });
+  const modelsRaw: ContentModel[] = useSelector(
+    (state: AppState) => state?.models
+  );
+  const users: User[] = useSelector((state: AppState) => state?.users);
+  const languages: Language[] = useSelector(
+    (state: AppState) => state?.languages
+  );
+
+  const normalizedSearch = searchTerm.toLowerCase()?.trim();
 
-  const { data: users = [], isLoading: isLoadingUsers } = useGetUsersQuery();
-  const { data: languages = [], isLoading: isLoadingLanguages } =
-    useGetLangsQuery({});
+  const blockModels = useMemo<BlockModel[]>(() => {
+    if (!Object.values(modelsRaw)?.length) return [];
+    return Object.values(modelsRaw)
+      ?.filter((block: ContentModel) => block?.type === "block")
+      .map((block) => block as unknown as BlockModel);
+  }, [modelsRaw]);
 
-  const isLoading =
-    isLoadingModels ||
-    isLoadingContents ||
-    isLoadingUsers ||
-    isLoadingLanguages;
+  const blockModelsMap = useMemo(
+    () =>
+      !!blockModels?.length &&
+      Object.fromEntries(blockModels?.map((model) => [model?.ZUID, model])),
+    [blockModels]
+  );
 
   const usersMap = useMemo<UsersMap>(
     () =>
@@ -64,21 +72,26 @@ export const useSearchBlocksByKeyword = (): SearchResult => {
     [languages]
   );
 
-  const modelsMap = useMemo(
-    () =>
-      !!modelsRaw?.length &&
-      Object.fromEntries(modelsRaw?.map((model) => [model?.ZUID, model])),
-    [modelsRaw]
-  );
-
-  const normalizedSearch = searchTerm.toLowerCase()?.trim();
+  useEffect(() => {
+    if (!normalizedSearch) return;
+    const blockModelZUIDs = blockModels?.map((block) => block?.ZUID);
+    const langIDs = Object.keys(languageMap);
+    const variants = !contents?.length
+      ? []
+      : contents?.filter(
+          (content: ContentItem) =>
+            blockModelZUIDs?.includes(content?.meta?.contentModelZUID) &&
+            langIDs?.includes(String(content?.meta?.langID))
+        );
+    setBlockVariants(variants);
+  }, [normalizedSearch, blockModels, languageMap, contents]);
 
   const parsedBlocks: BlockModel[] = useMemo(() => {
     if (isLoading) return [];
 
-    const processedModels: BlockModel[] = !modelsRaw?.length
+    const processedModels: BlockModel[] = !blockModels?.length
       ? []
-      : modelsRaw?.map((model) => ({
+      : blockModels?.map((model: BlockModel) => ({
           ZUID: model?.ZUID,
           label: model?.label,
           type: model?.type,
@@ -88,12 +101,14 @@ export const useSearchBlocksByKeyword = (): SearchResult => {
           createdAt: model?.createdAt,
           createdByUserZUID: model?.createdByUserZUID,
           langID: null,
+          url: `/blocks/${model?.ZUID}`,
         }));
 
-    const processedContent = !contentsRaw?.length
+    const processedContent = !blockVariants?.length
       ? []
-      : contentsRaw?.map((item) => {
-          const parentModel = modelsMap?.[item?.meta?.contentModelZUID] || null;
+      : blockVariants?.map((item) => {
+          const parentModel =
+            blockModelsMap?.[item?.meta?.contentModelZUID] || null;
           return {
             ZUID: item?.meta?.ZUID,
             label: item?.web?.metaTitle || item?.web?.metaLinkText,
@@ -107,6 +122,7 @@ export const useSearchBlocksByKeyword = (): SearchResult => {
             createdByUserZUID:
               item?.meta?.createdByUserZUID || item?.web?.createdByUserZUID,
             langID: item?.meta?.langID,
+            url: `/blocks/${item?.meta?.contentModelZUID}/${item?.meta?.ZUID}`,
           };
         });
 
@@ -118,7 +134,6 @@ export const useSearchBlocksByKeyword = (): SearchResult => {
         title: item.label,
       }))
       .filter((item) => {
-        if (item.type !== "block") return false;
         if (!normalizedSearch) return true;
 
         const searchFields = [
@@ -137,16 +152,16 @@ export const useSearchBlocksByKeyword = (): SearchResult => {
       });
   }, [
     isLoading,
-    contentsRaw,
-    modelsRaw,
+    blockVariants,
+    blockModels,
     languageMap,
     usersMap,
+    blockModelsMap,
     normalizedSearch,
   ]);
 
   return {
     blocks: parsedBlocks,
     setBlockKeyword: setSearchTerm,
-    isLoading,
   };
 };
diff --git a/src/shell/views/SearchPage/List/Block.tsx b/src/shell/views/SearchPage/List/Block.tsx
@@ -16,8 +16,9 @@ export type BlockModel = Partial<ContentModel> & {
   createdAt?: string;
   updatedAt?: string;
   lang?: string;
-  langID?: number;
+  langID: number | null;
   title?: string;
+  url?: string | null;
 };
 
 type Block = {
diff --git a/src/shell/views/SearchPage/SearchPage.tsx b/src/shell/views/SearchPage/SearchPage.tsx
