From 9acab1ad09480de423899dc67ec2b4dcab7f5899 Mon Sep 17 00:00:00 2001
From: z1glr <z1glr@pm.me>
Date: Fri, 7 Feb 2025 12:41:42 +0100
Subject: [PATCH] fixed modals to clear after adding users / tasks /
 availabilities / events

---
 README.md                                                | 1 -
 .../src/app/admin/(availabilities)/AddAvailability.tsx   | 9 ++++++++-
 client/src/app/admin/(tasks)/AddTask.tsx                 | 9 ++++++++-
 client/src/app/admin/(users)/AddUser.tsx                 | 5 +++++
 client/src/app/admin/(users)/UserEditor.tsx              | 4 +++-
 client/src/components/Event/AddEvent.tsx                 | 6 ++++++
 6 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 4d05a4e..9798ee5 100644
--- a/README.md
+++ b/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
diff --git a/client/src/app/admin/(availabilities)/AddAvailability.tsx b/client/src/app/admin/(availabilities)/AddAvailability.tsx
index 2742372..de636da 100644
--- a/client/src/app/admin/(availabilities)/AddAvailability.tsx
+++ b/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 />}>
diff --git a/client/src/app/admin/(tasks)/AddTask.tsx b/client/src/app/admin/(tasks)/AddTask.tsx
index 3816e39..8cfdef8 100644
--- a/client/src/app/admin/(tasks)/AddTask.tsx
+++ b/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 />}>
diff --git a/client/src/app/admin/(users)/AddUser.tsx b/client/src/app/admin/(users)/AddUser.tsx
index f6efa15..006584b 100644
--- a/client/src/app/admin/(users)/AddUser.tsx
+++ b/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}
diff --git a/client/src/app/admin/(users)/UserEditor.tsx b/client/src/app/admin/(users)/UserEditor.tsx
index d7bda88..b4c155b 100644
--- a/client/src/app/admin/(users)/UserEditor.tsx
+++ b/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}
diff --git a/client/src/components/Event/AddEvent.tsx b/client/src/components/Event/AddEvent.tsx
index bfeb4f8..047985a 100644
--- a/client/src/components/Event/AddEvent.tsx
+++ b/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)}