Merge with analytics components

atlp-rwanda · Jul 18, 2024 · 547556e · 547556e
1 parent c170324
commit 547556e
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Components/vendor/NewProduct.tsx b/src/Components/vendor/NewProduct.tsx
@@ -96,8 +96,8 @@ const NewProduct = (property: productProps) => {
 
 
     return (
-        <div className='w-full h-full top-0 z-[400] bg-black/20  p-4 absolute flex items-center justify-center left-0'>
-            <div className='w-1/2 max-h-[95%]  flex flex-col gap-[10px] bg-white overflow-y-scroll p-4 rounded-[12px]'>
+        <div className='w-full h-full top-0 z-[400] bg-black/20 absolute flex items-center justify-center left-0'>
+            <div className='w-1/2 max-h-[95vh   ] flex flex-col gap-[10px] bg-white overflow-y-scroll p-4 rounded-[12px]'>
                 <div className='w-full flex flex-row font-outfit items-center justify-between'>
                     <h1 className='text-[18px] font-[600]'>New Products</h1>
                     <div>X</div>

diff --git a/src/Components/vendor/UpdateProduct.tsx b/src/Components/vendor/UpdateProduct.tsx
@@ -2,7 +2,7 @@ import React, { FormEvent, useEffect, useState } from 'react'
 import Input from '../../Constants/Input'
 import AuthButton from '../../Constants/AuthButton'
 import axios from 'axios'
-import { useCreateProductMutation } from '../../Redux/features/sellerSlice'
+import {useUpdateProductMutation } from '../../Redux/features/sellerSlice'
 import useAuthHeader from 'react-auth-kit/hooks/useAuthHeader'
 
 
@@ -18,7 +18,7 @@ const UpdateProduct = (property: productProps) => {
     const [discount, setDiscount] = useState<number>(property.productData.discount)
     const [price, setPrice] = useState<string>(property.productData.price)
     const [image, setImage] = useState(property.productData.image);
-    const [category, setCategory] = useState<string>("")
+    const [category, setCategory] = useState<string>(property.productData.category)
     const [quantity, setQuantity] = useState<number>(property.productData.quantity)
     const [expiringDate, setExpiringDate] = useState<string>(property.productData.expiringDate)
     const [error, setError] = useState<boolean>(false)
@@ -28,7 +28,7 @@ const UpdateProduct = (property: productProps) => {
 
 
 
-    const [createProduct, {isLoading:uploadLoading,isError}] = useCreateProductMutation()
+    const [updateProduct, {isLoading:uploadLoading,isError}] = useUpdateProductMutation()
 
     const handleImages = (value: FileList): void => {
         const newImages = Array.from(value)
@@ -79,10 +79,10 @@ const UpdateProduct = (property: productProps) => {
           const imageUrls = responses.map(response => response.data.secure_url);
 
           const vendor = JSON.parse(localStorage.getItem('vendorData') as string);
-          const data = {name,quantity,description,price,discount,expiringDate,category,image: imageUrls, id: vendor.vendorId };
+          const data = {name,quantity,description,price,discount,expiringDate,category,image: imageUrls, vendorId: vendor.vendorId,id: property.productData.productId };
 
-          const response = await createProduct({data,token}).unwrap();
-          if (response.message && response.message === "Product Created") {
+          const response = await updateProduct({data,token}).unwrap();
+          if (response.message && response.message === "Product updated successfully") {
             console.log(response)
             setLoading(false)
             property.setModal(false)
@@ -100,7 +100,7 @@ const UpdateProduct = (property: productProps) => {
         <div className='w-full h-full bg-black/20  fixed flex items-center top-0 justify-center left-0'>
             <div className='w-1/2 flex flex-col max-h-[90vh] overflow-y-scroll gap-[10px] bg-white p-4 rounded-[12px]'>
                 <div className='w-full flex flex-row font-outfit items-center justify-between'>
-                    <h1 className='text-[18px] font-[600]'>New Products</h1>
+                    <h1 className='text-[18px] font-[600]'>Update Product</h1>
                     <div className='text-[20px] font-[700] text-black cursor-pointer hover:scale-125 transition-all duration-300' onClick={()=> property.setModal(false)}>X</div>
                 </div>
                 <form onSubmit={handleSubmit} className='flex flex-col gap-[10px] items-center'>

diff --git a/src/Redux/features/sellerSlice.tsx b/src/Redux/features/sellerSlice.tsx
@@ -35,6 +35,18 @@ const SellerSlice = apiSlice.injectEndpoints({
             }
         }
     }),
+    updateProduct: builder.mutation({
+        query: ({data,token}) => {
+            return{
+                url: `/updateProduct/${data.id}`,
+                method: "PUT",
+                body: data,
+                headers:{
+                    Authorization: token
+                }
+            }
+        }
+    }),
     selectSingleProduct: builder.query({
       query: (id)=> `/readProduct/${id}`
     }),
@@ -53,5 +65,5 @@ const SellerSlice = apiSlice.injectEndpoints({
   })
 });
 
-export const { useSelectFeddbackQuery, useSelectProductsQuery,useSelectVendorQuery,useCreateProductMutation,useSelectSingleProductQuery,useDeleteProductMutation } = SellerSlice;
+export const { useSelectFeddbackQuery, useSelectProductsQuery,useSelectVendorQuery,useCreateProductMutation,useSelectSingleProductQuery,useDeleteProductMutation,useUpdateProductMutation } = SellerSlice;
 export default SellerSlice;
diff --git a/src/pages/vendor/VendorSingleProduct.tsx b/src/pages/vendor/VendorSingleProduct.tsx
@@ -12,13 +12,20 @@ const VendorSingleProduct = () => {
     const { id } = useParams<{ id: string }>()
     const navigate:any = useNavigate()
     const token = useAuthHeader()
-    const { data: singleProduct, error, isLoading } = useSelectSingleProductQuery(id)
+    const { data: singleProduct, error, isLoading,refetch } = useSelectSingleProductQuery(id)
     const [deleteProduct, { isLoading: deleteLoading, isError: deleteError }] = useDeleteProductMutation()
     const vendorData: any = localStorage.getItem('vendorData')
     const vendor = JSON.parse(vendorData)
 
     const [openedImage, setOpenedImage] = useState<number>(0)
 
+    useEffect(() => {
+        if (isComplete) {
+            toast.success("Product updated")
+            refetch().then(() => setIsComplete(false))
+        }
+    }, [isComplete, refetch])
+
     if (isLoading) {
         return (
             <div className='w-full h-screen flex items-center justify-center'>
@@ -33,6 +40,7 @@ const VendorSingleProduct = () => {
             </div>
         )
     }
+
 
     const expiringDate = new Date(singleProduct.expiringDate)
     const day = expiringDate.getDate()
@@ -54,6 +62,8 @@ const VendorSingleProduct = () => {
         }
     }
 
+
+
 
     return (
         <>
@@ -93,7 +103,7 @@ const VendorSingleProduct = () => {
                     </div>
                     <div className='flex flex-col gap-[5px]'>
                         <span className='text-secondary font-outfit '>Quantity</span>
-                        <span className='px-2 bg-gray-50 rounded-[12px] py-1 flex items-center justify-center w-[100px] font-[600] font-outfit'>{singleProduct.quantity} In Stock</span>
+                        <span className='px-2 bg-gray-50 rounded-[12px] py-1 flex items-center justify-center max-w-[150px] min-w-[100px] font-[600] font-outfit'>{singleProduct.quantity} In Stock</span>
                     </div>
                     <div className='flex flex-col gap-[5px] font-outfit'>
                         <span className='text-secondary font-outfit '>Price</span>