From a7120259e0b8c3290918410ef4bb55e5916ebedc Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Mon, 30 Oct 2023 22:41:58 -0300 Subject: [PATCH] fix(API/index.ts): change parameter types in searchComponent function to allow null values for query, page, limit, status, and tags refactor(StorePage/index.tsx): rename filteredCategories state variable to filteredTags for better semantics feat(StorePage/index.tsx): add functionality to filter components by tags and update search results accordingly --- src/frontend/src/controllers/API/index.ts | 10 +-- src/frontend/src/pages/StorePage/index.tsx | 77 ++++++++++++---------- 2 files changed, 48 insertions(+), 39 deletions(-) diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 19e1db6ce..cdb659164 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -644,11 +644,11 @@ export async function getComponent(component_id: string) { } export async function searchComponent( - query: string, - page?: number, - limit?: number, - status?: string, - tags?: [string] + query: string | null, + page?: number | null, + limit?: number | null, + status?: string | null, + tags?: string[] ) { try { let url = `${BASE_URL_API}store/search/`; diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index 790f44588..2aabb7f7d 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/src/frontend/src/pages/StorePage/index.tsx @@ -37,8 +37,7 @@ export default function StorePage(): JSX.Element { }, []); const [data, setData] = useState([]); const [loading, setLoading] = useState(false); - const [search, setSearch] = useState(false); - const [filteredCategories, setFilteredCategories] = useState(new Set()); + const [filteredCategories, setFilterCategories] = useState([]); const [inputText, setInputText] = useState(""); const [searchData, setSearchData] = useState(data); const { setErrorData } = useContext(alertContext); @@ -47,24 +46,17 @@ export default function StorePage(): JSX.Element { const [index, setPageIndex] = useState(1); const [errorApiKey, setErrorApiKey] = useState(false); const { setSavedFlows, savedFlows } = useContext(StoreContext); - const [tags, setTags] = useState([]); + const [tags, setTags] = useState<{ id: string; name: string }[]>([]); const tagListId = useRef<{ id: string; name: string }[]>([]); - const [renderPagination, setRenderPagination] = useState( - searchData?.length > 0 && !loading && !search - ); + const [renderPagination, setRenderPagination] = useState(false); useEffect(() => { getStoreTags().then((res) => { tagListId.current = res; - let tags = res.map((tag) => tag.name); - setTags(tags); + setTags(res); }); }, []); - useEffect(() => { - setRenderPagination(searchData?.length > 0 && !loading && !search); - }, [loading, search]); - async function getSavedComponents() { setLoading(true); const result = await getStoreSavedComponents(); @@ -89,6 +81,7 @@ export default function StorePage(): JSX.Element { const handleGetComponents = () => { setLoading(true); + setRenderPagination(true); getStoreComponents(index - 1, size) .then((res) => { setSearchData(res); @@ -109,17 +102,15 @@ export default function StorePage(): JSX.Element { const handleSearch = (inputText: string) => { if (inputText === "") { handleGetComponents(); - setSearch(false); return; } - setSearch(true); setLoading(true); searchComponent(inputText).then( (res) => { setSearchData(res); setData(res); - setRenderPagination(false); setLoading(false); + setRenderPagination(false); }, (error) => { setLoading(false); @@ -129,6 +120,7 @@ export default function StorePage(): JSX.Element { function handleChangePagination(pageIndex: number, pageSize: number) { setLoading(true); + setRenderPagination(true); getStoreComponents(pageIndex, pageSize) .then((res) => { setData(res); @@ -136,7 +128,6 @@ export default function StorePage(): JSX.Element { setPageIndex(pageIndex); setPageSize(pageSize); setLoading(false); - setRenderPagination(true); }) .catch((err) => { setSearchData([]); @@ -148,6 +139,25 @@ export default function StorePage(): JSX.Element { }); } + function handleFilterByTags(filterArray) { + if (filterArray.length === 0) { + handleGetComponents(); + return; + } + setRenderPagination(false); + searchComponent(null, 1, 10000, null, filterArray).then( + (res) => { + setSearchData(res); + setData(res); + setLoading(false); + }, + (error) => { + setLoading(false); + setSearchData([]); + } + ); + } + return ( <>
@@ -207,7 +217,6 @@ export default function StorePage(): JSX.Element {
@@ -236,28 +245,26 @@ export default function StorePage(): JSX.Element { tags.map((i, idx) => ( { - filteredCategories.has(i) - ? setFilteredCategories((old) => { - let newFilteredCategories = cloneDeep(old); - newFilteredCategories.delete(i); - return newFilteredCategories; - }) - : setFilteredCategories((old) => { - let newFilteredCategories = cloneDeep(old); - newFilteredCategories.add(i); - return newFilteredCategories; - }); + const index = filteredCategories?.indexOf(i.id); + const copyFilterArray = cloneDeep(filteredCategories); + if (index === -1) { + copyFilterArray.push(i.id); + } else { + copyFilterArray.splice(index, 1); + } + setFilterCategories(copyFilterArray); + handleFilterByTags(copyFilterArray); }} variant="gray" size="md" className={cn( "cursor-pointer border-none", - filteredCategories.has(i) + filteredCategories.some((category) => category === i.id) ? "bg-beta-foreground text-background hover:bg-beta-foreground" : "" )} > - {i} + {i.name} ))} @@ -272,8 +279,10 @@ export default function StorePage(): JSX.Element { searchData .filter( (f) => - Array.from(filteredCategories).length === 0 || - filteredCategories.has(f.is_component) + filteredCategories?.length === 0 || + filteredCategories.some( + (category) => category === f.is_component + ) ) .map((item, idx) => ( @@ -282,7 +291,7 @@ export default function StorePage(): JSX.Element { - {renderPagination && ( + {!loading && renderPagination && (