Change environment variables strategy

src/components/upload/Dropzone.tsx

@@ -10,6 +10,7 @@ import {
 import { Dropzone as MantineDropzone, DropzoneStatus } from "@mantine/dropzone";
 import React, { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
 import { CloudUpload, Upload } from "tabler-icons-react";
+import { useConfig } from "../../utils/config.util";
 import toast from "../../utils/toast.util";
 
 const useStyles = createStyles((theme) => ({
@@ -52,13 +53,14 @@ const Dropzone = ({
   setFiles: Dispatch<SetStateAction<File[]>>;
 }) => {
   const theme = useMantineTheme();
+  const config = useConfig()
   const { classes } = useStyles();
   const openRef = useRef<() => void>();
 
   return (
     <div className={classes.wrapper}>
       <MantineDropzone
-        maxSize={parseInt(process.env["NEXT_PUBLIC_MAX_FILE_SIZE"] as string)}
+        maxSize={parseInt(config.APPWRITE_HOST)}
         onReject={(e) => {
           toast.error(e[0].errors[0].message);
         }}

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;

src/utils/appwrite.util.ts

@@ -3,7 +3,6 @@ import { Appwrite } from "appwrite";
 // SDK for client side (browser)
 const aw = new Appwrite();
 
-aw.setEndpoint(process.env["NEXT_PUBLIC_APPWRITE_HOST"] as string)
-  .setProject("pingvin-share");
+aw.setProject("pingvin-share");
 
 export default aw;

src/utils/appwriteServer.util.ts

@@ -5,7 +5,7 @@ const client = new sdk.Client();
 
 client
   .setEndpoint(
-    (process.env["NEXT_PUBLIC_APPWRITE_HOST"] as string).replace(
+    (process.env["PUBLIC_APPWRITE_HOST"] as string).replace(
       "localhost",
       process.env.NODE_ENV == "production"
         ? "host.docker.internal"

src/utils/config.util.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+import { createContext, useContext } from "react";
+
+export const ConfigContext = createContext<any>({});
+
+export const useConfig = () => useContext(ConfigContext);
+
+const getGonfig = async() => {
+  return (await axios.get("/api/config")).data;
+};
+
+export default { getGonfig };