From 7bdfd8907c4be1d3a8e7ed6587cfa2a960e2753c Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Sun, 24 Nov 2024 15:15:49 +0100
Subject: [PATCH 01/11] add EditApplicationModal

---
 components/form/EditApplicationModal.tsx | 121 +++++++++++++++++++++++
 pages/apply/[period-id].tsx              |  19 +++-
 2 files changed, 135 insertions(+), 5 deletions(-)
 create mode 100644 components/form/EditApplicationModal.tsx

diff --git a/components/form/EditApplicationModal.tsx b/components/form/EditApplicationModal.tsx
new file mode 100644
index 00000000..d46ef88d
--- /dev/null
+++ b/components/form/EditApplicationModal.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { ApplicationForm } from "./ApplicationForm";
+import { applicantType, DeepPartial, periodType } from "../../lib/types/types";
+import { useSession } from "next-auth/react";
+import Button from "../Button";
+
+interface Props {
+  period: periodType | undefined;
+  availableCommittees: string[];
+  optionalCommittees: string[];
+}
+
+const ApplicationEditModal = ({
+  period,
+  availableCommittees,
+  optionalCommittees,
+}: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { data: session } = useSession();
+
+  const [applicationData, setApplicationData] = useState<
+    DeepPartial<applicantType>
+  >({
+    owId: session?.user?.owId,
+    name: session?.user?.name,
+    email: session?.user?.email,
+    phone: session?.user?.phone || "",
+    grade: "1",
+    about: "",
+    optionalCommittees: [],
+    preferences: {
+      first: "",
+      second: "",
+      third: "",
+    },
+  });
+
+  const submitEdit = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Button
+        title="Rediger søknad"
+        color="blue"
+        onClick={() => setIsOpen(true)}
+      />
+      {isOpen && (
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div
+              className="fixed inset-0 transition-opacity"
+              aria-hidden="true"
+              onClick={() => setIsOpen(false)}
+            >
+              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+
+            <span
+              className="hidden sm:inline-block sm:align-middle sm:h-screen"
+              aria-hidden="true"
+            >
+              &#8203;
+            </span>
+
+            <div
+              className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="modal-headline"
+            >
+              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <div className="sm:flex sm:items-start">
+                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <h3
+                      className="text-lg leading-6 font-medium text-gray-900"
+                      id="modal-headline"
+                    >
+                      Rediger søknad
+                    </h3>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">
+                        Du kan redigere søknaden din her. Husk å lagre
+                        endringene før du lukker.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-4">
+                  <ApplicationForm
+                    applicationData={applicationData}
+                    setApplicationData={setApplicationData}
+                    availableCommittees={availableCommittees}
+                    optionalCommittees={optionalCommittees}
+                  />
+                </div>
+                <div className="flex flex-row gap-6">
+                  <Button
+                    title="Lukk"
+                    color="white"
+                    onClick={() => setIsOpen(false)}
+                  />
+                  <Button
+                    title="Lagre endringer"
+                    color="blue"
+                    onClick={submitEdit}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ApplicationEditModal;
diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index 73afadb8..8991d562 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -24,6 +24,7 @@ import {
 } from "../../lib/api/applicantApi";
 import ErrorPage from "../../components/ErrorPage";
 import { MainTitle, SimpleTitle } from "../../components/Typography";
+import ApplicationEditModal from "../../components/form/EditApplicationModal";
 
 const Application: NextPage = () => {
   const queryClient = useQueryClient();
@@ -167,12 +168,20 @@ const Application: NextPage = () => {
           spam-mappen.)
         </p>
         {!isApplicationPeriodOver && (
-          <Button
-            title="Trekk tilbake søknad"
-            color="white"
-            onClick={handleDeleteApplication}
-          />
+          <div className="flex flex-row gap-6">
+            <Button
+              title="Trekk tilbake søknad"
+              color="white"
+              onClick={handleDeleteApplication}
+            />
+            <ApplicationEditModal
+              period={period}
+              availableCommittees={period?.committees || []}
+              optionalCommittees={period?.optionalCommittees || []}
+            />
+          </div>
         )}
+
         {fetchedApplicationData?.application && (
           <div className="w-full max-w-md">
             <ApplicantCard

From 0983bf15a887b6244ebef93fa2704d896f9fccbc Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Sun, 24 Nov 2024 15:20:01 +0100
Subject: [PATCH 02/11] add originalApplicationData

---
 components/form/EditApplicationModal.tsx | 26 +++++++++---------------
 pages/apply/[period-id].tsx              |  2 +-
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/components/form/EditApplicationModal.tsx b/components/form/EditApplicationModal.tsx
index d46ef88d..9e34fbaa 100644
--- a/components/form/EditApplicationModal.tsx
+++ b/components/form/EditApplicationModal.tsx
@@ -3,38 +3,32 @@
 import { useState } from "react";
 import { ApplicationForm } from "./ApplicationForm";
 import { applicantType, DeepPartial, periodType } from "../../lib/types/types";
-import { useSession } from "next-auth/react";
 import Button from "../Button";
 
 interface Props {
-  period: periodType | undefined;
+  originalApplicationData: applicantType;
   availableCommittees: string[];
   optionalCommittees: string[];
 }
 
 const ApplicationEditModal = ({
-  period,
   availableCommittees,
   optionalCommittees,
+  originalApplicationData,
 }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
-  const { data: session } = useSession();
 
   const [applicationData, setApplicationData] = useState<
     DeepPartial<applicantType>
   >({
-    owId: session?.user?.owId,
-    name: session?.user?.name,
-    email: session?.user?.email,
-    phone: session?.user?.phone || "",
-    grade: "1",
-    about: "",
-    optionalCommittees: [],
-    preferences: {
-      first: "",
-      second: "",
-      third: "",
-    },
+    owId: originalApplicationData.owId,
+    name: originalApplicationData.name,
+    email: originalApplicationData.email,
+    phone: originalApplicationData.phone,
+    grade: originalApplicationData.grade,
+    about: originalApplicationData.about,
+    optionalCommittees: originalApplicationData.optionalCommittees,
+    preferences: originalApplicationData.preferences,
   });
 
   const submitEdit = () => {
diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index 8991d562..0ef49404 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -175,9 +175,9 @@ const Application: NextPage = () => {
               onClick={handleDeleteApplication}
             />
             <ApplicationEditModal
-              period={period}
               availableCommittees={period?.committees || []}
               optionalCommittees={period?.optionalCommittees || []}
+              originalApplicationData={fetchedApplicationData.application}
             />
           </div>
         )}

From 821c5be3a85b21df68d569f900d446712a5d25b0 Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Sun, 24 Nov 2024 15:45:40 +0100
Subject: [PATCH 03/11] handle default values

---
 components/form/ApplicationForm.tsx | 18 +++++++++++++++++-
 pages/apply/[period-id].tsx         | 19 ++++++++++++++-----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/components/form/ApplicationForm.tsx b/components/form/ApplicationForm.tsx
index e32a968c..364db855 100644
--- a/components/form/ApplicationForm.tsx
+++ b/components/form/ApplicationForm.tsx
@@ -3,7 +3,11 @@ import RadioInput from "./RadioInput";
 import TextAreaInput from "./TextAreaInput";
 import SelectInput from "./SelectInput";
 import Line from "./Line";
-import { DeepPartial, applicantType } from "../../lib/types/types";
+import {
+  DeepPartial,
+  applicantType,
+  preferencesType,
+} from "../../lib/types/types";
 import { changeDisplayName } from "../../lib/utils/toString";
 import { useEffect, useState } from "react";
 import CustomPhoneInput from "./CustomPhoneInput";
@@ -121,6 +125,7 @@ export const ApplicationForm = (props: Props) => {
         <Line />
         <TextAreaInput
           label="Skriv litt om deg selv"
+          value={props.applicationData.about}
           updateInputValues={(value: any) =>
             props.setApplicationData({ ...props.applicationData, about: value })
           }
@@ -136,6 +141,9 @@ export const ApplicationForm = (props: Props) => {
         </div>
         <SelectInput
           required
+          defaultValue={
+            (props.applicationData.preferences as preferencesType)?.first || ""
+          }
           values={availableCommittees}
           label={availableCommittees.length > 2 ? "Førstevalg" : "Velg komite"}
           updateInputValues={(value: string) =>
@@ -152,6 +160,10 @@ export const ApplicationForm = (props: Props) => {
         {availableCommittees.length > 2 && (
           <SelectInput
             values={availableCommittees}
+            defaultValue={
+              (props.applicationData.preferences as preferencesType)?.second ||
+              ""
+            }
             label="Andrevalg"
             updateInputValues={(value: string) =>
               props.setApplicationData({
@@ -167,6 +179,10 @@ export const ApplicationForm = (props: Props) => {
         {availableCommittees.length > 3 && (
           <SelectInput
             values={availableCommittees}
+            defaultValue={
+              (props.applicationData.preferences as preferencesType)?.third ||
+              ""
+            }
             label="Tredjevalg"
             updateInputValues={(value: string) =>
               props.setApplicationData({
diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index 0ef49404..73a74c90 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -174,11 +174,20 @@ const Application: NextPage = () => {
               color="white"
               onClick={handleDeleteApplication}
             />
-            <ApplicationEditModal
-              availableCommittees={period?.committees || []}
-              optionalCommittees={period?.optionalCommittees || []}
-              originalApplicationData={fetchedApplicationData.application}
-            />
+            {fetchedApplicationData?.application && (
+              <ApplicationEditModal
+                availableCommittees={period?.committees || []}
+                optionalCommittees={period?.optionalCommittees || []}
+                originalApplicationData={fetchedApplicationData.application}
+              />
+            )}
+            {applicationData.phone && (
+              <ApplicationEditModal
+                availableCommittees={period?.committees || []}
+                optionalCommittees={period?.optionalCommittees || []}
+                originalApplicationData={applicationData as applicantType}
+              />
+            )}
           </div>
         )}
 

From ca3c08ec532694e230940fe8c7d8821cd4d4c957 Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Sun, 24 Nov 2024 15:58:37 +0100
Subject: [PATCH 04/11] fix default RadioInput value

---
 components/form/ApplicationForm.tsx |  6 +++
 components/form/RadioInput.tsx      | 65 ++++++++++++++++++-----------
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/components/form/ApplicationForm.tsx b/components/form/ApplicationForm.tsx
index 364db855..dcd5180f 100644
--- a/components/form/ApplicationForm.tsx
+++ b/components/form/ApplicationForm.tsx
@@ -202,6 +202,7 @@ export const ApplicationForm = (props: Props) => {
             ["Nei", "nei"],
             ["Usikker (gjerne spør om mer info på intervjuet)", "kanskje"],
           ]}
+          defaultValue={props.applicationData.bankom ? "ja" : "nei"}
           label="Er du interessert i å være økonomiansvarlig i komiteen (tilleggsverv i Bankom)?"
           updateInputValues={(value: boolean) =>
             props.setApplicationData({
@@ -213,6 +214,11 @@ export const ApplicationForm = (props: Props) => {
         {optionalCommittees.map((committee) => (
           <div key={committee}>
             <RadioInput
+              defaultValue={
+                props.applicationData.optionalCommittees?.includes(committee)
+                  ? "ja"
+                  : "nei"
+              }
               values={[
                 ["Ja", "ja"],
                 ["Nei", "nei"],
diff --git a/components/form/RadioInput.tsx b/components/form/RadioInput.tsx
index ba237fc6..f462a7c9 100644
--- a/components/form/RadioInput.tsx
+++ b/components/form/RadioInput.tsx
@@ -1,37 +1,52 @@
 interface Props {
   updateInputValues: Function;
   label: string;
-  values: any[][];
+  values: [string, string][];
+  defaultValue?: string;
 }
 
-const RadioInput = (props: Props) => {
-  const handleInputChange = (e: React.BaseSyntheticEvent) => {
-    props.updateInputValues(e.target.value);
+const RadioInput = ({
+  updateInputValues,
+  label,
+  values,
+  defaultValue,
+}: Props) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateInputValues(e.target.value);
   };
 
   return (
     <div className="max-w-xs mx-auto my-6">
-      <label className="inline-block mb-2 text-gray-700 dark:text-white form-label">
-        {props.label}
-      </label>
-      <div onChange={(e) => handleInputChange(e)}>
-        {props.values.map((option, index) => {
-          return (
-            <div key={index} className="flex">
-              <input
-                required
-                className="float-left w-4 h-4 mt-1 mr-2 align-top transition duration-200 bg-center bg-no-repeat bg-contain border rounded-full appearance-none cursor-pointer focus:outline-none border-gray-300 checked:bg-online-darkTeal dark:bg-online-darkBlue dark:border-gray-700 dark:checked:bg-online-darkTeal"
-                type="radio"
-                value={option[1]}
-                name={props.label}
-              />
-              <label className="inline-block text-gray-800 dark:text-white">
-                {option[0]}
-              </label>
-            </div>
-          );
-        })}
-      </div>
+      <fieldset>
+        <legend className="inline-block mb-2 text-gray-700 dark:text-white form-label">
+          {label}
+        </legend>
+        <div>
+          {values.map(([displayText, value], index) => {
+            const inputId = `${label}-${value}-${index}`;
+            return (
+              <div key={value} className="flex items-center mb-2">
+                <input
+                  id={inputId}
+                  required
+                  className="w-4 h-4 mt-1 mr-2 align-top transition duration-200 bg-center bg-no-repeat bg-contain border rounded-full appearance-none cursor-pointer focus:outline-none border-gray-300 checked:bg-online-darkTeal dark:bg-online-darkBlue dark:border-gray-700 dark:checked:bg-online-darkTeal"
+                  type="radio"
+                  value={value}
+                  name={label}
+                  defaultChecked={defaultValue === value}
+                  onChange={handleInputChange}
+                />
+                <label
+                  htmlFor={inputId}
+                  className="inline-block text-gray-800 dark:text-white"
+                >
+                  {displayText}
+                </label>
+              </div>
+            );
+          })}
+        </div>
+      </fieldset>
     </div>
   );
 };

From 9284cb186a77d63faabf467b58bc62364842b45f Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Sun, 24 Nov 2024 16:08:17 +0100
Subject: [PATCH 05/11] add backend for editing application

---
 lib/api/applicantApi.ts                  | 24 +++++++++++++++++++++++
 lib/mongo/applicants.ts                  | 25 ++++++++++++++++++++++++
 pages/api/applicants/[period-id]/[id].ts | 19 +++++++++++++++++-
 3 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/lib/api/applicantApi.ts b/lib/api/applicantApi.ts
index ac0ef8c5..7b75a9c3 100644
--- a/lib/api/applicantApi.ts
+++ b/lib/api/applicantApi.ts
@@ -44,6 +44,30 @@ export const createApplicant = async (applicant: applicantType) => {
   return data;
 };
 
+export const editApplicant = async ({
+  applicant,
+  periodId,
+  owId,
+}: {
+  applicant: applicantType;
+  periodId: string;
+  owId: string;
+}) => {
+  const response = await fetch(`/api/applicants/${periodId}/${owId}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(applicant),
+  });
+
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error(data.error || "Unknown error occurred");
+  }
+  return data;
+};
+
 export const deleteApplicant = async ({
   periodId,
   owId,
diff --git a/lib/mongo/applicants.ts b/lib/mongo/applicants.ts
index 212aff32..10472eac 100644
--- a/lib/mongo/applicants.ts
+++ b/lib/mongo/applicants.ts
@@ -225,6 +225,31 @@ export const getApplicantsForCommittee = async (
   }
 };
 
+export const editApplication = async (
+  owId: string,
+  periodId: string | ObjectId,
+  newApplicationData: applicantType
+) => {
+  try {
+    if (!applicants) await init();
+
+    const result = await applicants.findOneAndUpdate(
+      { owId: owId, periodId: periodId },
+      { $set: newApplicationData },
+      { returnDocument: "after" }
+    );
+
+    if (result) {
+      return { applicant: result };
+    } else {
+      return { error: "Application not found" };
+    }
+  } catch (error) {
+    console.error(error);
+    return { error: "Failed to edit application" };
+  }
+};
+
 export const deleteApplication = async (
   owId: string,
   periodId: string | ObjectId
diff --git a/pages/api/applicants/[period-id]/[id].ts b/pages/api/applicants/[period-id]/[id].ts
index 7d77e73a..9fe48fac 100644
--- a/pages/api/applicants/[period-id]/[id].ts
+++ b/pages/api/applicants/[period-id]/[id].ts
@@ -1,6 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import {
   deleteApplication,
+  editApplication,
   getApplication,
 } from "../../../../lib/mongo/applicants";
 import { getServerSession } from "next-auth";
@@ -49,6 +50,22 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       const { error } = await deleteApplication(id, periodId);
       if (error) throw new Error(error);
       return res.status(204).end();
+    } else if (req.method === "PUT") {
+      const currentDate = new Date().toISOString();
+
+      if (new Date(period.applicationPeriod.end) < new Date(currentDate)) {
+        return res.status(403).json({ error: "Application period is over" });
+      }
+
+      const { application } = req.body;
+
+      if (!application) {
+        return res.status(400).json({ error: "Invalid data format" });
+      }
+
+      const { error } = await editApplication(id, periodId, application);
+      if (error) throw new Error(error);
+      return res.status(200).end();
     }
   } catch (error) {
     if (error instanceof Error) {
@@ -57,7 +74,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.status(500).json("Unexpected error occurred");
   }
 
-  res.setHeader("Allow", ["GET", "DELETE"]);
+  res.setHeader("Allow", ["GET", "DELETE", "PUT"]);
   res.status(405).end(`Method ${req.method} is not allowed.`);
 };
 

From af7bb39375a2dfcdb7ad45c079acf9bc0f6b944e Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Mon, 25 Nov 2024 14:10:40 +0100
Subject: [PATCH 06/11] add backend methods for editing

---
 components/form/EditApplicationModal.tsx | 24 +++++++++++++++++++++++-
 lib/api/applicantApi.ts                  |  2 +-
 pages/apply/[period-id].tsx              |  2 ++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/form/EditApplicationModal.tsx b/components/form/EditApplicationModal.tsx
index 9e34fbaa..80cd2cc6 100644
--- a/components/form/EditApplicationModal.tsx
+++ b/components/form/EditApplicationModal.tsx
@@ -4,9 +4,13 @@ import { useState } from "react";
 import { ApplicationForm } from "./ApplicationForm";
 import { applicantType, DeepPartial, periodType } from "../../lib/types/types";
 import Button from "../Button";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { editApplicant } from "../../lib/api/applicantApi";
+import toast from "react-hot-toast";
 
 interface Props {
   originalApplicationData: applicantType;
+  periodId: string;
   availableCommittees: string[];
   optionalCommittees: string[];
 }
@@ -14,9 +18,11 @@ interface Props {
 const ApplicationEditModal = ({
   availableCommittees,
   optionalCommittees,
+  periodId,
   originalApplicationData,
 }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
+  const queryClient = useQueryClient();
 
   const [applicationData, setApplicationData] = useState<
     DeepPartial<applicantType>
@@ -32,9 +38,25 @@ const ApplicationEditModal = ({
   });
 
   const submitEdit = () => {
-    setIsOpen(false);
+    editApplicationMutation.mutate({
+      applicant: applicationData as applicantType,
+      periodId,
+      owId: originalApplicationData.owId,
+    });
   };
 
+  const editApplicationMutation = useMutation({
+    mutationFn: editApplicant,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["applicant", periodId, originalApplicationData.owId],
+      });
+      toast.success("Søknad oppdatert successfully");
+      setIsOpen(false);
+    },
+    onError: () => toast.error("Det skjedde en feil, vennligst prøv igjen"),
+  });
+
   return (
     <>
       <Button
diff --git a/lib/api/applicantApi.ts b/lib/api/applicantApi.ts
index 7b75a9c3..e4360f40 100644
--- a/lib/api/applicantApi.ts
+++ b/lib/api/applicantApi.ts
@@ -58,7 +58,7 @@ export const editApplicant = async ({
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(applicant),
+    body: JSON.stringify({ application: applicant }),
   });
 
   const data = await response.json();
diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index 73a74c90..fb564c26 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -179,6 +179,7 @@ const Application: NextPage = () => {
                 availableCommittees={period?.committees || []}
                 optionalCommittees={period?.optionalCommittees || []}
                 originalApplicationData={fetchedApplicationData.application}
+                periodId={periodId}
               />
             )}
             {applicationData.phone && (
@@ -186,6 +187,7 @@ const Application: NextPage = () => {
                 availableCommittees={period?.committees || []}
                 optionalCommittees={period?.optionalCommittees || []}
                 originalApplicationData={applicationData as applicantType}
+                periodId={periodId}
               />
             )}
           </div>

From 436db6439a38e5ba38913b324714bb0a49e96a59 Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Wed, 27 Nov 2024 17:43:53 +0100
Subject: [PATCH 07/11] change from modal to page

---
 components/form/EditApplicationModal.tsx | 109 ++++++++---------------
 pages/api/applicants/[period-id]/[id].ts |  33 +++++--
 pages/apply/[period-id].tsx              |  49 ++++++----
 3 files changed, 96 insertions(+), 95 deletions(-)

diff --git a/components/form/EditApplicationModal.tsx b/components/form/EditApplicationModal.tsx
index 80cd2cc6..c1c9bf03 100644
--- a/components/form/EditApplicationModal.tsx
+++ b/components/form/EditApplicationModal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { ApplicationForm } from "./ApplicationForm";
 import { applicantType, DeepPartial, periodType } from "../../lib/types/types";
@@ -7,12 +5,15 @@ import Button from "../Button";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { editApplicant } from "../../lib/api/applicantApi";
 import toast from "react-hot-toast";
+import { validateApplication } from "../../lib/utils/validateApplication";
 
 interface Props {
   originalApplicationData: applicantType;
   periodId: string;
   availableCommittees: string[];
   optionalCommittees: string[];
+  isEditing: boolean;
+  setIsEditing: (isEditing: boolean) => void;
 }
 
 const ApplicationEditModal = ({
@@ -20,8 +21,9 @@ const ApplicationEditModal = ({
   optionalCommittees,
   periodId,
   originalApplicationData,
+  isEditing,
+  setIsEditing,
 }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
   const queryClient = useQueryClient();
 
   const [applicationData, setApplicationData] = useState<
@@ -35,9 +37,12 @@ const ApplicationEditModal = ({
     about: originalApplicationData.about,
     optionalCommittees: originalApplicationData.optionalCommittees,
     preferences: originalApplicationData.preferences,
+    selectedTimes: originalApplicationData.selectedTimes,
   });
 
   const submitEdit = () => {
+    if (!validateApplication(applicationData)) return;
+
     editApplicationMutation.mutate({
       applicant: applicationData as applicantType,
       periodId,
@@ -52,84 +57,44 @@ const ApplicationEditModal = ({
         queryKey: ["applicant", periodId, originalApplicationData.owId],
       });
       toast.success("Søknad oppdatert successfully");
-      setIsOpen(false);
+      setIsEditing(false);
     },
     onError: () => toast.error("Det skjedde en feil, vennligst prøv igjen"),
   });
 
   return (
     <>
-      <Button
-        title="Rediger søknad"
-        color="blue"
-        onClick={() => setIsOpen(true)}
-      />
-      {isOpen && (
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div
-              className="fixed inset-0 transition-opacity"
-              aria-hidden="true"
-              onClick={() => setIsOpen(false)}
-            >
-              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
-            </div>
-
-            <span
-              className="hidden sm:inline-block sm:align-middle sm:h-screen"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-
-            <div
-              className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="modal-headline"
-            >
-              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                <div className="sm:flex sm:items-start">
-                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3
-                      className="text-lg leading-6 font-medium text-gray-900"
-                      id="modal-headline"
-                    >
-                      Rediger søknad
-                    </h3>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">
-                        Du kan redigere søknaden din her. Husk å lagre
-                        endringene før du lukker.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4">
-                  <ApplicationForm
-                    applicationData={applicationData}
-                    setApplicationData={setApplicationData}
-                    availableCommittees={availableCommittees}
-                    optionalCommittees={optionalCommittees}
-                  />
-                </div>
-                <div className="flex flex-row gap-6">
-                  <Button
-                    title="Lukk"
-                    color="white"
-                    onClick={() => setIsOpen(false)}
-                  />
-                  <Button
-                    title="Lagre endringer"
-                    color="blue"
-                    onClick={submitEdit}
-                  />
-                </div>
-              </div>
+      <div className="flex flex-col items-center justify-center min-h-screen pt-4 px-5 pb-20 text-center">
+        <div className="bg-white">
+          <div className="text-center">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">
+              Rediger søknad
+            </h3>
+            <div className="mt-2">
+              <p className="text-sm text-gray-500">
+                Du kan redigere søknaden din her. Husk å lagre endringene før du
+                lukker.
+              </p>
             </div>
           </div>
+          <div className="mt-5 sm:mt-4">
+            <ApplicationForm
+              applicationData={applicationData}
+              setApplicationData={setApplicationData}
+              availableCommittees={availableCommittees}
+              optionalCommittees={optionalCommittees}
+            />
+          </div>
+          <div className="flex flex-row gap-6 justify-center">
+            <Button
+              title="Lukk"
+              color="white"
+              onClick={() => setIsEditing(false)}
+            />
+            <Button title="Lagre endringer" color="blue" onClick={submitEdit} />
+          </div>
         </div>
-      )}
+      </div>
     </>
   );
 };
diff --git a/pages/api/applicants/[period-id]/[id].ts b/pages/api/applicants/[period-id]/[id].ts
index 9fe48fac..c36cbdff 100644
--- a/pages/api/applicants/[period-id]/[id].ts
+++ b/pages/api/applicants/[period-id]/[id].ts
@@ -12,6 +12,8 @@ import {
   checkOwId,
 } from "../../../../lib/utils/apiChecks";
 import { getPeriodById } from "../../../../lib/mongo/periods";
+import { isApplicantType } from "../../../../lib/utils/validators";
+import { applicantType } from "../../../../lib/types/types";
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const session = await getServerSession(req, res, authOptions);
@@ -51,21 +53,38 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       if (error) throw new Error(error);
       return res.status(204).end();
     } else if (req.method === "PUT") {
-      const currentDate = new Date().toISOString();
+      const { period } = await getPeriodById(periodId);
 
-      if (new Date(period.applicationPeriod.end) < new Date(currentDate)) {
-        return res.status(403).json({ error: "Application period is over" });
+      if (!period) {
+        return res.status(400).json({ error: "Invalid period id" });
       }
 
-      const { application } = req.body;
+      const requestBody: applicantType = req.body;
+      requestBody.periodId = periodId;
+
+      if (!isApplicantType(requestBody, period)) {
+        return res.status(400).json({ error: "Invalid data format" });
+      }
+
+      const now = new Date();
+      const applicationStart = period.applicationPeriod.start;
+      const applicationEnd = period.applicationPeriod.end;
+
+      if (now < applicationStart || now > applicationEnd) {
+        return res
+          .status(400)
+          .json({ error: "Not within the application period" });
+      }
 
-      if (!application) {
+      if (!isApplicantType(requestBody, period)) {
         return res.status(400).json({ error: "Invalid data format" });
       }
 
-      const { error } = await editApplication(id, periodId, application);
+      const { error } = await editApplication(id, periodId, requestBody);
       if (error) throw new Error(error);
-      return res.status(200).end();
+      return res
+        .status(200)
+        .json({ message: "Application updated successfully" });
     }
   } catch (error) {
     if (error instanceof Error) {
diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index fb564c26..2026d85b 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -34,6 +34,7 @@ const Application: NextPage = () => {
   const applicantId = session?.user?.owId;
 
   const [activeTab, setActiveTab] = useState(0);
+  const [isEditing, setIsEditing] = useState(false);
   const [applicationData, setApplicationData] = useState<
     DeepPartial<applicantType>
   >({
@@ -151,6 +152,33 @@ const Application: NextPage = () => {
   if (!periodData?.exists)
     return <SimpleTitle title="Opptaket finnes ikke" size="large" />;
 
+  if (isEditing) {
+    return (
+      <>
+        {fetchedApplicationData?.application && (
+          <ApplicationEditModal
+            availableCommittees={period?.committees || []}
+            optionalCommittees={period?.optionalCommittees || []}
+            originalApplicationData={fetchedApplicationData.application}
+            periodId={periodId}
+            isEditing={isEditing}
+            setIsEditing={setIsEditing}
+          />
+        )}
+        {applicationData.phone && (
+          <ApplicationEditModal
+            availableCommittees={period?.committees || []}
+            optionalCommittees={period?.optionalCommittees || []}
+            originalApplicationData={applicationData as applicantType}
+            periodId={periodId}
+            isEditing={isEditing}
+            setIsEditing={setIsEditing}
+          />
+        )}
+      </>
+    );
+  }
+
   if (fetchedApplicationData?.exists)
     return (
       <div className="flex flex-col items-center justify-center h-full gap-5 px-5 py-10 md:px-40 lg:px-80 dark:text-white">
@@ -174,22 +202,11 @@ const Application: NextPage = () => {
               color="white"
               onClick={handleDeleteApplication}
             />
-            {fetchedApplicationData?.application && (
-              <ApplicationEditModal
-                availableCommittees={period?.committees || []}
-                optionalCommittees={period?.optionalCommittees || []}
-                originalApplicationData={fetchedApplicationData.application}
-                periodId={periodId}
-              />
-            )}
-            {applicationData.phone && (
-              <ApplicationEditModal
-                availableCommittees={period?.committees || []}
-                optionalCommittees={period?.optionalCommittees || []}
-                originalApplicationData={applicationData as applicantType}
-                periodId={periodId}
-              />
-            )}
+            <Button
+              title="Rediger søknad"
+              color="blue"
+              onClick={() => setIsEditing(true)}
+            />
           </div>
         )}
 

From 79f9ed63b12c46d1a13e7e08778e5ce963066488 Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Wed, 18 Dec 2024 22:21:08 +0100
Subject: [PATCH 08/11] Fix radiobutton

---
 components/form/ApplicationForm.tsx      | 23 ++++++++++++++++++-----
 components/form/CheckboxInput.tsx        |  2 +-
 components/form/EditApplicationModal.tsx |  5 +++--
 pages/apply/[period-id].tsx              |  2 --
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/components/form/ApplicationForm.tsx b/components/form/ApplicationForm.tsx
index dcd5180f..a50d5e9f 100644
--- a/components/form/ApplicationForm.tsx
+++ b/components/form/ApplicationForm.tsx
@@ -18,6 +18,7 @@ interface Props {
   setApplicationData: Function;
   availableCommittees: string[];
   optionalCommittees: string[];
+  isEditing?: boolean;
 }
 
 export const ApplicationForm = (props: Props) => {
@@ -202,9 +203,17 @@ export const ApplicationForm = (props: Props) => {
             ["Nei", "nei"],
             ["Usikker (gjerne spør om mer info på intervjuet)", "kanskje"],
           ]}
-          defaultValue={props.applicationData.bankom ? "ja" : "nei"}
+          defaultValue={
+            props.isEditing
+              ? props.applicationData.bankom === "ja"
+                ? "ja"
+                : props.applicationData.bankom === "nei"
+                ? "nei"
+                : "kanskje"
+              : undefined
+          }
           label="Er du interessert i å være økonomiansvarlig i komiteen (tilleggsverv i Bankom)?"
-          updateInputValues={(value: boolean) =>
+          updateInputValues={(value: string) =>
             props.setApplicationData({
               ...props.applicationData,
               bankom: value,
@@ -215,9 +224,13 @@ export const ApplicationForm = (props: Props) => {
           <div key={committee}>
             <RadioInput
               defaultValue={
-                props.applicationData.optionalCommittees?.includes(committee)
-                  ? "ja"
-                  : "nei"
+                props.isEditing
+                  ? props.applicationData.optionalCommittees?.includes(
+                      committee
+                    )
+                    ? "ja"
+                    : "nei"
+                  : undefined
               }
               values={[
                 ["Ja", "ja"],
diff --git a/components/form/CheckboxInput.tsx b/components/form/CheckboxInput.tsx
index 9e03079a..8b02e45b 100644
--- a/components/form/CheckboxInput.tsx
+++ b/components/form/CheckboxInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 
 interface CheckboxOption {
diff --git a/components/form/EditApplicationModal.tsx b/components/form/EditApplicationModal.tsx
index c1c9bf03..0a2ff59d 100644
--- a/components/form/EditApplicationModal.tsx
+++ b/components/form/EditApplicationModal.tsx
@@ -12,7 +12,6 @@ interface Props {
   periodId: string;
   availableCommittees: string[];
   optionalCommittees: string[];
-  isEditing: boolean;
   setIsEditing: (isEditing: boolean) => void;
 }
 
@@ -21,7 +20,6 @@ const ApplicationEditModal = ({
   optionalCommittees,
   periodId,
   originalApplicationData,
-  isEditing,
   setIsEditing,
 }: Props) => {
   const queryClient = useQueryClient();
@@ -35,6 +33,8 @@ const ApplicationEditModal = ({
     phone: originalApplicationData.phone,
     grade: originalApplicationData.grade,
     about: originalApplicationData.about,
+    bankom: originalApplicationData.bankom,
+
     optionalCommittees: originalApplicationData.optionalCommittees,
     preferences: originalApplicationData.preferences,
     selectedTimes: originalApplicationData.selectedTimes,
@@ -83,6 +83,7 @@ const ApplicationEditModal = ({
               setApplicationData={setApplicationData}
               availableCommittees={availableCommittees}
               optionalCommittees={optionalCommittees}
+              isEditing={true}
             />
           </div>
           <div className="flex flex-row gap-6 justify-center">
diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index 2026d85b..c8dbe007 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -161,7 +161,6 @@ const Application: NextPage = () => {
             optionalCommittees={period?.optionalCommittees || []}
             originalApplicationData={fetchedApplicationData.application}
             periodId={periodId}
-            isEditing={isEditing}
             setIsEditing={setIsEditing}
           />
         )}
@@ -171,7 +170,6 @@ const Application: NextPage = () => {
             optionalCommittees={period?.optionalCommittees || []}
             originalApplicationData={applicationData as applicantType}
             periodId={periodId}
-            isEditing={isEditing}
             setIsEditing={setIsEditing}
           />
         )}

From 2af45d700860932f17a130036b0b624320cfe752 Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Wed, 18 Dec 2024 22:37:19 +0100
Subject: [PATCH 09/11] fix PUT method

---
 pages/api/applicants/[period-id]/[id].ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/pages/api/applicants/[period-id]/[id].ts b/pages/api/applicants/[period-id]/[id].ts
index c36cbdff..601623ad 100644
--- a/pages/api/applicants/[period-id]/[id].ts
+++ b/pages/api/applicants/[period-id]/[id].ts
@@ -53,16 +53,22 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       if (error) throw new Error(error);
       return res.status(204).end();
     } else if (req.method === "PUT") {
+      const { application } = req.body;
+
+      if (!application) {
+        return res.status(400).json({ error: "Missing application data" });
+      }
+
       const { period } = await getPeriodById(periodId);
 
       if (!period) {
         return res.status(400).json({ error: "Invalid period id" });
       }
 
-      const requestBody: applicantType = req.body;
-      requestBody.periodId = periodId;
+      application.periodId = periodId;
+      application.date = new Date(new Date().getTime() + 60 * 60 * 2000); // add date with norwegain time (GMT+2)
 
-      if (!isApplicantType(requestBody, period)) {
+      if (!isApplicantType(application, period)) {
         return res.status(400).json({ error: "Invalid data format" });
       }
 
@@ -70,17 +76,19 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       const applicationStart = period.applicationPeriod.start;
       const applicationEnd = period.applicationPeriod.end;
 
+      console.log(now < applicationStart || now > applicationEnd);
+
       if (now < applicationStart || now > applicationEnd) {
         return res
           .status(400)
           .json({ error: "Not within the application period" });
       }
 
-      if (!isApplicantType(requestBody, period)) {
+      if (!isApplicantType(application, period)) {
         return res.status(400).json({ error: "Invalid data format" });
       }
 
-      const { error } = await editApplication(id, periodId, requestBody);
+      const { error } = await editApplication(id, periodId, application);
       if (error) throw new Error(error);
       return res
         .status(200)

From b855de57e3c6d709d6e7df1ed162a351fa823d46 Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Wed, 18 Dec 2024 22:40:24 +0100
Subject: [PATCH 10/11] fix visual bug

---
 pages/apply/[period-id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index c8dbe007..9e77da0c 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -217,7 +217,7 @@ const Application: NextPage = () => {
           </div>
         )}
 
-        {applicationData.phone && (
+        {applicationData.phone && !fetchedApplicationData.application && (
           <div className="w-full max-w-md">
             <ApplicantCard
               applicant={applicationData as applicantType}

From a112fbe2762e8765628280b94cbcf40261cf4a06 Mon Sep 17 00:00:00 2001
From: fredrir <fhansteen@gmail.com>
Date: Wed, 18 Dec 2024 22:47:40 +0100
Subject: [PATCH 11/11] add Schedule to edit application

---
 components/form/EditApplicationModal.tsx | 71 ++++++++++++++++++++----
 pages/api/applicants/[period-id]/[id].ts |  2 -
 pages/apply/[period-id].tsx              |  8 +--
 3 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/components/form/EditApplicationModal.tsx b/components/form/EditApplicationModal.tsx
index 0a2ff59d..d003bafb 100644
--- a/components/form/EditApplicationModal.tsx
+++ b/components/form/EditApplicationModal.tsx
@@ -6,10 +6,14 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { editApplicant } from "../../lib/api/applicantApi";
 import toast from "react-hot-toast";
 import { validateApplication } from "../../lib/utils/validateApplication";
+import { Tabs } from "../Tabs";
+import CheckBoxIcon from "../icons/icons/CheckBoxIcon";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import Schedule from "../committee/Schedule";
 
 interface Props {
   originalApplicationData: applicantType;
-  periodId: string;
+  period: periodType;
   availableCommittees: string[];
   optionalCommittees: string[];
   setIsEditing: (isEditing: boolean) => void;
@@ -18,12 +22,12 @@ interface Props {
 const ApplicationEditModal = ({
   availableCommittees,
   optionalCommittees,
-  periodId,
+  period,
   originalApplicationData,
   setIsEditing,
 }: Props) => {
   const queryClient = useQueryClient();
-
+  const [activeTab, setActiveTab] = useState(0);
   const [applicationData, setApplicationData] = useState<
     DeepPartial<applicantType>
   >({
@@ -45,7 +49,7 @@ const ApplicationEditModal = ({
 
     editApplicationMutation.mutate({
       applicant: applicationData as applicantType,
-      periodId,
+      periodId: period._id.toString(),
       owId: originalApplicationData.owId,
     });
   };
@@ -54,7 +58,11 @@ const ApplicationEditModal = ({
     mutationFn: editApplicant,
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ["applicant", periodId, originalApplicationData.owId],
+        queryKey: [
+          "applicant",
+          period._id.toString(),
+          originalApplicationData.owId,
+        ],
       });
       toast.success("Søknad oppdatert successfully");
       setIsEditing(false);
@@ -77,13 +85,52 @@ const ApplicationEditModal = ({
               </p>
             </div>
           </div>
-          <div className="mt-5 sm:mt-4">
-            <ApplicationForm
-              applicationData={applicationData}
-              setApplicationData={setApplicationData}
-              availableCommittees={availableCommittees}
-              optionalCommittees={optionalCommittees}
-              isEditing={true}
+          <div className="mt-5 sm:mt-4 max-w-md">
+            <Tabs
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              content={[
+                {
+                  title: "Søknad",
+                  icon: <CheckBoxIcon className="w-5 h-5" />,
+                  content: (
+                    <>
+                      <ApplicationForm
+                        applicationData={applicationData}
+                        setApplicationData={setApplicationData}
+                        availableCommittees={availableCommittees}
+                        optionalCommittees={optionalCommittees}
+                        isEditing={true}
+                      />
+                      <div className="flex justify-center w-full">
+                        <Button
+                          title="Videre"
+                          color="blue"
+                          onClick={() => {
+                            if (!validateApplication(applicationData)) return;
+                            setActiveTab(activeTab + 1);
+                          }}
+                          size="small"
+                        />
+                      </div>
+                    </>
+                  ),
+                },
+                {
+                  title: "Intervjutider",
+                  icon: <CalendarIcon className="w-5 h-5" />,
+                  content: (
+                    <div className="flex flex-col items-center justify-center">
+                      <Schedule
+                        interviewLength={Number(30)}
+                        periodTime={period?.interviewPeriod}
+                        setApplicationData={setApplicationData}
+                        applicationData={applicationData}
+                      />
+                    </div>
+                  ),
+                },
+              ]}
             />
           </div>
           <div className="flex flex-row gap-6 justify-center">
diff --git a/pages/api/applicants/[period-id]/[id].ts b/pages/api/applicants/[period-id]/[id].ts
index 601623ad..2297389c 100644
--- a/pages/api/applicants/[period-id]/[id].ts
+++ b/pages/api/applicants/[period-id]/[id].ts
@@ -76,8 +76,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       const applicationStart = period.applicationPeriod.start;
       const applicationEnd = period.applicationPeriod.end;
 
-      console.log(now < applicationStart || now > applicationEnd);
-
       if (now < applicationStart || now > applicationEnd) {
         return res
           .status(400)
diff --git a/pages/apply/[period-id].tsx b/pages/apply/[period-id].tsx
index 9e77da0c..ab5bea73 100644
--- a/pages/apply/[period-id].tsx
+++ b/pages/apply/[period-id].tsx
@@ -155,21 +155,21 @@ const Application: NextPage = () => {
   if (isEditing) {
     return (
       <>
-        {fetchedApplicationData?.application && (
+        {fetchedApplicationData?.application && period && (
           <ApplicationEditModal
             availableCommittees={period?.committees || []}
             optionalCommittees={period?.optionalCommittees || []}
             originalApplicationData={fetchedApplicationData.application}
-            periodId={periodId}
+            period={period}
             setIsEditing={setIsEditing}
           />
         )}
-        {applicationData.phone && (
+        {applicationData.phone && period && (
           <ApplicationEditModal
             availableCommittees={period?.committees || []}
             optionalCommittees={period?.optionalCommittees || []}
             originalApplicationData={applicationData as applicantType}
-            periodId={periodId}
+            period={period}
             setIsEditing={setIsEditing}
           />
         )}