feat-317: Add profile menu for applicants

app/core/components/FormFields/SelectField.tsx

@@ -3,13 +3,14 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import type { SelectChangeEvent } from "@mui/material/Select";
 import Select from "@mui/material/Select";
-import React from "react";
+import React, { useEffect } from "react";
 import { useField, useControlField } from "remix-validated-form";
 
 interface SelectFieldProps {
   name: string;
   label: string;
   options: string[];
+  value?: string;
   onChange?: (
     event?: SelectChangeEvent<string>,
     child?: React.ReactNode
@@ -27,6 +28,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
   options,
   style,
   onChange,
+  value,
 }) => {
   const { error } = useField(name);
   const [selectedValue, setSelectedValue] = useControlField<string>(name);
@@ -35,6 +37,12 @@ const SelectField: React.FC<SelectFieldProps> = ({
     setSelectedValue(event.target.value);
   };
 
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedValue(value);
+    }
+  },[value, setSelectedValue])
+
   return (
     <div>
       <FormControl style={style} error={!!error}>

app/core/layouts/Header.tsx

@@ -3,8 +3,11 @@ import Link from "../components/Link";
 import Search from "../components/Search";
 import AddIcon from "@mui/icons-material/Add";
 import { Button, Container, Grid, Paper, styled } from "@mui/material";
-import { useLocation, useSubmit } from "@remix-run/react";
+import { useLocation, useSubmit, useLoaderData } from "@remix-run/react";
 import { useOptionalUser } from "~/utils";
+import { getApplicantByEmail } from "~/models/applicant.server";
+import type { LoaderFunction } from "@remix-run/server-runtime";
+import { requireProfile } from "~/session.server";
 
 interface IProps {
   title: string;
@@ -27,11 +30,26 @@ const StyledHeaderButton = styled(Button)(({ theme }) => ({
   },
 }));
 
+export const loader: LoaderFunction = async ({ request }) => {
+  try {
+    const profile = await requireProfile(request);
+    const applicant = await getApplicantByEmail(profile.email);
+
+    return {
+      applicant,
+    };
+  } catch (error) {
+    console.error("Error loading data:", error);
+  }
+};
+
 const Header = ({ existApplicant }: IProps) => {
+  const { applicant } = useLoaderData<typeof loader>();
   const currentUser = useOptionalUser();
   const submit = useSubmit();
   const location = useLocation();
 
+
   const handleClickProfile = async () => {
     if (currentUser) {
       const { email } = currentUser;
@@ -43,6 +61,12 @@ const Header = ({ existApplicant }: IProps) => {
       return;
     }
   };
+  const handleClickProfileApplicant = async () => {
+    submit(null, {
+      method: "get",
+      action: `/applicants/${applicant?.id}`,
+    });
+  };
 
   const handleLogout = async () => {
     await submit(null, { method: "post", action: "/logout" });
@@ -58,6 +82,15 @@ const Header = ({ existApplicant }: IProps) => {
           },
         ]
       : []),
+    ...(currentUser?.role === "APPLICANT"
+      ? [
+          {
+            onClick: handleClickProfileApplicant,
+            to: "/",
+            text: "Profile",
+          },
+        ]
+    :[]),
     {
       to: "/",
       text: "Home",
@@ -79,6 +112,7 @@ const Header = ({ existApplicant }: IProps) => {
           },
         ]
       : []),
+
   ];
 
   let linkTo = "/internshipProjects";

app/routes/applicants.$applicantId._index.tsx

@@ -21,6 +21,7 @@ import {
   type SubmitOptions,
   useFetcher,
   useNavigation,
+  useSubmit
 } from "@remix-run/react";
 import { withZod } from "@remix-validated-form/with-zod";
 import MarkdownStyles from "@uiw/react-markdown-preview/markdown.css";
@@ -132,6 +133,7 @@ export default function Applicant() {
   const [projectSelected, setProjectSelected] = useState<ProjectValue | null>();
 
   const navigation = useNavigation();
+  const submit = useSubmit();
 
   useEffect(() => {
     const isActionRedirect = validateNavigationRedirect(navigation);
@@ -188,6 +190,13 @@ export default function Applicant() {
     searchProfiles("", "");
   };
 
+  const editApplicant = () => {
+      submit(null, {
+      method: "get",
+      action: `/applicationForm/${applicantId}`,
+    });
+  }
+
   return (
     <>
       <Header title="Applicants" />
@@ -218,7 +227,15 @@ export default function Applicant() {
                 >
                   <EditSharp />
                 </IconButton>
-              ) : null}
+                ) : (
+                  <IconButton
+                    aria-label="Edit"
+                    onClick={() => editApplicant()}
+                  >
+                    <EditSharp />
+                  </IconButton>
+                  )
+                }
               <Stack direction="column" spacing={1}>
                 <Paper>
                   <Typography