Skip to content

Commit

Permalink
Feat Add validate title length in CreateModal
Browse files Browse the repository at this point in the history
  • Loading branch information
minai621 committed Jul 30, 2024
1 parent 0712d58 commit 7f6b281
Showing 1 changed file with 13 additions and 7 deletions.
20 changes: 13 additions & 7 deletions frontend/src/components/modals/CreateModal.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import CloseIcon from "@mui/icons-material/Close";
import {
Button,
FormControl,
Expand All @@ -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;
Expand All @@ -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(
() => {
Expand All @@ -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<HTMLInputElement | HTMLTextAreaElement>) => {
Expand Down Expand Up @@ -102,7 +108,7 @@ function CreateModal(props: CreateModalProps) {
type="submit"
variant="contained"
size="large"
disabled={Boolean(errorMessage)}
disabled={Boolean(errorMessage) || nickname.length < 2}
>
OK
</Button>
Expand Down

0 comments on commit 7f6b281

Please sign in to comment.