Merge pull request #330 from WizelineLabs/feat-317-Allow-applicants-t…

…o-edit-profile

feat-317: Add profile menu for applicants

app/core/components/ApplicantComments/index.tsx

@@ -39,7 +39,7 @@ export default function AplicantComments({
   profileId,
 }: {
   comments: CommentsArrayType;
-  applicantId: string;
+  applicantId: number;
   profileId: string;
 }) {
   return (
@@ -82,7 +82,7 @@ function CommentItem({
   profileId,
 }: {
   comment: CommentItemType;
-  applicantId: string;
+  applicantId: number;
   profileId: string;
 }) {
   const [openDeleteModal, setOpenDeleteModal] = useState<boolean>(false);

app/core/components/FormFields/SelectField.tsx

@@ -63,4 +63,4 @@ const SelectField: React.FC<SelectFieldProps> = ({
   );
 };
 
-export default SelectField;
+export default SelectField;

app/core/layouts/Header.tsx

@@ -6,10 +6,6 @@ import { Button, Container, Grid, Paper, styled } from "@mui/material";
 import { useLocation, useSubmit } from "@remix-run/react";
 import { useOptionalUser } from "~/utils";
 
-interface IProps {
-  title: string;
-  existApplicant?: boolean;
-}
 export interface MenuItemArgs {
   text: string;
   "data-testid"?: string;
@@ -27,33 +23,28 @@ const StyledHeaderButton = styled(Button)(({ theme }) => ({
   },
 }));
 
-const Header = ({ existApplicant }: IProps) => {
+const Header = () => {
   const currentUser = useOptionalUser();
   const submit = useSubmit();
   const location = useLocation();
 
-  const handleClickProfile = async () => {
-    if (currentUser) {
-      const { email } = currentUser;
-      submit(null, {
-        method: "get",
-        action: `/profile/${encodeURIComponent(email)}`,
-      });
-    } else {
-      return;
-    }
-  };
-
   const handleLogout = async () => {
-    await submit(null, { method: "post", action: "/logout" });
+    submit(null, { method: "post", action: "/logout" });
   };
 
   const options: MenuItemArgs[] = [
     ...(currentUser?.role === "ADMIN" || currentUser?.role === "USER"
       ? [
           {
-            onClick: handleClickProfile,
-            to: "/",
+            to: `/profile/${encodeURIComponent(currentUser.email)}`,
+            text: "Profile",
+          },
+        ]
+      : []),
+    ...(currentUser?.role === "APPLICANT"
+      ? [
+          {
+            to: `/applicants/${encodeURIComponent(currentUser.email)}`,
             text: "Profile",
           },
         ]
@@ -136,14 +127,14 @@ const Header = ({ existApplicant }: IProps) => {
               ) : // Logic for /intershipProjects if form is answered
               location.pathname.includes("/internshipProjects") &&
                 currentUser &&
-                existApplicant ? (
+                currentUser.role == "APPLICANT" ? (
                 <DropDownButton options={options}>
                   {currentUser?.email}
                 </DropDownButton>
               ) : // Logic for /intershipProjects if form is not answered
               location.pathname.includes("/internshipProjects") &&
                 currentUser &&
-                !existApplicant ? (
+                currentUser.role != "APPLICANT" ? (
                 <Button
                   className="contained"
                   sx={{

app/models/applicant.server.ts

@@ -137,6 +137,14 @@ export async function searchApplicants() {
     .execute();
 }
 
+export async function getApplicantIdByEmail(email: string) {
+  return await db
+    .selectFrom("Applicant as a")
+    .select("id")
+    .where("a.email", "=", email)
+    .executeTakeFirstOrThrow();
+}
+
 export async function getApplicantByEmail(email: string) {
   const applicant = await db
     .selectFrom("Applicant as a")
@@ -158,11 +166,7 @@ export async function getApplicantByEmail(email: string) {
       "m.lastName as mentorLastName",
     ])
     .where("a.email", "=", email)
-    .executeTakeFirst();
-
-  if (!applicant) {
-    return null;
-  }
+    .executeTakeFirstOrThrow();
 
   const projectMembers = await db
     .selectFrom("ProjectMembers")

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";
@@ -37,7 +38,7 @@ import ModalBox from "~/core/components/ModalBox";
 import RegularSelect from "~/core/components/RegularSelect";
 import WhatsAppLink from "~/core/components/WhatsAppLink";
 import Header from "~/core/layouts/Header";
-import { getApplicantById } from "~/models/applicant.server";
+import { getApplicantByEmail } from "~/models/applicant.server";
 import { getCommentsApplicant } from "~/models/applicantComment.server";
 import { checkPermission } from "~/models/authorization.server";
 import type { Roles } from "~/models/authorization.server";
@@ -87,12 +88,11 @@ export const validator = withZod(
 );
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
-  invariant(params.applicantId, "projectId not found");
+  invariant(params.applicantId, "applicant not found");
 
   const projects = await getProjectsList();
-  const applicantId = params.applicantId;
-  const comments = await getCommentsApplicant(parseInt(applicantId as string));
-  const applicant = await getApplicantById(params.applicantId);
+  const applicant = await getApplicantByEmail(params.applicantId);
+  const comments = await getCommentsApplicant(applicant.id);
   if (!applicant) {
     throw new Response("Not Found", { status: 404 });
   }
@@ -113,7 +113,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
     applicant,
     projects,
     canEditProject,
-    applicantId,
+    applicantId: applicant.id,
     profileId,
     comments,
   });
@@ -132,6 +132,7 @@ export default function Applicant() {
   const [projectSelected, setProjectSelected] = useState<ProjectValue | null>();
 
   const navigation = useNavigation();
+  const submit = useSubmit();
 
   useEffect(() => {
     const isActionRedirect = validateNavigationRedirect(navigation);
@@ -188,9 +189,16 @@ export default function Applicant() {
     searchProfiles("", "");
   };
 
+  const editApplicant = () => {
+    submit(null, {
+      method: "get",
+      action: `/applicationForm/${applicant.email}`,
+    });
+  };
+
   return (
     <>
-      <Header title="Applicants" />
+      <Header />
       <Container>
         <Paper sx={{ p: 2 }}>
           <Grid container spacing={2}>
@@ -218,7 +226,11 @@ export default function Applicant() {
                 >
                   <EditSharp />
                 </IconButton>
-              ) : null}
+              ) : (
+                <IconButton aria-label="Edit" onClick={() => editApplicant()}>
+                  <EditSharp />
+                </IconButton>
+              )}
               <Stack direction="column" spacing={1}>
                 <Paper>
                   <Typography

app/routes/applicants.$applicantId.comment.$id.tsx

@@ -6,9 +6,8 @@ import { deleteComment, updateComment } from "~/models/applicantComment.server";
 import { getSession } from "~/session.server";
 
 export const action: ActionFunction = async ({ request, params }) => {
-  invariant(params.applicantId, "projectId could not be found");
+  invariant(params.applicantId, "applicant could not be found");
   invariant(params.id, "comment id could not be found");
-  const applicantId = params.applicantId;
   const id = params.id;
 
   try {
@@ -27,5 +26,5 @@ export const action: ActionFunction = async ({ request, params }) => {
     const session = await getSession(request);
     session.flash("warning", "Error while updating comment");
   }
-  return redirect(`/applicants/${applicantId}`);
+  return redirect(`/applicants/${params.applicantId}`);
 };

app/routes/applicants.$applicantId.comment.create.tsx

@@ -3,20 +3,21 @@ import { redirect } from "@remix-run/node";
 import { validationError } from "remix-validated-form";
 import invariant from "tiny-invariant";
 import { validator } from "~/core/components/Comments";
+import { getApplicantIdByEmail } from "~/models/applicant.server";
 import { createComment } from "~/models/applicantComment.server";
 import { getSession, requireProfile } from "~/session.server";
 
 export const action: ActionFunction = async ({ request, params }) => {
   invariant(params.applicantId, "applicantId could not be found");
-  const applicantId = params.applicantId;
   const profile = await requireProfile(request);
   const result = await validator.validate(await request.formData());
+  const applicant = await getApplicantIdByEmail(params.applicantId);
 
   if (result.error != undefined) return validationError(result.error);
 
   try {
     await createComment(
-      parseInt(applicantId as string),
+      applicant.id,
       profile.id,
       result.data.body,
       result.data.parentId
@@ -25,5 +26,5 @@ export const action: ActionFunction = async ({ request, params }) => {
     const session = await getSession(request);
     session.flash("warning", "Error while saving comment");
   }
-  return redirect(`/applicants/${applicantId}`);
+  return redirect(`/applicants/${params.applicantId}`);
 };

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

@@ -1,18 +1,18 @@
 /* eslint-disable no-console */
 import type { ActionFunction } from "@remix-run/server-runtime";
 import { redirect } from "remix-typedjson";
-import { editApplicant, getApplicantById } from "~/models/applicant.server";
-import { validator } from "~/routes/applicants.$applicantId._index";
-import { requireProfile, requireUser } from "~/session.server";
 import invariant from "tiny-invariant";
+import { editApplicant, getApplicantByEmail } from "~/models/applicant.server";
 import { checkPermission } from "~/models/authorization.server";
 import type { Roles } from "~/models/authorization.server";
+import { validator } from "~/routes/applicants.$applicantId._index";
+import { requireProfile, requireUser } from "~/session.server";
 
 export const action: ActionFunction = async ({ params, request }) => {
   const profile = await requireProfile(request);
   const user = await requireUser(request);
   invariant(params.applicantId, "applicantId could not be found");
-  const applicant = await getApplicantById(params.applicantId);
+  const applicant = await getApplicantByEmail(params.applicantId);
   if (!applicant) {
     throw new Response("Not Found", { status: 404 });
   }
@@ -27,8 +27,6 @@ export const action: ActionFunction = async ({ params, request }) => {
     throw new Response("Unauthorized", { status: 401 });
   }
 
-
-
   const result = await validator.validate(await request.formData());
   const applicantId = parseInt(result.data?.applicantId as string);
   const status = result.data?.status;
@@ -41,5 +39,7 @@ export const action: ActionFunction = async ({ params, request }) => {
     },
     applicantId
   );
-  return redirect(`/applicants/${response.id}?status=${response.status}`);
+  return redirect(
+    `/applicants/${params.applicantId}?status=${response.status}`
+  );
 };

app/routes/applicants._index.tsx

@@ -136,7 +136,7 @@ export default function Projects() {
 
   return (
     <>
-      <Header title="Applicants" />
+      <Header />
       <NavAppBar title="Internship Applicants" />
       <Container>
         <Paper sx={{ p: 2 }}>