Finished up a wizard to create Assignments

src/dashboards/Teacher.tsx

@@ -43,6 +43,7 @@ import AssignmentCard from "./AssignmentCard";
 import Button from "@/components/Low/Button";
 import clsx from "clsx";
 import ProgressBar from "@/components/Low/ProgressBar";
+import AssignmentCreator from "./AssignmentCreator";
 
 interface Props {
 	user: User;
@@ -53,6 +54,7 @@ export default function TeacherDashboard({user}: Props) {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [showModal, setShowModal] = useState(false);
 	const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
+	const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
 
 	const {stats} = useStats();
 	const {users, reload} = useUsers();
@@ -148,7 +150,10 @@ export default function TeacherDashboard({user}: Props) {
 
 		return (
 			<>
-				<Modal isOpen={!!selectedAssignment} onClose={() => setSelectedAssignment(undefined)} title={selectedAssignment?.name}>
+				<Modal
+					isOpen={!!selectedAssignment && !isCreatingAssignment}
+					onClose={() => setSelectedAssignment(undefined)}
+					title={selectedAssignment?.name}>
 					<div className="mt-4 flex flex-col w-full">
 						<ProgressBar
 							color="purple"
@@ -163,6 +168,27 @@ export default function TeacherDashboard({user}: Props) {
 						/>
 					</div>
 				</Modal>
+				<AssignmentCreator
+					assignment={selectedAssignment}
+					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+					users={users.filter(
+						(x) =>
+							x.type === "student" &&
+							(!!selectedUser
+								? groups
+										.filter((g) => g.admin === selectedUser.id)
+										.flatMap((g) => g.participants)
+										.includes(x.id) || false
+								: groups.flatMap((g) => g.participants).includes(x.id)),
+					)}
+					assigner={user.id}
+					isCreating={isCreatingAssignment}
+					cancelCreation={() => {
+						setIsCreatingAssignment(false);
+						setSelectedAssignment(undefined);
+						reloadAssignments();
+					}}
+				/>
 				<div className="w-full flex justify-between items-center">
 					<div
 						onClick={() => setPage("")}
@@ -188,12 +214,21 @@ export default function TeacherDashboard({user}: Props) {
 				<section className="flex flex-col gap-4">
 					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
 					<div className="flex flex-wrap gap-2">
-						<div className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+						<div
+							onClick={() => setIsCreatingAssignment(true)}
+							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
 							<BsPlus className="text-6xl" />
 							<span className="text-lg">New Assignment</span>
 						</div>
 						{assignments.filter(futureFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+							<AssignmentCard
+								{...a}
+								onClick={() => {
+									setSelectedAssignment(a);
+									setIsCreatingAssignment(true);
+								}}
+								key={a.id}
+							/>
 						))}
 					</div>
 				</section>
@@ -299,7 +334,7 @@ export default function TeacherDashboard({user}: Props) {
 									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
 								}
 								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
-								{...selectedUser}
+								user={selectedUser}
 							/>
 						</div>
 					)}