diff --git a/package-lock.json b/package-lock.json index 3c91622..7074d07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4192,6 +4192,102 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.16.5", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz", @@ -5357,6 +5453,13 @@ "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, + "node_modules/@yr/monotone-cubic-spline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz", + "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==", + "license": "MIT", + "peer": true + }, "node_modules/abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -5580,6 +5683,22 @@ "node": ">= 8" } }, + "node_modules/apexcharts": { + "version": "3.51.0", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.51.0.tgz", + "integrity": "sha512-WpCdVdGiJjf9SAyEeg2rl3q5OqCcNqiEmH0+filMraUiH6Vqyn5GFeMMyH0pon44xjNr1G0xzIRERKRmsGEuRA==", + "license": "MIT", + "peer": true, + "dependencies": { + "@yr/monotone-cubic-spline": "^1.0.3", + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -5594,9 +5713,10 @@ } }, "node_modules/aria-query": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.2.1.tgz", - "integrity": "sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "license": "Apache-2.0", "dependencies": { "dequal": "^2.0.3" } @@ -16636,6 +16756,105 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "node_modules/svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "license": "MIT", + "peer": true, + "dependencies": { + "svg.js": "^2.0.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==", + "license": "MIT", + "peer": true, + "dependencies": { + "svg.js": ">=2.3.x" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==", + "license": "MIT", + "peer": true, + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==", + "license": "MIT", + "peer": true + }, + "node_modules/svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "license": "MIT", + "peer": true, + "dependencies": { + "svg.js": "^2.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "license": "MIT", + "peer": true, + "dependencies": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.resize.js/node_modules/svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "svg.js": "^2.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "license": "MIT", + "peer": true, + "dependencies": { + "svg.js": "^2.6.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -17111,6 +17330,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/src/App.jsx b/src/App.jsx index f4422c6..1d2a655 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,76 +1,98 @@ -import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' -import { useDispatch, useSelector } from 'react-redux'; -import Home from './pages/Home' -import ViewProduct from './pages/ViewProduct' -import Navbar from './pages/Navbar' -import AuthenticationPage from './pages/AuthenticationPage' -import SellerDashboard from './pages/seller/SellerDashboard' -import CustomerSearch from './pages/customer/pages/CustomerSearch' -import Products from './components/Products'; -import { useEffect } from 'react'; -import { getProducts } from './redux/userHandle'; -import CustomerOrders from './pages/customer/pages/CustomerOrders'; -import CheckoutSteps from './pages/customer/pages/CheckoutSteps'; -import Profile from './pages/customer/pages/Profile'; -import Logout from './pages/Logout'; -import { isTokenValid } from './redux/userSlice'; -import CheckoutAftermath from './pages/customer/pages/CheckoutAftermath'; -import ViewOrder from './pages/customer/pages/ViewOrder'; +import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; +import Home from "./pages/Home"; +import ViewProduct from "./pages/ViewProduct"; +import Navbar from "./pages/Navbar"; +import AuthenticationPage from "./pages/AuthenticationPage"; +import SellerDashboard from "./pages/seller/SellerDashboard"; +import CustomerSearch from "./pages/customer/pages/CustomerSearch"; +import Products from "./components/Products"; +import { useEffect } from "react"; +import { getProducts } from "./redux/userHandle"; +import CustomerOrders from "./pages/customer/pages/CustomerOrders"; +import CheckoutSteps from "./pages/customer/pages/CheckoutSteps"; +import Profile from "./pages/customer/pages/Profile"; +import Logout from "./pages/Logout"; +import { isTokenValid } from "./redux/userSlice"; +import CheckoutAftermath from "./pages/customer/pages/CheckoutAftermath"; +import ViewOrder from "./pages/customer/pages/ViewOrder"; const App = () => { + const dispatch = useDispatch(); - const dispatch = useDispatch() - - const { isLoggedIn, currentToken, currentRole, productData } = useSelector(state => state.user); - - useEffect(() => - { - + const { isLoggedIn, currentToken, currentRole, productData } = useSelector( + (state) => state.user + ); + useEffect(() => { dispatch(isTokenValid()); - }, [dispatch]); + }, [dispatch]); return ( - {(!isLoggedIn && currentRole === null) && + {!isLoggedIn && currentRole === null && ( <> } /> } /> - } /> + } /> - } /> + } + /> } /> } /> - } /> - - } /> - } /> - } /> - } /> + } + /> + + } + /> + } + /> + } + /> + } + /> - } + )} - {(isLoggedIn && currentRole === "Customer") && + {isLoggedIn && currentRole === "Customer" && ( <> } /> } /> - } /> + } /> - } /> + } + /> } /> } /> - } /> + } + /> } /> } /> @@ -82,14 +104,11 @@ const App = () => { } /> - } - - {(isLoggedIn && currentRole === "Seller") && ( - - )} + )} - - ) -} + {isLoggedIn && currentRole === "Seller" && } + + ); +}; -export default App \ No newline at end of file +export default App; diff --git a/src/pages/Navbar.jsx b/src/pages/Navbar.jsx index e92613c..61e7b87 100644 --- a/src/pages/Navbar.jsx +++ b/src/pages/Navbar.jsx @@ -50,13 +50,13 @@ const Navbar = () => { const [isCartOpen, setIsCartOpen] = React.useState(false); // Cart - const handleOpen Cart = () => { + const handleOpenCart = () => { // fix handleOpenCart Error setIsCartOpen(true); }; - const handleOpenCart = () => { - setIsCartOpen(false); - }; + // const handleOpenCart = () => { + // setIsCartOpen(false); + // }; // Navigation Menu const handleOpenNavMenu = (event) => { diff --git a/src/pages/Slide.jsx b/src/pages/Slide.jsx index 500ce9e..86d7407 100644 --- a/src/pages/Slide.jsx +++ b/src/pages/Slide.jsx @@ -1,6 +1,6 @@ import { Divider, Box, Typography, Button, styled, Container } from '@mui/material'; -import { Link, useNavigate } from 'react-router'; +import { Link, useNavigate } from 'react-router-dom'; // fix imported Error import Carousel from 'react-multi-carousel'; import "react-multi-carousel/lib/styles.css"; diff --git a/src/pages/customer/pages/CustomerSearch.jsx b/src/pages/customer/pages/CustomerSearch.jsx index 9555be5..476cc0e 100644 --- a/src/pages/customer/pages/CustomerSearch.jsx +++ b/src/pages/customer/pages/CustomerSearch.jsx @@ -1,65 +1,55 @@ -import React, { useState } from 'react'; -import TextField from '@mui/material/TextField'; -import { styled } from '@mui/system'; -import Products from '../../../components/Products'; -import { useDispatch, useSelector } from 'react-redux'; -import { getSearchedProducts } from '../../../redux/userHandle'; +import React, { useState } from "react"; +import TextField from "@mui/material/TextField"; +import { styled } from "@mui/system"; +import Products from "../../../components/Products"; +import { useDispatch, useSelector } from "react-redux"; +import { getSearchedProducts } from "../../../redux/userHandle"; const CustomerSearch = ({ mode }) => { - - const dispatch = useDispatch(); - - const [searchTerm, setSearchTerm] = useState("") - - const { filteredProducts } = useSelector(state => state.user); - - const handleSearch = () => { - preventDefault() - - dispatch(getSearchedProducts("searchProduct", searchTerm)); - }; - - return ( -
- { - mode === "Mobile" ? - - <> - - setSearchTerm(e.target.value)} - /> - - { - searchTerm && - } - - : - <> - { - filteredProducts && - } - - } - -
- ); + const dispatch = useDispatch(); + + const [searchTerm, setSearchTerm] = useState(""); + + const { filteredProducts } = useSelector((state) => state.user); + + const handleSearch = (e) => { + e.preventDefault(); + + dispatch(getSearchedProducts("searchProduct", searchTerm)); + }; + + return ( +
+ {mode === "Mobile" ? ( + <> + + setSearchTerm(e.target.value)} + /> + + {searchTerm && } + + ) : ( + <>{filteredProducts && } + )} +
+ ); }; -const SearchContainer = styled('form')({ - display: 'flex', - justifyContent: 'center', - padding: '16px', +const SearchContainer = styled("form")({ + display: "flex", + justifyContent: "center", + padding: "16px", }); export default CustomerSearch; diff --git a/src/pages/seller/components/AccountMenu.jsx b/src/pages/seller/components/AccountMenu.jsx index d382f97..66a7708 100644 --- a/src/pages/seller/components/AccountMenu.jsx +++ b/src/pages/seller/components/AccountMenu.jsx @@ -5,7 +5,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { useSelector } from 'react-redux'; const AccountMenu = () => { - const [anchorEl, setAnchorEl] = useEffect(null); + const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); diff --git a/src/pages/seller/components/SideBar.jsx b/src/pages/seller/components/SideBar.jsx index a1b7973..4dc8e4c 100644 --- a/src/pages/seller/components/SideBar.jsx +++ b/src/pages/seller/components/SideBar.jsx @@ -1,100 +1,170 @@ -import * as React from 'react'; -import { Divider, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'; -import { Link, useLocation } from 'react-router-dom'; +import * as React from "react"; +import { + Divider, + ListItemButton, + ListItemIcon, + ListItemText, +} from "@mui/material"; +import { Link, useLocation } from "react-router-dom"; -import WidgetsIcon from '@mui/icons-material/Widgets'; -import LogoutIcon from '@mui/icons-material/Logout'; -import AccountCircleIcon from '@mui/icons-material/AccountCircle'; -import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; -import PendingActionsIcon from '@mui/icons-material/PendingActions'; -import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'; -import { useSelector } from 'react-redux'; +import WidgetsIcon from "@mui/icons-material/Widgets"; +import LogoutIcon from "@mui/icons-material/Logout"; +import AccountCircleIcon from "@mui/icons-material/AccountCircle"; +import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; +import PendingActionsIcon from "@mui/icons-material/PendingActions"; +import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings"; +import { useSelector } from "react-redux"; const SideBar = () => { + const location = useLocation(); + const { currentRole } = useSelector((state) => state.user); - + return ( + <> + + + + + + + - const { currentRole } = useSelector(state => state.user); - - return ( - <> - - - - - - - - - - - - - - - - - - - - - { - currentRole === "Shopcart" && - - - - - - - } - - - - - - - - - - - - - - - - - - - ); -} + + + + + + + + + + + + + {currentRole === "Shopcart" && ( + + + + + + + )} + + + + + + + + + + + + + + + + + + ); +}; export default SideBar; const styles = { - normalStyle: { - color: "inherit", - backgroundColor: "inherit" - }, - currentStyle: { - color: "#4d1c9c", - backgroundColor: "#ebebeb" - }, -} \ No newline at end of file + normalStyle: { + color: "inherit", + backgroundColor: "inherit", + }, + currentStyle: { + color: "#4d1c9c", + backgroundColor: "#ebebeb", + }, +}; diff --git a/src/redux/store.js b/src/redux/store.js index 49d15c7..b54e263 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -1,10 +1,10 @@ -import { configureStore } from '@reduxjs/toolkit'; -import { userReducer } from './userSlice'; +import { configureStore } from "@reduxjs/toolkit"; +import { userReducer } from "./userSlice"; const store = configureStore({ - reducer={ - user: userReducer, - } + reducer: { // fix reducer configuration error + user: userReducer, + }, }); -export default store; \ No newline at end of file +export default store; diff --git a/src/redux/userHandle.js b/src/redux/userHandle.js index df46efb..1510a6b 100644 --- a/src/redux/userHandle.js +++ b/src/redux/userHandle.js @@ -49,7 +49,7 @@ export const addStuff = (address, fields) => async (dispatch) => { try { const result = await axios.post(`${process.env.REACT_APP_BASE_URL}/${address}`, fields, { - headers: { 'Content-Type': 'application/json' },--- + headers: { 'Content-Type': 'application/json' }, }); if (result.data.message) { diff --git a/src/utils/helperFunctions.js b/src/utils/helperFunctions.js index 981af27..bac70d1 100644 --- a/src/utils/helperFunctions.js +++ b/src/utils/helperFunctions.js @@ -1,4 +1,8 @@ -export const timeAgo = (date) => { + + + + +export const timeAgo = ({ date, reviewDate }) => { const options = { year: 'numeric', month: 'long', day: 'numeric' }; const today = new Date();