finished form validaiton

.eslintrc.json

@@ -12,6 +12,9 @@
     "sourceType": "module"
   },
   "plugins": ["react"],
-  "rules": { "react/prop-types": ["off"] }
-
+  "rules": {
+    "react/prop-types": ["off"],
+    // allow props spreading
+    "react/jsx-props-no-spreading": ["off"]
+  }
 }

package.json

@@ -8,6 +8,7 @@
     "@chakra-ui/system": "^2.0.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@hookform/resolvers": "^3.1.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -33,6 +34,7 @@
     "react-bootstrap": "^2.7.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.9",
     "react-icons": "^4.7.1",
     "react-is": "^18.2.0",
     "react-router": "^6.4.3",
@@ -42,7 +44,7 @@
     "vite": "^4.1.4",
     "vite-plugin-html": "^3.2.0",
     "webpack": "^5.75.0",
-    "yup": "^0.32.11"
+    "yup": "^1.1.1"
   },
   "optionalDependencies": {
     "babel-loader": "8.0.4"
@@ -95,4 +97,4 @@
     "prettier": "^2.4.1",
     "typescript": "^3.2.1"
   }
-}
+}

src/components/UsersTable/EditUser.schema.jsx

@@ -0,0 +1,10 @@
+import * as yup from 'yup';
+
+export default yup.object().shape({
+  fullName: yup.string().required('Full name is required'),
+  email: yup.string().email('Invalid email').required('Email is required'),
+  password: yup.string().required('Password is required'),
+  role: yup.string().required('Role is required'),
+
+  facility: yup.number().integer().required('Facility is required'),
+});

src/components/UsersTable/EditUserModal.jsx

