add category banner image

src/index.js

@@ -12,7 +12,7 @@ import axios from 'axios'
 
 const setupAxios = () => {
   axios.defaults.baseURL = 'https://cms-api-dashboard.herokuapp.com/';
-  // axios.defaults.baseURL = 'http://localhost:5000'
+  //axios.defaults.baseURL = 'http://localhost:5000'
   axios.defaults.headers = {
     'Cache-Control': 'no-cache,no-store',
     'Pragma': 'no-cache',

src/views/Category/AddCategory.js

@@ -26,12 +26,13 @@ const AddProduct = () => {
     const token = isAutheticated();
     let history = useHistory();
     const [image, setImage] = useState("");
+    const [ctegoryBannerImage, setCtegoryBannerImage] = useState("");
     const [name, setName] = useState("");
     const [loading, setLoading] = useState(false);
 
 
     const handleSubmit = async () => {
-        if (!(name && image)) {
+        if (!(name && image && ctegoryBannerImage)) {
             return swal('Error!', 'All fields are required', 'error')
 
         }
@@ -41,6 +42,7 @@ const AddProduct = () => {
 
 
         myForm.set("image", image);
+        myForm.set("category_banner", ctegoryBannerImage);
         setLoading({ loading: true });
         // console.log(image)
         try {
@@ -103,8 +105,9 @@ const AddProduct = () => {
                                                         value={name}
                                                         placeholder="Name" />
                                                 </CInputGroup>
+                                                <div>category image *</div>
 
-                                                <CInputGroup className="mb-3">
+                                                <CInputGroup className="mb-3 mt-2">
 
                                                     {/* <CIcon icon={cilLockLocked} /> */}
 
@@ -116,6 +119,21 @@ const AddProduct = () => {
                                                         onChange={handleImage}
 
 
+                                                    />
+                                                </CInputGroup>
+                                                <div>category Banner image *</div>
+                                                <CInputGroup className="mb-3 mt-2">
+
+
+
+                                                    <CFormInput
+                                                        type="file"
+                                                        placeholder="image"
+                                                        accept="image/*"
+                                                        required
+                                                        onChange={(e) => setCtegoryBannerImage(e.target.files[0])}
+
+
                                                     />
                                                 </CInputGroup>
                                             </div>

src/views/Category/Category.js

@@ -33,7 +33,7 @@ function Products() {
         },
       }
     );
-    // console.log(res.data.category[0].image.url)
+    // console.log(res.data.category)
     setCategory(res.data.category)
     // console.log(category[0].addedOn)
     changeState({
@@ -62,12 +62,16 @@ function Products() {
         Authorization: `Bearer ${token}`,
       },
     });
-    console.log(res)
+    // console.log(res)
     if (res.data.success == true) {
       swal("success!", "Category Deleted Successfully!", "success");
       window.location.reload();
       // if (res.status === 200) window.location.reload();
     }
+    else {
+      swal("error!", "failled!", "error");
+
+    }
   };
 
 
@@ -119,7 +123,8 @@ function Products() {
                       <thead className="thead-light">
                         <tr>
                           <th>Name</th>
-                          <th>Image</th>
+                          <th>Category Image</th>
+                          <th>Category Banner</th>
                           <th>Added On</th>
                           <th>Actions</th>
                         </tr>
@@ -129,7 +134,12 @@ function Products() {
                           <tr key={index}>
                             <td>{item?.name}</td>
                             <td>
-                              <img src={`${item?.image.url}`} width="50" alt="" /></td>
+                              <img src={`${item?.image.url}`} width="50" alt="" />
+                            </td>
+                            <td>
+
+                              {item.category_banner && <img src={`${item?.category_banner.url}`} width="50" alt="" />}
+                            </td>
                             <td>
                               {/* {item?.addedOn} */}
                               {new Date(`${item?.addedOn}`).toDateString()}<span> , {`${formatAMPM(item?.addedOn)}`}</span>

src/views/Category/EditCategory.js

@@ -29,6 +29,8 @@ const AddProduct = () => {
     // console.log(id)
     const [image, setImage] = useState("");
     const [name, setName] = useState("");
+    const [ctegoryBannerImage, setCtegoryBannerImage] = useState("");
+
     const [loading, setLoading] = useState(false);
     useEffect(async () => {
         const res = await axios.get(`/api/category/getOne/${id}`, {
@@ -43,8 +45,8 @@ const AddProduct = () => {
 
 
     const handleSubmit = async () => {
-        if (!(name && image)) {
+        if (!(name)) {
-            return swal('Error!', 'All fields are required', 'error')
+            return swal('Error!', 'Name fields are required', 'error')
 
         }
         const myForm = new FormData();
@@ -53,6 +55,8 @@ const AddProduct = () => {
 
 
         myForm.set("image", image);
+        myForm.set("category_banner", ctegoryBannerImage);
+
         setLoading({ loading: true });
         // console.log(image)
         try {
@@ -112,7 +116,9 @@ const AddProduct = () => {
                                                         placeholder="Name" />
                                                 </CInputGroup>
 
-                                                <CInputGroup className="mb-3">
+                                                <div>category image *</div>
+
+                                                <CInputGroup className="mb-3 mt-2">
 
                                                     {/* <CIcon icon={cilLockLocked} /> */}
 
@@ -124,6 +130,21 @@ const AddProduct = () => {
                                                         onChange={handleImage}
 
 
+                                                    />
+                                                </CInputGroup>
+                                                <div>category Banner image *</div>
+                                                <CInputGroup className="mb-3 mt-2">
+
+
+
+                                                    <CFormInput
+                                                        type="file"
+                                                        placeholder="image"
+                                                        accept="image/*"
+                                                        required
+                                                        onChange={(e) => setCtegoryBannerImage(e.target.files[0])}
+
+
                                                     />
                                                 </CInputGroup>
                                             </div>