1470 interview notes on recruitmentpositionoverviewpage

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/RecruitmentApplicantAdminPage.tsx

@@ -1,3 +1,4 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,65 +8,58 @@ import { BackButton, Button, Link, SamfundetLogoSpinner } from '~/Components';
 import { Table } from '~/Components/Table';
 import { Text } from '~/Components/Text/Text';
 import { getRecruitmentApplicationsForRecruiter, withdrawRecruitmentApplicationRecruiter } from '~/api';
-import type { RecruitmentApplicationDto, RecruitmentUserDto } from '~/dto';
+import type { InterviewDto } from '~/dto';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
 import { dbT } from '~/utils';
 import { AdminPage } from '../AdminPageLayout';
 import styles from './RecruitmentApplicantAdminPage.module.scss';
+import { RecruitmentInterviewNotesForm } from './RecruitmentInterviewNotesForm';
 
 export function RecruitmentApplicantAdminPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const [recruitmentApplication, setRecruitmentApplication] = useState<RecruitmentApplicationDto>();
-  const [otherRecruitmentApplication, setOtherRecruitmentApplication] = useState<RecruitmentApplicationDto[]>([]);
-  const [applicant, setApplicant] = useState<RecruitmentUserDto>();
-
-  const [loading, setLoading] = useState(true);
-
   const { applicationID } = useParams();
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['recruitmentapplicationpage', applicationID],
+    queryFn: () => getRecruitmentApplicationsForRecruiter(applicationID as string),
+  });
 
