Add conflict checking to CreateModal

frontend/src/components/modals/CreateModal.tsx

@@ -10,6 +10,9 @@ import {
 } from "@mui/material";
 import { FormContainer, TextFieldElement } from "react-hook-form-mui";
 import CloseIcon from "@mui/icons-material/Close";
+import { useMemo, useState } from "react";
+import { useCheckNameConflictQuery } from "../../hooks/api/check";
+import { useDebounce } from "react-use";
 
 interface CreateRequest {
 	title: string;
@@ -18,10 +21,28 @@ interface CreateRequest {
 interface CreateModalProps extends Omit<ModalProps, "children"> {
 	title: string;
 	onSuccess: (data: CreateRequest) => Promise<void>;
+	enableConflictCheck?: boolean;
 }
 
 function CreateModal(props: CreateModalProps) {
-	const { title, onSuccess, ...modalProps } = props;
+	const { title, onSuccess, enableConflictCheck, ...modalProps } = props;
+	const [nickname, setNickname] = useState("");
+	const [debouncedNickname, setDebouncedNickname] = useState("");
+	const { data: conflictResult } = useCheckNameConflictQuery(debouncedNickname);
+	const errorMessage = useMemo(() => {
+		if (conflictResult?.conflict) {
+			return "Already Exists";
+		}
+		return null;
+	}, [conflictResult?.conflict]);
+
+	useDebounce(
+		() => {
+			setDebouncedNickname(nickname);
+		},
+		500,
+		[nickname]
+	);
 
 	const handleCloseModal = () => {
 		modalProps?.onClose?.(new Event("Close Modal"), "escapeKeyDown");
@@ -32,6 +53,11 @@ function CreateModal(props: CreateModalProps) {
 		handleCloseModal();
 	};
 
+	const handleNicknameChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+		if (!enableConflictCheck) return;
+		setNickname(e.target.value);
+	};
+
 	return (
 		<Modal disableAutoFocus {...modalProps}>
 			<Paper
@@ -68,8 +94,16 @@ function CreateModal(props: CreateModalProps) {
 									inputProps={{
 										maxLength: 255,
 									}}
+									onChange={handleNicknameChange}
+									error={Boolean(errorMessage)}
+									helperText={errorMessage}
 								/>
-								<Button type="submit" variant="contained" size="large">
+								<Button
+									type="submit"
+									variant="contained"
+									size="large"
+									disabled={Boolean(errorMessage)}
+								>
 									OK
 								</Button>
 							</Stack>

frontend/src/components/popovers/WorkspaceListPopover.tsx

@@ -129,6 +129,7 @@ function WorkspaceListPopover(props: WorkspaceListPopoverProps) {
 				title="Workspace"
 				onClose={handleCreateWorkspaceModalOpen}
 				onSuccess={handleCreateWorkspace}
+				enableConflictCheck
 			/>
 		</>
 	);