diff --git a/src/frontend/index.html b/src/frontend/index.html index c99fd9f2f..7837ad39f 100644 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -1,4 +1,4 @@ - + diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 811237487..ed2b933c3 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -31,6 +31,7 @@ "@tabler/icons-react": "^3.6.0", "@tailwindcss/forms": "^0.5.7", "@tailwindcss/line-clamp": "^0.4.4", + "@tanstack/react-query": "^5.49.2", "@types/axios": "^0.14.0", "ace-builds": "^1.35.0", "ag-grid-community": "^31.3.2", @@ -78,6 +79,7 @@ "tailwindcss-animate": "^1.0.7", "uuid": "^10.0.0", "vite-plugin-svgr": "^4.2.0", + "vite-tsconfig-paths": "^4.3.2", "web-vitals": "^4.1.1", "zod": "^3.23.8", "zustand": "^4.5.2" @@ -4260,6 +4262,30 @@ "tailwindcss": ">=3.0.0 || insiders" } }, + "node_modules/@tanstack/query-core": { + "version": "5.49.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.49.1.tgz", + "integrity": "sha512-JnC9ndmD1KKS01Rt/ovRUB1tmwO7zkyXAyIxN9mznuJrcNtOrkmOnQqdJF2ib9oHzc2VxHomnEG7xyfo54Npkw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.49.2", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.49.2.tgz", + "integrity": "sha512-6rfwXDK9BvmHISbNFuGd+wY3P44lyW7lWiA9vIFGT/T0P9aHD1VkjTvcM4SDAIbAQ9ygEZZoLt7dlU1o3NjMVA==", + "dependencies": { + "@tanstack/query-core": "5.49.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@tanstack/react-virtual": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.5.0.tgz", @@ -7881,6 +7907,11 @@ "node": ">=4" } }, + "node_modules/globrex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==" + }, "node_modules/got": { "version": "11.8.6", "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz", @@ -13946,6 +13977,25 @@ "code-block-writer": "^12.0.0" } }, + "node_modules/tsconfck": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.1.tgz", + "integrity": "sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==", + "bin": { + "tsconfck": "bin/tsconfck.js" + }, + "engines": { + "node": "^18 || >=20" + }, + "peerDependencies": { + "typescript": "^5.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/tsconfig-paths": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz", @@ -14453,6 +14503,24 @@ "vite": "^2.6.0 || 3 || 4 || 5" } }, + "node_modules/vite-tsconfig-paths": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz", + "integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==", + "dependencies": { + "debug": "^4.1.1", + "globrex": "^0.1.2", + "tsconfck": "^3.0.3" + }, + "peerDependencies": { + "vite": "*" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, "node_modules/vite/node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index 42752d9c4..0b29f0c70 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -26,6 +26,7 @@ "@tabler/icons-react": "^3.6.0", "@tailwindcss/forms": "^0.5.7", "@tailwindcss/line-clamp": "^0.4.4", + "@tanstack/react-query": "^5.49.2", "@types/axios": "^0.14.0", "ace-builds": "^1.35.0", "ag-grid-community": "^31.3.2", @@ -73,6 +74,7 @@ "tailwindcss-animate": "^1.0.7", "uuid": "^10.0.0", "vite-plugin-svgr": "^4.2.0", + "vite-tsconfig-paths": "^4.3.2", "web-vitals": "^4.1.1", "zod": "^3.23.8", "zustand": "^4.5.2" @@ -133,4 +135,4 @@ "ua-parser-js": "^1.0.38", "vite": "^5.3.1" } -} \ No newline at end of file +} diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 1a7178248..02f24e039 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -1,12 +1,10 @@ +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { useContext, useEffect, useState } from "react"; import { ErrorBoundary } from "react-error-boundary"; import { useNavigate } from "react-router-dom"; import "reactflow/dist/style.css"; import "./App.css"; import AlertDisplayArea from "./alerts/displayArea"; -import ErrorAlert from "./alerts/error"; -import NoticeAlert from "./alerts/notice"; -import SuccessAlert from "./alerts/success"; import CrashErrorComponent from "./components/crashErrorComponent"; import FetchErrorComponent from "./components/fetchErrorComponent"; import LoadingComponent from "./components/loadingComponent"; @@ -24,9 +22,10 @@ import useAlertStore from "./stores/alertStore"; import { useDarkStore } from "./stores/darkStore"; import useFlowsManagerStore from "./stores/flowsManagerStore"; import { useFolderStore } from "./stores/foldersStore"; -import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables"; -import { useStoreStore } from "./stores/storeStore"; + export default function App() { + const queryClient = new QueryClient(); + useTrackLastVisitedPath(); const [fetchError, setFetchError] = useState(false); @@ -35,13 +34,8 @@ export default function App() { const { isAuthenticated, login, setUserData, setAutoLogin, getUser } = useContext(AuthContext); const setLoading = useAlertStore((state) => state.setLoading); - const fetchApiData = useStoreStore((state) => state.fetchApiData); const refreshVersion = useDarkStore((state) => state.refreshVersion); const refreshStars = useDarkStore((state) => state.refreshStars); - const setGlobalVariables = useGlobalVariablesStore( - (state) => state.setGlobalVariables, - ); - const checkHasStore = useStoreStore((state) => state.checkHasStore); const navigate = useNavigate(); const dark = useDarkStore((state) => state.dark); @@ -160,36 +154,38 @@ export default function App() { return ( //need parent component with width and height
- { - // any reset function - }} - FallbackComponent={CrashErrorComponent} - > - <> - { - { - checkApplicationHealth(); - }} - isLoadingHealth={isLoadingHealth} - > - } + + { + // any reset function + }} + FallbackComponent={CrashErrorComponent} + > + <> + { + { + checkApplicationHealth(); + }} + isLoadingHealth={isLoadingHealth} + > + } - -
- -
- + +
+ +
+ - - - - - + + + + + +
diff --git a/src/frontend/src/controllers/API/helpers/constants.ts b/src/frontend/src/controllers/API/helpers/constants.ts new file mode 100644 index 000000000..bfcfc7a42 --- /dev/null +++ b/src/frontend/src/controllers/API/helpers/constants.ts @@ -0,0 +1,14 @@ +import { BASE_URL_API } from "../../../constants/constants"; + +export const URLs = { + TRANSACTIONS: `monitor/transactions`, + API_KEY: `api_key`, +} as const; + +export function getURL(key: keyof typeof URLs, params: any = {}) { + let url = URLs[key]; + Object.keys(params).forEach((key) => (url += `/${params[key]}`)); + return `${BASE_URL_API}${url.toString()}`; +} + +export type URLsType = typeof URLs; diff --git a/src/frontend/src/controllers/API/queries/api-keys/index.ts b/src/frontend/src/controllers/API/queries/api-keys/index.ts new file mode 100644 index 000000000..e59061a6a --- /dev/null +++ b/src/frontend/src/controllers/API/queries/api-keys/index.ts @@ -0,0 +1 @@ +export * from "./use-post-add-api-key"; diff --git a/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts b/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts new file mode 100644 index 000000000..dce822647 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts @@ -0,0 +1,45 @@ +import { useMutationFunctionType } from "@/types/api"; +import { UseMutationResult } from "@tanstack/react-query"; +import { api } from "../../api"; +import { getURL } from "../../helpers/constants"; +import { UseRequestProcessor } from "../../services/request-processor"; + +interface IPostAddApiKey { + key: string; +} + +// add types for error handling and success +export const usePostAddApiKey: useMutationFunctionType = ({ + callbackSuccess, + callbackError, +}) => { + const { mutate } = UseRequestProcessor(); + + const postAddApiKeyFn = async (payload: IPostAddApiKey): Promise => { + return await api.post(`${getURL("API_KEY")}/store`, { + api_key: payload.key, + }); + }; + + const mutation: UseMutationResult = mutate( + ["usePostAddApiKey"], + async (payload: IPostAddApiKey) => { + const res = await postAddApiKeyFn(payload); + return res.data; + }, + { + onError: (err) => { + if (callbackError) { + callbackError(err); + } + }, + onSuccess: (data) => { + if (callbackSuccess) { + callbackSuccess(data); + } + }, + }, + ); + + return mutation; +}; diff --git a/src/frontend/src/controllers/API/queries/transactions/index.ts b/src/frontend/src/controllers/API/queries/transactions/index.ts new file mode 100644 index 000000000..30b8b1c49 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/transactions/index.ts @@ -0,0 +1 @@ +export * from "./use-get-transactions"; diff --git a/src/frontend/src/controllers/API/queries/transactions/use-get-transactions.ts b/src/frontend/src/controllers/API/queries/transactions/use-get-transactions.ts new file mode 100644 index 000000000..f99e81f32 --- /dev/null +++ b/src/frontend/src/controllers/API/queries/transactions/use-get-transactions.ts @@ -0,0 +1,67 @@ +import { keepPreviousData } from "@tanstack/react-query"; +import { ColDef, ColGroupDef } from "ag-grid-community"; +import { useQueryFunctionType } from "../../../../types/api"; +import { extractColumnsFromRows } from "../../../../utils/utils"; +import { api } from "../../api"; +import { getURL } from "../../helpers/constants"; +import { UseRequestProcessor } from "../../services/request-processor"; + +interface TransactionsQueryParams { + id: string; + params?: Record; +} + +interface TransactionsResponse { + rows: Array; + columns: Array; +} + +export const useGetTransactionsQuery: useQueryFunctionType< + TransactionsQueryParams, + TransactionsResponse +> = ({ id, params }, onFetch) => { + const { query } = UseRequestProcessor(); + + const responseFn = (data: any) => { + if (!onFetch) return data; + if (typeof onFetch === "function") return onFetch(data); + switch (onFetch) { + case "TableUnion": { + const columns = extractColumnsFromRows(data.data, "union"); + return { rows: data.data, columns }; + } + case "TableIntersection": { + const columns = extractColumnsFromRows(data.data, "intersection"); + return { rows: data.data, columns }; + } + default: + return data; + } + }; + + const getTransactionsFn = async (id: string, params = {}) => { + const config = {}; + config["params"] = { flow_id: id }; + if (params) { + config["params"] = { ...config["params"], ...params }; + } + + return await api.get( + `${getURL("TRANSACTIONS")}`, + config, + ); + }; + + const queryResult = query( + ["useGetTransactionsQuery"], + async () => { + const rows = await getTransactionsFn(id, params); + return responseFn(rows); + }, + { + placeholderData: keepPreviousData, + }, + ); + + return queryResult; +}; diff --git a/src/frontend/src/controllers/API/services/request-processor.ts b/src/frontend/src/controllers/API/services/request-processor.ts new file mode 100644 index 000000000..bb85301db --- /dev/null +++ b/src/frontend/src/controllers/API/services/request-processor.ts @@ -0,0 +1,28 @@ +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { MutationFunctionType, QueryFunctionType } from "../../../types/api"; + +export function UseRequestProcessor(): { + query: QueryFunctionType; + mutate: MutationFunctionType; +} { + const queryClient = useQueryClient(); + + function query(queryKey, queryFn, options = {}) { + return useQuery({ + queryKey, + queryFn, + ...options, + }); + } + + function mutate(mutationKey, mutationFn, options = {}) { + return useMutation({ + mutationKey, + mutationFn, + onSettled: () => queryClient.invalidateQueries(mutationKey), + ...options, + }); + } + + return { query, mutate }; +} diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx index 9412389d0..6cab4efd3 100644 --- a/src/frontend/src/modals/flowLogsModal/index.tsx +++ b/src/frontend/src/modals/flowLogsModal/index.tsx @@ -1,8 +1,8 @@ +import { useGetTransactionsQuery } from "@/controllers/API/queries/transactions"; import { ColDef, ColGroupDef } from "ag-grid-community"; import { useEffect, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import TableComponent from "../../components/tableComponent"; -import { getTransactionTable } from "../../controllers/API"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; import { FlowSettingsPropsType } from "../../types/components"; import BaseModal from "../baseModal"; @@ -16,13 +16,21 @@ export default function FlowLogsModal({ const [columns, setColumns] = useState>([]); const [rows, setRows] = useState([]); + const { data, isLoading, refetch } = useGetTransactionsQuery( + { + id: currentFlowId, + }, + "TableUnion", + ); + useEffect(() => { - getTransactionTable(currentFlowId, "union").then((data) => { + if (data) { const { columns, rows } = data; setColumns(columns.map((col) => ({ ...col, editable: true }))); setRows(rows); - }); - }, [open]); + } + if (open) refetch(); + }, [data, open, isLoading]); return ( diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx index 239103777..a9b7bce45 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx @@ -1,4 +1,5 @@ -import { useContext, useState } from "react"; +import { usePostAddApiKey } from "@/controllers/API/queries/api-keys"; +import { useContext, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import { CONTROL_PATCH_USER_STATE } from "../../../../constants/constants"; import { AuthContext } from "../../../../contexts/authContext"; @@ -11,7 +12,6 @@ import { } from "../../../../types/components"; import usePatchPassword from "../hooks/use-patch-password"; import usePatchProfilePicture from "../hooks/use-patch-profile-picture"; -import useSaveKey from "../hooks/use-save-key"; import useScrollToElement from "../hooks/use-scroll-to-element"; import GeneralPageHeaderComponent from "./components/GeneralPageHeader"; import PasswordFormComponent from "./components/PasswordForm"; @@ -19,7 +19,7 @@ import ProfilePictureFormComponent from "./components/ProfilePictureForm"; import useGetProfilePictures from "./components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures"; import StoreApiKeyFormComponent from "./components/StoreApiKeyForm"; -export default function GeneralPage() { +export const GeneralPage = () => { const setCurrentFlowId = useFlowsManagerStore( (state) => state.setCurrentFlowId, ); @@ -36,14 +36,15 @@ export default function GeneralPage() { const setErrorData = useAlertStore((state) => state.setErrorData); const { userData, setUserData } = useContext(AuthContext); const hasStore = useStoreStore((state) => state.hasStore); - const validApiKey = useStoreStore((state) => state.validApiKey); const hasApiKey = useStoreStore((state) => state.hasApiKey); - const setHasApiKey = useStoreStore((state) => state.updateHasApiKey); const loadingApiKey = useStoreStore((state) => state.loadingApiKey); + const { password, cnfPassword, profilePicture, apikey } = inputState; + + const { storeApiKey } = useContext(AuthContext); + const setHasApiKey = useStoreStore((state) => state.updateHasApiKey); const setValidApiKey = useStoreStore((state) => state.updateValidApiKey); const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey); - const { password, cnfPassword, profilePicture, apikey } = inputState; const { handlePatchPassword } = usePatchPassword( userData, @@ -62,13 +63,31 @@ export default function GeneralPage() { useScrollToElement(scrollId, setCurrentFlowId); - const { handleSaveKey } = useSaveKey( - setSuccessData, - setErrorData, - setHasApiKey, - setValidApiKey, - setLoadingApiKey, - ); + const { mutate } = usePostAddApiKey({ + callbackSuccess: () => { + setSuccessData({ title: "API key saved successfully" }); + setHasApiKey(true); + setValidApiKey(true); + setLoadingApiKey(false); + handleInput({ target: { name: "apikey", value: "" } }); + }, + callbackError: (error) => { + setErrorData({ + title: "API key save error", + list: [(error as any)?.response?.data?.detail], + }); + setHasApiKey(false); + setValidApiKey(false); + setLoadingApiKey(false); + }, + }); + + const handleSaveKey = (apikey: string) => { + if (apikey) { + mutate({ key: apikey }); + storeApiKey(apikey); + } + }; function handleInput({ target: { name, value }, @@ -110,4 +129,6 @@ export default function GeneralPage() { ); -} +}; + +export default GeneralPage; diff --git a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx b/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx deleted file mode 100644 index 4f87405c3..000000000 --- a/src/frontend/src/pages/SettingsPage/pages/hooks/use-save-key.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useContext } from "react"; -import { - API_ERROR_ALERT, - API_SUCCESS_ALERT, -} from "../../../../constants/alerts_constants"; -import { AuthContext } from "../../../../contexts/authContext"; -import { addApiKeyStore } from "../../../../controllers/API"; - -const useSaveKey = ( - setSuccessData: (data: { title: string }) => void, - setErrorData: (data: { title: string; list: string[] }) => void, - setHasApiKey: (hasApiKey: boolean) => void, - setValidApiKey: (validApiKey: boolean) => void, - setLoadingApiKey: (loadingApiKey: boolean) => void, -) => { - const { storeApiKey } = useContext(AuthContext); - - const handleSaveKey = (apikey, handleInput) => { - if (apikey) { - setLoadingApiKey(true); - addApiKeyStore(apikey).then( - () => { - setSuccessData({ title: API_SUCCESS_ALERT }); - storeApiKey(apikey); - setHasApiKey(true); - setValidApiKey(true); - setLoadingApiKey(false); - handleInput({ target: { name: "apikey", value: "" } }); - }, - (error) => { - setErrorData({ - title: API_ERROR_ALERT, - list: [error.response.data.detail], - }); - setHasApiKey(false); - setValidApiKey(false); - setLoadingApiKey(false); - }, - ); - } - }; - - return { - handleSaveKey, - }; -}; - -export default useSaveKey; diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts index f5f354805..c8f9739b5 100644 --- a/src/frontend/src/types/api/index.ts +++ b/src/frontend/src/types/api/index.ts @@ -1,3 +1,10 @@ +import { + MutationFunction, + UndefinedInitialDataOptions, + UseMutationOptions, + UseMutationResult, + UseQueryResult, +} from "@tanstack/react-query"; import { Edge, Node, Viewport } from "reactflow"; import { ChatInputType, ChatOutputType } from "../chat"; import { FlowType } from "../flow"; @@ -225,3 +232,28 @@ export type ResponseErrorTypeAPI = { export type ResponseErrorDetailAPI = { response: { data: { detail: string } }; }; + +export type useQueryFunctionType = ( + props: T, + onFetch?: ((data: R) => void) | string, +) => UseQueryResult; + +export type QueryFunctionType = ( + queryKey: UndefinedInitialDataOptions["queryKey"], + queryFn: UndefinedInitialDataOptions["queryFn"], + options?: Omit, +) => UseQueryResult; + +export type MutationFunctionType = ( + mutationKey: UseMutationOptions["mutationKey"], + mutationFn: MutationFunction, + options?: Omit, "mutationFn" | "mutationKey">, +) => UseMutationResult; + +export type useMutationFunctionType = ({ + callbackError, + callbackSuccess, +}: { + callbackSuccess: (data: Data) => void; + callbackError: (err: Error) => void; +}) => UseMutationResult; diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json index 52a6d1325..fafa30935 100644 --- a/src/frontend/tsconfig.json +++ b/src/frontend/tsconfig.json @@ -15,7 +15,12 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", - "noImplicitAny": false + "noImplicitAny": false, + "paths": { + "@/*": ["*"], + "@queries/*": ["controllers/API/queries/*"] + }, + "baseUrl": "src" }, "include": [ "src", diff --git a/src/frontend/vite.config.mts b/src/frontend/vite.config.mts index 25e089c78..c52b05777 100644 --- a/src/frontend/vite.config.mts +++ b/src/frontend/vite.config.mts @@ -3,6 +3,7 @@ import dotenv from "dotenv"; import path from "path"; import { defineConfig } from "vite"; import svgr from "vite-plugin-svgr"; +import tsconfigPaths from "vite-tsconfig-paths"; export default defineConfig(({ mode }) => { dotenv.config({ path: path.resolve(__dirname, "../../.env") }); @@ -32,7 +33,7 @@ export default defineConfig(({ mode }) => { define: { "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL), }, - plugins: [react(), svgr()], + plugins: [react(), svgr(), tsconfigPaths()], server: { port: port, proxy: {