@@ -6,6 +6,7 @@ import {
   Button,
   Center,
   FormControl,
+  FormErrorMessage,
   FormLabel,
   HStack,
   Input,
@@ -21,79 +22,80 @@ import {
   useDisclosure,
   useToast,
 } from '@chakra-ui/react';
+import { yupResolver } from '@hookform/resolvers/yup';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { useBackend } from '../../contexts/BackendContext';
 import CreateToast from '../Toasts/CreateToast';
+import EditUserSchema from './EditUser.schema';
 import './EditUserModal.css';
 
 // modal to edit user
 const EditUser = ({ setModalStep, onClose, info, setRender, render }) => {
-  const [user, setUser] = useState({
-    fullName: `${info.firstName} ${info.lastName}`,
-    email: `${info.email}`,
-    role: `${info.role}`,
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: yupResolver(EditUserSchema),
   });
 
-  const changeFullName = e => {
-    setUser({
-      ...user,
-      fullName: e.target.value,
-    });
-  };
-
-  const changeEmail = e => {
-    setUser({
-      ...user,
-      email: e.target.value,
-    });
-  };
-
-  const changeRole = e => {
-    setUser({
-      ...user,
-      role: e.target.value,
-    });
-  };
-
   // save user after changes
   const { backend } = useBackend();
-  const save = async () => {
-    const splitName = user.fullName.split(' ');
+  const onSubmitHandler = async data => {
+    const { fullName, email, role } = data;
+    const splitName = fullName.split(' ');
     const usersData = {
       firstName: splitName[0],
       lastName: splitName[1],
-      newEmail: user.email,
+      newEmail: email,
       facility: 10,
     };
     await backend.put(`users/${info.email}`, usersData);
     setRender(!render);
     onClose();
+
+    reset();
   };
 
+  useEffect(() => {
+    console.log(errors);
+  }, [errors]);
   return (
     <>
       {/* TODO: include the profile picture */}
       <ModalHeader>
         <Center>Edit User</Center>
       </ModalHeader>
       <ModalBody>
-        <FormControl>
-          <FormLabel>Full Name</FormLabel>
-          <Input value={user.fullName} onChange={changeFullName} />
-          <FormLabel mt={5}>Add Email</FormLabel>
-          <Input value={user.email} onChange={changeEmail} />
-          <FormLabel mt={5}>Add Role</FormLabel>
-          <Input value={user.role} onChange={changeRole} />
-          <Select mt={5}>
-            <option value="administrator">Administrator</option>
-          </Select>
-        </FormControl>
-      </ModalBody>
+        <form onSubmit={handleSubmit(onSubmitHandler)}>
+          {/* Form Control for every input */}
+          <FormControl isInvalid={errors?.fullName}>
+            <FormLabel>Full Name</FormLabel>
+            {/* Notice how we dont need to use states */}
+            <Input {...register('fullName')} />
+            <FormErrorMessage>{errors?.fullName && errors?.fullName?.message}</FormErrorMessage>
+          </FormControl>
+          {/* Notice how we dont need to use states */}
 
-      <ModalFooter>
-        <VStack w="100%">
-          <HStack w="100%">
+          <FormControl isInvalid={errors?.email}>
+            <FormLabel mt={5}>Add Email</FormLabel>
+            <Input {...register('email')} />
+            <FormErrorMessage>{errors?.email && errors?.email?.message}</FormErrorMessage>
+          </FormControl>
+
+          <FormControl isInvalid={errors?.role}>
+            <FormLabel mt={5}>Add Role</FormLabel>
+            {/* Notice how we dont need to use states */}
+
+            <Select mt={5} {...register('role')} defaultValue={info.role}>
+              <option value="administrator">Administrator</option>
+            </Select>
+            <FormErrorMessage>{errors?.role && errors?.role?.message}</FormErrorMessage>
+          </FormControl>
+          <HStack w="100%" mt={5}>
             <Button
               w="50%"
               variant="outline"
@@ -102,10 +104,16 @@ const EditUser = ({ setModalStep, onClose, info, setRender, render }) => {
             >
               Remove User
             </Button>
-            <Button variant="noHover" bg="#21307A" color="white" w="50%" onClick={() => save()}>
+            {/* Notice how this is type="submit" and there's not callback */}
+            <Button variant="noHover" bg="#21307A" color="white" w="50%" type="submit">
               Save
             </Button>
           </HStack>
+        </form>
+      </ModalBody>
+
+      <ModalFooter>
+        <VStack w="100%">
           <Button w="100%" variant="outline" onClick={() => onClose()}>
             Cancel
           </Button>

src/pages/Dogs/AdoptionLogCard.jsx

@@ -91,14 +91,21 @@ const AdoptionLogCard = props => {
 
     return (
       <Card
-        boxShadow="dark-lg"
+        boxShadow="md"
         m={6}
         size="md"
-        rounded="md"
+        borderRadius="md"
+        borderWidth={1}
+        borderColor="gray.200"
+        _hover={{
+          borderColor: 'gray.300',
+          cursor: 'pointer',
+        }}
         bg="white"
         justifyContent="flex-end"
         key={props.key}
         maxWidth={350}
+        onClick={() => handleViewMore()}
       >
         <CardHeader borderBottom="1px solid #CBD5E0">
           <Flex alignItems="center" flexWrap="nowrap" direction="row">
@@ -109,7 +116,7 @@ const AdoptionLogCard = props => {
               marginBottom="15px"
             />
             <Flex flexDirection="column" flexGrow="1">
-              <Flex flexDirection="row" alignItems="flex-start">
+              <Flex flexDirection="row" alignItems="flex-start" onClick={e => e.stopPropagation()}>
                 <Flex>
                   <Heading fontSize="xl">{dogName}</Heading>
                 </Flex>
@@ -155,7 +162,7 @@ const AdoptionLogCard = props => {
             )}
           </Flex>
         </CardHeader>
-        <CardBody>
+        <CardBody onClick={() => handleViewMore()}>
           <Flex gap={2} flexDirection="column">
             <Box>
               <Flex gap="3px" alignItems="baseline">