feat: add add new config strategy to frontend

frontend/src/components/auth/AuthForm.tsx

@@ -9,15 +9,15 @@ import {
   Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
-import getConfig from "next/config";
 import Link from "next/link";
 import * as yup from "yup";
+import useConfig from "../../hooks/config.hook";
 import authService from "../../services/auth.service";
 import toast from "../../utils/toast.util";
 
-const { publicRuntimeConfig } = getConfig();
-
 const AuthForm = ({ mode }: { mode: "signUp" | "signIn" }) => {
+  const config = useConfig();
+
   const validationSchema = yup.object().shape({
     email: yup.string().email().required(),
     password: yup.string().min(8).required(),
@@ -55,7 +55,7 @@ const AuthForm = ({ mode }: { mode: "signUp" | "signIn" }) => {
       >
         {mode == "signUp" ? "Sign up" : "Welcome back"}
       </Title>
-      {publicRuntimeConfig.ALLOW_REGISTRATION == "true" && (
+      {config.get("allowRegistration") && (
         <Text color="dimmed" size="sm" align="center" mt={5}>
           {mode == "signUp"
             ? "You have an account already?"

frontend/src/components/navBar/NavBar.tsx

@@ -11,15 +11,13 @@ import {
   Transition,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import getConfig from "next/config";
 import Link from "next/link";
 import { ReactNode, useEffect, useState } from "react";
+import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
 import Logo from "../Logo";
 import ActionAvatar from "./ActionAvatar";
 
-const { publicRuntimeConfig } = getConfig();
-
 const HEADER_HEIGHT = 60;
 
 type NavLink = {
@@ -110,6 +108,8 @@ const useStyles = createStyles((theme) => ({
 
 const NavBar = () => {
   const user = useUser();
+  const config = useConfig();
+
   const [opened, toggleOpened] = useDisclosure(false);
 
   const authenticatedLinks = [
@@ -130,7 +130,7 @@ const NavBar = () => {
   ]);
 
   useEffect(() => {
-    if (publicRuntimeConfig.SHOW_HOME_PAGE == "true")
+    if (config.get("showHomePage"))
       setUnauthenticatedLinks((array) => [
         {
           link: "/",
@@ -139,7 +139,7 @@ const NavBar = () => {
         ...array,
       ]);
 
-    if (publicRuntimeConfig.ALLOW_REGISTRATION == "true")
+    if (config.get("allowRegistration"))
       setUnauthenticatedLinks((array) => [
         ...array,
         {

frontend/src/components/upload/Dropzone.tsx

@@ -1,14 +1,12 @@
 import { Button, Center, createStyles, Group, Text } from "@mantine/core";
 import { Dropzone as MantineDropzone } from "@mantine/dropzone";
-import getConfig from "next/config";
 import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
 import { TbCloudUpload, TbUpload } from "react-icons/tb";
+import useConfig from "../../hooks/config.hook";
 import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
 import toast from "../../utils/toast.util";
 
-const { publicRuntimeConfig } = getConfig();
-
 const useStyles = createStyles((theme) => ({
   wrapper: {
     position: "relative",
@@ -40,12 +38,14 @@ const Dropzone = ({
   isUploading: boolean;
   setFiles: Dispatch<SetStateAction<FileUpload[]>>;
 }) => {
+  const config = useConfig();
+
   const { classes } = useStyles();
   const openRef = useRef<() => void>();
   return (
     <div className={classes.wrapper}>
       <MantineDropzone
-        maxSize={parseInt(publicRuntimeConfig.MAX_FILE_SIZE!)}
+        maxSize={parseInt(config.get("maxFileSize"))}
         onReject={(e) => {
           toast.error(e[0].errors[0].message);
         }}
@@ -75,8 +75,7 @@ const Dropzone = ({
           <Text align="center" size="sm" mt="xs" color="dimmed">
             Drag&apos;n&apos;drop files here to start your share. We can accept
             only files that are less than{" "}
-            {byteStringToHumanSizeString(publicRuntimeConfig.MAX_FILE_SIZE)} in
-            size.
+            {byteStringToHumanSizeString(config.get("maxFileSize"))} in size.
           </Text>
         </div>
       </MantineDropzone>

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -18,7 +18,6 @@ import {
 import { useForm, yupResolver } from "@mantine/form";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
-import getConfig from "next/config";
 import { useState } from "react";
 import { TbAlertCircle } from "react-icons/tb";
 import * as yup from "yup";
@@ -26,11 +25,13 @@ import shareService from "../../../services/share.service";
 import { ShareSecurity } from "../../../types/share.type";
 import ExpirationPreview from "../ExpirationPreview";
 
-const { publicRuntimeConfig } = getConfig();
-
 const showCreateUploadModal = (
   modals: ModalsContextProps,
-  isSignedIn: boolean,
+  options: {
+    isUserSignedIn: boolean;
+    allowUnauthenticatedShares: boolean;
+    emailRecipientsEnabled: boolean;
+  },
   uploadCallback: (
     id: string,
     expiration: string,
@@ -42,7 +43,7 @@ const showCreateUploadModal = (
     title: <Title order={4}>Share</Title>,
     children: (
       <CreateUploadModalBody
-        isSignedIn={isSignedIn}
+        options={options}
         uploadCallback={uploadCallback}
       />
     ),
@@ -51,7 +52,7 @@ const showCreateUploadModal = (
 
 const CreateUploadModalBody = ({
   uploadCallback,
-  isSignedIn,
+  options,
 }: {
   uploadCallback: (
     id: string,
@@ -59,12 +60,16 @@ const CreateUploadModalBody = ({
     recipients: string[],
     security: ShareSecurity
   ) => void;
-  isSignedIn: boolean;
+  options: {
+    isUserSignedIn: boolean;
+    allowUnauthenticatedShares: boolean;
+    emailRecipientsEnabled: boolean;
+  };
 }) => {
   const modals = useModals();
 
   const [showNotSignedInAlert, setShowNotSignedInAlert] = useState(
-    publicRuntimeConfig.ALLOW_UNAUTHENTICATED_SHARES == "true"
+    options.emailRecipientsEnabled
   );
 
   const validationSchema = yup.object().shape({
@@ -93,7 +98,7 @@ const CreateUploadModalBody = ({
   });
   return (
     <Group>
-      {showNotSignedInAlert && !isSignedIn && (
+      {showNotSignedInAlert && !options.isUserSignedIn && (
         <Alert
           withCloseButton
           onClose={() => setShowNotSignedInAlert(false)}
@@ -225,7 +230,7 @@ const CreateUploadModalBody = ({
             {ExpirationPreview({ form })}
           </Text>
           <Accordion>
-            {publicRuntimeConfig.EMAIL_RECIPIENTS_ENABLED == "true" && (
+            {options.emailRecipientsEnabled && (
               <Accordion.Item value="recipients" sx={{ borderBottom: "none" }}>
                 <Accordion.Control>Email recipients</Accordion.Control>
                 <Accordion.Panel>