fix: form validations (#213)

apps/app/components/issues/description-form.tsx

@@ -18,6 +18,7 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
 });
 // types
 import { IIssue } from "types";
+import useToast from "hooks/use-toast";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -31,7 +32,16 @@ export interface IssueDetailsProps {
 }
 
 export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => {
-  const { handleSubmit, watch, setValue, reset } = useForm<IIssue>({
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { errors },
+    setError,
+  } = useForm<IIssue>({
     defaultValues: {
       name: "",
       description: "",
@@ -41,13 +51,31 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
 
   const handleDescriptionFormSubmit = useCallback(
     (formData: Partial<IIssue>) => {
+      if (!formData.name || formData.name === "") {
+        setToastAlert({
+          type: "error",
+          title: "Error in saving!",
+          message: "Title is required.",
+        });
+        return;
+      }
+
+      if (formData.name.length > 255) {
+        setToastAlert({
+          type: "error",
+          title: "Error in saving!",
+          message: "Title cannot have more than 255 characters.",
+        });
+        return;
+      }
+
       handleFormSubmit({
         name: formData.name ?? "",
         description: formData.description,
         description_html: formData.description_html,
       });
     },
-    [handleFormSubmit]
+    [handleFormSubmit, setToastAlert]
   );
 
   const debounceHandler = useMemo(
@@ -83,9 +111,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
         }}
         mode="transparent"
         className="text-xl font-medium"
-        required={true}
       />
-
+      <span>{errors.name ? errors.name.message : null}</span>
       <RemirrorRichTextEditor
         value={watch("description")}
         placeholder="Describe the issue..."

apps/app/components/issues/form.tsx

@@ -197,7 +197,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     required: "Title is required",
                     maxLength: {
                       value: 255,
-                      message: "Name should be less than 255 characters",
+                      message: "Title should be less than 255 characters",
                     },
                   }}
                 />