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

@@ -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}

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) => {

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>
     </>
   );

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;
 };