Update product info

- upload image by firebase and get the downloadURL
- intialize state onchange one time for product info
- Add deleteAll action for products from redux to fix issue

Author: Soliman3

admin/src/components/TopBar.jsx

@@ -19,6 +19,7 @@ import {
 
 // import required image from images library...
 import profilePhoto from '../images/1.jpg'
+import { deleteAll } from '../redux/productSlice';
 
 // Styling...
 const Container = styled.div`
@@ -101,6 +102,10 @@ export default function TopBar() {
         } catch (error) {
         }
     }
+    // emty redux products...
+    const handleClick = () => {
+        dispatch(deleteAll())
+    }
     return (
         <Container>
             <Wrapper>
@@ -112,7 +117,7 @@ export default function TopBar() {
                         <PowerSettingsNewOutlined onClick={handleLogOut} style={{ fontSize: '20px' }} />
                     </TopBarRightIcons>
                     <TopBarRightIcons>
-                        <SettingsOutlined style={{ fontSize: '20px' }} />
+                        <SettingsOutlined style={{ fontSize: '20px' }} onClick={handleClick} />
                     </TopBarRightIcons>
                     <TopBarRightIcons>
                         <NotificationsNone style={{ fontSize: '20px' }} />

admin/src/pages/NewProduct.jsx

@@ -138,7 +138,6 @@ export default function NewProduct() {
         ); 
 
     }
-console.log(file);
   return (
     <Container>
           <NewProductTitle>Add New Product</NewProductTitle>

admin/src/pages/ProductList.jsx

@@ -34,7 +34,7 @@ const ProductContainer = styled.div`
 const ProductImage = styled.img`
     width: 35px;
     height: 35px;
-    border-radius: 50%;
+    
     object-fit: cover;
 `
 const EditButton = styled.button`
@@ -102,7 +102,7 @@ export default function ProductList() {
             field: 'product', headerName: 'Product ', width: 300, renderCell: (params) => {
                 return (
                     <ProductContainer>
-                        <ProductImage src={params.row.productImage} alt="" />
+                        <ProductImage src={params.row.image} alt="" />
                         {params.row.title}
                 </ProductContainer>
             )

admin/src/pages/ProductSinglePage.jsx

@@ -4,17 +4,22 @@ import React, { useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
 // import React Router Dom Library for Routing..
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 
 // import required components...
 import Charts from '../components/Charts'
 
 // import produts data from dummyData.js file...
 import { productsData } from '../Data/dummyData'
 import { AddOutlined, Publish } from '@mui/icons-material'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { userRequest } from '../requestAxiosMethod'
 
+// firebase requires functions from firebase library...
+import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
+import app from '../firebase'
+import { updateProductFailure, updateProductStart, updateProductSuccess } from '../redux/productSlice'
+
 // Styling...
 const Container = styled.div`
     flex: 4;
@@ -197,7 +202,82 @@ export default function ProductSinglePage() {
         }
         getOrderedProductInfo()
     }, [months, productId])
