sandboxnu · laurenbrissette · Oct 29, 2024 · Oct 30, 2024 · Oct 30, 2024 · Oct 30, 2024
diff --git a/apps/web/src/context/AuthContext.tsx b/apps/web/src/context/AuthContext.tsx
@@ -8,7 +8,6 @@ import { loginRequest } from '@web/authConfig';
 import { callMsGraph } from '@web/graph';
 import { useMutation } from '@tanstack/react-query';
 import { RegisterEmployeeDto } from '@web/client';
-
 // Reference: https://blog.finiam.com/blog/predictable-react-authentication-with-the-context-api
 
 export const AuthContext = createContext<AuthContextType>(
@@ -132,19 +131,41 @@ export const AuthProvider = ({ children }: any) => {
     }
   };
 
-  // Register the user in the database
+  // Direct registering a user in the database to either fill positon + department
+  // fields, or proceed to completeRegistration
   const register = async (email: string, password: string) => {
     const userData = await requestProfileData();
-    const departmentName = userData.department || 'Default Department';
-    const positionName = userData.jobTitle || 'Default Position';
+    const departmentName = userData.department;
+    const positionName = userData.jobTitle;
+
+    if (!departmentName || !positionName) {
+      router.push('/register');
+    } else {
+      completeRegistration(
+        userData,
+        email,
+        password,
+        departmentName,
+        positionName,
+      );
+    }
+  };
 
+  // Register a user with provided information to the database
+  const completeRegistration = (
+    userData: any,
+    email: string,
+    password: string,
+    department: string,
+    position: string,
+  ) => {
     const employee: RegisterEmployeeDto = {
       email: email,
       password: password,
       firstName: userData.givenName || userData.displayName.split(' ')[0],
       lastName: userData.surname || userData.displayName.split(' ')[1],
-      departmentName: departmentName,
-      positionName: positionName,
+      departmentName: department,
+      positionName: position,
     };
 
     registerEmployeeMutation.mutate(employee, {
@@ -180,6 +201,7 @@ export const AuthProvider = ({ children }: any) => {
       loading,
       error,
       login,
+      completeRegistration,
       logout,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/apps/web/src/context/types.ts b/apps/web/src/context/types.ts
@@ -22,5 +22,12 @@ export interface AuthContextType {
   loading: boolean;
   error?: any;
   login: (email: string, password: string) => void;
+  completeRegistration: (
+    userData: any,
+    email: string,
+    password: string,
+    position: string,
+    department: string,
+  ) => void;
   logout: () => void;
 }
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
@@ -55,7 +55,7 @@ export default function App({
   OpenAPI.CREDENTIALS = 'include';
   OpenAPI.WITH_CREDENTIALS = true;
 
-  const excludeLayoutPaths = ['/signin'];
+  const excludeLayoutPaths = ['/signin', '/register'];
 
   const head = (
     <Head>

diff --git a/apps/web/src/pages/register.tsx b/apps/web/src/pages/register.tsx
@@ -0,0 +1,147 @@
+import { Button, Flex } from '@chakra-ui/react';
+import { Heading } from '@chakra-ui/react';
+import { Select } from '@chakra-ui/react';
+import { DepartmentsService, PositionsService } from '@web/client';
+import { DepartmentEntity } from '@web/client';
+import { PositionEntity } from '@web/client';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { useAuth } from '@web/hooks/useAuth';
+
+export default function Register(
+  userData: any,
+  email: string,
+  password: string,
+  departmentName: any,
+  positionName: any,
+) {
+  const [positions, setPositions] = useState<PositionEntity[]>([]);
+  const [departments, setDepartments] = useState<DepartmentEntity[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentDepartment, setCurrentDepartment] = useState(departmentName);
+  const [currentPosition, setCurrentPosition] = useState(positionName);
+  const router = useRouter();
+  const { completeRegistration } = useAuth();
+
+  // fetch list of all positions
+  useEffect(() => {
+    async function fetchPositions() {
+      setIsLoading(true);
+      try {
+        const request: PositionEntity[] =
+          await PositionsService.positionsControllerFindAll(1000);
+        setPositions(request);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchPositions();
+  }, []);
+
+  // fetch list of all departments
+  useEffect(() => {
+    async function fetchDepartments() {
+      setIsLoading(true);
+      try {
+        const request: DepartmentEntity[] =
+          await DepartmentsService.departmentsControllerFindAll(1000);
+        setDepartments(request);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setIsLoading(false);
+        console.log(departments);
+      }
+    }
+    fetchDepartments();
+  }, []);
+
+  // If loading, wait to render
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  // when button is submitted to finalize department and position,
+  // register employee with current position and department
+  // and route to home page
+  const clickResponse = () => {
+    // complete registration
+    completeRegistration(
+      userData,
+      email,
+      password,
+      currentDepartment,
+      currentPosition,
+    );
+    // redirect to main page
+    router.push('/');
+  };
+
+  return (
+    <>
+      <Heading as="h2" textColor="#363940" fontSize="30px" padding="50px">
+        Hi there, it looks like you are not registered yet.
+      </Heading>
+      <Heading as="h3" textColor="#363940" pl="50px">
+        Please specify your department and position below
+      </Heading>
+      <Flex
+        padding="50px"
+        width="80vw"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Heading as="h2" textColor="#363940" fontSize="24px" width="200px">
+          Select Department
+        </Heading>
+        <Select
+          defaultValue={departmentName ? departmentName : 'Select Department'}
+          disabled={departmentName}
+          onChange={(e) => setCurrentDepartment(e.target.value)}
+        >
+          {departments.map((department: DepartmentEntity, index: number) => {
+            return (
+              <option key={index} value={department.name}>
+                {department.name}
+              </option>
+            );
+          })}
+        </Select>
+      </Flex>
+      <Flex
+        padding="50px"
+        width="80vw"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Heading as="h2" textColor="#363940" fontSize="24px" width="200px">
+          Select Position
+        </Heading>
+        <Select
+          id="positionDropdown"
+          defaultValue={positionName ? positionName : 'Select Position'}
+          disabled={positionName}
+          onChange={(e) => setCurrentPosition(e.target.value)}
+        >
+          {positions.map((position: PositionEntity, index: number) => {
+            return (
+              <option key={index} value={position.name}>
+                {position.name}
+              </option>
+            );
+          })}
+        </Select>
+      </Flex>
+      <Button
+        alignSelf="center"
+        marginLeft="50px"
+        onClick={clickResponse}
+        disabled={!(currentDepartment && currentPosition)}
+      >
+        Submit
+      </Button>
+    </>
+  );
+}