fixed modals to clear after adding users / tasks / availabilities / events

README.md

@@ -1,6 +1,5 @@
 # TODO
 
 - readme text
-- add user/ event / etc. boxes don't clear after adding
 - check enter pressing on modals
 - add control-enter on event-description

client/src/app/admin/(availabilities)/AddAvailability.tsx

@@ -2,23 +2,30 @@ import { apiCall } from "@/lib";
 import AvailabilityEditor, { Availability } from "./AvailabilityEditor";
 import { Button } from "@heroui/react";
 import { AddLarge } from "@carbon/icons-react";
+import { useState } from "react";
 
 export default function AddAvailability(props: {
 	isOpen?: boolean;
 	onOpenChange?: (isOpen: boolean) => void;
 	onSuccess?: () => void;
 }) {
+	const [addAvailabilityKey, setAddAvailabilityKey] = useState<number>(0);
+
 	async function addAvailability(a: Availability) {
 		const result = await apiCall("POST", "availabilities", undefined, a);
 
 		if (result.ok) {
-			props.onSuccess?.();
 			props.onOpenChange?.(false);
+
+			setAddAvailabilityKey(addAvailabilityKey + 1);
+
+			props.onSuccess?.();
 		}
 	}
 
 	return (
 		<AvailabilityEditor
+			key={addAvailabilityKey}
 			header="Add Availability"
 			footer={
 				<Button type="submit" color="primary" startContent={<AddLarge />}>

client/src/app/admin/(tasks)/AddTask.tsx

@@ -2,23 +2,30 @@ import { apiCall, Task } from "@/lib";
 import TaskEditor from "./TaskEditor";
 import { Button } from "@heroui/react";
 import { AddLarge } from "@carbon/icons-react";
+import { useState } from "react";
 
 export default function AddTask(props: {
 	isOpen?: boolean;
 	onOpenChange?: (isOpen: boolean) => void;
 	onSuccess?: () => void;
 }) {
+	const [addTaskKey, setAddTaskKey] = useState<number>(0);
+
 	async function addTask(a: Task) {
 		const result = await apiCall("POST", "tasks", undefined, a);
 
 		if (result.ok) {
-			props.onSuccess?.();
 			props.onOpenChange?.(false);
+
+			setAddTaskKey(addTaskKey);
+
+			props.onSuccess?.();
 		}
 	}
 
 	return (
 		<TaskEditor
+			key={addTaskKey}
 			header="Add Task"
 			footer={
 				<Button type="submit" color="primary" startContent={<AddLarge />}>

client/src/app/admin/(users)/AddUser.tsx

@@ -3,23 +3,28 @@ import { AddLarge } from "@carbon/icons-react";
 import { Button } from "@heroui/react";
 import UserEditor from "./UserEditor";
 import { UserAddModify } from "@/Zustand";
+import { useState } from "react";
 
 export default function AddUser(props: {
 	isOpen?: boolean;
 	onOpenChange?: (isOpen: boolean) => void;
 	onSuccess?: () => void;
 }) {
+	const [addUserKey, setAddUserKey] = useState<number>(0);
+
 	// send an addUser request to the backend then reload the table
 	async function sendAddUser(user: UserAddModify) {
 		const result = await apiCall("POST", "users", undefined, user);
 
 		if (result.ok) {
+			setAddUserKey(addUserKey + 1);
 			props.onSuccess?.();
 		}
 	}
 
 	return (
 		<UserEditor
+			key={addUserKey}
 			isPasswordRequired
 			isOpen={props.isOpen}
 			onOpenChange={props.onOpenChange}

client/src/app/admin/(users)/UserEditor.tsx

@@ -101,7 +101,9 @@ export default function UserEditor(props: {
 						<Input
 							isRequired={props.isPasswordRequired}
 							label="Password"
-							color={password.length > 0 ? "warning" : "default"}
+							color={
+								password.length > 0 && !!props.value ? "warning" : "default"
+							}
 							name="password"
 							variant="bordered"
 							value={password}

client/src/components/Event/AddEvent.tsx

@@ -2,6 +2,7 @@ import { Button } from "@heroui/react";
 import { apiCall } from "@/lib";
 import { AddLarge } from "@carbon/icons-react";
 import EventEditor, { EventSubmitData } from "./EventEditor";
+import { useState } from "react";
 
 export default function AddEvent(props: {
 	className?: string;
@@ -9,18 +10,23 @@ export default function AddEvent(props: {
 	onOpenChange: (isOpen: boolean) => void;
 	onSuccess?: () => void;
 }) {
+	const [addEventKey, setAddEventKey] = useState<number>(0);
+
 	async function addEvent(data: EventSubmitData) {
 		const result = await apiCall("POST", "events", undefined, data);
 
 		if (result.ok) {
 			props.onOpenChange(false);
 
+			setAddEventKey(addEventKey + 1);
+
 			props.onSuccess?.();
 		}
 	}
 
 	return (
 		<EventEditor
+			key={addEventKey}
 			{...props}
 			header="Add Event"
 			onSubmit={(data) => void addEvent(data)}