diff --git a/frontend/src/components/modals/CreateModal.tsx b/frontend/src/components/modals/CreateModal.tsx index eb37068b..484b13fe 100644 --- a/frontend/src/components/modals/CreateModal.tsx +++ b/frontend/src/components/modals/CreateModal.tsx @@ -1,3 +1,4 @@ +import CloseIcon from "@mui/icons-material/Close"; import { Button, FormControl, @@ -8,11 +9,10 @@ import { Stack, Typography, } 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 { FormContainer, TextFieldElement } from "react-hook-form-mui"; import { useDebounce } from "react-use"; +import { useCheckNameConflictQuery } from "../../hooks/api/check"; interface CreateRequest { title: string; @@ -29,12 +29,16 @@ function CreateModal(props: CreateModalProps) { const [nickname, setNickname] = useState(""); const [debouncedNickname, setDebouncedNickname] = useState(""); const { data: conflictResult } = useCheckNameConflictQuery(debouncedNickname); + const errorMessage = useMemo(() => { + if (nickname.length < 2) { + return "Title must be at least 2 characters"; + } if (conflictResult?.conflict) { return "Already Exists"; } return null; - }, [conflictResult?.conflict]); + }, [nickname.length, conflictResult?.conflict]); useDebounce( () => { @@ -49,8 +53,10 @@ function CreateModal(props: CreateModalProps) { }; const handleCreate = async (data: CreateRequest) => { - await onSuccess(data); - handleCloseModal(); + if (data.title.length >= 2) { + await onSuccess(data); + handleCloseModal(); + } }; const handleNicknameChange = (e: React.ChangeEvent) => { @@ -102,7 +108,7 @@ function CreateModal(props: CreateModalProps) { type="submit" variant="contained" size="large" - disabled={Boolean(errorMessage)} + disabled={Boolean(errorMessage) || nickname.length < 2} > OK