Change environment variables strategy

src/pages/_app.tsx

@@ -14,7 +14,9 @@ import "../../styles/globals.css";
 import ThemeProvider from "../components/mantine/ThemeProvider";
 import Header from "../components/navBar/NavBar";
 import globalStyle from "../styles/global.style";
+import aw from "../utils/appwrite.util";
 import authUtil, { IsSignedInContext } from "../utils/auth.util";
+import configUtil, { ConfigContext } from "../utils/config.util";
 import { GlobalLoadingContext } from "../utils/loading.util";
 
 function App(props: AppProps & { colorScheme: ColorScheme }) {
@@ -26,13 +28,17 @@ function App(props: AppProps & { colorScheme: ColorScheme }) {
   const [isLoading, setIsLoading] = useState(true);
   const [isSignedIn, setIsSignedIn] = useState(false);
 
-  const checkIfSignedIn = async () => {
+  let environmentVariables: any = {};
+
+  const getInitalData = async () => {
     setIsLoading(true);
+    environmentVariables = await configUtil.getGonfig();
+    aw.setEndpoint(environmentVariables.APPWRITE_HOST);
     setIsSignedIn(await authUtil.isSignedIn());
     setIsLoading(false);
   };
   useEffect(() => {
-    checkIfSignedIn();
+    getInitalData();
   }, []);
 
   return (
@@ -44,13 +50,15 @@ function App(props: AppProps & { colorScheme: ColorScheme }) {
               {isLoading ? (
                 <LoadingOverlay visible overlayOpacity={1} />
               ) : (
-                <IsSignedInContext.Provider value={isSignedIn}>
-                  <LoadingOverlay visible={isLoading} overlayOpacity={1} />
-                  <Header />
-                  <Container>
-                    <Component {...pageProps} />
-                  </Container>
-                </IsSignedInContext.Provider>
+                <ConfigContext.Provider value={environmentVariables}>
+                  <IsSignedInContext.Provider value={isSignedIn}>
+                    <LoadingOverlay visible={isLoading} overlayOpacity={1} />
+                    <Header />
+                    <Container>
+                      <Component {...pageProps} />
+                    </Container>
+                  </IsSignedInContext.Provider>
+                </ConfigContext.Provider>
               )}
             </GlobalLoadingContext.Provider>
           </ModalsProvider>

src/pages/api/config.ts

@@ -0,0 +1,15 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  let publicEnvironmentVariables: any = {};
+  Object.entries(process.env).forEach(([key, value]) => {
+    if (key.startsWith("PUBLIC")) {
+      key = key.replace("PUBLIC_", "");
+      publicEnvironmentVariables[key] = value;
+    }
+  });
+  res.setHeader("cache-control", "max-age=100");
+  res.status(200).json(publicEnvironmentVariables);
+};
+
+export default handler;