Skip to content

Commit

Permalink
Add feedback to add senior form
Browse files Browse the repository at this point in the history
  • Loading branch information
@cledi01 @nickbar01234
cledi01 authored and nickbar01234 committed Apr 11, 2024
1 parent c01ef4f commit 54e012d
Showing 1 changed file with 56 additions and 49 deletions.
105 changes: 56 additions & 49 deletions src/components/AddSenior.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ import React, {
useState,
} from "react";
import Image, { StaticImageData } from "next/legacy/image";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, SubmitHandler } from "react-hook-form";
import FilterDropdown from "@components/FilterDropdown";
import { Senior, User } from "@prisma/client";

import ImageIcon from "../../public/icons/icon_add_photo.png";
import { patchSenior } from "src/app/api/senior/[id]/route.client";
import { postSenior } from "src/app/api/senior/route.client";
Expand All @@ -32,10 +35,14 @@ type AddSeniorTileProps = {
setSeniorPatch: Dispatch<SetStateAction<string>>;
};

type SeniorData = Pick<
z.infer<typeof seniorSchema>,
"firstname" | "lastname" | "location" | "description"
>;
const seniorFormSchema = seniorSchema.pick({
firstname: true,
lastname: true,
location: true,
description: true,
});

type SeniorData = z.infer<typeof seniorFormSchema>;

const EMPTY_SENIOR: SeniorData = {
firstname: "",
Expand Down Expand Up @@ -114,28 +121,42 @@ const AddSenior = ({
seniorPatch,
setSeniorPatch,
}: AddSeniorProps) => {
const [seniorData, setSeniorData] = useState<SeniorData>(EMPTY_SENIOR);
const [selectedStudents, setSelectedStudents] = useState<User[]>([]);
const [currentImage, setCurrentImage] = useState<string | StaticImageData>(
ImageIcon
);
const [confirm, setConfirm] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);
const [edited, setEdited] = useState<boolean>(false);

const { register, handleSubmit, reset, setValue } = useForm<SeniorData>({
resolver: zodResolver(seniorFormSchema),
});

const onSubmit: SubmitHandler<SeniorData> = async (data, event) => {
event?.preventDefault();
if (seniorPatch) {
patchAddSenior(data);
} else {
postAddSenior(data);
}
};

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,
if (initialSenior) {
setValue("firstname", initialSenior.firstname, { shouldValidate: true });
setValue("lastname", initialSenior.lastname, { shouldValidate: true });
setValue("location", initialSenior.location, { shouldValidate: true });
setValue("description", initialSenior.description, {
shouldValidate: true,
});
}, [initialSenior]);
}
}, [initialSenior, setValue]);

useEffect(() => {
if (initialSenior) {
Expand All @@ -149,10 +170,11 @@ const AddSenior = ({

const handlePopUp = () => {
setShowAddSeniorPopUp(!showAddSeniorPopUp);
setSeniorData(EMPTY_SENIOR);
setSelectedStudents([]);
setCurrentImage(ImageIcon);
setSeniorPatch(""); // empty string used as falsey value to indicate update or patch
setEdited(false);
reset();
};

const handleConfirm = () => {
Expand All @@ -161,7 +183,7 @@ const AddSenior = ({
setError(false);
};

const patchAddSenior = async () => {
const patchAddSenior = async (seniorData: SeniorData) => {
// put accumulated students into senior model data
const seniorModel = {
...seniorData,
Expand All @@ -185,7 +207,7 @@ const AddSenior = ({
}
};

const postAddSenior = async () => {
const postAddSenior = async (seniorData: SeniorData) => {
// put accumulated students into senior model data
const seniorModel = {
...seniorData,
Expand Down Expand Up @@ -227,7 +249,7 @@ const AddSenior = ({
{showAddSeniorPopUp && (
<Popup className="h-fit w-[36rem]">
{!confirm && !error ? (
<div className="text-white">
<form className="text-white" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
{seniorPatch ? "Update" : "Add New"} Senior
</div>
Expand All @@ -241,9 +263,6 @@ const AddSenior = ({
/>
</div>
</div>

{/* Todo: First and Last name values are stored into the seniorData.name field. Seperate into two fields
later as seniorData.name propgates to backend*/}
<div className="flex">
<div className="mr-2 flex-1 flex-col">
<div className=" mb-2 h-[19px] w-full text-base text-white">
Expand All @@ -252,13 +271,8 @@ const AddSenior = ({
<input
className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
type="text"
value={seniorData.firstname}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData({
...seniorData,
firstname: e.target.value,
})
}
{...register("firstname")}
onChange={() => setEdited(true)}
/>
</div>

Expand All @@ -269,13 +283,8 @@ const AddSenior = ({
<input
className="mb-3 h-[36px] w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
type="text"
value={seniorData.lastname}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData((seniorData) => ({
...seniorData,
lastname: e.target.value,
}))
}
{...register("lastname")}
onChange={() => setEdited(true)}
/>
</div>
</div>
Expand All @@ -287,11 +296,9 @@ const AddSenior = ({
<input
className="mb-3 h-9 w-full rounded-md border-2 border-solid border-tan px-3 text-sm text-dark-teal placeholder:text-dark-teal"
type="text"
value={seniorData.location}
placeholder="Where are you and your senior meeting?"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setSeniorData({ ...seniorData, location: e.target.value })
}
{...register("location")}
onChange={() => setEdited(true)}
/>

<div className="mb-5 h-2 w-full text-base text-white">
Expand All @@ -301,13 +308,8 @@ const AddSenior = ({
<textarea
className="h-25 mb-3 min-h-[20px] w-full resize-none rounded-md border-2 border-solid border-tan bg-white p-[10px] text-start text-sm text-dark-teal placeholder:text-dark-teal"
placeholder="Write a brief description about the senior"
value={seniorData.description}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setSeniorData({
...seniorData,
description: e.target.value,
})
}
{...register("description")}
onChange={() => setEdited(true)}
/>

<StudentSelector
Expand All @@ -318,21 +320,26 @@ const AddSenior = ({

<div className="top-0 mt-6 flex max-h-[36px] w-full flex-row justify-center">
<button
className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white
px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
className=" hover:off-white mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl
bg-white px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md"
onClick={handlePopUp}
>
Cancel
</button>
<button
className=" mx-2 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white
px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
onClick={seniorPatch ? patchAddSenior : postAddSenior}
px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md duration-300 hover:bg-off-white"
type="submit"
style={
edited
? { visibility: "visible", opacity: 1 }
: { visibility: "hidden", opacity: 0 }
}
>
{seniorPatch ? "Update" : "Save"}
</button>
</div>
</div>
</form>
) : (
<>
{confirm ? (
Expand Down

0 comments on commit 54e012d

Please sign in to comment.