feat: add add new config strategy to frontend

frontend/src/pages/_app.tsx

@@ -10,11 +10,14 @@ import { NotificationsProvider } from "@mantine/notifications";
 import type { AppProps } from "next/app";
 import { useEffect, useState } from "react";
 import Header from "../components/navBar/NavBar";
+import { ConfigContext } from "../hooks/config.hook";
 import { UserContext } from "../hooks/user.hook";
 import authService from "../services/auth.service";
+import configService from "../services/config.service";
 import userService from "../services/user.service";
 import GlobalStyle from "../styles/global.style";
 import globalStyle from "../styles/mantine.style";
+import Config from "../types/config.type";
 import { CurrentUser } from "../types/user.type";
 import { GlobalLoadingContext } from "../utils/loading.util";
 
@@ -24,9 +27,11 @@ function App({ Component, pageProps }: AppProps) {
   const [colorScheme, setColorScheme] = useState<ColorScheme>();
   const [isLoading, setIsLoading] = useState(true);
   const [user, setUser] = useState<CurrentUser | null>(null);
+  const [config, setConfig] = useState<Config[] | null>(null);
 
   const getInitalData = async () => {
     setIsLoading(true);
+    setConfig(await configService.getAll());
     await authService.refreshAccessToken();
     setUser(await userService.getCurrentUser());
     setIsLoading(false);
@@ -54,13 +59,15 @@ function App({ Component, pageProps }: AppProps) {
             {isLoading ? (
               <LoadingOverlay visible overlayOpacity={1} />
             ) : (
-              <UserContext.Provider value={user}>
-                <LoadingOverlay visible={isLoading} overlayOpacity={1} />
-                <Header />
-                <Container>
-                  <Component {...pageProps} />
-                </Container>
-              </UserContext.Provider>
+              <ConfigContext.Provider value={config}>
+                <UserContext.Provider value={user}>
+                  <LoadingOverlay visible={isLoading} overlayOpacity={1} />
+                  <Header />
+                  <Container>
+                    <Component {...pageProps} />
+                  </Container>
+                </UserContext.Provider>{" "}
+              </ConfigContext.Provider>
             )}
           </GlobalLoadingContext.Provider>
         </ModalsProvider>
@@ -69,9 +76,4 @@ function App({ Component, pageProps }: AppProps) {
   );
 }
 
-// Opts out of static site generation to use publicRuntimeConfig
-App.getInitialProps = () => {
-  return {};
-};
-
 export default App;

frontend/src/pages/auth/signUp.tsx

@@ -1,17 +1,16 @@
-import getConfig from "next/config";
 import { useRouter } from "next/router";
 import AuthForm from "../../components/auth/AuthForm";
 import Meta from "../../components/Meta";
+import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
 
-const { publicRuntimeConfig } = getConfig();
-
 const SignUp = () => {
+  const config = useConfig();
   const user = useUser();
   const router = useRouter();
   if (user) {
     router.replace("/");
-  } else if (publicRuntimeConfig.ALLOW_REGISTRATION == "false") {
+  } else if (config.get("allowRegistration") == "false") {
     router.replace("/auth/signIn");
   } else {
     return (

frontend/src/pages/index.tsx

@@ -8,16 +8,14 @@ import {
   ThemeIcon,
   Title,
 } from "@mantine/core";
-import getConfig from "next/config";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { TbCheck } from "react-icons/tb";
 import Meta from "../components/Meta";
+import useConfig from "../hooks/config.hook";
 import useUser from "../hooks/user.hook";
 
-const { publicRuntimeConfig } = getConfig();
-
 const useStyles = createStyles((theme) => ({
   inner: {
     display: "flex",
@@ -71,13 +69,14 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export default function Home() {
+  const config = useConfig();
   const user = useUser();
 
   const { classes } = useStyles();
   const router = useRouter();
-  if (user || publicRuntimeConfig.ALLOW_UNAUTHENTICATED_SHARES == "true") {
+  if (user || config.get("allowUnauthenticatedShares")) {
     router.replace("/upload");
-  } else if (publicRuntimeConfig.SHOW_HOME_PAGE == "false") {
+  } else if (!config.get("showHomePage")) {
     router.replace("/auth/signIn");
   } else {
     return (

frontend/src/pages/upload.tsx

@@ -1,7 +1,6 @@
 import { Button, Group } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import axios from "axios";
-import getConfig from "next/config";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Meta from "../components/Meta";
@@ -9,13 +8,13 @@ import Dropzone from "../components/upload/Dropzone";
 import FileList from "../components/upload/FileList";
 import showCompletedUploadModal from "../components/upload/modals/showCompletedUploadModal";
 import showCreateUploadModal from "../components/upload/modals/showCreateUploadModal";
+import useConfig from "../hooks/config.hook";
 import useUser from "../hooks/user.hook";
 import shareService from "../services/share.service";
 import { FileUpload } from "../types/File.type";
 import { ShareSecurity } from "../types/share.type";
 import toast from "../utils/toast.util";
 
-const { publicRuntimeConfig } = getConfig();
 let share: any;
 
 const Upload = () => {
@@ -23,6 +22,7 @@ const Upload = () => {
   const modals = useModals();
 
   const user = useUser();
+  const config = useConfig();
   const [files, setFiles] = useState<FileUpload[]>([]);
   const [isUploading, setisUploading] = useState(false);
 
@@ -95,7 +95,7 @@ const Upload = () => {
       }
     }
   }, [files]);
-  if (!user && publicRuntimeConfig.ALLOW_UNAUTHENTICATED_SHARES == "false") {
+  if (!user && !config.get("allowUnauthenticatedShares")) {
     router.replace("/");
   } else {
     return (
@@ -106,7 +106,17 @@ const Upload = () => {
             loading={isUploading}
             disabled={files.length <= 0}
             onClick={() =>
-              showCreateUploadModal(modals, user ? true : false, uploadFiles)
+              showCreateUploadModal(
+                modals,
+                {
+                  isUserSignedIn: user ? true : false,
+                  allowUnauthenticatedShares: config.get(
+                    "allowUnauthenticatedShares"
+                  ),
+                  emailRecipientsEnabled: config.get("emailRecipientsEnabled"),
+                },
+                uploadFiles
+              )
             }
           >
             Share