From d468f40fb655a7af4dd103cf43da5f63da358f6e Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 24 Oct 2023 20:47:56 -0300 Subject: [PATCH] fix(contexts/index.tsx): move import statement for StoreProvider to the correct position for better organization fix(contexts/storeContext.tsx): change the type of savedFlows state from an object to a Set to improve data structure fix(controllers/API/index.ts): add a new function getStoreSavedComponents to fetch saved components from the store fix(pages/StorePage/components/market-card.tsx): use the savedFlows state from StoreContext to determine if a component is added to the store fix(pages/StorePage/index.tsx): add a new function getSavedComponents to fetch saved components from the store and update the savedFlows state in StoreContext fix(types/contexts/store.ts): change the type of savedFlows state in storeContextType from an object to a Set for better data structure --- src/frontend/src/contexts/storeContext.tsx | 5 ++--- src/frontend/src/controllers/API/index.ts | 14 ++++++++++++ .../StorePage/components/market-card.tsx | 4 +++- src/frontend/src/pages/StorePage/index.tsx | 22 +++++++++++++++---- src/frontend/src/types/contexts/store.ts | 6 ++--- 5 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/contexts/storeContext.tsx b/src/frontend/src/contexts/storeContext.tsx index e5f90e296..53fb9340c 100644 --- a/src/frontend/src/contexts/storeContext.tsx +++ b/src/frontend/src/contexts/storeContext.tsx @@ -1,17 +1,16 @@ import { createContext, useState } from "react"; import { storeContextType } from "../types/contexts/store"; -import { FlowType } from "../types/flow"; //store context to share user components and update them const initialValue = { - savedFlows: {}, + savedFlows: new Set(), setSavedFlows: () => {}, }; export const StoreContext = createContext(initialValue); export function StoreProvider({ children }) { - const [savedFlows, setSavedFlows] = useState<{ [key: string]: FlowType }>({}); + const [savedFlows, setSavedFlows] = useState>(new Set()); return ( diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 70b37489d..6dc289589 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -597,6 +597,20 @@ export async function getStoreComponents(page: number = 1, limit: number = 10) { } } +export async function getStoreSavedComponents() { + 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/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx index 65be42311..1702ad633 100644 --- a/src/frontend/src/pages/StorePage/components/market-card.tsx +++ b/src/frontend/src/pages/StorePage/components/market-card.tsx @@ -10,6 +10,7 @@ import { CardHeader, CardTitle, } from "../../../components/ui/card"; +import { StoreContext } from "../../../contexts/storeContext"; import { TabsContext } from "../../../contexts/tabsContext"; import { getComponent, saveFlowStore } from "../../../controllers/API"; import { FlowType } from "../../../types/flow"; @@ -17,7 +18,8 @@ import { FlowComponent } from "../../../types/store"; import cloneFLowWithParent from "../../../utils/storeUtils"; export const MarketCardComponent = ({ data }: { data: FlowComponent }) => { - const [added, setAdded] = useState(false); + const { savedFlows } = useContext(StoreContext); + const [added, setAdded] = useState(savedFlows.has(data.id) ? true : false); const [loading, setLoading] = useState(false); const { addFlow } = useContext(TabsContext); const flowData = useRef(); diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index e9a6ec3aa..234e06d55 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/src/frontend/src/pages/StorePage/index.tsx @@ -16,8 +16,13 @@ import { import { Switch } from "../../components/ui/switch"; import { alertContext } from "../../contexts/alertContext"; import { AuthContext } from "../../contexts/authContext"; +import { StoreContext } from "../../contexts/storeContext"; import { TabsContext } from "../../contexts/tabsContext"; -import { getStoreComponents, searchComponent } from "../../controllers/API"; +import { + getStoreComponents, + getStoreSavedComponents, + searchComponent, +} from "../../controllers/API"; import StoreApiKeyModal from "../../modals/StoreApiKeyModal"; import { FlowComponent } from "../../types/store"; import { cn } from "../../utils/utils"; @@ -39,14 +44,23 @@ export default function StorePage(): JSX.Element { const [searchData, setSearchData] = useState(data); const [errorApiKey, setErrorApiKey] = useState(false); const { setErrorData } = useContext(alertContext); - const { addFlow } = useContext(TabsContext); + const { setSavedFlows } = useContext(StoreContext); + + async function getSavedComponents() { + setLoading(true); + const result = await getStoreSavedComponents(); + let savedIds = new Set(); + result.forEach((flow) => { + savedIds.add(flow.id); + }); + setSavedFlows(savedIds); + } useEffect(() => { - handleGetComponents(); + getSavedComponents().then((_) => handleGetComponents()); }, []); const handleGetComponents = () => { - setLoading(true); getStoreComponents(1, 10) .then((res) => { setSearchData(res); diff --git a/src/frontend/src/types/contexts/store.ts b/src/frontend/src/types/contexts/store.ts index 2561e77c0..1cc581f60 100644 --- a/src/frontend/src/types/contexts/store.ts +++ b/src/frontend/src/types/contexts/store.ts @@ -1,6 +1,4 @@ -import { FlowType } from "../flow"; - export type storeContextType = { - savedFlows: { [key: string]: FlowType }; - setSavedFlows: (newState: { [key: string]: FlowType }) => void; + savedFlows: Set; + setSavedFlows: (newState: Set) => void; };