Merge pull request #5 from Soliman3/develop

Pull develop

Author: Soliman3

admin/.gitignore

@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-
+firebase.js
 # testing
 /coverage
 

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={product.category} 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;

client/package.json

@@ -26,7 +26,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=3002 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

client/src/Data/categoriesData.js

@@ -1,24 +1,68 @@
-import OfferFirstSlide from '../images/2.png'
-import OfferSecondSlide from '../images/2.png'
-import OfferThirdSlide from '../images/2.png'
+import Mobiles from '../images/mobiles.jpg'
+import accessories from '../images/airpod.png'
+import appliances from '../images/homeAppliances.jpg'
+import Men from '../images/menWear.jpg'
+import Grocery from '../images/grocery.jpg'
+import Beauty from '../images/beauty.jpg'
+import Baby from '../images/baby.jpg'
+import Vega from '../images/veg.jpg'
+import KidsWear from '../images/kidsWear.jpg'
 
 export const categories = [
     {
         id: 1,
-        img: OfferFirstSlide,
-        title: "MOBILE",
+        img: Mobiles,
+        title: "mobile",
         category: "mobile",
     },
     {
         id: 2,
-        img: OfferSecondSlide,
-        title: "Accessories",
+        img: accessories,
+        title: "accessories",
         category: "accessories",
     },
     {
         id: 3,
-        img: OfferThirdSlide,
-        title: "HOME APPLIANCE",
+        img: appliances,
+        title: "appliances",
         category: "appliances",
-    }
+    },
+    {
+        id: 4,
+        img: Men,
+        title: "Men",
+        category: "Men",
+    },
+    {
+        id: 5,
+        img: Grocery,
+        title: "grocery",
+        category: "grocery",
+    },
+    {
+        id: 6,
+        img: Beauty,
+        title: "beauty",
+        category: "beauty",
+    },
+    {
+        id: 7,
+        img: Baby,
+        title: "baby",
+        category: "baby",
+    },
+    {
+        id: 8,
+        img: Vega,
+        title: "fruits & veg",
+        category: "fruits & veg",
+    },
+    {
+        id: 9,
+        img: KidsWear,
+        title: "Kids Wear",
+        category: "Kids Wear",
+    },
+
+
 ]

client/src/components/CategoryBar.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// import icons from muiv5 library...
+import {ArrowDropDown} from '@mui/icons-material';
+
+// Styling...
+const Container = styled.div`
+    height: 50px;
+    border-top: 0.25px solid #bee4f4;
+    border-bottom: 0.25px solid #bee4f4;
+`
+const Wrapper = styled.div`
+    height: 100%;
+    display: flex;
+    
+`
+const LeftContainer = styled.div`
+    flex: 1;
+    align-items: center;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    border-right: 0.25px solid #bee4f4;
+`
+const LeftContainerLabel = styled.span`
+    font-size: 16px;
+    font-weight: bold;
+`
+const LeftContainerIcon = styled.div`
+    
+`
+const RightContainer = styled.div`
+    flex: 4;
+    align-items: center;
+    padding: 15px;
+    display: flex;
+`
+const RightContainerItem = styled.span`
+    font-size: 16px;
+    margin-right: 25px;
+    font-weight: bold;
+    color: ${(props)=> props.type === 'vip' && 'red'};
+`
+
+
+export default function CategoryBar() {
+  return (
+    <Container>
+          <Wrapper>
+              <LeftContainer>
+                  <LeftContainerLabel>All Category</LeftContainerLabel>
+                  <LeftContainerIcon><ArrowDropDown style={{color: 'blue'}}/></LeftContainerIcon>
+              </LeftContainer>
+              <RightContainer>
+                 <RightContainerItem>Electronics</RightContainerItem>
+                 <RightContainerItem>Mobiles</RightContainerItem>
+                 <RightContainerItem>Men</RightContainerItem>
+                 <RightContainerItem>Women</RightContainerItem>
+                 <RightContainerItem>Home</RightContainerItem>
+                 <RightContainerItem>Beauty</RightContainerItem>
+                 <RightContainerItem>Babay & Toys</RightContainerItem>
+                 <RightContainerItem>Electronics</RightContainerItem>
+                 <RightContainerItem>Supermarket</RightContainerItem>
+                 <RightContainerItem type="vip">DEALS</RightContainerItem>
+                 
+              </RightContainer>
+      </Wrapper>
+    </Container>
+  )
+}