From 8f0348a1474453309056c310a8e712c543e5719b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 8 Nov 2023 18:16:01 -0300 Subject: [PATCH] Removed unused API callouts and get saved components transplanted into context --- src/frontend/src/contexts/storeContext.tsx | 39 +++++++++++++++++- src/frontend/src/controllers/API/index.ts | 24 ++--------- .../components/added-components/index.tsx | 41 ++++--------------- .../StorePage/components/market-card.tsx | 4 +- src/frontend/src/pages/StorePage/index.tsx | 39 ++---------------- src/frontend/src/types/contexts/store.ts | 3 ++ 6 files changed, 59 insertions(+), 91 deletions(-) diff --git a/src/frontend/src/contexts/storeContext.tsx b/src/frontend/src/contexts/storeContext.tsx index 8acda7fe4..58e66450e 100644 --- a/src/frontend/src/contexts/storeContext.tsx +++ b/src/frontend/src/contexts/storeContext.tsx @@ -1,5 +1,9 @@ import { createContext, useEffect, useState } from "react"; -import { checkHasApiKey, checkHasStore } from "../controllers/API"; +import { + checkHasApiKey, + checkHasStore, + getStoreComponents, +} from "../controllers/API"; import { storeContextType } from "../types/contexts/store"; //store context to share user components and update them @@ -10,6 +14,9 @@ const initialValue = { setHasStore: () => {}, hasApiKey: false, setHasApiKey: () => {}, + getSavedComponents: () => {}, + errorApiKey: false, + loadingSaved: false, }; export const StoreContext = createContext(initialValue); @@ -20,6 +27,8 @@ export function StoreProvider({ children }) { const [hasStore, setHasStore] = useState(true); const [hasApiKey, setHasApiKey] = useState(false); const [storeChecked, setStoreChecked] = useState(false); + const [loadingSaved, setLoadingSaved] = useState(false); + const [errorApiKey, setErrorApiKey] = useState(false); useEffect(() => { const fetchStoreData = async () => { @@ -34,8 +43,33 @@ export function StoreProvider({ children }) { }; fetchStoreData(); + getSavedComponents(); }, []); + function getSavedComponents() { + setLoadingSaved(true); + getStoreComponents(null, null, null, null, null, true) + .then((data) => { + if (data?.authorized === false) { + setErrorApiKey(true); + setSavedFlows(new Set()); + } else { + let savedIds = new Set(); + let results = data?.results ?? []; + results.forEach((flow) => { + savedIds.add(flow.id); + }); + setSavedFlows(savedIds); + setErrorApiKey(false); + setLoadingSaved(false); + } + }) + .catch((err) => { + setSavedFlows(new Set()); + setErrorApiKey(true); + }); + } + useEffect(() => { const fetchStoreData = async () => { try { @@ -59,6 +93,9 @@ export function StoreProvider({ children }) { setHasStore, hasApiKey, setHasApiKey, + getSavedComponents, + errorApiKey, + loadingSaved, }} > {children} diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 1551c1e13..d5508a99c 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -591,8 +591,8 @@ export async function getFlowsStore(): Promise> { } export async function getStoreComponents( - page: number = 1, - limit: number = 10, + page?: number | null, + limit?: number | null, is_component?: boolean | null, sort?: string | null, tags?: string[] | null, @@ -624,10 +624,10 @@ export async function getStoreComponents( } if (page !== undefined) { - queryParams.push(`page=${page}`); + queryParams.push(`page=${page ?? 1}`); } if (limit !== undefined) { - queryParams.push(`limit=${limit}`); + queryParams.push(`limit=${limit ?? 9999999}`); } if (is_component !== null && is_component !== undefined) { queryParams.push(`is_component=${is_component}`); @@ -647,22 +647,6 @@ export async function getStoreComponents( } } -export async function getStoreSavedComponents(): Promise< - StoreComponentResponse | undefined -> { - try { - const res = await api.get( - `${BASE_URL_API}store/components/?filter_by_user=true` - ); - if (res.status === 200) { - return res.data; - } - } catch (error) { - console.log("Error:", error); - throw error; - } -} - export async function postStoreComponents(component: Component) { try { const res = await api.post(`${BASE_URL_API}store/components/`, component); diff --git a/src/frontend/src/pages/MainPage/components/added-components/index.tsx b/src/frontend/src/pages/MainPage/components/added-components/index.tsx index 0b144d37d..664e7ad7f 100644 --- a/src/frontend/src/pages/MainPage/components/added-components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/added-components/index.tsx @@ -1,17 +1,13 @@ import { useContext, useEffect, useState } from "react"; import CardsWrapComponent from "../../../../components/cardsWrapComponent"; import { alertContext } from "../../../../contexts/alertContext"; -import { - getStoreComponents, - getStoreSavedComponents, -} from "../../../../controllers/API"; +import { getStoreComponents } from "../../../../controllers/API"; import { storeComponent } from "../../../../types/store"; import { MarketCardComponent } from "../../../StorePage/components/market-card"; export default function AddedComponents(): JSX.Element { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); - const [filteredCategories, setFilteredCategories] = useState(new Set()); const { setErrorData } = useContext(alertContext); useEffect(() => { @@ -20,11 +16,13 @@ export default function AddedComponents(): JSX.Element { const handleGetComponents = () => { setLoading(true); - getStoreComponents(0, 10000) + getStoreComponents(null, null, true, "name", null, true) .then((res) => { - handleAddedOnly(res); + setLoading(false); + setData(res?.results ?? []); }) .catch((err) => { + setData([]); setLoading(false); setErrorData({ title: "Error to get components.", @@ -33,34 +31,11 @@ export default function AddedComponents(): JSX.Element { }); }; - function handleAddedOnly(components: storeComponent[]) { - getStoreSavedComponents() - .then((res) => { - const idSet = new Set(res.map((item) => item.id)); - const filteredArray = components.filter((item) => idSet.has(item.id)); - setData(filteredArray); - setLoading(false); - }) - .catch((err) => { - setLoading(false); - setErrorData({ - title: "Error to get components.", - list: [err["response"]["data"]["detail"]], - }); - }); - } - return ( - {data - .filter( - (f) => - Array.from(filteredCategories).length === 0 || - filteredCategories.has(f.is_component) - ) - .map((item, idx) => ( - - ))} + {data.map((item, idx) => ( + + ))} ); } diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx index f7f549521..e7fe2a890 100644 --- a/src/frontend/src/pages/StorePage/components/market-card.tsx +++ b/src/frontend/src/pages/StorePage/components/market-card.tsx @@ -25,11 +25,11 @@ import { classNames } from "../../../utils/utils"; export const MarketCardComponent = ({ data, - authorized, + authorized = true, disabled = false, }: { data: storeComponent; - authorized: boolean; + authorized?: boolean; disabled?: boolean; }) => { const { savedFlows } = useContext(StoreContext); diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index d06ea7a6f..aad9211db 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/src/frontend/src/pages/StorePage/index.tsx @@ -17,11 +17,7 @@ import { import { alertContext } from "../../contexts/alertContext"; import { StoreContext } from "../../contexts/storeContext"; import { TabsContext } from "../../contexts/tabsContext"; -import { - getStoreComponents, - getStoreSavedComponents, - getStoreTags, -} from "../../controllers/API"; +import { getStoreComponents, getStoreTags } from "../../controllers/API"; import StoreApiKeyModal from "../../modals/StoreApiKeyModal"; import { storeComponent } from "../../types/store"; import { cn } from "../../utils/utils"; @@ -31,11 +27,11 @@ export default function StorePage(): JSX.Element { useEffect(() => { setTabId(""); }, []); - const { setSavedFlows, hasApiKey } = useContext(StoreContext); + const { getSavedComponents, loadingSaved, errorApiKey, hasApiKey } = + useContext(StoreContext); const { setErrorData } = useContext(alertContext); const [loading, setLoading] = useState(true); const [loadingTags, setLoadingTags] = useState(true); - const [loadingSaved, setLoadingSaved] = useState(false); const [filteredCategories, setFilterCategories] = useState([]); const [inputText, setInputText] = useState(""); const [searchData, setSearchData] = useState([]); @@ -43,13 +39,11 @@ export default function StorePage(): JSX.Element { const [pageSize, setPageSize] = useState(12); const [pageIndex, setPageIndex] = useState(1); const [pageOrder, setPageOrder] = useState("Popular"); - const [errorApiKey, setErrorApiKey] = useState(false); const [tags, setTags] = useState<{ id: string; name: string }[]>([]); const [tabActive, setTabActive] = useState("Flows"); const [searchText, setSearchText] = useState(""); useEffect(() => { - handleGetSavedComponents(); handleGetTags(); }, []); @@ -72,30 +66,6 @@ export default function StorePage(): JSX.Element { }); } - function handleGetSavedComponents() { - setLoadingSaved(true); - getStoreSavedComponents() - .then((data) => { - if (data?.authorized === false) { - setErrorApiKey(true); - setSavedFlows(new Set()); - } else { - let savedIds = new Set(); - let results = data?.results ?? []; - results.forEach((flow) => { - savedIds.add(flow.id); - }); - setSavedFlows(savedIds); - setErrorApiKey(false); - setLoadingSaved(false); - } - }) - .catch((err) => { - setSavedFlows(new Set()); - setErrorApiKey(true); - }); - } - const handleGetComponents = () => { setLoading(true); getStoreComponents( @@ -112,7 +82,6 @@ export default function StorePage(): JSX.Element { setLoading(false); setSearchData(res?.results ?? []); setTotalRowsCount(Number(res?.count ?? 0)); - setErrorApiKey(true); }) .catch((err) => { setSearchData([]); @@ -151,7 +120,7 @@ export default function StorePage(): JSX.Element {
{ - handleGetSavedComponents(); + getSavedComponents(); handleGetTags(); handleGetComponents(); }} diff --git a/src/frontend/src/types/contexts/store.ts b/src/frontend/src/types/contexts/store.ts index 85deddf31..9df6722e5 100644 --- a/src/frontend/src/types/contexts/store.ts +++ b/src/frontend/src/types/contexts/store.ts @@ -5,4 +5,7 @@ export type storeContextType = { hasStore: boolean; setHasApiKey: (key: boolean) => void; hasApiKey: boolean; + getSavedComponents: () => void; + errorApiKey: boolean; + loadingSaved: boolean; };