-    console.log(product)
+    // #################################################
+    // handle update product...
+    const [inputs, setInputs] = useState({})
+    const [categories, setCategories] = useState([])
+    const [file, setFile] = useState()
+    const dispatch = useDispatch()
+    const navigate = useNavigate()
+
+    // handleChange of inputs in group in onetime...
+    const handleChange = (e) => {
+        setInputs((previous) => {
+            return { ...previous, [e.target.name]: e.target.value}
+        })
+    }
+
+    // handle state of categories and split categories by split method...
+    const handleCategories = (e) => {
+        setCategories(e.target.value.split(','))
+    } 
+
+    // send payload to server by axios post method...
+    const handleClick = (e) => {
+        // prevent default event (reloading page) when click create...
+        e.preventDefault() 
+        // upload image & inputs to database throght api post request ...
+        const fileName = new Date().getTime + file?.name;
+        const storage = getStorage(app);
+        const storageRef = ref(storage, fileName);
+
+        const uploadTask = uploadBytesResumable(storageRef, file);
+
+        // Register three observers:
+        // 1. 'state_changed' observer, called any time the state changes
+        // 2. Error observer, called on failure
+        // 3. Completion observer, called on successful completion
+        uploadTask.on('state_changed', 
+        (snapshot) => {
+            // Observe state change events such as progress, pause, and resume
+            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+            console.log('Upload is ' + progress + '% done');
+            switch (snapshot.state) {
+            case 'paused':
+                console.log('Upload is paused');
+                break;
+            case 'running':
+                console.log('Upload is running');
+                    break;
+            }
+        }, 
+        (error) => {
+            // Handle unsuccessful uploads
+        }, 
+        () => {
+            // Handle successful uploads on complete
+            // For instance, get the download URL: https://firebasestorage.googleapis.com/...
+            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
+                const product = { ...inputs, image: downloadURL, category: categories }
+                console.log(product);
+                const updateProducts = async () => {
+                    dispatch(updateProductStart())
+                    try {
+                        const response = await userRequest.put(`/products/${productId}`, product )
+                        dispatch(updateProductSuccess(response.data))
+                        .then(navigate('/products'))
+                    } catch (error) {
+                        dispatch(updateProductFailure())
+                    }
+                }
+
+                updateProducts();
+            });
+        }
+        );
+    }
+
     return (
         <Container>
             <ProductTitleContainer>
@@ -239,20 +319,23 @@ export default function ProductSinglePage() {
                     <ProductFormLeft>
                         <ProductFormLeftItem>
                             <ProductItemLabel>Product Name</ProductItemLabel>
-                            <ProductItemInput type="text" placeholder={product.title} />
+                            <ProductItemInput name="title" type="text" placeholder={product.title} onChange={handleChange}/>
                         </ProductFormLeftItem>
                         <ProductFormLeftItem>
                             <ProductItemLabel>Product Description</ProductItemLabel>
-                            <ProductItemInput type="text" placeholder={product.description} />
+                            <ProductItemInput type="text" placeholder={product.description} name="description" onChange={handleChange}/>
                         </ProductFormLeftItem>
                         <ProductFormLeftItem>
                             <ProductItemLabel>Price</ProductItemLabel>
-                            <ProductItemInput type="text" placeholder={product.price} />
+                            <ProductItemInput type="number" placeholder={product.price} name="price" onChange={handleChange}/>
+                        </ProductFormLeftItem>
+                        <ProductFormLeftItem>
+                            <ProductItemLabel>Categories</ProductItemLabel>
+                            <ProductItemInput type="text" placeholder="" name="category" onChange={handleCategories}/>
                         </ProductFormLeftItem>
-
                         <ProductFormLeftItem>
                             <ProductItemLabel>In Stock</ProductItemLabel>
-                            <ProductItemSelect name="inStock" id="inStock">
+                            <ProductItemSelect name="inStock" id="inStock" onChange={handleChange}>
                                 <ProductItemOption value="true">Yes</ProductItemOption>
                                 <ProductItemOption value="false">No</ProductItemOption>
                             </ProductItemSelect>
@@ -262,9 +345,9 @@ export default function ProductSinglePage() {
                         <ProductFormImageUpload>
                             <ProductImage src={product.image} alt="" />
                             <ProductImageUploadLabel for="file"><Publish /></ProductImageUploadLabel>
-                            <ProductImageUploadInput type="file" id="file" style={{display: 'none'}} />
+                            <ProductImageUploadInput type="file" id="file" style={{display: 'none'}} onChange={(e)=> setFile(e.target.files[0])} />
                         </ProductFormImageUpload>
-                        <ProductUpdateButton>Update</ProductUpdateButton>
+                        <ProductUpdateButton onClick={handleClick}>Update</ProductUpdateButton>
                     </ProductFormRight>
                 </ProductBottomForm>
             </ProductBottom>

admin/src/redux/productSlice.js

@@ -74,13 +74,18 @@ export const productSlice = createSlice({
         addProductFailure: (state) => {
             state.loading = false
             state.error = true
-        }
+        },
+        deleteAll: (state) => {
+            state.products = []
+            state.loading = false
+            state.error = false
+        },
     },
 });
 
 export const { getProductStart, getProductSuccess, getProductFailure,
                 deleteProductStart, deleteProductSuccess, deleteProductFailure,
                 updateProductStart, updateProductSuccess, updateProductFailure,
-                addProductStart, addProductSuccess, addProductFailure
+                addProductStart, addProductSuccess, addProductFailure, deleteAll
             } = productSlice.actions;
 export default productSlice.reducer;