From dcde9b7ae37055b9c63f9d54c31fd33dbfa500c0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 16 Nov 2023 17:16:50 -0300 Subject: [PATCH] Refactored API Key handling --- src/frontend/src/constants/constants.ts | 4 - src/frontend/src/contexts/storeContext.tsx | 58 +++---------- .../src/modals/SecretKeyModal/index.tsx | 25 +----- .../src/modals/StoreApiKeyModal/index.tsx | 57 +++++-------- .../StorePage/components/market-card.tsx | 84 ++----------------- src/frontend/src/pages/StorePage/index.tsx | 58 ++++++------- src/frontend/src/types/components/index.ts | 7 +- src/frontend/src/types/contexts/store.ts | 7 +- 8 files changed, 69 insertions(+), 231 deletions(-) diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index ea01d5ff6..14deec555 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -561,10 +561,6 @@ export const CONTROL_NEW_USER = { is_superuser: false, }; -export const CONTROL_NEW_API_KEY = { - apikeyname: "", -}; - export const tabsCode = []; export function tabsArray(codes: string[], method: number) { diff --git a/src/frontend/src/contexts/storeContext.tsx b/src/frontend/src/contexts/storeContext.tsx index 164f4d0ac..cf39a4407 100644 --- a/src/frontend/src/contexts/storeContext.tsx +++ b/src/frontend/src/contexts/storeContext.tsx @@ -1,34 +1,24 @@ import { createContext, useEffect, useState } from "react"; -import { - checkHasApiKey, - checkHasStore, - getStoreComponents, -} from "../controllers/API"; +import { checkHasApiKey, checkHasStore } from "../controllers/API"; import { storeContextType } from "../types/contexts/store"; //store context to share user components and update them const initialValue = { - savedFlows: new Set(), - setSavedFlows: () => {}, hasStore: true, setHasStore: () => {}, + validApiKey: false, + setValidApiKey: () => {}, hasApiKey: false, setHasApiKey: () => {}, - getSavedComponents: () => {}, - errorApiKey: false, - loadingSaved: false, }; export const StoreContext = createContext(initialValue); export function StoreProvider({ children }) { - const [savedFlows, setSavedFlows] = useState>(new Set()); - const [hasStore, setHasStore] = useState(true); const [hasApiKey, setHasApiKey] = useState(false); + const [validApiKey, setValidApiKey] = useState(false); const [storeChecked, setStoreChecked] = useState(false); - const [loadingSaved, setLoadingSaved] = useState(false); - const [errorApiKey, setErrorApiKey] = useState(false); useEffect(() => { const fetchStoreData = async () => { @@ -43,36 +33,8 @@ export function StoreProvider({ children }) { }; fetchStoreData(); - getSavedComponents(); }, []); - function getSavedComponents() { - setLoadingSaved(true); - getStoreComponents({ - sort: "-count(liked_by)", - filterByUser: true, - }) - .then((data) => { - if (data?.authorized === false) { - setErrorApiKey(true); - setSavedFlows(new Set()); - } else { - let savedIds = new Set(); - let results = data?.results ?? []; - results.forEach((flow) => { - savedIds.add(flow.id); - }); - setSavedFlows(savedIds); - setErrorApiKey(false); - setLoadingSaved(false); - } - }) - .catch((err) => { - setSavedFlows(new Set()); - setErrorApiKey(true); - }); - } - useEffect(() => { const fetchStoreData = async () => { try { @@ -80,26 +42,26 @@ export function StoreProvider({ children }) { const res = await checkHasApiKey(); console.log(res); setHasApiKey(res?.has_api_key ?? false); + if (!res?.has_api_key) { + setValidApiKey(false); + } } catch (e) { console.log(e); } }; fetchStoreData(); - }, [storeChecked]); + }, [storeChecked, validApiKey]); return ( {children} diff --git a/src/frontend/src/modals/SecretKeyModal/index.tsx b/src/frontend/src/modals/SecretKeyModal/index.tsx index 0487d28b8..29f7a529b 100644 --- a/src/frontend/src/modals/SecretKeyModal/index.tsx +++ b/src/frontend/src/modals/SecretKeyModal/index.tsx @@ -3,14 +3,9 @@ import { useContext, useEffect, useRef, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import { Button } from "../../components/ui/button"; import { Input } from "../../components/ui/input"; -import { CONTROL_NEW_API_KEY } from "../../constants/constants"; import { alertContext } from "../../contexts/alertContext"; import { createApiKey } from "../../controllers/API"; -import { - ApiKeyInputType, - ApiKeyType, - inputHandlerEventType, -} from "../../types/components"; +import { ApiKeyType } from "../../types/components"; import { nodeIconsLucide } from "../../utils/styleUtils"; import BaseModal from "../baseModal"; @@ -27,19 +22,11 @@ export default function SecretKeyModal({ const [open, setOpen] = useState(false); const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? ""); const [apiKeyValue, setApiKeyValue] = useState(""); - const [inputState, setInputState] = - useState(CONTROL_NEW_API_KEY); const [renderKey, setRenderKey] = useState(false); const [textCopied, setTextCopied] = useState(true); const { setSuccessData } = useContext(alertContext); const inputRef = useRef(null); - function handleInput({ - target: { name, value }, - }: inputHandlerEventType): void { - setInputState((prev) => ({ ...prev, [name]: value })); - } - useEffect(() => { if (open) { setRenderKey(false); @@ -101,14 +88,7 @@ export default function SecretKeyModal({
- { - setApiKeyValue(event.target.value); - }} - readOnly={true} - value={apiKeyValue} - /> +
@@ -153,7 +133,6 @@ export default function SecretKeyModal({ { - handleInput({ target: { name: "apikeyname", value } }); setApiKeyName(value); }} value={apiKeyName} diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx index c61d57138..04cd2065f 100644 --- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx +++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx @@ -1,57 +1,31 @@ import * as Form from "@radix-ui/react-form"; -import { useContext, useEffect, useRef, useState } from "react"; +import { useContext, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import { Button } from "../../components/ui/button"; import { Input } from "../../components/ui/input"; -import { CONTROL_NEW_API_KEY } from "../../constants/constants"; import { alertContext } from "../../contexts/alertContext"; import { AuthContext } from "../../contexts/authContext"; import { StoreContext } from "../../contexts/storeContext"; import { addApiKeyStore } from "../../controllers/API"; -import { - ApiKeyInputType, - StoreApiKeyType, - inputHandlerEventType, -} from "../../types/components"; +import { StoreApiKeyType } from "../../types/components"; import BaseModal from "../baseModal"; -export default function StoreApiKeyModal({ - children, - onCloseModal, -}: StoreApiKeyType) { +export default function StoreApiKeyModal({ children }: StoreApiKeyType) { const [open, setOpen] = useState(false); - const [inputState, setInputState] = - useState(CONTROL_NEW_API_KEY); const { setSuccessData, setErrorData } = useContext(alertContext); - const inputRef = useRef(null); const { storeApiKey } = useContext(AuthContext); - const { hasApiKey } = useContext(StoreContext); - const [apiKeyValue, setApiKeyValue] = useState( - hasApiKey ? "This is not a real api key." : "" - ); - - function handleInput({ - target: { name, value }, - }: inputHandlerEventType): void { - setInputState((prev) => ({ ...prev, [name]: value })); - } - - useEffect(() => { - if (open) { - // resetForm(); - } else { - onCloseModal(); - } - }, [open]); + const { hasApiKey, setHasApiKey, validApiKey } = useContext(StoreContext); + const [apiKeyValue, setApiKeyValue] = useState(""); const handleSaveKey = () => { - if (inputState && inputState["apikey"]) { - addApiKeyStore(inputState["apikey"]).then( + if (apiKeyValue) { + addApiKeyStore(apiKeyValue).then( () => { setSuccessData({ title: "Success! Your API Key has been saved.", }); - storeApiKey(inputState["apikey"]); + storeApiKey(apiKeyValue); + setHasApiKey(true); setOpen(false); }, (error) => { @@ -67,7 +41,15 @@ export default function StoreApiKeyModal({ return ( {children} - + API Key
- +
{ - handleInput({ target: { name: "apikey", value } }); setApiKeyValue(value); }} placeholder="Insert your API Key" diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx index 2fdd17c94..3f2c250dc 100644 --- a/src/frontend/src/pages/StorePage/components/market-card.tsx +++ b/src/frontend/src/pages/StorePage/components/market-card.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect, useState } from "react"; +import { useContext, useState } from "react"; import { useNavigate } from "react-router-dom"; import ShadTooltip from "../../../components/ShadTooltipComponent"; import IconComponent from "../../../components/genericIconComponent"; @@ -13,12 +13,7 @@ import { } from "../../../components/ui/card"; import { alertContext } from "../../../contexts/alertContext"; import { FlowsContext } from "../../../contexts/flowsContext"; -import { StoreContext } from "../../../contexts/storeContext"; -import { - getComponent, - postLikeComponent, - saveFlowStore, -} from "../../../controllers/API"; +import { getComponent, postLikeComponent } from "../../../controllers/API"; import { storeComponent } from "../../../types/store"; import cloneFLowWithParent from "../../../utils/storeUtils"; import { gradients } from "../../../utils/styleUtils"; @@ -28,16 +23,11 @@ export const MarketCardComponent = ({ data, authorized = true, disabled = false, - installable = false, }: { data: storeComponent; authorized?: boolean; disabled?: boolean; - installable?: boolean; }) => { - const { savedFlows } = useContext(StoreContext); - const [added, setAdded] = useState(savedFlows.has(data.id) ? true : false); - const [installed, setInstalled] = useState(false); const [loading, setLoading] = useState(false); const { addFlow } = useContext(FlowsContext); const [loadingLike, setLoadingLike] = useState(false); @@ -47,40 +37,6 @@ export const MarketCardComponent = ({ const name = data.is_component ? "Component" : "Flow"; - useEffect(() => { - setAdded(savedFlows.has(data.id) ? true : false); - }, [savedFlows]); - - function handleAdd() { - setLoading(true); - getComponent(data.id).then( - (res) => { - console.log(res); - const newFLow = cloneFLowWithParent(res, res.id, data.is_component); - console.log(newFLow); - saveFlowStore( - newFLow, - data.tags.map((tag) => tag.id) - ) - .then(() => { - setAdded(true); - setLoading(false); - setSuccessData({ title: `${name} added to account.` }); - }) - .catch((error) => { - console.error(error); - setErrorData({ - title: `Error on adding ${name}`, - list: [error["response"]["data"]["detail"]], - }); - }); - }, - (error) => { - console.log(error); - } - ); - } - const navigate = useNavigate(); function handleInstall() { @@ -90,7 +46,6 @@ export const MarketCardComponent = ({ addFlow(true, newFlow).then((id) => { setSuccessData({ title: `${name} Installed` }); setLoading(false); - setInstalled(true); if (!data.is_component) navigate("/flow/" + id); }); }); @@ -290,13 +245,7 @@ export const MarketCardComponent = ({