diff --git a/src/frontend/src/controllers/API/queries/store/index.ts b/src/frontend/src/controllers/API/queries/store/index.ts index 8fe89d92d..e0642f691 100644 --- a/src/frontend/src/controllers/API/queries/store/index.ts +++ b/src/frontend/src/controllers/API/queries/store/index.ts @@ -1 +1,2 @@ +export * from "./use-get-tags"; export * from "./use-post-like-component"; diff --git a/src/frontend/src/controllers/API/queries/store/use-get-tags.ts b/src/frontend/src/controllers/API/queries/store/use-get-tags.ts new file mode 100644 index 000000000..03cf88675 --- /dev/null +++ b/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; + +export const useGetTagsQuery: useQueryFunctionType< + undefined, + tagsQueryResponse +> = (_, options) => { + const { query } = UseRequestProcessor(); + + const getTagsFn = async () => { + return await api.get(`${getURL("STORE")}/tags`); + }; + + const responseFn = async () => { + const { data } = await getTagsFn(); + return data; + }; + + const queryResult = query(["useGetTagsQuery"], responseFn, { ...options }); + + return queryResult; +}; diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index c0ba3d628..f5450b69a 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/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(false); const [sharePublic, setSharePublic] = useState(true); const [selectedTags, setSelectedTags] = useState([]); 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({
state.currentFlowId); const [loading, setLoading] = useState(true); - const [loadingTags, setLoadingTags] = useState(true); const { id } = useParams(); const [filteredCategories, setFilterCategories] = useState([]); const [inputText, setInputText] = useState(""); @@ -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 { {id === undefined ? (