Changeset 16237c4 for frontend

Timestamp:

09/08/22 12:38:24 (2 years ago)

Author:

Nace Gjorgjievski <nace.gorgievski123@…>

Branches:

master

Children:

ee05663

Parents:

717ceae

Message:

Added Order Functionality

Location:

frontend

Files:

• package-lock.json (modified) (3 diffs)
• package.json (modified) (1 diff)
• src/App.js (modified) (3 diffs)
• src/Store.js (modified) (2 diffs)
• src/components/CheckoutSteps.js (added)
• src/components/Header.js (modified) (7 diffs)
• src/index.css (modified) (1 diff)
• src/screens/CardPaymentScreen.js (added)
• src/screens/OrderHistoryScreen.js (added)
• src/screens/OrderScreen.js (added)
• src/screens/PaymentMethodScreen.js (added)
• src/screens/PlaceOrderScreen.js (added)
• src/screens/ShippingAddressScreen.js (added)
• src/screens/SigninScreen.js (modified) (3 diffs)
• src/screens/SignupScreen.js (added)
• src/styles/Header.css (modified) (2 diffs)
• src/styles/SigninScreen.css (modified) (2 diffs)

frontend/package-lock.json

@@ -28 +28 @@
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
+        "react-toastify": "^9.0.8",
         "web-vitals": "^2.1.4"
       }
@@ -14659 +14660 @@
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.8.tgz",
+      "integrity": "sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
@@ -27673 +27686 @@
       }
     },
+    "react-toastify": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.8.tgz",
+      "integrity": "sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.5",

frontend/package.json

@@ -24 +24 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.0.8",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

@@ -11 +11 @@
 import CategoryScreen from "./screens/CategoryScreen";
 import SigninScreen from "./screens/SigninScreen";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import ShippingAddressScreen from "./screens/ShippingAddressScreen";
