From 76975b59174c9d17f83bf27347b83eeca970b77e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Sun, 10 Jul 2022 13:17:06 -0300
Subject: [PATCH] add form validations

---
 client/src/components/LoginDialog.tsx         | 67 ++++++++++---------
 client/src/pages/NewAccount/NewAccount.tsx    |  5 +-
 .../NewProjectAction/NewProjectAction.tsx     |  1 +
 .../Projects/components/Project/AddTask.tsx   |  1 +
 .../Project/RenameProjectDialog.tsx           | 15 +++--
 .../Project/TaskList/EditTaskDialog.tsx       | 13 ++--
 6 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/client/src/components/LoginDialog.tsx b/client/src/components/LoginDialog.tsx
index 491de2d..ef2497d 100644
--- a/client/src/components/LoginDialog.tsx
+++ b/client/src/components/LoginDialog.tsx
@@ -6,49 +6,54 @@ import {
   DialogTitle,
   TextField,
 } from "@mui/material";
-import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { useAuth } from "../hooks/useAuth";
 
+type LoginForm = {
+  email: string;
+  password: string;
+};
+
 export const LoginDialog = () => {
   const { isLoginDialogOpen, setIsLoginDialogOpen, login } = useAuth();
+  const { register, handleSubmit } = useForm<LoginForm>();
 
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleSubmit = () => {
-    login(email, password);
+  const onSubmit: SubmitHandler<LoginForm> = (data) => {
+    login(data.email, data.password);
   };
-
   const handleClose = () => {
     setIsLoginDialogOpen(false);
   };
 
   return (
     <Dialog open={isLoginDialogOpen} onClose={handleClose}>
-      <DialogTitle>Login</DialogTitle>
-      <DialogContent>
-        <TextField
-          autoFocus
-          margin="dense"
-          label="Email Address"
-          type="email"
-          fullWidth
-          variant="standard"
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <TextField
-          margin="dense"
-          label="Password"
-          type="password"
-          fullWidth
-          variant="standard"
-          onChange={(e) => setPassword(e.target.value)}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleClose}>Cancel</Button>
-        <Button onClick={handleSubmit}>Confirm</Button>
-      </DialogActions>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DialogTitle>Login</DialogTitle>
+        <DialogContent>
+          <TextField
+            required
+            {...register("email")}
+            autoFocus
+            margin="dense"
+            label="Email"
+            type="email"
+            fullWidth
+            variant="standard"
+          />
+          <TextField
+            required
+            {...register("password")}
+            margin="dense"
+            label="Password"
+            type="password"
+            fullWidth
+            variant="standard"
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+        </DialogActions>
+      </form>
     </Dialog>
   );
 };
