Update and Delete Product Functionality

Nandita10062001 · Oct 15, 2024 · 4b6923d · 4b6923d
1 parent c7b8579
commit 4b6923d
Show file tree

Hide file tree

Showing 10 changed files with 352 additions and 45 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -17,6 +17,7 @@ import Users from './pages/Admin/Users.js';
 import Profile from './pages/user/Profile.js';
 import Orders from './pages/user/Orders.js';
 import Products from './pages/Admin/Products.js';
+import UpdateProduct from './pages/Admin/UpdateProduct.js';
 
 function App() {
   return (
@@ -32,7 +33,9 @@ function App() {
           <Route path="admin" element={<AdminDashboard />} />
           <Route path="admin/create-category" element={<CreateCategory />} />
           <Route path="admin/create-product" element={<CreateProduct />} />
+          <Route path="admin/product/:slug" element={<UpdateProduct />} />
           <Route path="admin/products" element={<Products />} />
+
           <Route path="admin/users" element={<Users />} />
         </Route>
         <Route path="/about" element={<About />} />

diff --git a/client/src/components/Layout/AdminMenu.js b/client/src/components/Layout/AdminMenu.js
@@ -4,33 +4,35 @@ import { NavLink } from 'react-router-dom';
 const AdminMenu = () => {
   return (
     <>
-      <div className="text-center">
-        <div className="list-group">
-          <h4>Admin Panel</h4>
-          <NavLink
-            to="/dashboard/admin/create-category"
-            className="list-group-item list-group-item-action"
-          >
-            Create Category
-          </NavLink>
-          <NavLink
-            to="/dashboard/admin/create-product"
-            className="list-group-item list-group-item-action"
-          >
-            Create Product
-          </NavLink>
-          <NavLink
-            to="/dashboard/admin/products"
-            className="list-group-item list-group-item-action"
-          >
-            Products
-          </NavLink>
-          <NavLink
-            to="/dashboard/admin/users"
-            className="list-group-item list-group-item-action"
-          >
-            Users
-          </NavLink>
+      <div className="container-fluid">
+        <div className="text-center">
+          <div className="list-group">
+            <h4>Admin Panel</h4>
+            <NavLink
+              to="/dashboard/admin/create-category"
+              className="list-group-item list-group-item-action"
+            >
+              Create Category
+            </NavLink>
+            <NavLink
+              to="/dashboard/admin/create-product"
+              className="list-group-item list-group-item-action"
+            >
+              Create Product
+            </NavLink>
+            <NavLink
+              to="/dashboard/admin/products"
+              className="list-group-item list-group-item-action"
+            >
+              Products
+            </NavLink>
+            <NavLink
+              to="/dashboard/admin/users"
+              className="list-group-item list-group-item-action"
+            >
+              Users
+            </NavLink>
+          </div>
         </div>
       </div>
     </>

diff --git a/client/src/index.css b/client/src/index.css
@@ -216,3 +216,9 @@ button {
 button:hover {
   background-color: #357ABD;
 }
+
+/* Product Page */
+.product-link{
+  text-decoration: none !important;
+  color: #000000 !important;
+}
diff --git a/client/src/pages/Admin/CreateCategory.js b/client/src/pages/Admin/CreateCategory.js
@@ -97,21 +97,21 @@ const CreateCategory = () => {
 
   return (
     <Layout title={'Create Category'}>
-      <div className="container-fluid m-3 p-3">
+      <div className="container-fluid p-3">
         <div className="row">
           <div className="col-md-3">
             <AdminMenu />
           </div>
-          <div className="col-md-9">
-            <h1>Manage Categories</h1>
+          <div className="col-md-9 mt-3">
+            <h1 className='text-center'>Manage Categories</h1>
             <div className="p-3 w-50">
               <CategoryForm
                 handleSubmit={handleSubmit}
                 value={name}
                 setValue={setName}
               />
             </div>
-            <div className="w-75">
+            <div className="w-75 ">
               <table className="table">
                 <thead>
                   <tr>

diff --git a/client/src/pages/Admin/CreateProduct.js b/client/src/pages/Admin/CreateProduct.js
@@ -54,7 +54,7 @@ const CreateProduct = () => {
         productData
       );
       if (data?.success) {
-        navigate('/dashboard/admin/productss');
+        navigate('/dashboard/admin/products');
         toast.success(`Product Created Successfully!`);
       } else {
         toast.error(data?.message);
@@ -67,12 +67,12 @@ const CreateProduct = () => {
 
   return (
     <Layout title={'Create Product'}>
-      <div className="container-fluid m-3 p-3">
+      <div className="container-fluid p-3">
         <div className="row">
           <div className="col-md-3">
             <AdminMenu />
           </div>
-          <div className="col-md-9">
+          <div className="col-md-9 mt-3">
             <h1>Create Product</h1>
             <div className="m-1 w-75">
               <Select

diff --git a/client/src/pages/Admin/Products.js b/client/src/pages/Admin/Products.js
@@ -1,8 +1,31 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import AdminMenu from '../../components/Layout/AdminMenu';
 import Layout from '../../components/Layout/Layout';
+import axios from 'axios';
+import { toast } from 'react-toastify';
+import { Link } from 'react-router-dom';
 
 const Products = () => {
+  const [products, setProducts] = useState([]);
+
+  //get all products
+  const getAllProducts = async () => {
+    try {
+      const { data } = await axios.get(
+        `${process.env.REACT_APP_API}/api/v1/product/get-product`
+      );
+      setProducts(data.products);
+    } catch (error) {
+      console.log(error);
+      toast.error('Something Went Wrong');
+    }
+  };
+
+  //lifecycle method
+  useEffect(() => {
+    getAllProducts();
+  }, []);
+
   return (
     <Layout title={'All Products'}>
       <div>
@@ -11,7 +34,31 @@ const Products = () => {
             <AdminMenu />
           </div>
           <div className="col-md-9">
-            <h2 className="text-center"> All Products</h2>
+            <h1 className="text-center mt-3"> All Products</h1>
+            <div className="d-flex">
+              {products?.map((p) => (
+                <Link
+                  key={p._id}
+                  to={`/dashboard/admin/product/${p.slug}`}
+                  className="product-link"
+                >
+                  <div className="card m-2" style={{ width: '18rem' }}>
+                    <img
+                      src={`${process.env.REACT_APP_API}/api/v1/product/product-photo/${p._id}`}
+                      className="card-img-top"
+                      alt={p.name}
+                    />
+                    <div className="card-body">
+                      <div className="d-flex justify-content-between">
+                        <h5 className="card-title">{p.name}</h5>
+                        <h5>{p.price}$</h5>
+                      </div>
+                      <p className="card-text">{p.description}</p>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
           </div>
         </div>
       </div>