feat(authContext.tsx): add support for storing and retrieving API key in the auth context

fix(StoreApiKeyModal/index.tsx): set API key in the auth context when it is saved
fix(StorePage/index.tsx): display a message to add an API key if it is not present in the auth context
fix(StorePage/index.tsx): display a loading message while fetching data if API key is present in the auth context

src/frontend/src/contexts/authContext.tsx

@@ -19,6 +19,9 @@ const initialValue: AuthContextType = {
   authenticationErrorCount: 0,
   autoLogin: false,
   setAutoLogin: () => {},
+  setApiKey: () => {},
+  apiKey: null,
+  hasApiKey: false,
 };
 
 export const AuthContext = createContext<AuthContextType>(initialValue);
@@ -36,6 +39,11 @@ export function AuthProvider({ children }): React.ReactElement {
   const [userData, setUserData] = useState<Users | null>(null);
   const [autoLogin, setAutoLogin] = useState<boolean>(false);
   const { setLoading } = useContext(alertContext);
+  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");
     if (storedAccessToken) {
@@ -43,6 +51,13 @@ export function AuthProvider({ children }): React.ReactElement {
     }
   }, []);
 
+  useEffect(() => {
+    const apiKey = cookies.get("apikey_tkn_lflw");
+    if (apiKey) {
+      setApiKey(apiKey);
+    }
+  }, []);
+
   useEffect(() => {
     const isLoginPage = location.pathname.includes("login");
 
@@ -83,6 +98,10 @@ 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: "/" });
@@ -101,6 +120,10 @@ export function AuthProvider({ children }): React.ReactElement {
     setIsAuthenticated(false);
   }
 
+  function apikey(apikey: string) {
+    cookies.set("apikey_tkn_lflw", apikey, { path: "/" });
+  }
+
   return (
     // !! to convert string to boolean
     <AuthContext.Provider
@@ -118,6 +141,9 @@ export function AuthProvider({ children }): React.ReactElement {
         authenticationErrorCount: 0,
         setAutoLogin,
         autoLogin,
+        setApiKey,
+        apiKey,
+        hasApiKey,
       }}
     >
       {children}

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -5,6 +5,7 @@ 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 { addApiKeyStore } from "../../controllers/API";
 import {
   ApiKeyInputType,
@@ -23,6 +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);
 
   function handleInput({
     target: { name, value },
@@ -49,6 +51,7 @@ export default function StoreApiKeyModal({
           setSuccessData({
             title: "Success! Your API Key has been saved.",
           });
+          setApiKey(inputState["apikey"]);
           setOpen(false);
         },
         (error) => {

src/frontend/src/pages/StorePage/index.tsx

@@ -15,6 +15,7 @@ import {
 } from "../../components/ui/select";
 import { Switch } from "../../components/ui/switch";
 import { alertContext } from "../../contexts/alertContext";
+import { AuthContext } from "../../contexts/authContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { getStoreComponents, searchComponent } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
@@ -24,6 +25,8 @@ import { MarketCardComponent } from "./components/market-card";
 export default function StorePage(): JSX.Element {
   const { setTabId } = useContext(TabsContext);
 
+  const { setApiKey, apiKey } = useContext(AuthContext);
+
   // set null id
   useEffect(() => {
     setTabId("");
@@ -91,7 +94,7 @@ export default function StorePage(): JSX.Element {
         <span className="community-page-description-text">
           Search flows and components from the community.
         </span>
-        {!loading && (
+        {!loading && apiKey && (
           <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">
@@ -188,6 +191,16 @@ export default function StorePage(): JSX.Element {
             </div>
           </div>
         )}
+
+        {!apiKey && (
+          <div className="flex w-full flex-col gap-4 p-4">
+            Try add an API Key :)
+          </div>
+        )}
+
+        {apiKey && loading && (
+          <div className="flex w-full flex-col gap-4 p-4">Loading...</div>
+        )}
       </div>
     </>
   );

src/frontend/src/types/contexts/auth.ts

@@ -14,4 +14,7 @@ export type AuthContextType = {
   authenticationErrorCount: number;
   autoLogin: boolean;
   setAutoLogin: (autoLogin: boolean) => void;
+  apiKey: string | null;
+  setApiKey: (apiKey: string | null) => void;
+  hasApiKey: boolean;
 };