feat(API): add new functions to interact with store components

- Added new functions `getStoreComponents`, `postStoreComponents`, `getComponent`, and `searchComponent` to the `API` controller module.
- `getStoreComponents` function retrieves a list of store components from the API.
- `postStoreComponents` function posts a new store component to the API.
- `getComponent` function retrieves a specific store component by its ID from the API.
- `searchComponent` function searches for store components based on various parameters such as query, page, limit, status, and tags.

fix(AdminPage): remove unnecessary line

- Removed an unnecessary line of code in the `AdminPage` component.

feat(StorePage): add functionality to get and search store components

- Added functionality to the `StorePage` component to get store components and perform a search.
- Added a new import statement for the `getStoreComponents` and `searchComponent` functions from the `API` controller module.
- Added a new state variable `searchData` to store the search results.
- Added a new state variable `inputText` to store the search input text.
- Added a new function `handleGetComponents` to fetch store components from the API.
- Added a new function `handleSearch` to perform a search based on the input text.
- Modified the `onChange` event handler of the search input to update the `inputText` state and trigger the search.
- Added a call to `handleGetComponents` in the `StoreApiKeyModal` component's `onCloseModal` event handler to refresh the store components after closing the modal.

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

@@ -4,6 +4,7 @@ import { BASE_URL_API } from "../../constants/constants";
 import { api } from "../../controllers/API/api";
 import {
   APIObjectType,
+  Component,
   LoginType,
   Users,
   changeUser,
@@ -579,3 +580,84 @@ export async function saveFlowStore(newFlow: {
 export async function getFlowsStore(): Promise<AxiosResponse<FlowType[]>> {
   return await api.get(`${BASE_URL_API}store/`);
 }
+
+export async function getStoreComponents(page: number = 1, limit: number = 10) {
+  try {
+    const res = await api.get(
+      `${BASE_URL_API}store/components/?page=${page}&limit=${limit}`
+    );
+    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);
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
+
+export async function getComponent(component_id: string) {
+  try {
+    const res = await api.get(
+      `${BASE_URL_API}store/components/${component_id}`
+    );
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
+
+export async function searchComponent(
+  query: string,
+  page?: number,
+  limit?: number,
+  status?: string,
+  tags?: [string]
+) {
+  try {
+    debugger;
+    let url = `${BASE_URL_API}store/search/`;
+    const queryParams: any = [];
+    if (query !== undefined) {
+      queryParams.push(`query=${query}`);
+    }
+    if (page !== undefined) {
+      queryParams.push(`page=${page}`);
+    }
+    if (limit !== undefined) {
+      queryParams.push(`limit=${limit}`);
+    }
+    if (status !== undefined) {
+      queryParams.push(`status=${status}`);
+    }
+    if (tags !== undefined) {
+      queryParams.push(`tags=${tags}`);
+    }
+    if (queryParams.length > 0) {
+      url += `?${queryParams.join("&")}`;
+    }
+
+    const res = await api.get(url);
+
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}

src/frontend/src/pages/AdminPage/index.tsx

@@ -43,7 +43,6 @@ export default function AdminPage() {
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const { userData } = useContext(AuthContext);
   const [totalRowsCount, setTotalRowsCount] = useState(0);
-
   const { setTabId } = useContext(TabsContext);
 
   // set null id

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

@@ -14,7 +14,9 @@ import {
   SelectValue,
 } from "../../components/ui/select";
 import { Switch } from "../../components/ui/switch";
+import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { getStoreComponents, searchComponent } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { FlowComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
@@ -33,20 +35,36 @@ export default function StorePage(): JSX.Element {
   const [filteredCategories, setFilteredCategories] = useState(new Set());
   const [inputText, setInputText] = useState<string>("");
   const [searchData, setSearchData] = useState(data);
+  const { setErrorData } = useContext(alertContext);
 
   useEffect(() => {
-    setLoading(false);
-    /* getComponents()
+    handleGetComponents();
+  }, []);
+
+  const handleGetComponents = () => {
+    setLoading(true);
+    getStoreComponents(1, 10)
       .then((res) => {
-        setData(res);
-        setSearchData(res);
-        setDataSelect(res);
+        console.log(res);
         setLoading(false);
       })
       .catch((err) => {
         setLoading(false);
-      }); */
-  }, []);
+        setErrorData({
+          title: "Error on delete user",
+          list: [err["response"]["data"]["detail"]],
+        });
+      });
+  };
+
+  const handleSearch = (inputText: string) => {
+    searchComponent(inputText).then(
+      (res) => {
+        console.log(res);
+      },
+      (error) => {}
+    );
+  };
 
   return (
     <>
@@ -59,7 +77,11 @@ export default function StorePage(): JSX.Element {
             Langflow Store
           </span>
           <div className="community-page-nav-button">
-            <StoreApiKeyModal onCloseModal={() => {}}>
+            <StoreApiKeyModal
+              onCloseModal={() => {
+                handleGetComponents();
+              }}
+            >
               <Button variant="primary">
                 <IconComponent name="Key" className="main-page-nav-button" />
                 API Key
@@ -80,7 +102,10 @@ export default function StorePage(): JSX.Element {
                 <Input
                   placeholder="Search Flows and Components"
                   className="absolute h-12 px-5"
-                  onChange={(e) => {}}
+                  onChange={(e) => {
+                    setInputText(e.target.value);
+                    handleSearch(e.target.value);
+                  }}
                   value={inputText}
                 />
                 <Search className="absolute bottom-0 right-4 top-0 my-auto h-6 stroke-1 text-muted-foreground " />

src/frontend/src/types/api/index.ts

@@ -119,3 +119,10 @@ export type Users = {
   create_at: Date;
   updated_at: Date;
 };
+
+export type Component = {
+  name: string;
+  description: string;
+  data: Object;
+  tags: [string];
+};