🐛 fix(API/index.ts): add missing type annotations and handle null values in getStoreComponents and searchComponent functions

✨ feat(API/index.ts): add support for additional query parameters in getStoreComponents and searchComponent functions to enable filtering and sorting of results
🐛 fix(StorePage/index.tsx): handle null values and update searchData and totalRowsCount in StorePage component to prevent errors and ensure accurate data display
✨ feat(StorePage/index.tsx): add support for sorting by popularity and alphabetical order in handleOrderPage function in StorePage component

src/frontend/src/controllers/API/index.ts

@@ -593,11 +593,36 @@ export async function getFlowsStore(): Promise<AxiosResponse<FlowType[]>> {
 export async function getStoreComponents(
   page: number = 1,
   limit: number = 10,
-  is_component?: boolean | null
+  is_component?: boolean | null,
+  sort?: string | null,
+  tags?: string[] | null,
+  filter_by_user?: boolean | null,
+  status?: string | null,
+  search?: string | null
 ): Promise<StoreComponentResponse | undefined> {
   try {
     let url = `${BASE_URL_API}store/components/`;
     const queryParams: any = [];
+    if (search !== undefined && search !== null) {
+      queryParams.push(`search=${search}`);
+    }
+    if (status !== undefined && status !== null) {
+      queryParams.push(`status=${status}`);
+    }
+    if (tags !== undefined && tags !== null) {
+      queryParams.push(`tags=${tags}`);
+    }
+
+    if (sort !== undefined && sort !== null) {
+      queryParams.push(`sort=${sort}`);
+    } else {
+      queryParams.push(`sort=-count(liked_by)`); // default sort
+    }
+
+    if (filter_by_user !== undefined && filter_by_user !== null) {
+      queryParams.push(`filter_by_user=${filter_by_user}`);
+    }
+
     if (page !== undefined) {
       queryParams.push(`page=${page}`);
     }
@@ -670,23 +695,23 @@ export async function searchComponent(
   limit?: number | null,
   status?: string | null,
   tags?: string[]
-) {
+): Promise<StoreComponentResponse | undefined> {
   try {
-    let url = `${BASE_URL_API}store/search/`;
+    let url = `${BASE_URL_API}store/components/`;
     const queryParams: any = [];
-    if (query !== undefined) {
+    if (query !== undefined && query !== null) {
-      queryParams.push(`query=${query}`);
+      queryParams.push(`search=${query}`);
     }
-    if (page !== undefined) {
+    if (page !== undefined && page !== null) {
       queryParams.push(`page=${page}`);
     }
-    if (limit !== undefined) {
+    if (limit !== undefined && limit !== null) {
       queryParams.push(`limit=${limit}`);
     }
-    if (status !== undefined) {
+    if (status !== undefined && status !== null) {
       queryParams.push(`status=${status}`);
     }
-    if (tags !== undefined) {
+    if (tags !== undefined && tags !== null) {
       queryParams.push(`tags=${tags}`);
     }
     if (queryParams.length > 0) {

src/frontend/src/pages/StorePage/index.tsx

@@ -109,10 +109,11 @@ export default function StorePage(): JSX.Element {
     setLoading(true);
     searchComponent(inputText).then(
       (res) => {
-        setSearchData(res);
+        setSearchData(res?.results ?? []);
+        setTotalRowsCount(Number(res?.count ?? 0));
         setLoading(false);
         setRenderPagination(false);
-        setTotalRowsCount(res.length);
+        setTotalRowsCount(Number(res?.count ?? 0));
       },
       (error) => {
         setLoading(false);
@@ -125,7 +126,7 @@ export default function StorePage(): JSX.Element {
     setRenderPagination(true);
     getStoreComponents(pageIndex, pageSize, filterComponent.current)
       .then((res) => {
-        setSearchData(res);
+        setSearchData(res?.results ?? []);
         setPageIndex(pageIndex);
         setPageSize(pageSize);
         setLoading(false);
@@ -148,9 +149,9 @@ export default function StorePage(): JSX.Element {
     setRenderPagination(false);
     searchComponent(null, 1, 10000, null, filterArray).then(
       (res) => {
-        setSearchData(res);
+        setSearchData(res?.results ?? []);
         setLoading(false);
-        setTotalRowsCount(res.length);
+        setTotalRowsCount(Number(res?.count ?? 0));
       },
       (error) => {
         setLoading(false);
@@ -173,17 +174,12 @@ export default function StorePage(): JSX.Element {
   }
 
   const handleOrderPage = (e) => {
-    let sortedData = cloneDeep(searchData);
+    let sort;
-
     if (e === "Popular") {
-      sortedData = sortedData.sort(
+      sort = "-count(liked_by)";
-        (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));
+      sort = "name";
     }
-
-    setSearchData([...sortedData]);
   };
 
   return (
@@ -290,13 +286,13 @@ export default function StorePage(): JSX.Element {
 
           <div className="flex items-center gap-2 px-2">
             {!loading &&
-              tags.map((i, idx) => (
+              tags.map((tag, idx) => (
                 <Badge
                   onClick={() => {
-                    const index = filteredCategories?.indexOf(i.id);
+                    const index = filteredCategories?.indexOf(tag.name);
                     const copyFilterArray = cloneDeep(filteredCategories);
                     if (index === -1) {
-                      copyFilterArray.push(i.id);
+                      copyFilterArray.push(tag.name);
                     } else {
                       copyFilterArray.splice(index, 1);
                     }
@@ -307,12 +303,12 @@ export default function StorePage(): JSX.Element {
                   size="sq"
                   className={cn(
                     "cursor-pointer",
-                    filteredCategories.some((category) => category === i.id)
+                    filteredCategories.some((category) => category === tag.name)
                       ? "bg-beta-foreground text-background hover:bg-beta-foreground"
                       : ""
                   )}
                 >
-                  {i.name}
+                  {tag.name}
                 </Badge>
               ))}
           </div>