14 | {/* All Children pass from here */}
15 | {children}
16 |
17 |
15 |
13 |
16 | );
17 | };
18 |
19 | const Orders = (props) => {
20 | const [data, dispatch] = useReducer(orderReducer, orderState);
21 | return (
22 |
13 |
16 | );
17 | };
18 |
19 | const Categories = (props) => {
20 | const [data, dispatch] = useReducer(categoryReducer, categoryState);
21 | return (
22 |
13 |
16 | );
17 | };
18 |
19 | const Products = (props) => {
20 | /* To use useReducer make sure that reducer is the first arg */
21 | const [data, dispatch] = useReducer(productReducer, productState);
22 |
23 | return (
24 |
7 |
8 |
22 |
23 |
24 | 404 not found
25 |
26 |
27 | );
28 | };
29 |
30 | const PageNotFound = (props) => {
31 | return
7 |
8 |
20 |
21 |
26 |
27 |
23 |
31 |
32 |
26 |
30 |
7 |
35 |
8 |
9 |
21 |
22 |
27 |
33 |
34 |
13 |
14 | Your Order in process. Wait 2 days to deliver.
15 |
16 | dispatch({ type: "orderSuccess", payload: false })}
18 | className="hover:bg-gray-400 hover:text-gray-800 p-2 rounded-full cursor-pointer"
19 | >
20 |
32 |
33 |
34 |
11 |
38 |
12 | {/* It's open the add product modal */}
13 |
16 | dispatch({ type: "addProductModal", payload: true })
17 | }
18 | className="rounded-full cursor-pointer p-2 bg-gray-800 flex items-center text-gray-100 text-sm font-semibold uppercase"
19 | >
20 |
32 | Add Product
33 |
34 |
35 |
12 |
39 |
13 | {/* It's open the add category modal */}
14 |
36 |
17 | dispatch({ type: "addCategoryModal", payload: true })
18 | }
19 | className="cursor-pointer rounded-full p-2 flex items-center justify-center text-gray-100 text-sm font-semibold uppercase"
20 | >
21 |
33 | Add Category
34 |
35 |
12 |
44 |
13 | history.push("/")}
16 | >
17 | Shop
18 |
19 | history.push(`/products/category/${categoryId}`)}
22 | >
23 | {category}
24 |
25 | {product}
26 |
27 |
28 |
42 |
43 | {text}
7 | );
8 |
9 | export const reviewSubmitHanlder = (fData, setFdata, fetchData) => {
10 | if (!fData.rating || !fData.review) {
11 | setFdata({ ...fData, error: "Rating and review must be required" });
12 | } else if (!isAuthenticate()) {
13 | setFdata({ ...fData, error: "You must need login to review" });
14 | } else {
15 | addReview(fData, setFdata, fetchData);
16 | }
17 | };
18 |
19 | export const deleteReview = async (
20 | reviewId,
21 | productId,
22 | fetchData,
23 | setFdata
24 | ) => {
25 | try {
26 | let responseData = await postDeleteReview({
27 | rId: reviewId,
28 | pId: productId,
29 | });
30 | if (responseData.success) {
31 | fetchData();
32 | setFdata({ success: responseData.success });
33 | } else if (responseData.error) {
34 | fetchData();
35 | }
36 | } catch (error) {
37 | console.log(error);
38 | }
39 | };
40 |
41 | export const addReview = async (fData, setFdata, fetchData) => {
42 | let formData = {
43 | rating: fData.rating,
44 | review: fData.review,
45 | pId: fData.pId,
46 | uId: JSON.parse(localStorage.getItem("jwt")).user._id,
47 | };
48 | try {
49 | let responseData = await postAddReview(formData);
50 | if (responseData.success) {
51 | setFdata({
52 | ...fData,
53 | success: responseData.success,
54 | review: "",
55 | rating: "",
56 | });
57 | fetchData();
58 | } else if (responseData.error) {
59 | setFdata({ ...fData, error: responseData.error, review: "", rating: "" });
60 | fetchData();
61 | }
62 | } catch (error) {
63 | console.log(error);
64 | }
65 | };
66 |
--------------------------------------------------------------------------------
/client/src/components/admin/dashboardAdmin/Action.js:
--------------------------------------------------------------------------------
1 | import {
2 | DashboardData,
3 | postUploadImage,
4 | getSliderImages,
5 | postDeleteImage,
6 | } from "./FetchApi";
7 | import { getAllOrder } from "../orders/FetchApi.js";
8 |
9 | export const GetAllData = async (dispatch) => {
10 | let responseData = await DashboardData();
11 | if (responseData) {
12 | dispatch({ type: "totalData", payload: responseData });
13 | }
14 | };
15 |
16 | export const todayAllOrders = async (dispatch) => {
17 | let responseData = await getAllOrder();
18 | if (responseData) {
19 | dispatch({ type: "totalOrders", payload: responseData });
20 | }
21 | };
22 |
23 | export const sliderImages = async (dispatch) => {
24 | try {
25 | let responseData = await getSliderImages();
26 | if (responseData && responseData.Images) {
27 | dispatch({ type: "sliderImages", payload: responseData.Images });
28 | }
29 | } catch (error) {
30 | console.log(error);
31 | }
32 | };
33 |
34 | export const deleteImage = async (id, dispatch) => {
35 | dispatch({ type: "imageUpload", payload: true });
36 | try {
37 | let responseData = await postDeleteImage(id);
38 | if (responseData && responseData.success) {
39 | setTimeout(function () {
40 | sliderImages(dispatch);
41 | dispatch({ type: "imageUpload", payload: false });
42 | }, 1000);
43 | }
44 | } catch (error) {
45 | console.log(error);
46 | }
47 | };
48 |
49 | export const uploadImage = async (image, dispatch) => {
50 | dispatch({ type: "imageUpload", payload: true });
51 | let formData = new FormData();
52 | formData.append("image", image);
53 | console.log(formData.get("image"));
54 | try {
55 | let responseData = await postUploadImage(formData);
56 | if (responseData && responseData.success) {
57 | setTimeout(function () {
58 | dispatch({ type: "imageUpload", payload: false });
59 | sliderImages(dispatch);
60 | }, 1000);
61 | }
62 | } catch (error) {
63 | console.log(error);
64 | }
65 | };
66 |
--------------------------------------------------------------------------------
/client/src/components/shop/productDetails/style.css:
--------------------------------------------------------------------------------
1 | @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
2 |
3 | fieldset,
4 | label {
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | /****** Style Star Rating Widget *****/
10 |
11 | .rating {
12 | border: none;
13 | float: left;
14 | }
15 |
16 | .rating > input {
17 | display: none;
18 | }
19 |
20 | .rating > label:before {
21 | margin: 5px;
22 | font-size: 2.25em;
23 | font-family: FontAwesome;
24 | display: inline-block;
25 | content: "\f005";
26 | }
27 |
28 | /* Half Rating System */
29 |
30 | /*.rating > .half:before {
31 | content: "\f089";
32 | position: absolute;
33 | }
34 | */
35 |
36 | /*
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | */
47 |
48 | .rating > label {
49 | color: #ddd;
50 | float: right;
51 | }
52 |
53 | /***** CSS Magic to Highlight Stars on Hover *****/
54 |
55 | .rating>input:checked~label,
56 | /* show gold star when clicked */
57 | .rating:not(:checked)>label:hover,
58 | /* hover current star */
59 | .rating:not(:checked)>label:hover~label {
60 | color: #b7791f;
61 | }
62 |
63 | /* hover previous stars in list */
64 |
65 | .rating>input:checked+label:hover,
66 | /* hover current star when changing rating */
67 | .rating>input:checked~label:hover,
68 | .rating>label:hover~input:checked~label,
69 | /* lighten current selection */
70 | .rating>input:checked~label:hover~label {
71 | color: #b7791f;
72 | }
73 |
--------------------------------------------------------------------------------
/client/src/components/shop/productDetails/Mixins.js:
--------------------------------------------------------------------------------
1 | export const cartList = () => {
2 | let carts = localStorage.getItem("cart")
3 | ? JSON.parse(localStorage.getItem("cart"))
4 | : null;
5 | let list = [];
6 | if (carts !== null) {
7 | for (let cart of carts) {
8 | list.push(cart.id);
9 | }
10 | return list;
11 | } else {
12 | return (list = null);
13 | }
14 | };
15 |
16 | export const updateQuantity = (
17 | type,
18 | totalQuantitiy,
19 | quantitiy,
20 | setQuantitiy,
21 | setAlertq
22 | ) => {
23 | if (type === "increase") {
24 | if (quantitiy === totalQuantitiy) {
25 | setAlertq(true);
26 | } else {
27 | setQuantitiy(quantitiy + 1);
28 | }
29 | } else if (type === "decrease") {
30 | if (quantitiy === 1) {
31 | setQuantitiy(1);
32 | setAlertq(false);
33 | } else {
34 | setQuantitiy(quantitiy - 1);
35 | }
36 | }
37 | };
38 |
39 | export const slideImage = (type, active, count, setCount, pImages) => {
40 | if (active === count) {
41 | return true;
42 | }
43 | if (type === "increase") {
44 | if (count === pImages.length - 1) {
45 | setCount(0);
46 | } else if (count < pImages.length) {
47 | setCount(count + 1);
48 | }
49 | }
50 | };
51 |
52 | export const inCart = (id) => {
53 | if (localStorage.getItem("cart")) {
54 | let cartProducts = JSON.parse(localStorage.getItem("cart"));
55 | for (let product of cartProducts) {
56 | if (product.id === id) {
57 | return true;
58 | }
59 | }
60 | }
61 | return false;
62 | };
63 |
64 | export const addToCart = (
65 | id,
66 | quantitiy,
67 | price,
68 | layoutDispatch,
69 | setQuantitiy,
70 | setAlertq,
71 | fetchData,
72 | totalCost
73 | ) => {
74 | let isObj = false;
75 | let cart = localStorage.getItem("cart")
76 | ? JSON.parse(localStorage.getItem("cart"))
77 | : [];
78 | if (cart.length > 0) {
79 | cart.forEach((item) => {
80 | if (item.id === id) {
81 | isObj = true;
82 | }
83 | });
84 | if (!isObj) {
85 | cart.push({ id, quantitiy, price });
86 | localStorage.setItem("cart", JSON.stringify(cart));
87 | }
88 | } else {
89 | cart.push({ id, quantitiy, price });
90 | localStorage.setItem("cart", JSON.stringify(cart));
91 | }
92 | layoutDispatch({ type: "inCart", payload: cartList() });
93 | layoutDispatch({ type: "cartTotalCost", payload: totalCost() });
94 | setQuantitiy(1);
95 | setAlertq(false);
96 | fetchData();
97 | };
98 |
--------------------------------------------------------------------------------
/server/controller/customize.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const categoryModel = require("../models/categories");
3 | const productModel = require("../models/products");
4 | const orderModel = require("../models/orders");
5 | const userModel = require("../models/users");
6 | const customizeModel = require("../models/customize");
7 |
8 | class Customize {
9 | async getImages(req, res) {
10 | try {
11 | let Images = await customizeModel.find({});
12 | if (Images) {
13 | return res.json({ Images });
14 | }
15 | } catch (err) {
16 | console.log(err);
17 | }
18 | }
19 |
20 | async uploadSlideImage(req, res) {
21 | let image = req.file.filename;
22 | if (!image) {
23 | return res.json({ error: "All field required" });
24 | }
25 | try {
26 | let newCustomzie = new customizeModel({
27 | slideImage: image,
28 | });
29 | let save = await newCustomzie.save();
30 | if (save) {
31 | return res.json({ success: "Image upload successfully" });
32 | }
33 | } catch (err) {
34 | console.log(err);
35 | }
36 | }
37 |
38 | async deleteSlideImage(req, res) {
39 | let { id } = req.body;
40 | if (!id) {
41 | return res.json({ error: "All field required" });
42 | } else {
43 | try {
44 | let deletedSlideImage = await customizeModel.findById(id);
45 | const filePath = `../server/public/uploads/customize/${deletedSlideImage.slideImage}`;
46 |
47 | let deleteImage = await customizeModel.findByIdAndDelete(id);
48 | if (deleteImage) {
49 | // Delete Image from uploads -> customizes folder
50 | fs.unlink(filePath, (err) => {
51 | if (err) {
52 | console.log(err);
53 | }
54 | return res.json({ success: "Image deleted successfully" });
55 | });
56 | }
57 | } catch (err) {
58 | console.log(err);
59 | }
60 | }
61 | }
62 |
63 | async getAllData(req, res) {
64 | try {
65 | let Categories = await categoryModel.find({}).count();
66 | let Products = await productModel.find({}).count();
67 | let Orders = await orderModel.find({}).count();
68 | let Users = await userModel.find({}).count();
69 | if (Categories && Products && Orders) {
70 | return res.json({ Categories, Products, Orders, Users });
71 | }
72 | } catch (err) {
73 | console.log(err);
74 | }
75 | }
76 | }
77 |
78 | const customizeController = new Customize();
79 | module.exports = customizeController;
80 |
--------------------------------------------------------------------------------
/client/src/components/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Home,
4 | WishList,
5 | ProtectedRoute,
6 | AdminProtectedRoute,
7 | CartProtectedRoute,
8 | PageNotFound,
9 | ProductDetails,
10 | ProductByCategory,
11 | CheckoutPage,
12 | } from "./shop";
13 | import { DashboardAdmin, Categories, Products, Orders } from "./admin";
14 | import { UserProfile, UserOrders, SettingUser } from "./shop/dashboardUser";
15 |
16 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
17 |
18 | /* Routing All page will be here */
19 | const Routes = (props) => {
20 | return (
21 | 10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /client/src/components/shop/home/Slider.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useEffect, useContext, useState } from "react"; 2 | import OrderSuccessMessage from "./OrderSuccessMessage"; 3 | import { HomeContext } from "./"; 4 | import { sliderImages } from "../../admin/dashboardAdmin/Action"; 5 | import { prevSlide, nextSlide } from "./Mixins"; 6 | 7 | const apiURL = process.env.REACT_APP_API_URL; 8 | 9 | const Slider = (props) => { 10 | const { data, dispatch } = useContext(HomeContext); 11 | const [slide, setSlide] = useState(0); 12 | 13 | useEffect(() => { 14 | sliderImages(dispatch); 15 | // eslint-disable-next-line react-hooks/exhaustive-deps 16 | }, []); 17 | 18 | return ( 19 |
21 | {data.sliderImages.length > 0 ? (
22 | 
27 | ) : (
28 | ""
29 | )}
30 |
31 | {data?.sliderImages?.length > 0 ? (
32 | <>
33 |
50 |
67 |
79 |
27 | ) : (
28 | ""
29 | )}
30 |
31 | {data?.sliderImages?.length > 0 ? (
32 | <>
33 |
50 |
67 |
68 |
73 | Shop Now
74 |
75 |
76 |
77 | ) : null}
78 | loginSignupModalToggle()}
32 | className={` ${
33 | data.loginSignupModal ? "" : "hidden"
34 | } fixed top-0 z-40 w-full h-screen bg-black opacity-50 cursor-pointer`}
35 | >
36 | {/* Signup Login Component Render */}
37 |
43 | {login ?
76 |
45 |
46 | or
47 |
48 |
49 | changeLoginSignup()}
51 | style={{ color: "#303031", border: "1px solid #303031" }}
52 | className="px-4 py-2 font-medium text-center cursor-pointer"
53 | >
54 | {loginValue}
55 |
56 | {/* Modal Close Button */}
57 |
58 |
74 |
75 |
19 |
39 | dispatch({ type: "menu", payload: true })}
21 | className={`${
22 | data.menu ? "border-b-2 border-yellow-700" : ""
23 | } px-4 py-3 cursor-pointer`}
24 | >
25 | Description
26 |
27 | dispatch({ type: "menu", payload: false })}
29 | className={`${
30 | !data.menu ? "border-b-2 border-yellow-700" : ""
31 | } px-4 py-3 relative flex cursor-pointer`}
32 | >
33 | Reviews
34 |
35 | {layoutData.singleProductDetail.pRatingsReviews.length}
36 |
37 |
38 |
51 | You need to login in for review
52 |
53 | )}
54 | {singleProduct.pDescription}
77 | ) : (
78 |
82 |
90 |
83 | Category :
84 |
85 | {" "}
86 | {singleProduct.pCategory ? singleProduct.pCategory.cName : ""}
87 |
88 |
89 |
15 |
93 |
19 |
33 |
40 |
34 | Hello,
35 |
36 | {data.userDetails ? data.userDetails.name : ""}
37 |
38 |
39 |
41 |
52 |
63 |
70 |
81 |
92 | history.push("/user/orders")}
43 | className={`${
44 | location.pathname === "/user/orders"
45 | ? "border-r-4 border-yellow-700 bg-gray-200"
46 | : ""
47 | } px-4 py-4 hover:bg-gray-200 cursor-pointer`}
48 | >
49 | My Orders
50 |
51 | 52 |
history.push("/user/profile")}
54 | className={`${
55 | location.pathname === "/user/profile"
56 | ? "border-r-4 border-yellow-700 bg-gray-200"
57 | : ""
58 | } px-4 py-4 hover:bg-gray-200 cursor-pointer`}
59 | >
60 | My Accounts
61 |
62 | 63 |
history.push("/wish-list")}
65 | className={` px-4 py-4 hover:bg-gray-200 cursor-pointer`}
66 | >
67 | My Wishlist
68 |
69 | 70 |
history.push("/user/setting")}
72 | className={`${
73 | location.pathname === "/user/setting"
74 | ? "border-r-4 border-yellow-700 bg-gray-200"
75 | : ""
76 | } px-4 py-4 hover:bg-gray-200 cursor-pointer`}
77 | >
78 | Setting
79 |
80 | 81 |
logout()}
83 | className={`${
84 | location.pathname === "/admin/dashboard/categories"
85 | ? "border-r-4 border-yellow-700 bg-gray-200"
86 | : ""
87 | } px-4 py-4 hover:bg-gray-200 cursor-pointer`}
88 | >
89 | Logout
90 |
91 |
11 |
102 |
13 | dispatch({
14 | type: "categoryListDropdown",
15 | payload: !data.categoryListDropdown,
16 | })
17 | }
18 | className={`flex items-center space-x-1 cursor-pointer ${
19 | data.categoryListDropdown ? "text-yellow-700" : ""
20 | }`}
21 | >
22 |
23 | Categories
24 |
25 |
39 |
40 |
41 |
101 |
43 | dispatch({
44 | type: "filterListDropdown",
45 | payload: !data.filterListDropdown,
46 | })
47 | }
48 | className={`flex items-center space-x-1 cursor-pointer ${
49 | data.filterListDropdown ? "text-yellow-700" : ""
50 | }`}
51 | >
52 | Filter
53 |
54 |
68 |
69 |
70 | /
71 |
73 | dispatch({
74 | type: "searchDropdown",
75 | payload: !data.searchDropdown,
76 | })
77 | }
78 | className={`flex items-center space-x-1 cursor-pointer ${
79 | data.searchDropdown ? "text-yellow-700" : ""
80 | }`}
81 | >
82 | Search
83 |
84 |
98 |
99 |
100 | {msg}
;
18 |
19 | const formSubmit = async () => {
20 | setData({ ...data, loading: true });
21 | try {
22 | let responseData = await loginReq({
23 | email: data.email,
24 | password: data.password,
25 | });
26 | if (responseData.error) {
27 | setData({
28 | ...data,
29 | loading: false,
30 | error: responseData.error,
31 | password: "",
32 | });
33 | } else if (responseData.token) {
34 | setData({ email: "", password: "", loading: false, error: false });
35 | localStorage.setItem("jwt", JSON.stringify(responseData));
36 | window.location.href = "/";
37 | }
38 | } catch (error) {
39 | console.log(error);
40 | }
41 | };
42 |
43 | return (
44 | Login
46 | {layoutData.loginSignupError ? (
47 |
48 | You need to login for checkout. Haven't accont? Create new one.
49 |
50 | ) : (
51 | ""
52 | )}
53 |
114 |
37 |
51 |
52 | );
53 | }
54 | return (
55 |
57 |
113 |
58 |
62 |
112 |
59 | Personal Information
60 |
61 | 62 |
63 | {fData.success ? (
64 |
111 |
65 | {fData.success}
66 |
67 | ) : (
68 | ""
69 | )}
70 |
71 |
72 | setFdata({ ...fData, name: e.target.value })}
74 | value={fData.name}
75 | type="text"
76 | id="name"
77 | className="border px-4 py-2 w-full focus:outline-none"
78 | />
79 |
80 |
81 |
82 |
89 |
90 | You can't change your email
91 |
92 |
93 |
94 |
95 | setFdata({ ...fData, phone: e.target.value })}
97 | value={fData.phone}
98 | type="number"
99 | id="number"
100 | className="border px-4 py-2 w-full focus:outline-none"
101 | />
102 |
103 | handleSubmit()}
105 | style={{ background: "#303031" }}
106 | className="w-full text-center cursor-pointer px-4 py-2 text-gray-100"
107 | >
108 | Update Information
109 |
110 | dispatch({ type: "updateOrderModalClose" })}
46 | className={`${
47 | data.updateOrderModal.modal ? "" : "hidden"
48 | } fixed top-0 left-0 z-30 w-full h-full bg-black opacity-50`}
49 | />
50 | {/* End Black Overlay */}
51 |
52 | {/* Modal Start */}
53 |
47 |
107 | );
108 | };
109 |
110 | const SingleWishProduct = (props) => {
111 | return (
112 |
113 |
114 |
118 |
119 | );
120 | };
121 |
122 | export default SingleWishProduct;
123 |
--------------------------------------------------------------------------------
/client/src/components/admin/orders/OrderMenu.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState, useContext } from "react";
2 | import { OrderContext } from "./index";
3 | import UpdateOrderModal from "./UpdateOrderModal";
4 | import SearchFilter from "./SearchFilter";
5 | import { filterOrder } from "./Actions";
6 |
7 | const OrderMenu = (props) => {
8 | const { data, dispatch } = useContext(OrderContext);
9 | const [dropdown, setDropdown] = useState(false);
10 | return (
11 |
12 |
121 | );
122 | };
123 |
124 | export default OrderMenu;
125 |
--------------------------------------------------------------------------------
/client/src/components/admin/categories/EditCategoryModal.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useContext, useState, useEffect } from "react";
2 | import { CategoryContext } from "./index";
3 | import { editCategory, getAllCategory } from "./FetchApi";
4 |
5 | const EditCategoryModal = (props) => {
6 | const { data, dispatch } = useContext(CategoryContext);
7 |
8 | const [des, setDes] = useState("");
9 | const [status, setStatus] = useState("");
10 | const [cId, setCid] = useState("");
11 |
12 | useEffect(() => {
13 | setDes(data.editCategoryModal.des);
14 | setStatus(data.editCategoryModal.status);
15 | setCid(data.editCategoryModal.cId);
16 |
17 | // eslint-disable-next-line react-hooks/exhaustive-deps
18 | }, [data.editCategoryModal.modal]);
19 |
20 | const fetchData = async () => {
21 | let responseData = await getAllCategory();
22 | if (responseData.Categories) {
23 | dispatch({
24 | type: "fetchCategoryAndChangeState",
25 | payload: responseData.Categories,
26 | });
27 | }
28 | };
29 |
30 | const submitForm = async () => {
31 | dispatch({ type: "loading", payload: true });
32 | let edit = await editCategory(cId, des, status);
33 | if (edit.error) {
34 | console.log(edit.error);
35 | dispatch({ type: "loading", payload: false });
36 | } else if (edit.success) {
37 | console.log(edit.success);
38 | dispatch({ type: "editCategoryModalClose" });
39 | setTimeout(() => {
40 | fetchData();
41 | dispatch({ type: "loading", payload: false });
42 | }, 1000);
43 | }
44 | };
45 |
46 | return (
47 |
48 | {/* Black Overlay */}
49 |
58 |
122 |
123 | );
124 | };
125 |
126 | export default UpdateOrderModal;
127 |
--------------------------------------------------------------------------------
/client/src/components/shop/wishlist/SingleWishProduct.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useEffect, useState } from "react";
2 | import { useHistory } from "react-router-dom";
3 | import { wishListProducts } from "./FetchApi";
4 | const apiURL = process.env.REACT_APP_API_URL;
5 |
6 | const Product = () => {
7 | const history = useHistory();
8 | const [products, setProducts] = useState([]);
9 | const [loading, setLoading] = useState(false);
10 |
11 | useEffect(() => {
12 | fetchData();
13 | }, []);
14 |
15 | const fetchData = async () => {
16 | setLoading(true);
17 | let responseData = await wishListProducts();
18 | setTimeout(() => {
19 | if (responseData && responseData.Products) {
20 | setProducts(responseData.Products);
21 | setLoading(false);
22 | }
23 | }, 50);
24 | };
25 |
26 | const removeFromWishList = (id) => {
27 | let list = localStorage.getItem("wishList")
28 | ? JSON.parse(localStorage.getItem("wishList"))
29 | : [];
30 | if (list.length > 0) {
31 | if (list.includes(id) === true) {
32 | list.splice(list.indexOf(id), 1);
33 | localStorage.setItem("wishList", JSON.stringify(list));
34 | fetchData();
35 | }
36 | }
37 | };
38 | if (loading) {
39 | return (
40 |
59 |
121 |
60 |
61 | Update Order
62 |
63 | {/* Close Modal */}
64 | dispatch({ type: "updateOrderModalClose" })}
67 | className="cursor-pointer text-gray-100 py-2 px-2 rounded-full"
68 | >
69 |
83 |
84 |
85 |
86 |
87 |
110 |
111 |
112 |
119 |
120 |
41 | No product found in wishList
42 |
43 | );
44 | }
45 | return (
46 |
48 | {products.length > 0 ? (
49 | products.map((product, index) => {
50 | return (
51 |
106 |
55 |
100 | );
101 | })
102 | ) : (
103 |
56 | ![]()
history.push(`/products/${product._id}`)}
58 | className="cursor-pointer md:h-20 md:w-20 object-cover object-center"
59 | src={`${apiURL}/uploads/products/${product.pImages[0]}`}
60 | alt="wishListproduct"
61 | />
62 |
66 |
63 | {product.pName}
64 |
65 |
67 |
84 |
68 | ${product.pPrice}.00
69 |
70 | {product.pQuantity > 0 ? (
71 | In Stock
72 | ) : (
73 | Out Stock
74 | )}
75 |
76 | history.push(`/products/${product._id}`)}
79 | className="inline-block px-4 py-2 text-white text-xs md:text-base text-center cursor-pointer hover:opacity-75"
80 | >
81 | View
82 |
83 |
85 |
98 |
99 | No product found in wishList
104 | )}
105 | Wishlist
115 | {/* Product List */}
116 |
13 |
120 |
14 | {/* It's open the add order modal */}
15 |
117 | {/*
19 |
113 | setDropdown(!dropdown)}
21 | className="flex items-center cursor-pointer rounded-full overflow-hidden p-2 justify-center"
22 | >
23 |
31 | Filter
32 |
33 |
39 |
41 | filterOrder("All", data, dispatch, dropdown, setDropdown)
42 | }
43 | className="px-4 py-2 hover:bg-black text-center cursor-pointer"
44 | >
45 | All
46 |
47 |
49 | filterOrder(
50 | "Not processed",
51 | data,
52 | dispatch,
53 | dropdown,
54 | setDropdown
55 | )
56 | }
57 | className="px-4 py-2 hover:bg-black text-center cursor-pointer"
58 | >
59 | Not processed
60 |
61 |
63 | filterOrder(
64 | "Processing",
65 | data,
66 | dispatch,
67 | dropdown,
68 | setDropdown
69 | )
70 | }
71 | className="px-4 py-2 hover:bg-black text-center cursor-pointer"
72 | >
73 | Processing
74 |
75 |
77 | filterOrder("Shipped", data, dispatch, dropdown, setDropdown)
78 | }
79 | className="px-4 py-2 hover:bg-black text-center cursor-pointer"
80 | >
81 | Shipped
82 |
83 |
85 | filterOrder(
86 | "Delivered",
87 | data,
88 | dispatch,
89 | dropdown,
90 | setDropdown
91 | )
92 | }
93 | className="px-4 py-2 hover:bg-black text-center cursor-pointer"
94 | >
95 | Delivered
96 |
97 |
99 | filterOrder(
100 | "Cancelled",
101 | data,
102 | dispatch,
103 | dropdown,
104 | setDropdown
105 | )
106 | }
107 | className="px-4 py-2 hover:bg-black text-center cursor-pointer"
108 | >
109 | Cancelled
110 |
111 |
112 |
114 |
116 | dispatch({ type: "editCategoryModalClose" })}
51 | className={`${
52 | data.editCategoryModal.modal ? "" : "hidden"
53 | } fixed top-0 left-0 z-30 w-full h-full bg-black opacity-50`}
54 | />
55 | {/* End Black Overlay */}
56 |
57 | {/* Modal Start */}
58 |
63 |
64 |
65 |
66 | Add Category
67 |
68 | {/* Close Modal */}
69 | dispatch({ type: "editCategoryModalClose" })}
72 | className="cursor-pointer text-gray-100 py-2 px-2 rounded-full"
73 | >
74 |
88 |
89 |
90 |
91 |
92 |