ENCOA-109: Made the modal disappear when a user is created

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -55,7 +55,7 @@ const USER_TYPE_PERMISSIONS: {
 	},
 };
 
-export default function BatchCodeGenerator({user}: {user: User}) {
+export default function BatchCodeGenerator({user, onFinish}: {user: User; onFinish: () => void}) {
 	const [infos, setInfos] = useState<{email: string; name: string; passport_id: string}[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
 	const [expiryDate, setExpiryDate] = useState<Date | null>(
@@ -165,6 +165,8 @@ export default function BatchCodeGenerator({user}: {user: User}) {
 						)} codes and they have been notified by e-mail!`,
 						{toastId: "success"},
 					);
+
+					onFinish();
 					return;
 				}
 

src/pages/(admin)/BatchCreateUser.tsx

@@ -61,7 +61,7 @@ const USER_TYPE_PERMISSIONS: {
 	},
 };
 
-export default function BatchCreateUser({user}: {user: User}) {
+export default function BatchCreateUser({user, onFinish}: {user: User; onFinish: () => void}) {
 	const [infos, setInfos] = useState<
 		{
 			email: string;
@@ -159,6 +159,7 @@ export default function BatchCreateUser({user}: {user: User}) {
 			try {
 				for (const newUser of newUsers) await axios.post("/api/make_user", {...newUser, type, expiryDate});
 				toast.success(`Successfully added ${newUsers.length} user(s)!`);
+				onFinish();
 			} catch {
 				toast.error("Something went wrong, please try again later!");
 			} finally {

src/pages/(admin)/CodeGenerator.tsx

@@ -48,7 +48,7 @@ const USER_TYPE_PERMISSIONS: {
 	},
 };
 
-export default function CodeGenerator({user}: {user: User}) {
+export default function CodeGenerator({user, onFinish}: {user: User; onFinish: () => void}) {
 	const [generatedCode, setGeneratedCode] = useState<string>();
 	const [expiryDate, setExpiryDate] = useState<Date | null>(
 		user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,

src/pages/(admin)/UserCreator.tsx

@@ -54,7 +54,7 @@ const USER_TYPE_PERMISSIONS: {
 	},
 };
 
-export default function UserCreator({user}: {user: User}) {
+export default function UserCreator({user, onFinish}: {user: User; onFinish: () => void}) {
 	const [name, setName] = useState<string>();
 	const [email, setEmail] = useState<string>();
 	const [phone, setPhone] = useState<string>();
@@ -118,6 +118,7 @@ export default function UserCreator({user}: {user: User}) {
 			.post("/api/make_user", body)
 			.then(() => {
 				toast.success("That user has been created!");
+				onFinish();
 
 				setName("");
 				setEmail("");

src/pages/settings.tsx

@@ -72,22 +72,25 @@ export default function Admin() {
 			{user && (
 				<Layout user={user} className="gap-6">
 					<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)}>
-						<BatchCreateUser user={user} />
+						<BatchCreateUser user={user} onFinish={() => setModalOpen(undefined)} />
 					</Modal>
 					<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
-						<BatchCodeGenerator user={user} />
+						<BatchCodeGenerator user={user} onFinish={() => setModalOpen(undefined)} />
 					</Modal>
 					<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
-						<CodeGenerator user={user} />
+						<CodeGenerator user={user} onFinish={() => setModalOpen(undefined)} />
 					</Modal>
 					<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
-						<UserCreator user={user} />
+						<UserCreator user={user} onFinish={() => setModalOpen(undefined)} />
 					</Modal>
 					<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
 						<CorporateGradingSystem
 							user={user}
 							defaultSteps={gradingSystem?.steps || CEFR_STEPS}
-							mutate={(steps) => mutate({user: user.id, steps})}
+							mutate={(steps) => {
+								mutate({user: user.id, steps});
+								setModalOpen(undefined);
+							}}
 						/>
 					</Modal>