-  useEffect(() => {
-    getRecruitmentApplicationsForRecruiter(applicationID as string)
-      .then((res) => {
-        setRecruitmentApplication(res.data.application);
-        setApplicant(res.data.user);
-        setOtherRecruitmentApplication(res.data.other_applications);
-        setLoading(false);
-      })
-      .catch((data) => {
-        if (data.request.status === STATUS.HTTP_404_NOT_FOUND) {
-          navigate(ROUTES.frontend.not_found, { replace: true });
-        }
-        toast.error(t(KEY.common_something_went_wrong));
-      });
-  }, [applicationID, t, navigate]);
-
-  const adminWithdraw = () => {
-    if (recruitmentApplication) {
-      if (window.confirm(t(KEY.recruitment_confirm_withdraw_application))) {
-        withdrawRecruitmentApplicationRecruiter(recruitmentApplication.id)
-          .then((response) => {
-            setRecruitmentApplication(response.data);
-            toast.success(t(KEY.common_update_successful));
-          })
-          .catch(() => {
-            toast.error(t(KEY.common_something_went_wrong));
-          });
-      }
+  if (error) {
+    if (data?.request.status === STATUS.HTTP_404_NOT_FOUND) {
+      navigate(ROUTES.frontend.not_found, { replace: true });
     }
-  };
+    toast.error(t(KEY.common_something_went_wrong));
+  }
+
+  const recruitmentApplication = data?.data.application;
+  const applicant = data?.data.user;
+  const otherRecruitmentApplication = data?.data.other_applications;
+  const interviewNotes = recruitmentApplication?.interview?.notes;
 
-  if (loading) {
+  const adminWithdraw = useMutation({
+    mutationFn: (id: string) => {
+      return withdrawRecruitmentApplicationRecruiter(id);
+    },
+    onSuccess: () => {
+      toast.success(t(KEY.common_update_successful));
+    },
+  });
+
+  if (isLoading) {
     return (
       <div>
         <SamfundetLogoSpinner />
       </div>
     );
   }
 
+  const initialData: Partial<InterviewDto> = {
+    notes: interviewNotes || '',
+  };
+
   return (
     <AdminPage title={`${applicant?.first_name} ${applicant?.last_name}`}>
       <div className={classNames(styles.infoContainer)}>
@@ -91,17 +85,10 @@ export function RecruitmentApplicantAdminPage() {
         </Text>
         <Text>{recruitmentApplication?.application_text}</Text>
       </div>
-      <div className={styles.withdrawContainer}>
-        {recruitmentApplication?.withdrawn ? (
-          <Text as="i" size="l" className={styles.withdrawnText}>
-            {t(KEY.recruitment_withdrawn)}
-          </Text>
-        ) : (
-          <Button theme="samf" onClick={adminWithdraw}>
-            {t(KEY.recruitment_withdraw_application)}
-          </Button>
-        )}
+      <div className={classNames(styles.infoContainer)}>
+        <RecruitmentInterviewNotesForm initialData={initialData} />
       </div>
+
       <div className={classNames(styles.infoContainer)}>
         <Text size="l" as="strong" className={styles.textBottom}>
           {t(KEY.recruitment_all_applications)}
@@ -114,59 +101,81 @@ export function RecruitmentApplicantAdminPage() {
             t(KEY.recruitment_recruiter_status),
             t(KEY.recruitment_interview_time),
           ]}
-          data={otherRecruitmentApplication.map((element) => {
-            return {
-              cells: [
-                {
-                  sortable: true,
-                  content: (
-                    <Link
-                      target={'frontend'}
-                      url={reverse({
-                        pattern: ROUTES.frontend.admin_recruitment_applicant,
-                        urlParams: {
-                          applicationID: element.id,
-                        },
-                      })}
-                    >
-                      {element.applicant_priority}
-                    </Link>
-                  ),
-                },
-                {
-                  content: (
-                    <Link
-                      target={'frontend'}
-                      url={reverse({
-                        pattern: ROUTES.frontend.admin_recruitment_applicant,
-                        urlParams: {
-                          applicationID: element.id,
-                        },
-                      })}
-                    >
-                      {dbT(element.recruitment_position, 'name')}
-                    </Link>
-                  ),
-                },
-                {
-                  content: (
-                    <Link
-                      url={reverse({
-                        pattern: ROUTES.frontend.information_page_detail,
-                        urlParams: { slugField: element.recruitment_position.gang.name_nb.toLowerCase() },
-                      })}
-                    >
-                      {dbT(element.recruitment_position.gang, 'name')}
-                    </Link>
-                  ),
-                },
-                element.recruiter_priority ? element.recruiter_priority : t(KEY.common_not_set),
-                element.interview_time ? element.interview_time : t(KEY.common_not_set),
-              ],
-            };
-          })}
+          data={
+            otherRecruitmentApplication
+              ? otherRecruitmentApplication.map((element) => {
+                  return {
+                    cells: [
+                      {
+                        sortable: true,
+                        content: (
+                          <Link
+                            target={'frontend'}
+                            url={reverse({
+                              pattern: ROUTES.frontend.admin_recruitment_applicant,
+                              urlParams: {
+                                applicationID: element.id,
+                              },
+                            })}
+                          >
+                            {element.applicant_priority}
+                          </Link>
+                        ),
+                      },
+                      {
+                        content: (
+                          <Link
+                            target={'frontend'}
+                            url={reverse({
+                              pattern: ROUTES.frontend.admin_recruitment_applicant,
+                              urlParams: {
+                                applicationID: element.id,
+                              },
+                            })}
+                          >
+                            {dbT(element.recruitment_position, 'name')}
+                          </Link>
+                        ),
+                      },
+                      {
+                        content: (
+                          <Link
+                            url={reverse({
+                              pattern: ROUTES.frontend.information_page_detail,
+                              urlParams: { slugField: element.recruitment_position.gang.name_nb.toLowerCase() },
+                            })}
+                          >
+                            {dbT(element.recruitment_position.gang, 'name')}
+                          </Link>
+                        ),
+                      },
+                      element.recruiter_priority ? element.recruiter_priority : t(KEY.common_not_set),
+                      element.interview_time ? element.interview_time : t(KEY.common_not_set),
+                    ],
+                  };
+                })
+              : []
+          }
         />
       </div>
+      <div className={styles.withdrawContainer}>
+        {recruitmentApplication?.withdrawn ? (
+          <Text as="i" size="l" className={styles.withdrawnText}>
+            {t(KEY.recruitment_withdrawn)}
+          </Text>
+        ) : (
+          <Button
+            theme="samf"
+            onClick={() => {
+              if (recruitmentApplication?.id) {
+                adminWithdraw.mutate(recruitmentApplication.id);
+              }
+            }}
+          >
+            {t(KEY.recruitment_withdraw_application)}
+          </Button>
+        )}
+      </div>
     </AdminPage>
   );
 }

frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/RecruitmentInterviewNotesForm.tsx

@@ -0,0 +1,58 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Textarea } from '~/Components';
+import { KEY } from '~/i18n/constants';
+
+const recruitmentNotesSchema = z.object({
+  notes: z.string(),
+});
+
+type RecruitmentInterviewNotesFormType = z.infer<typeof recruitmentNotesSchema>;
+
+interface RecruitmentInterviewNotesFormProps {
+  initialData: Partial<RecruitmentInterviewNotesFormType>;
+}
+
+export function RecruitmentInterviewNotesForm({ initialData }: RecruitmentInterviewNotesFormProps) {
+  const { t } = useTranslation();
+
+  const form = useForm<RecruitmentInterviewNotesFormType>({
+    resolver: zodResolver(recruitmentNotesSchema),
+    defaultValues: initialData,
+  });
+
+  function handleUpdateNotes(value: string) {
+    // TODO: Update notes using a put request
+    console.log(value);
+  }
+
+  return (
+    <Form {...form}>
+      <form>
+        <div>
+          <FormField
+            control={form.control}
+            name="notes"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t(KEY.recruitment_interview_notes)}</FormLabel>
+                <FormControl>
+                  <Textarea
+                    {...field}
+                    onBlur={(newNotes) => {
+                      field.onBlur(); // Call the default onBlur handler from react-hook-form
+                      handleUpdateNotes(newNotes.target.value); // Call your custom function on blur
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+      </form>
+    </Form>
+  );
+}

frontend/src/api.ts

@@ -759,7 +759,7 @@ export async function getRecruitmentApplicationsForRecruiter(
       pattern: ROUTES.backend.samfundet__recruitment_applications_recruiter,
       urlParams: { applicationId: applicationID },
     });
-  const response = await axios.get(url, { withCredentials: true });
+  const response = await axios.get<RecruitmentApplicationRecruiterDto>(url, { withCredentials: true });
 
   return response;
 }