From 6577d9c52ca3af89799fe6c19de449e83a356776 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 23 Oct 2023 20:17:26 -0300
Subject: [PATCH] fix(authContext.tsx): remove unused hasApiKey state and
 function to improve code readability feat(authContext.tsx): add storeApiKey
 function to store API key in cookies and update apiKey state
 fix(StoreApiKeyModal/index.tsx): update usage of setApiKey to storeApiKey
 from AuthContext feat(StorePage/index.tsx): add error handling for missing or
 invalid API key and display appropriate error message

---
 src/frontend/src/contexts/authContext.tsx     | 13 +++++-------
 .../src/modals/StoreApiKeyModal/index.tsx     |  4 ++--
 src/frontend/src/pages/StorePage/index.tsx    | 20 ++++++++++++++++---
 src/frontend/src/types/contexts/auth.ts       |  2 +-
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx
index 15dd16676..3d4bd28e9 100644
--- a/src/frontend/src/contexts/authContext.tsx
+++ b/src/frontend/src/contexts/authContext.tsx
@@ -21,7 +21,7 @@ const initialValue: AuthContextType = {
   setAutoLogin: () => {},
   setApiKey: () => {},
   apiKey: null,
-  hasApiKey: false,
+  storeApiKey: () => {},
 };
 
 export const AuthContext = createContext<AuthContextType>(initialValue);
@@ -42,7 +42,6 @@ export function AuthProvider({ children }): React.ReactElement {
   const [apiKey, setApiKey] = useState<string | null>(
     cookies.get("apikey_tkn_lflw")
   );
-  const [hasApiKey, setHasApiKey] = useState<boolean>(false);
 
   useEffect(() => {
     const storedAccessToken = cookies.get("access_tkn_lflw");
@@ -98,10 +97,6 @@ export function AuthProvider({ children }): React.ReactElement {
     return auth;
   }
 
-  function hasApiKeyCheck() {
-    return hasApiKey;
-  }
-
   function login(newAccessToken: string, refreshToken: string) {
     cookies.set("access_tkn_lflw", newAccessToken, { path: "/" });
     cookies.set("refresh_tkn_lflw", refreshToken, { path: "/" });
@@ -113,6 +108,7 @@ export function AuthProvider({ children }): React.ReactElement {
   function logout() {
     cookies.remove("access_tkn_lflw", { path: "/" });
     cookies.remove("refresh_tkn_lflw", { path: "/" });
+    cookies.remove("apikey_tkn_lflw", { path: "/" });
     setIsAdmin(false);
     setUserData(null);
     setAccessToken(null);
@@ -120,8 +116,9 @@ export function AuthProvider({ children }): React.ReactElement {
     setIsAuthenticated(false);
   }
 
-  function apikey(apikey: string) {
+  function storeApiKey(apikey: string) {
     cookies.set("apikey_tkn_lflw", apikey, { path: "/" });
+    setApiKey(apikey);
   }
 
   return (
@@ -143,7 +140,7 @@ export function AuthProvider({ children }): React.ReactElement {
         autoLogin,
         setApiKey,
         apiKey,
-        hasApiKey,
+        storeApiKey,
       }}
     >
       {children}
diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index 5fbeac59e..c2d90fc3a 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -24,7 +24,7 @@ export default function StoreApiKeyModal({
     useState<ApiKeyInputType>(CONTROL_NEW_API_KEY);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const { setApiKey, apiKey } = useContext(AuthContext);
+  const { storeApiKey } = useContext(AuthContext);
 
   function handleInput({
     target: { name, value },
@@ -51,7 +51,7 @@ export default function StoreApiKeyModal({
           setSuccessData({
             title: "Success! Your API Key has been saved.",
           });
-          setApiKey(inputState["apikey"]);
+          storeApiKey(inputState["apikey"]);
           setOpen(false);
         },
         (error) => {
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 612600f83..ab18ad1c0 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -37,6 +37,7 @@ export default function StorePage(): JSX.Element {
   const [filteredCategories, setFilteredCategories] = useState(new Set());
   const [inputText, setInputText] = useState<string>("");
   const [searchData, setSearchData] = useState(data);
+  const [errorApiKey, setErrorApiKey] = useState(false);
   const { setErrorData } = useContext(alertContext);
 
   useEffect(() => {
@@ -49,9 +50,11 @@ export default function StorePage(): JSX.Element {
       .then((res) => {
         console.log(res);
         setLoading(false);
+        setErrorApiKey(false);
       })
       .catch((err) => {
         setLoading(false);
+        setErrorApiKey(true);
         setErrorData({
           title: "Error to get components.",
           list: [err["response"]["data"]["detail"]],
@@ -68,6 +71,11 @@ export default function StorePage(): JSX.Element {
     );
   };
 
+  const loadingWithApiKey = apiKey && loading;
+  const noApiKey = !apiKey;
+  const errorMessage = errorApiKey && !loading;
+  const renderComponents = !loading && !errorApiKey && apiKey;
+
   return (
     <>
       <Header />
@@ -94,7 +102,7 @@ export default function StorePage(): JSX.Element {
         <span className="community-page-description-text">
           Search flows and components from the community.
         </span>
-        {!loading && apiKey && (
+        {renderComponents && (
           <div className="flex w-full flex-col gap-4 p-4">
             <div className="flex items-center justify-center gap-4">
               <div className="flex w-[13%] items-center justify-center gap-3 text-sm">
@@ -192,15 +200,21 @@ export default function StorePage(): JSX.Element {
           </div>
         )}
 
-        {!apiKey && (
+        {noApiKey && (
           <div className="flex w-full flex-col gap-4 p-4">
             Try add an API Key :)
           </div>
         )}
 
-        {apiKey && loading && (
+        {loadingWithApiKey && (
           <div className="flex w-full flex-col gap-4 p-4">Loading...</div>
         )}
+
+        {errorMessage && (
+          <div className="flex w-full flex-col gap-4 p-4">
+            An error has occurred. Please check your API key.
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts
index 602573525..f062181d2 100644
--- a/src/frontend/src/types/contexts/auth.ts
+++ b/src/frontend/src/types/contexts/auth.ts
@@ -16,5 +16,5 @@ export type AuthContextType = {
   setAutoLogin: (autoLogin: boolean) => void;
   apiKey: string | null;
   setApiKey: (apiKey: string | null) => void;
-  hasApiKey: boolean;
+  storeApiKey: (apiKey: string) => void;
 };