Edit existing senior

src/components/AddSenior.tsx

@@ -1,4 +1,10 @@
-import React, { Dispatch, SetStateAction, useState } from "react";
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import Image, { StaticImageData } from "next/legacy/image";
 import cn from "classnames";
 import FilterDropdown from "@components/FilterDropdown";
@@ -86,11 +92,6 @@ const StudentSelector = ({
   );
 };
 
-// type SeniorData = Omit<
-//   Extract<z.infer<typeof seniorPostResponse>, { code: "SUCCESS" }>["data"],
-//   "StudentIDs"
-// >;
-
 type SeniorData = Pick<
   z.infer<typeof seniorSchema>,
   "firstname" | "lastname" | "location" | "description"
@@ -105,12 +106,14 @@ const AddSenior = ({
   seniorPatch,
   setSeniorPatch,
 }: AddSeniorProps) => {
-  const emptySenior: SeniorData = {
-    firstname: "",
-    lastname: "",
-    location: "",
-    description: "",
-  };
+  const emptySenior = useMemo(() => {
+    return {
+      firstname: "",
+      lastname: "",
+      location: "",
+      description: "",
+    };
+  }, []);
   const [seniorData, setSeniorData] = useState<SeniorData>(emptySenior);
   const [selectedStudents, setSelectedStudents] = useState<User[]>([]);
   const [currentImage, setCurrentImage] = useState<string | StaticImageData>(
@@ -119,6 +122,31 @@ const AddSenior = ({
   const [confirm, setConfirm] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
 
+  const initialSenior: Senior | undefined = useMemo(() => {
+    const senior = seniors.find((senior) => senior.id === seniorPatch);
+    return senior;
+  }, [seniorPatch, seniors]);
+
+  useEffect(() => {
+    if (initialSenior)
+      setSeniorData({
+        firstname: initialSenior.firstname,
+        lastname: initialSenior.lastname,
+        location: initialSenior.location,
+        description: initialSenior.description,
+      });
+  }, [initialSenior, emptySenior]);
+
+  useEffect(() => {
+    if (initialSenior) {
+      setSelectedStudents(
+        students.filter((student) =>
+          initialSenior.StudentIDs.includes(student.id)
+        )
+      );
+    }
+  }, [students, initialSenior]);
+
   const handlePopUp = () => {
     setShowAddSeniorPopUp(!showAddSeniorPopUp);
     setSeniorData(emptySenior);
@@ -248,6 +276,7 @@ const AddSenior = ({
                       <input
                         className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
                         type="text"
+                        value={seniorData.firstname}
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                           setSeniorData({
                             ...seniorData,
@@ -265,6 +294,7 @@ const AddSenior = ({
                       <input
                         className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-black"
                         type="text"
+                        value={seniorData.lastname}
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                           setSeniorData((seniorData) => ({
                             ...seniorData,
@@ -296,6 +326,7 @@ const AddSenior = ({
                   <textarea
                     className="h-25 mb-3 min-h-[20px] w-full rounded-md border-2 border-solid border-tan bg-white p-[10px] text-start text-sm text-black"
                     placeholder="Write a brief description about the senior"
+                    value={seniorData.description}
                     onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                       setSeniorData({
                         ...seniorData,

src/components/SeniorView.tsx

@@ -2,10 +2,12 @@
 
 import { Senior, User } from "@prisma/client";
 import SearchableContainer from "./SearchableContainer";
-import { UserTile } from "./TileGrid";
+import { UserTile, TileEdit } from "./TileGrid";
 import AddSenior from "./AddSenior";
 import { useContext, useState } from "react";
 import { UserContext } from "@context/UserProvider";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPencil, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 
 type SeniorViewProps = {
   seniors: Senior[];
@@ -33,13 +35,48 @@ export const SeniorView = ({ seniors, students }: SeniorViewProps) => {
         />
       }
       elements={seniorsState ? seniorsState : []}
-      display={(senior, index) => (
-        <UserTile
-          senior={senior}
-          link={`/private/${context.user.id}/chapter-leader/seniors/${senior.id}`}
-          key={senior.id}
-        />
-      )}
+      display={(senior) => {
+        const options: Parameters<typeof TileEdit>[0]["options"] = [];
+
+        options.push({
+          name: "Edit",
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (!setSeniorPatch || !setShowAddSeniorPopUp) {
+              return;
+            }
+            setSeniorPatch(senior.id);
+            setShowAddSeniorPopUp(true);
+          },
+          color: "#22555A",
+          icon: <FontAwesomeIcon icon={faPencil} />,
+        });
+
+        options.push({
+          name: "Delete",
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            fetch(`/api/senior/${senior.id}`, {
+              method: "DELETE",
+            }).then(() => {
+              window.location.reload();
+            });
+          },
+          color: "#EF6767",
+          icon: <FontAwesomeIcon icon={faTrashCan} />,
+        });
+        return (
+          // TODO(nickbar01234) - Fix link
+          <UserTile
+            senior={senior}
+            link={`/private/${context.user.id}/chapter-leader/seniors/${senior.id}`}
+            key={senior.id}
+            dropdownComponent={<TileEdit options={options} />}
+          />
+        );
+      }}
       search={(senior, key) =>
         (senior.firstname + " " + senior.lastname)
           .toLowerCase()

src/components/TileGrid/index.ts

@@ -3,3 +3,4 @@
 export { default } from "./TileGrid";
 export * from "./UserTile";
 export * from "./SeniorTile";
+export * from "./TileEdit";

src/components/senior/DisplaySenior.tsx

@@ -6,7 +6,7 @@ import { formatFileDate } from "@utils";
 import { File } from "@components/file";
 import AddFile from "@components/file/AddFile";
 import { v4 as uuid } from "uuid";
-import Assigment from "./assignment";
+import Assignment from "./assignment";
 
 interface DisplayProps {
   editable: boolean;
@@ -53,7 +53,7 @@ const DisplaySenior = (props: DisplayProps) => {
       {/* @TODO - Firstname + lastname */}
       <h1 className="text-4xl font-bold text-[#000022]">{`${senior.firstname} ${senior.lastname}`}</h1>
       <p>{senior.description}</p>
-      <Assigment editable={editable} senior={senior} />
+      <Assignment editable={editable} senior={senior} />
       <SearchableContainer
         display={(file) => <File key={file.id} file={file} />}
         elements={FILES} // TODO(nickbar01234) - Replace with real data