resolve merge conflicts

apps/web/src/components/Layout.tsx

@@ -1,20 +1,13 @@
 import { Box, useDisclosure } from '@chakra-ui/react';
 import { NavBar } from './NavBar';
 import { TopBar } from './TopBar';
-import { CreateFormTemplateModal } from './createFormTemplate/CreateFormTemplateModal';
 import CreateFormInstanceModal from './createFormInstance/CreateFormInstanceModal';
 
 /**
  * @param children - the children of the layout
  * @returns overall layout of the application
  */
 export const Layout = ({ children }: { children: any }) => {
-  const {
-    isOpen: isCreateFormTemplateOpen,
-    onOpen: onOpenCreateFormTemplate,
-    onClose: onCloseCreateFormTemplate,
-  } = useDisclosure();
-
   const {
     isOpen: isCreateFormInstanceOpen,
     onOpen: onOpenCreateFormInstance,
@@ -30,21 +23,14 @@ export const Layout = ({ children }: { children: any }) => {
       }}
       minH="100vh"
     >
-      <NavBar
-        onOpenCreateFormTemplate={onOpenCreateFormTemplate}
-        onOpenCreateFormInstance={onOpenCreateFormInstance}
-      />
+      <NavBar onOpenCreateFormInstance={onOpenCreateFormInstance} />
       <Box>
         <TopBar />
 
         <Box as="main" ml="60" pt="60px">
           {children}
         </Box>
       </Box>
-      <CreateFormTemplateModal
-        isCreateFormTemplateOpen={isCreateFormTemplateOpen}
-        onCloseCreateFormTemplate={onCloseCreateFormTemplate}
-      />
       <CreateFormInstanceModal
         isOpen={isCreateFormInstanceOpen}
         onClose={onCloseCreateFormInstance}

apps/web/src/components/NavBar.tsx

@@ -95,16 +95,13 @@ const NavItem = ({
 };
 
 /**
- * @param onOpenCreateFormTemplate - the function to open the create form template modal
  * @param onOpenCreateFormInstance - the function to open the create form instance modal
  * @returns  the nav bar for the left sidebar
  */
 export const NavBar = ({
-  onOpenCreateFormTemplate,
   onOpenCreateFormInstance,
   ...props
 }: {
-  onOpenCreateFormTemplate: () => void;
   onOpenCreateFormInstance: () => void;
   props?: {};
 }) => {

apps/web/src/components/createFormTemplate/NameAndDescriptionBox.tsx

@@ -1,5 +1,5 @@
-import { Box, Text, Flex } from '@chakra-ui/react';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Text, Flex } from '@chakra-ui/react';
+import { Dispatch, SetStateAction } from 'react';
 
 /**
  * The contents of the white box for the page (step 2) that asks the user for the form's name and
@@ -10,11 +10,15 @@ import { Dispatch, SetStateAction, useState } from 'react';
  * @param formLink link to form to preview
  */
 export const NameAndDescriptionBox = ({
+  name,
   setName,
+  description,
   setDescription,
   formLink,
 }: {
+  name: string | null;
   setName: Dispatch<SetStateAction<string | null>>;
+  description: string | null;
   setDescription: Dispatch<SetStateAction<string | null>>;
   formLink: string;
 }) => {
@@ -49,6 +53,8 @@ export const NameAndDescriptionBox = ({
             type="text"
             onChange={(e) => setName(e.target.value)}
             style={{ ...textInputStyle }}
+            placeholder="Form Template Name"
+            value={name!!}
           />
         </Flex>
         <Flex gap="10px" flexDirection="column" width="480px">
@@ -62,6 +68,7 @@ export const NameAndDescriptionBox = ({
               resize: 'none',
             }}
             placeholder="For HR processing lorem ipsum dolor sit"
+            value={description!!}
           />
         </Flex>
       </Flex>

apps/web/src/components/createFormTemplate/UploadBox.tsx

@@ -1,24 +1,45 @@
 import { Flex, Text, Heading, Button, Box } from '@chakra-ui/react';
 import { CloseIcon, PDFIcon, UploadIcon } from '@web/static/icons';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 /**
- * The content that will be in the white box for the upload step.  This is a drop box and a file preview.
+ * The content that will be in the white box for the upload step. This is a drop box and a file preview.
  * @param blob the useBlob() instance we are using to store the data
  */
 export const UploadBox = ({
-  // TODO: rather than importing useBlob as type any, it should be stored in universally
-  blob,
+  hasLocalBlob,
+  localBlobData,
+  clearLocalBlob,
+  uploadLocalFile,
 }: {
-  blob: any;
+  hasLocalBlob: boolean;
+  localBlobData: { name: string; size: string };
+  clearLocalBlob: () => void;
+  uploadLocalFile: (file: File) => void;
 }) => {
-  const onDrop = useCallback((acceptedFiles: any) => {
-    if (!acceptedFiles) return;
-    blob.uploadLocalFile(acceptedFiles[0]);
-  }, []);
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (!acceptedFiles || acceptedFiles.length === 0) return;
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+      const file = acceptedFiles[0];
+
+      // Ensure the file is a PDF
+      if (file.type === 'application/pdf') {
+        uploadLocalFile(file);
+      } else {
+        alert('Please upload a valid PDF file.');
+      }
+    },
+    [uploadLocalFile],
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'application/pdf': ['.pdf'], // Restrict file types to PDFs only
+    },
+  });
 
   return (
     <Flex flexDirection="column" gap="20px">
@@ -32,16 +53,17 @@ export const UploadBox = ({
         flexDirection={'column'}
         justifyContent={'center'}
         alignItems={'center'}
-        backgroundColor={blob.hasLocalBlob ? '#F1F7FF' : '#FFF'}
+        backgroundColor={hasLocalBlob ? '#F1F7FF' : '#FFF'}
         {...getRootProps()}
       >
+        <input {...getInputProps()} />
         <UploadIcon
           /* upload icon */
           height="48px"
           width="66px"
         />
         <Flex
-          /* all text below icon*/
+          /* all text below icon */
           flexDirection={'column'}
           alignItems={'center'}
         >
@@ -52,17 +74,16 @@ export const UploadBox = ({
             <Text fontWeight={500} size="16px" height="21px" align="center">
               Drag file here or
             </Text>
-            <label htmlFor="pdfInput">
-              <span>
-                <Text
-                  textDecoration={'underline'}
-                  align="center"
-                  color="#1367EA"
-                >
-                  browse
-                </Text>
-              </span>
-            </label>
+            <Text
+              fontWeight={500}
+              size="16px"
+              height="21px"
+              align="center"
+              textDecoration="underline"
+              color="#1367EA"
+            >
+              Browse
+            </Text>
           </Flex>
           <Text
             /* pdf qualifier */
@@ -73,15 +94,8 @@ export const UploadBox = ({
             PDFs Only
           </Text>
         </Flex>
-        <input
-          type="file"
-          id="pdfInput"
-          accept=".pdf"
-          style={{ display: 'none' }}
-          {...getInputProps()}
-        />
       </Flex>
-      {blob.hasLocalBlob && (
+      {hasLocalBlob && (
         <Flex
           /* box that shows pdf information */
           width="414px"
@@ -111,23 +125,23 @@ export const UploadBox = ({
                 maxWidth={'320px'}
                 textOverflow={'ellipsis'}
               >
-                {blob.localBlobData.name}
+                {localBlobData.name}
               </Text>
               <Text
                 color="#808080"
                 textAlign="left"
                 fontSize="12px"
                 fontWeight={500}
               >
-                {blob.localBlobData.size} mb
+                {(parseFloat(localBlobData.size) / 1024 / 1024).toFixed(2)} MB
               </Text>
             </Flex>
           </Flex>
           <CloseIcon
             height="16px"
             width="16px"
             marginLeft="auto"
-            onClick={() => blob.clearLocalBlob()}
+            onClick={clearLocalBlob}
           />
         </Flex>
       )}

apps/web/src/context/CreateFormTemplateContext.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useContext, useState } from 'react';
+import { CreateFormTemplateContextType } from './types';
+import { useBlob } from '@web/hooks/useBlob';
+
+export const CreateFormTemplateContext =
+  createContext<CreateFormTemplateContextType>(
+    {} as CreateFormTemplateContextType,
+  );
+
+export const CreateFormTemplateProvider = ({ children }: any) => {
+  const blobHook = useBlob();
+  const [formTemplateName, setFormTemplateName] = useState<string | null>(null);
+  const [formTemplateDescription, setFormTemplateDescription] = useState<
+    string | null
+  >(null);
+
+  return (
+    <CreateFormTemplateContext.Provider
+      value={{
+        formTemplateName,
+        formTemplateDescription,
+        setFormTemplateName,
+        setFormTemplateDescription,
+        useBlob: blobHook,
+      }}
+    >
+      {children}
+    </CreateFormTemplateContext.Provider>
+  );
+};
+
+export const useCreateFormTemplate = () =>
+  useContext(CreateFormTemplateContext);

apps/web/src/context/types.ts

@@ -1,4 +1,4 @@
-import { IPublicClientApplication } from '@azure/msal-browser';
+import { Dispatch, Ref, SetStateAction } from 'react';
 
 // for storage in context
 export type User = {
@@ -37,3 +37,11 @@ export interface AuthContextType {
   ) => void;
   logout: () => void;
 }
+
+export interface CreateFormTemplateContextType {
+  formTemplateName: string | null;
+  formTemplateDescription: string | null;
+  setFormTemplateName: Dispatch<SetStateAction<string | null>>;
+  setFormTemplateDescription: Dispatch<SetStateAction<string | null>>;
+  useBlob: any;
+}

apps/web/src/hooks/useBlob.ts

@@ -1,7 +1,6 @@
 import { upload } from '@vercel/blob/client';
 import { useState, useRef } from 'react';
 import { type PutBlobResult } from '@vercel/blob';
-import { FormInstanceEntity, FormTemplateEntity } from '@web/client';
 
 type LocalBlobData = {
   blob: Blob | null;

apps/web/src/pages/_app.tsx

@@ -9,6 +9,7 @@ import { Layout } from 'apps/web/src/components/Layout';
 import theme from '../styles/theme';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { AuthProvider } from './../context/AuthContext';
+import { CreateFormTemplateProvider } from '@web/context/CreateFormTemplateContext';
 import { OpenAPI } from '@web/client';
 import Head from 'next/head';
 import { PublicClientApplication } from '@azure/msal-browser';
@@ -56,6 +57,7 @@ export default function App({
   OpenAPI.WITH_CREDENTIALS = true;
 
   const excludeLayoutPaths = ['/signin', '/register'];
+  const createFormTemplatePath = '/create-template';
 
   const head = (
     <Head>
@@ -74,6 +76,20 @@ export default function App({
     );
   }
 
+  if (appProps.router.pathname.includes(createFormTemplatePath)) {
+    return (
+      <>
+        <WrapperComponent>
+          <CreateFormTemplateProvider>
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
+          </CreateFormTemplateProvider>
+        </WrapperComponent>
+      </>
+    );
+  }
+
   return (
     <>
       <WrapperComponent>