product : testimonilal authslice udpate.

github-usman · Aug 13, 2024 · de602e8 · de602e8
1 parent 21ea910
commit de602e8
Show file tree

Hide file tree

Showing 18 changed files with 272 additions and 195 deletions.
diff --git a/backend/config/config.js b/backend/config/config.js
@@ -28,9 +28,14 @@ const mailServices = {
   smtpHost: process.env.SMTP_HOST,
   smtpPort: process.env.SMTP_PORT,
 };
+// mail services
+const productDetails = {
+  resultPerPage: process.env.RESULT_PER_PAGE,
+};
 
 export const { serverMode, serverPort } = server;
 export const { dbUri, dbName } = database;
 export const { jwtSecret, jwtExpire, cookieExpire } = jwtInformation;
 export const { smtpMail, smtpPassword, smtpService, smtpHost, smtpPort } =
   mailServices;
+export const { resultPerPage } = productDetails;
diff --git a/backend/controllers/product.controller.js b/backend/controllers/product.controller.js
@@ -4,11 +4,11 @@ import { Product } from "../models/product.model.js";
 import catchAysncErrors from "../middleware/catchAysncErrors.js";
 import ErrorHander from "../utils/error-handler.js";
 import ApiFeatures from "../utils/api-feature.js";
+import { resultPerPage } from "../config/config.js";
 
 // Get all Product
 
 export const getAllProductDetails = catchAysncErrors(async (req, res, next) => {
-  const resultPerPage = 8;
   const productCount = await Product.countDocuments();
   const apiFeatures = new ApiFeatures(Product.find(), req.query)
     .search()

diff --git a/backend/server.js b/backend/server.js
@@ -14,7 +14,9 @@ process.on("uncaughtException", (err) => {
 server.use("/api/v1", app);
 
 server.listen(serverPort, () => {
-  console.log(`server is running on port ${serverPort} in ${serverMode} mode`);
+  console.log(
+    `server is running on port \x1b[44m${serverPort}\x1b[0m in \x1b[47m${serverMode}\x1b[0m mode`
+  );
 });
 
 process.on("unhandledRejection", (err) => {

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,50 +1,55 @@
 import React from 'react';
+import { lazy, Suspense } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import MainLayout from './layout/MainLayout';
-import Home from './pages/home/Home';
-import AuthAdmin from './custom-hooks/AuthAdmin';
-import SellerPage from './pages/seller/Seller';
-import AdminProfile from './pages/profle/AdminProfile';
-import CreateProduct from './pages/seller/CreateProduct';
-import NewProductReport from './pages/seller/NewProductReport';
+const MainLayout = lazy(() => import('./layout/MainLayout'));
+const Home = lazy(() => import('./pages/home/Home'));
+const SellerPage = lazy(() => import('./pages/seller/Seller'));
+const AdminProfile = lazy(() => import('./pages/profle/AdminProfile'));
+const CreateProduct = lazy(() => import('./pages/seller/CreateProduct'));
+const NewProductReport = lazy(() => import('./pages/seller/NewProductReport'));
+const AdminDashBoard = lazy(
+  () => import('./pages/admin-dashboard/AdminDashBoard')
+);
 import _404 from './components/_404';
-import AdminDashBoard from './pages/admin-dashboard/AdminDashBoard';
+import AuthAdmin from './custom-hooks/AuthAdmin';
 
 const App = () => {
   return (
     <Router>
-      <MainLayout>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/create-product" element={<CreateProduct />} />
-          <Route path="/admin/dashboard" element={<AdminDashBoard />} />
-          <Route
-            path="/seller-page"
-            element={
-              <AuthAdmin>
-                <SellerPage />
-              </AuthAdmin>
-            }
-          />
-          <Route
-            path="/seller/new-product-report"
-            element={
-              <AuthAdmin>
-                <NewProductReport />
-              </AuthAdmin>
-            }
-          />
-          <Route
-            path="/admin/profile"
-            element={
-              <AuthAdmin>
-                <AdminProfile />
-              </AuthAdmin>
-            }
-          />
-          <Route path="*" element={<_404 />} />
-        </Routes>
-      </MainLayout>
+      <Suspense fallback={<div>Loading...</div>}>
+        <MainLayout>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/create-product" element={<CreateProduct />} />
+            <Route path="/admin/dashboard" element={<AdminDashBoard />} />
+            <Route
+              path="/seller-page"
+              element={
+                <AuthAdmin>
+                  <SellerPage />
+                </AuthAdmin>
+              }
+            />
+            <Route
+              path="/seller/new-product-report"
+              element={
+                <AuthAdmin>
+                  <NewProductReport />
+                </AuthAdmin>
+              }
+            />
+            <Route
+              path="/admin/profile"
+              element={
+                <AuthAdmin>
+                  <AdminProfile />
+                </AuthAdmin>
+              }
+            />
+            <Route path="*" element={<_404 />} />
+          </Routes>
+        </MainLayout>
+      </Suspense>
     </Router>
   );
 };

diff --git a/frontend/src/components/home/carousel/SliderComponent.jsx b/frontend/src/components/home/carousel/SliderComponent.jsx
@@ -20,7 +20,7 @@ const SliderComponent = ({ testimonial }) => {
           <p>{testimonial.sale_discount}</p>
           <h2>{testimonial.sale_title}</h2>
           <p>{testimonial.sale_para}</p>
-          <button>Shop Now</button>
+          <button>Explore Now</button>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/home/search-box/SearchBox.jsx b/frontend/src/components/home/search-box/SearchBox.jsx
@@ -17,12 +17,14 @@ const SearchBox = () => {
           className={styles.inputBtn}
           placeholder="Search for products"
           onChange={(e) => setInput(e.target.value)}
+          autoComplete="on"
           required
         />
         <button
           type="submit"
           className={styles.searchBtn}
           onClick={addInputHadler}
+          name="search button"
         >
           <GoSearch className={styles.searchIncon} />
         </button>

diff --git a/frontend/src/pages/admin-dashboard/body/BodyLayout.jsx b/frontend/src/pages/admin-dashboard/body/BodyLayout.jsx
@@ -5,8 +5,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { toggleAdminLeftDashboard } from '../../../redux/admin/adminLeftMenuSlice';
 import AdminProfile from './AdminProfile';
 import CardItemd from './CardItemd';
-import ListOfProducts from './ListOfProducts';
 import ListOfUser from './list-of-user/ListOfUser';
+import ListOfProducts from './list-of-products/ListOfProducts';
 
 const DataDetails = [
   {

diff --git a/frontend/src/pages/admin-dashboard/body/ListOfProducts.jsx b/frontend/src/pages/admin-dashboard/body/ListOfProducts.jsx
diff --git a/frontend/src/pages/admin-dashboard/body/list-of-products/ListOfProducts.jsx b/frontend/src/pages/admin-dashboard/body/list-of-products/ListOfProducts.jsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getAllProduct } from '../../../../redux/auth/authSlice';
+import UserTable from './ProductsTable';
+import { FiMaximize } from 'react-icons/fi';
+import { FaMinus } from 'react-icons/fa';
+
+const ListOfProducts = () => {
+  const { allProduct } = useSelector((state) => state.auth);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (!allProduct) {
+      dispatch(getAllProduct());
+    }
+  }, [allProduct, dispatch]);
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleToggle = () => {
+    setIsOpen((val) => !val);
+  };
+  return (
+    <div
+      className={`${isOpen ? 'list__of__product' : 'list__of__users__close'}`}
+    >
+      <div className="header">
+        <p>All Products</p>
+        {isOpen ? (
+          <FaMinus onClick={handleToggle} />
+        ) : (
+          <FiMaximize onClick={handleToggle} />
+        )}
+      </div>
+      <article>
+        {allProduct && <UserTable k data={allProduct} isOpen={isOpen} />}
+      </article>
+    </div>
+  );
+};
+
+export default ListOfProducts;
diff --git a/frontend/src/pages/admin-dashboard/body/list-of-products/ProductsTable.jsx b/frontend/src/pages/admin-dashboard/body/list-of-products/ProductsTable.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+const ProductsTable = ({ data, isOpen }) => {
+  console.log(data);
+  return (
+    <div className={`${isOpen === true ? 'user__table' : 'table_hide'}`}>
+      <table>
+        <tr className="t-head">
+          <th className="first">Name</th>
+          <th>Description</th>
+          <th>Price</th>
+          <th>Rating</th>
+          <th>Image</th>
+          <th>Category</th>
+          <th>Stock</th>
+          <th>Reviews</th>
+          <th className="last">Created At</th>
+        </tr>
+        <tr>
+          {data.map((prod) => (
+            <div key={prod._id} className="t-body">
+              <td>{prod.name}</td>
+              <td>{prod.description}</td>
+              <td>{prod.price}</td>
+              <td>{prod.rating}</td>
+              <td className="prod__image">
+                <img src={prod.images[0].url} alt={prod.name} />
+              </td>
+              <td>{prod.category}</td>
+              <td>{prod.stock}</td>
+              <td>{prod.reviews}</td>
+              <td>{prod.createdAt}</td>
+            </div>
+          ))}
+        </tr>
+      </table>
+    </div>
+  );
+};
+
+export default ProductsTable;
diff --git a/frontend/src/pages/admin-dashboard/body/list-of-user/ListOfUser.jsx b/frontend/src/pages/admin-dashboard/body/list-of-user/ListOfUser.jsx
@@ -28,8 +28,8 @@ const ListOfUser = () => {
           <FiMaximize onClick={handleToggle} />
         )}
       </div>
-      <div className="hr-line"></div>
-      {users && <UserTable data={users} isOpen={isOpen} />}
+      {/* <div className="hr-line"></div> */}
+      <article>{users && <UserTable k data={users} isOpen={isOpen} />}</article>
     </div>
   );
 };