added formik validation for the adding new product form

relates #186
CA-G12 · Nov 16, 2022 · 23b487a · 23b487a
1 parent c1bd4d4
commit 23b487a
Show file tree

Hide file tree

Showing 6 changed files with 322 additions and 182 deletions.
diff --git a/client/src/components/AccountIntro/AccountIntro.css b/client/src/components/AccountIntro/AccountIntro.css
@@ -57,4 +57,71 @@
   font-weight: 500;
   font-size: 1.2rem;
   color: #d0d0d0;
+}
+
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  .signup-container {
+    width: 80%;
+  }
+
+  .content h1 {
+    font-size: 2.5rem;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .signup-container {
+    width: 90%;
+  }
+
+  .content h1 {
+    font-size: 2rem;
+    width: 100%;
+  }
+
+  .content p {
+    font-size: 1rem;
+  }
+
+  .link-home p {
+    font-size: 1.2rem;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .signup-container {
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .welcome-part {
+    width: 100%;
+    gap: 2rem;
+    height: auto;
+    padding: 1rem 2.5rem;
+  }
+
+  .content {
+    display: none;
+  }
+
+  .content h1 {
+    font-size: 2rem;
+    width: 100%;
+  }
+
+  .content p {
+    font-size: 1rem;
+  }
+
+  .link-home {
+    padding: 0;
+  }
+
+  .link-home p {
+    font-size: 1.2rem;
+  }
 }
diff --git a/client/src/components/AddProduct/AddProduct.css b/client/src/components/AddProduct/AddProduct.css
@@ -45,6 +45,7 @@
 .newProduct .images{
     display: flex;
     justify-content: space-between;
+    flex-direction: row;
     flex-wrap: wrap;
     width: 80%;
     margin: 2rem auto;
@@ -54,13 +55,14 @@
 
 .newProduct .upload-img{
     border: solid var(--dark-blue) 0.5px;
-    width: 15%;
-    height: 5.5rem;
+    width: 17%;
+    height: 6rem;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 10px;
     background-size: cover;
+    margin-bottom: 1rem;
 }
 
 .newProduct button {

diff --git a/client/src/components/AddProduct/CategoryRadio.tsx b/client/src/components/AddProduct/CategoryRadio.tsx
@@ -1,58 +1,58 @@
-import { FC, ChangeEvent } from 'react';
+import { FC } from 'react';
 import {
   Radio, RadioGroup, FormControlLabel,
-  FormControl, FormLabel,
+  FormControl, FormLabel, FormHelperText,
 } from '@mui/material';
 
 import { ICategoryProps } from '../../interfaces';
 
-const CategoryRadio:FC<ICategoryProps> = ({ setCategory }) => {
-  const handleChange = (e:ChangeEvent) => {
-    setCategory(e.target.id);
-  };
-
-  return (
-    <FormControl className="category">
-      <FormLabel id="demo-row-radio-buttons-group-label">Category</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-row-radio-buttons-group-label"
-        name="row-radio-buttons-group"
-        onChange={handleChange}
-      >
-        <FormControlLabel
-          value="Clothes"
-          control={<Radio id="1" />}
-          label="Clothes"
-        />
-        <FormControlLabel
-          value="Furniture"
-          control={<Radio id="2" />}
-          label="Furniture"
-        />
-        <FormControlLabel
-          value="Books"
-          control={<Radio id="3" />}
-          label="Books"
-        />
-        <FormControlLabel
-          value="Accessories"
-          control={<Radio id="4" />}
-          label="Accessories"
-        />
-        <FormControlLabel
-          value="Electronics"
-          control={<Radio id="5" />}
-          label="Electronics"
-        />
-        <FormControlLabel
-          value="Other"
-          control={<Radio id="6" />}
-          label="Other"
-        />
-      </RadioGroup>
-    </FormControl>
-  );
-};
-
+const CategoryRadio:FC<ICategoryProps> = ({ formik }) => (
+  <FormControl
+    className="category"
+    error={formik.touched.category_id && !!formik.errors.category_id}
+  >
+    <FormLabel id="demo-row-radio-buttons-group-label">Category</FormLabel>
+    <RadioGroup
+      row
+      aria-labelledby="demo-row-radio-buttons-group-label"
+      name="category_id"
+      onChange={formik.handleChange}
+      value={formik.values.category_id}
+    >
+      <FormControlLabel
+        value="1"
+        control={<Radio id="1" />}
+        label="Clothes"
+      />
+      <FormControlLabel
+        value="2"
+        control={<Radio id="2" />}
+        label="Furniture"
+      />
+      <FormControlLabel
+        value="3"
+        control={<Radio id="3" />}
+        label="Books"
+      />
+      <FormControlLabel
+        value="4"
+        control={<Radio id="4" />}
+        label="Accessories"
+      />
+      <FormControlLabel
+        value="5"
+        control={<Radio id="5" />}
+        label="Electronics"
+      />
+      <FormControlLabel
+        value="6"
+        control={<Radio id="6" />}
+        label="Other"
+      />
+    </RadioGroup>
+    {formik.touched.category_id && formik.errors.category_id ? (
+      <FormHelperText>{formik.errors.category_id}</FormHelperText>
+    ) : null}
+  </FormControl>
+);
 export default CategoryRadio;
diff --git a/client/src/components/AddProduct/TypeRadio.tsx b/client/src/components/AddProduct/TypeRadio.tsx
@@ -1,36 +1,37 @@
-import { FC, ChangeEvent } from 'react';
+import { FC } from 'react';
 import {
   Radio, RadioGroup, FormControlLabel,
-  FormControl, FormLabel,
+  FormControl, FormLabel, FormHelperText,
 } from '@mui/material';
 import { ITypeRadioProps } from '../../interfaces';
 
-const TypeRadio:FC<ITypeRadioProps> = ({ setType }) => {
-  const handleChange = (e:ChangeEvent<HTMLInputElement>) => {
-    setType(e.target.value);
-  };
-
-  return (
-    <FormControl className="type">
-      <FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-row-radio-buttons-group-label"
-        name="row-radio-buttons-group"
-        onChange={handleChange}
-      >
-        <FormControlLabel
-          value="donation"
-          control={<Radio />}
-          label="Donation"
-        />
-        <FormControlLabel
-          value="exchange"
-          control={<Radio />}
-          label="Exchange"
-        />
-      </RadioGroup>
-    </FormControl>
-  );
-};
+const TypeRadio:FC<ITypeRadioProps> = ({ formik }) => (
+  <FormControl
+    className="type"
+    error={formik.touched.type && !!formik.errors.type}
+  >
+    <FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
+    <RadioGroup
+      row
+      aria-labelledby="demo-row-radio-buttons-group-label"
+      name="type"
+      onChange={formik.handleChange}
+      value={formik.values.type}
+    >
+      <FormControlLabel
+        value="donation"
+        control={<Radio />}
+        label="Donation"
+      />
+      <FormControlLabel
+        value="exchange"
+        control={<Radio />}
+        label="Exchange"
+      />
+    </RadioGroup>
+    {formik.touched.type && formik.errors.type ? (
+      <FormHelperText>{formik.errors.type}</FormHelperText>
+    ) : null}
+  </FormControl>
+);
 export default TypeRadio;