refactor: store tags API (#2678)

* feat: create useGetTags hook to handle tags API

* refactor: use useGetTagsQuery hook to handle tags

* [autofix.ci] apply automated fixes

* refactor: remove unnecessary state handling

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/src/controllers/API/queries/store/index.ts

@@ -1 +1,2 @@
+export * from "./use-get-tags";
 export * from "./use-post-like-component";

src/frontend/src/controllers/API/queries/store/use-get-tags.ts

@@ -0,0 +1,31 @@
+import { useQueryFunctionType } from "@/types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface ITagsDataArray {
+  id: string;
+  name: string;
+}
+
+type tagsQueryResponse = Array<ITagsDataArray>;
+
+export const useGetTagsQuery: useQueryFunctionType<
+  undefined,
+  tagsQueryResponse
+> = (_, options) => {
+  const { query } = UseRequestProcessor();
+
+  const getTagsFn = async () => {
+    return await api.get<tagsQueryResponse>(`${getURL("STORE")}/tags`);
+  };
+
+  const responseFn = async () => {
+    const { data } = await getTagsFn();
+    return data;
+  };
+
+  const queryResult = query(["useGetTagsQuery"], responseFn, { ...options });
+
+  return queryResult;
+};

src/frontend/src/modals/shareModal/index.tsx

@@ -1,3 +1,5 @@
+import { useGetTagsQuery } from "@/controllers/API/queries/store";
+import { cloneDeep } from "lodash";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -53,15 +55,13 @@ export default function ShareModal({
       : useState(children ? false : true);
   const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
   const nameComponent = is_component ? "component" : "workflow";
-
-  const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
-  const [loadingTags, setLoadingTags] = useState<boolean>(false);
   const [sharePublic, setSharePublic] = useState(true);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [unavaliableNames, setUnavaliableNames] = useState<
     { id: string; name: string }[]
   >([]);
   const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
+  const { data, isFetching } = useGetTagsQuery();
 
   const [loadingNames, setLoadingNames] = useState(false);
 
@@ -71,20 +71,11 @@ export default function ShareModal({
   useEffect(() => {
     if (internalOpen) {
       if (hasApiKey && hasStore) {
-        handleGetTags();
         handleGetNames();
       }
     }
   }, [internalOpen, hasApiKey, hasStore]);
 
-  function handleGetTags() {
-    setLoadingTags(true);
-    getStoreTags().then((res) => {
-      setTags(res);
-      setLoadingTags(false);
-    });
-  }
-
   async function handleGetNames() {
     setLoadingNames(true);
     const unavaliableNames: Array<{ id: string; name: string }> = [];
@@ -124,19 +115,20 @@ export default function ShareModal({
     }
 
     if (!update)
-      saveFlowStore(flow!, getTagsIds(selectedTags, tags), sharePublic).then(
-        successShare,
-        (err) => {
-          setErrorData({
-            title: "Error sharing " + (is_component ? "component" : "flow"),
-            list: [err["response"]["data"]["detail"]],
-          });
-        },
-      );
+      saveFlowStore(
+        flow!,
+        getTagsIds(selectedTags, cloneDeep(data) ?? []),
+        sharePublic,
+      ).then(successShare, (err) => {
+        setErrorData({
+          title: "Error sharing " + (is_component ? "component" : "flow"),
+          list: [err["response"]["data"]["detail"]],
+        });
+      });
     else
       updateFlowStore(
         flow!,
-        getTagsIds(selectedTags, tags),
+        getTagsIds(selectedTags, cloneDeep(data) ?? []),
         sharePublic,
         unavaliableNames.find((e) => e.name === name)!.id,
       ).then(successShare, (err) => {
@@ -237,8 +229,8 @@ export default function ShareModal({
           </div>
           <div className="mt-3 flex h-8 w-full">
             <TagsSelector
-              tags={tags}
-              loadingTags={loadingTags}
+              tags={data ?? []}
+              loadingTags={isFetching}
               disabled={false}
               selectedTags={selectedTags}
               setSelectedTags={setSelectedTags}

src/frontend/src/pages/StorePage/index.tsx

@@ -7,6 +7,7 @@ import ShadTooltip from "../../components/shadTooltipComponent";
 import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Button } from "../../components/ui/button";
 
+import { useGetTagsQuery } from "@/controllers/API/queries/store";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import PaginatorComponent from "../../components/paginatorComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
@@ -50,7 +51,6 @@ export default function StorePage(): JSX.Element {
   );
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const [loading, setLoading] = useState(true);
-  const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();
   const [filteredCategories, setFilterCategories] = useState<any[]>([]);
   const [inputText, setInputText] = useState<string>("");
@@ -59,10 +59,10 @@ export default function StorePage(): JSX.Element {
   const [pageSize, setPageSize] = useState(12);
   const [pageIndex, setPageIndex] = useState(1);
   const [pageOrder, setPageOrder] = useState("Popular");
-  const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
   const [tabActive, setTabActive] = useState("All");
   const [searchNow, setSearchNow] = useState("");
   const [selectFilter, setSelectFilter] = useState("all");
+  const { isFetching, data } = useGetTagsQuery();
 
   const navigate = useNavigate();
 
@@ -84,7 +84,6 @@ export default function StorePage(): JSX.Element {
   }, [loadingApiKey, validApiKey, hasApiKey, currentFlowId]);
 
   useEffect(() => {
-    handleGetTags();
     handleGetComponents();
   }, [
     tabActive,
@@ -101,19 +100,6 @@ export default function StorePage(): JSX.Element {
     id,
   ]);
 
-  function handleGetTags() {
-    setLoadingTags(true);
-    getStoreTags()
-      .then((res) => {
-        setTags(res);
-        setLoadingTags(false);
-      })
-      .catch((err) => {
-        console.log(err);
-        setLoadingTags(false);
-      });
-  }
-
   function handleGetComponents() {
     if (loadingApiKey) return;
     setLoading(true);
@@ -297,8 +283,8 @@ export default function StorePage(): JSX.Element {
             </Select>
             {id === undefined ? (
               <TagsSelector
-                tags={tags}
-                loadingTags={loadingTags}
+                tags={data ?? []}
+                loadingTags={isFetching}
                 disabled={loading}
                 selectedTags={filteredCategories}
                 setSelectedTags={setFilterCategories}