From b3bb568526b68e3d5f693ab3956d51b05f03a4d6 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 2 Nov 2023 09:57:03 -0300 Subject: [PATCH] feat(storeContext.tsx): add hasApiKey state and setHasApiKey function to storeContext to track if API key is present fix(StorePage/index.tsx): fix useEffect dependencies and add missing handleChangeTab function fix(API/index.ts): rename getNumberOfComponents function to getCountComponents to improve semantics --- src/frontend/src/contexts/storeContext.tsx | 13 +- src/frontend/src/controllers/API/index.ts | 15 +- src/frontend/src/pages/StorePage/index.tsx | 226 ++++++++------------- src/frontend/src/types/contexts/store.ts | 2 + 4 files changed, 107 insertions(+), 149 deletions(-) diff --git a/src/frontend/src/contexts/storeContext.tsx b/src/frontend/src/contexts/storeContext.tsx index 2979fed7a..c1992f3f6 100644 --- a/src/frontend/src/contexts/storeContext.tsx +++ b/src/frontend/src/contexts/storeContext.tsx @@ -8,6 +8,8 @@ const initialValue = { setSavedFlows: () => {}, hasStore: true, setHasStore: () => {}, + hasApiKey: true, + setHasApiKey: () => {}, }; export const StoreContext = createContext(initialValue); @@ -16,14 +18,23 @@ export function StoreProvider({ children }) { const [savedFlows, setSavedFlows] = useState>(new Set()); const [hasStore, setHasStore] = useState(true); + const [hasApiKey, setHasApiKey] = useState(true); checkHasStore().then((res) => { setHasStore(res["enabled"]); + setHasApiKey(res["has_api_key"]); }); return ( {children} diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index fc7c82a57..f1c3a49a1 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -713,9 +713,20 @@ export async function checkHasStore() { } } -export async function getNumberOfComponents() { +export async function getCountComponents(is_component?: boolean | null) { try { - const res = await api.get(`${BASE_URL_API}store/components/count`); + let url = `${BASE_URL_API}store/components/count`; + const queryParams: any = []; + if (is_component !== undefined) { + queryParams.push(`is_component=${is_component}`); + } + + if (queryParams.length > 0) { + url += `?${queryParams.join("&")}`; + } + + const res = await api.get(url); + if (res.status === 200) { return res.data; } diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index 3b6c6308f..0671f8b35 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/src/frontend/src/pages/StorePage/index.tsx @@ -20,7 +20,7 @@ import { alertContext } from "../../contexts/alertContext"; import { StoreContext } from "../../contexts/storeContext"; import { TabsContext } from "../../contexts/tabsContext"; import { - getNumberOfComponents, + getCountComponents, getStoreComponents, getStoreSavedComponents, getStoreTags, @@ -32,25 +32,24 @@ import { cn } from "../../utils/utils"; import { MarketCardComponent } from "./components/market-card"; export default function StorePage(): JSX.Element { const { setTabId } = useContext(TabsContext); - // set null id useEffect(() => { setTabId(""); }, []); - const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [filteredCategories, setFilterCategories] = useState([]); const [inputText, setInputText] = useState(""); - const [searchData, setSearchData] = useState(data); + const [searchData, setSearchData] = useState([]); const { setErrorData } = useContext(alertContext); const [totalRowsCount, setTotalRowsCount] = useState(0); const [size, setPageSize] = useState(10); const [index, setPageIndex] = useState(1); const [errorApiKey, setErrorApiKey] = useState(false); - const { setSavedFlows, savedFlows } = useContext(StoreContext); + const { setSavedFlows, savedFlows, hasApiKey } = useContext(StoreContext); const [tags, setTags] = useState<{ id: string; name: string }[]>([]); const tagListId = useRef<{ id: string; name: string }[]>([]); const [renderPagination, setRenderPagination] = useState(false); const filterComponent = useRef(null); + const [tabActive, setTabActive] = useState("Flows"); useEffect(() => { getStoreTags().then((res) => { @@ -59,6 +58,16 @@ export default function StorePage(): JSX.Element { }); }, []); + useEffect(() => { + filterComponent.current = false; + getSavedComponents() + .finally(() => handleGetComponents()) + .catch((err) => { + setErrorApiKey(true); + console.error(err); + }); + }, []); + async function getSavedComponents() { setLoading(true); const result = await getStoreSavedComponents(); @@ -70,17 +79,12 @@ export default function StorePage(): JSX.Element { setErrorApiKey(false); } - useEffect(() => { - getNumberOfComponents().then((res) => { + async function getNumberSavedComponents() { + getCountComponents(filterComponent.current).then((res) => { setTotalRowsCount(Number(res["count"])); + setLoading(false); }); - getSavedComponents() - .finally(() => handleGetComponents()) - .catch((err) => { - setErrorApiKey(true); - console.error(err); - }); - }, []); + } const handleGetComponents = () => { setLoading(true); @@ -89,8 +93,7 @@ export default function StorePage(): JSX.Element { getStoreComponents(index - 1, size, filterComponent.current) .then((res) => { setSearchData(res); - setData(res); - setLoading(false); + getNumberSavedComponents(); setErrorApiKey(true); }) .catch((err) => { @@ -112,9 +115,9 @@ export default function StorePage(): JSX.Element { searchComponent(inputText).then( (res) => { setSearchData(res); - setData(res); setLoading(false); setRenderPagination(false); + setTotalRowsCount(res.length); }, (error) => { setLoading(false); @@ -127,7 +130,6 @@ export default function StorePage(): JSX.Element { setRenderPagination(true); getStoreComponents(pageIndex, pageSize, filterComponent.current) .then((res) => { - setData(res); setSearchData(res); setPageIndex(pageIndex); setPageSize(pageSize); @@ -152,8 +154,8 @@ export default function StorePage(): JSX.Element { searchComponent(null, 1, 10000, null, filterArray).then( (res) => { setSearchData(res); - setData(res); setLoading(false); + setTotalRowsCount(res.length); }, (error) => { setLoading(false); @@ -162,7 +164,32 @@ export default function StorePage(): JSX.Element { ); } - const [tabActive, setTabActive] = useState("Flows"); + function handleChangeTab(tab: string) { + if (tab === "All") { + filterComponent.current = null; + } else if (tab === "Flows") { + filterComponent.current = false; + } else if (tab === "Components") { + filterComponent.current = true; + } + setPageIndex(1); + setPageSize(10); + handleGetComponents(); + } + + const handleOrderPage = (e) => { + let sortedData = cloneDeep(searchData); + + if (e === "Popular") { + sortedData = sortedData.sort( + (a, b) => Number(b.liked_by_count) - Number(a.liked_by_count) + ); + } else if (e === "Alphabetical") { + sortedData = sortedData.sort((a, b) => a.name.localeCompare(b.name)); + } + + setSearchData([...sortedData]); + }; return ( <> @@ -181,7 +208,9 @@ export default function StorePage(): JSX.Element { }} > - - - - - */} +
{!loading && tags.map((i, idx) => ( @@ -383,29 +323,25 @@ export default function StorePage(): JSX.Element {
- 2,117 results + {!loading && ( + <> + {totalRowsCount} {totalRowsCount > 0 ? "results" : "result"} + + )} +
@@ -418,17 +354,15 @@ export default function StorePage(): JSX.Element { ) : ( - searchData - .filter( - (f) => - filteredCategories?.length === 0 || - filteredCategories.some( - (category) => category === f.is_component - ) - ) - .map((item, idx) => ( - - )) + searchData.map((item, idx) => { + console.log(item); + + return ( + <> + + + ); + }) )} diff --git a/src/frontend/src/types/contexts/store.ts b/src/frontend/src/types/contexts/store.ts index 26185748b..85deddf31 100644 --- a/src/frontend/src/types/contexts/store.ts +++ b/src/frontend/src/types/contexts/store.ts @@ -3,4 +3,6 @@ export type storeContextType = { setSavedFlows: (newState: Set) => void; setHasStore: (store: boolean) => void; hasStore: boolean; + setHasApiKey: (key: boolean) => void; + hasApiKey: boolean; };