From 1a0d7bd3d40deab48eac08ae6148d5fc490d7aee Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 20 Oct 2023 11:32:00 -0300 Subject: [PATCH] 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 | 82 ++++++++++++++++++++++ src/frontend/src/pages/AdminPage/index.tsx | 1 - src/frontend/src/pages/StorePage/index.tsx | 43 +++++++++--- src/frontend/src/types/api/index.ts | 7 ++ 4 files changed, 123 insertions(+), 10 deletions(-) diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 92006340d..b7acd60d8 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/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> { 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; + } +} diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index f6e17a32a..b81d7a962 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/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 diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index 460258ada..25162272e 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/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(""); 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
- {}}> + { + handleGetComponents(); + }} + >