+import SignupScreen from "./screens/SignupScreen";
+import PaymentMethodScreen from "./screens/PaymentMethodScreen";
+import PlaceOrderScreen from "./screens/PlaceOrderScreen";
+import OrderScreen from "./screens/OrderScreen";
+import CardPaymentScreen from "./screens/CardPaymentScreen";
+import OrderHistoryScreen from "./screens/OrderHistoryScreen";
 
 function App() {
@@ -17 +26 @@
   return (
     <BrowserRouter>
+      <ToastContainer position="bottom-center" limit={1} />
       <Header />
 
@@ -24 +34 @@
         <Route path="/cart" element={<CartScreen />} />
         <Route path="/signin" element={<SigninScreen />} />
+        <Route path="/signup" element={<SignupScreen />} />
+        <Route path="/shipping" element={<ShippingAddressScreen />} />
+        <Route path="/payment" element={<PaymentMethodScreen />} />
+        <Route path="/placeorder" element={<PlaceOrderScreen />} />
+        <Route path="placeorder/payment" element={<CardPaymentScreen />} />
+        <Route path="/orderhistory" element={<OrderHistoryScreen />} />
+        <Route path="/order/:id" element={<OrderScreen />} />
         <Route path="/products" element={<CategoryScreen />} />
       </Routes>

frontend/src/Store.js

@@ -4 +4 @@
 
 const initialState = {
+  userInfo: localStorage.getItem("userInfo")
+    ? JSON.parse(localStorage.getItem("userInfo"))
+    : null,
   cart: {
+    shippingAddress: localStorage.getItem("shippingAddress")
+      ? JSON.parse(localStorage.getItem("shippingAddress"))
+      : {},
+    paymentMethod: localStorage.getItem("paymentMethod")
+      ? localStorage.getItem("paymentMethod")
+      : "",
     cartItems: localStorage.getItem("cartItems")
       ? JSON.parse(localStorage.getItem("cartItems"))
@@ -32 +41 @@
       return { ...state, cart: { ...state.cart, cartItems } };
     }
+    case "CART_CLEAR":
+      return { ...state, cart: { ...state.cart, cartItems: [] } };
+    case "USER_SIGNIN":
+      return { ...state, userInfo: action.payload };
+    case "USER_SIGNOUT":
+      return {
+        ...state,
+        userInfo: null,
+        cart: { cartItems: [], shippingAddress: {}, paymentMethod: "" },
+      };
+    case "SAVE_SHIPPING_ADDRESS":
+      return {
+        ...state,
+        cart: { ...state.cart, shippingAddress: action.payload },
+      };
+    case "SAVE_PAYMENT_METHOD":
+      return {
+        ...state,
+        cart: { ...state.cart, paymentMethod: action.payload },
+      };
     default:
       return state;

frontend/src/components/Header.js

@@ -16 +16 @@
 import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
 import MenuIcon from "@mui/icons-material/Menu";
-import { Link } from "react-router-dom";
+import { Link, NavLink, useNavigate } from "react-router-dom";
 import logo2 from "../Images/logo2.png";
 import Badge from "react-bootstrap/Badge";
@@ -22 +22 @@
 import { Store } from "../Store";
 import { useContext } from "react";
+import NavDropdown from "react-bootstrap/NavDropdown";
 
 const toggleMenu = (event) => {
+  event.stopPropagation();
   let menu = document.querySelector(".mobile-menu-container");
   menu.classList.remove("hidden");
@@ -30 +32 @@
 
 const toggleSubMenu = (event) => {
+  event.stopPropagation();
   let menu = document.querySelector(".subDropdown");
   menu.classList.remove("hidden");
@@ -68 +71 @@
 
 function Header() {
-  const { state } = useContext(Store);
-  const { cart } = state;
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { cart, userInfo } = state;
+  const navigate = useNavigate();
+
+  const signoutHandler = () => {
+    ctxDispatch({ type: "USER_SIGNOUT" });
+    localStorage.removeItem("userInfo");
+    localStorage.removeItem("shippingAddress");
+    localStorage.removeItem("paymentMethod");
+  };
+
   return (
     <div className="header">
@@ -78 +90 @@
           onClick={toggleMenu}
         />
-        <img className="header__icon" src={logo2} alt="logo"></img>
+        <img
+          className="header__icon"
+          src={logo2}
+          alt="logo"
+          onClick={() => {
+            navigate("/");
+          }}
+        ></img>
       </div>
       <div className="mobile-menu-container hidden">
@@ -85 +104 @@
         </div>
         <ul className="mobile-menu">
-          <li>Почетна</li>
+          <Link
+            to="/"
+            style={{ textDecoration: "none", color: "black" }}
+            onClick={closeMenu}
+          >
+            <li>Почетна</li>
+          </Link>
           <li onClick={toggleSubMenu} className="subMenu">
             Производи <ArrowDropDownIcon />
@@ -492 +517 @@
       <div className="header__right">
         <div className="header__buttons">
-          <span>
-            <AccountCircleIcon className="header__login" fontSize="large" />
-            <p>Најави се</p>
-          </span>
+          {userInfo ? (
+            <NavDropdown
+              title={
+                <span>
+                  <AccountCircleIcon
+                    className="header__login"
+                    fontSize="large"
+                  />
+                  <p>{userInfo.name}</p>
+                </span>
+              }
+              id="basic-nav-dropdown"
+            >
+              <NavDropdown.Item
+                onClick={() => {
+                  navigate("/profile");
+                }}
+              >
+                Профил
+              </NavDropdown.Item>
+
+              <NavDropdown.Item
+                onClick={() => {
+                  navigate("/orderhistory");
+                }}
+              >
+                Нарачки
+              </NavDropdown.Item>
+
+              <NavDropdown.Divider />
+              <Link
+                className="drowdown-item"
+                to="#signout"
+                onClick={signoutHandler}
+              >
+                Одјави се
+              </Link>
+            </NavDropdown>
+          ) : (
+            <Link
+              to={"/signin"}
+              className="link"
+              onClick={() => {
+                navigate("/orderhistory");
+              }}
+            >
+              <span>
+                <AccountCircleIcon className="header__login" fontSize="large" />
+                <p>Најави се</p>
+              </span>
+            </Link>
+          )}
+
           <Link to="/cart" className="badgee">
             <span>

frontend/src/index.css

@@ +1 @@
+.checkout-steps > div {
+  border-bottom: 0.2rem solid #a0a0a0;
+  color: #a0a0a0;
+}
+
+.checkout-steps > div.active {
+  border-bottom: 0.2rem solid #f08000;
+  color: #f08000;
+}

frontend/src/screens/SigninScreen.js

@@ +1 @@
+import Axios from "axios";
 import Container from "react-bootstrap/Container";
 import Form from "react-bootstrap/Form";
@@ -4 +5 @@
 import Button from "react-bootstrap/Button";
 import "../styles/SigninScreen.css";
-import React from "react";
-import { Link, useLocation } from "react-router-dom";
+import React, { useContext, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Store } from "../Store";
+import { toast } from "react-toastify";
+import { getError } from "../components/utils";
 
 function SigninScreen() {
+  const navigate = useNavigate();
   const { search } = useLocation();
   const redirectInUrl = new URLSearchParams(search).get("redirect");
   const redirect = redirectInUrl ? redirectInUrl : "/";
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { userInfo } = state;
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+    try {
+      const { data } = await Axios.post("/api/users/signin", {
+        email,
+        password,
+      });
+      ctxDispatch({ type: "USER_SIGNIN", payload: data });
+      localStorage.setItem("userInfo", JSON.stringify(data));
+      navigate(redirect || "/");
+    } catch (err) {
+      toast.error(getError(err));
+    }
+  };
+
+  useEffect(() => {
+    if (userInfo) {
+      navigate(redirect);
+    }
+  }, [navigate, redirect, userInfo]);
+
   return (
     <div className="pageContainer">
@@ -18 +51 @@
         </Helmet>
         <h1>Најави се</h1>
-        <Form className="formCointainer">
+        <Form className="formCointainer" onSubmit={submitHandler}>
           <Form.Group controlId="email">
             <Form.Label>Email</Form.Label>
-            <Form.Control type="email" required />
+            <Form.Control
+              type="email"
+              required
+              onChange={(e) => setEmail(e.target.value)}
+            />
           </Form.Group>
           <Form.Group controlId="password">
             <Form.Label>Лозинка</Form.Label>
-            <Form.Control type="email" required />
+            <Form.Control
+              type="password"
+              required
+              onChange={(e) => setPassword(e.target.value)}
+            />
           </Form.Group>
           <div className="submitBtnContainer">

frontend/src/styles/Header.css

@@ -6 +6 @@
   margin: 0;
   padding: 0;
+  margin-top: 10px;
   height: 70px;
   width: 100%;
@@ -200 +201 @@
 }
 
+#basic-nav-dropdown {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media only screen and (max-width: 1015px) {
   .header__dropdown {

frontend/src/styles/SigninScreen.css

@@ -13 +13 @@
 .formCointainer {
   width: 400px;
+}
+
+.shipPC {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.shipPC .checkout-steps {
+  width: 70%;
 }
 
@@ -32 +43 @@
   }
 }
+
+@media only screen and (max-width: 559px) {
+  .shipPC .checkout-steps {
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 331px) {
+  .shipPC .checkout-steps {
+    display: none;
+  }
+}