diff --git a/client/src/pages/NewAccount/NewAccount.tsx b/client/src/pages/NewAccount/NewAccount.tsx
index 203a124..d16b4a5 100644
--- a/client/src/pages/NewAccount/NewAccount.tsx
+++ b/client/src/pages/NewAccount/NewAccount.tsx
@@ -54,8 +54,8 @@ export const NewAccount = () => {
           label="Email Address"
           type="email"
           variant="standard"
+          required
           {...register("email", {
-            required: true,
             pattern: {
               value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
               message: "Invalid email address",
@@ -71,7 +71,8 @@ export const NewAccount = () => {
           label="Password"
           type="password"
           variant="standard"
-          {...register("password", { required: true, minLength: 8 })}
+          required
+          {...register("password", { minLength: 8 })}
         />
         <Stack direction="row-reverse" spacing={3}>
           <LoadingButton type="submit" loading={loading} variant="contained">
diff --git a/client/src/pages/Projects/components/NewProjectAction/NewProjectAction.tsx b/client/src/pages/Projects/components/NewProjectAction/NewProjectAction.tsx
index bded199..fc152ce 100644
--- a/client/src/pages/Projects/components/NewProjectAction/NewProjectAction.tsx
+++ b/client/src/pages/Projects/components/NewProjectAction/NewProjectAction.tsx
@@ -61,6 +61,7 @@ export const NewProjectAction = ({ mutate }: NewProjectActionProps) => {
           <DialogTitle>New project</DialogTitle>
           <DialogContent>
             <TextField
+              required
               {...register("name")}
               disabled={isLoading}
               autoFocus
diff --git a/client/src/pages/Projects/components/Project/AddTask.tsx b/client/src/pages/Projects/components/Project/AddTask.tsx
index f484859..40abada 100644
--- a/client/src/pages/Projects/components/Project/AddTask.tsx
+++ b/client/src/pages/Projects/components/Project/AddTask.tsx
@@ -31,6 +31,7 @@ export const AddTask = () => {
     <Box onSubmit={handleSubmit(onSubmit)} component={"form"}>
       <Toolbar sx={{ display: "flex", justifyContent: "center" }}>
         <TextField
+          required
           disabled={isLoading}
           placeholder="New task description "
           variant="standard"
diff --git a/client/src/pages/Projects/components/Project/RenameProjectDialog.tsx b/client/src/pages/Projects/components/Project/RenameProjectDialog.tsx
index 7f611c7..163111c 100644
--- a/client/src/pages/Projects/components/Project/RenameProjectDialog.tsx
+++ b/client/src/pages/Projects/components/Project/RenameProjectDialog.tsx
@@ -6,7 +6,7 @@ import {
   DialogTitle,
   TextField,
 } from "@mui/material";
-import { SetStateAction, useState } from "react";
+import { SetStateAction, useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { useAuth } from "../../../../hooks/useAuth";
 import { useProject } from "../../../../hooks/useProject";
@@ -27,14 +27,14 @@ export const RenameProjectDialog = ({
   const [isLoading, setIsLoading] = useState(false);
   const { apiClient } = useAuth();
   const { projectMutate, project } = useProject();
-  const { register, handleSubmit, reset } = useForm<RenameProjectForm>({
-    defaultValues: {
-      name: project.name,
-    },
-  });
+  const { register, handleSubmit, setValue } = useForm<RenameProjectForm>();
+
+  useEffect(() => {
+    setValue("name", project.name);
+  }, [setValue, project.name]);
 
   const handleClose = () => {
-    reset();
+    setValue("name", project.name);
     setOpen(false);
   };
 
@@ -59,6 +59,7 @@ export const RenameProjectDialog = ({
         <DialogTitle>Rename project</DialogTitle>
         <DialogContent>
           <TextField
+            required
             {...register("name")}
             disabled={isLoading}
             autoFocus
diff --git a/client/src/pages/Projects/components/Project/TaskList/EditTaskDialog.tsx b/client/src/pages/Projects/components/Project/TaskList/EditTaskDialog.tsx
index a25a221..4af8be1 100644
--- a/client/src/pages/Projects/components/Project/TaskList/EditTaskDialog.tsx
+++ b/client/src/pages/Projects/components/Project/TaskList/EditTaskDialog.tsx
@@ -6,7 +6,7 @@ import {
   DialogTitle,
   TextField,
 } from "@mui/material";
-import { SetStateAction, useState } from "react";
+import { SetStateAction, useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { useAuth } from "../../../../../hooks/useAuth";
 import { useProject } from "../../../../../hooks/useProject";
@@ -30,12 +30,14 @@ export const EditTaskDialog = ({
   const [isLoading, setIsLoading] = useState(false);
   const { apiClient } = useAuth();
   const { tasksMutate, project } = useProject();
-  const { register, handleSubmit, reset } = useForm<EditProjectForm>({
-    defaultValues: task,
-  });
+  const { register, handleSubmit, setValue } = useForm<EditProjectForm>();
+
+  useEffect(() => {
+    setValue("description", task.description);
+  }, [setValue, task.description]);
 
   const handleClose = () => {
-    reset();
+    setValue("description", task.description);
     setOpen(false);
   };
 
@@ -58,6 +60,7 @@ export const EditTaskDialog = ({
         <DialogTitle>Rename task</DialogTitle>
         <DialogContent>
           <TextField
+            required
             {...register("description")}
             disabled={isLoading}
             autoFocus