Блог

Информация о клиенте На домашней странице должна быть указана электронная почта клиента.

Этот критерий связан с кнопкой выхода из системы результатов обучения. Как только клиент вошел в систему, на панели навигации должна быть кнопка выхода из системы. На навигационной панели не должно быть кнопки входа в систему, когда клиент входит в систему.

Этот критерий связан с перенаправлением на выход из системы результатов обучения. Как только клиент выходит из системы, веб-страница перенаправляется на страницу продуктов. На панели навигации должна быть кнопка входа в систему. На панели навигации не должно быть кнопки выхода из системы.

Этот критерий связан с функцией выхода из системы результатов обучения

Как только клиент выйдет из системы, информация о клиенте должна быть очищена в штатах реакции и должным образом выведена из системы с помощью commerce api.

App.js

 import './App.css'; import Product from "./components/Product"; import Products from "./components/Products"; import Navbar from "./components/Navbar"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import { commerce } from './lib/commerce'; import { Grid } from '@material-ui/core'; import { useEffect, useState } from 'react'; import Cart from "./components/cart/cart"; import Checkout from "./components/Checkout"; import Login from "./components/Login"; import HomePage from "./components/HomePage";  function App() {  const [cart, setCart] = useState({}); useEffect(() =gt; { commerce.cart.retrieve().then(  (response) =gt; {  console.log(response);  setCart(response)  } ); }, []);  const handleAddToCart = (productId, quantity) =gt; {  //console.log("Handling add to cart....") commerce.cart.add(productId, quantity).then(  (response) =gt; {  console.log(response);  setCart(response.cart);  }  );  }  const handleUpdateCart = (productId, quantity) =gt; { commerce.cart.update(productId, quantity).then(  (response) =gt; {  console.log(response);  setCart(response.cart);  }  );   }   const handleRemoveFromCart = (productId) =gt; {  commerce.cart.remove(productId).then(  (response) =gt; {  console.log(response);  setCart(response.cart);  }  ); }   const handleEmptyCart = () =gt; { commerce.cart.empty().then(  (response) =gt; {  console.log(response);  setCart(response.cart);  }  );  }   const [isLogin, setIsLogin] = useState({});  // useEffect(() =gt; { // commerce.customer.isLogin().then(  // (jwt) =gt; {  // console.log(jwt);  // setIsLogin(true); // } // ); // }, []);   return ( lt;Grid container direction="column"gt;   lt;Grid itemgt;   lt;headergt;lt;Navbar cartItems={cart.total_items} /gt;lt;/headergt;   lt;/Gridgt;  lt;Grid item containergt;  lt;Grid item xs={false} sm={1} md={2} lg={2}gt;lt;/Gridgt;  lt;Grid item xs={12} sm={10} md={8} lg={8}gt;   lt;h1gt; e-Comm Shoplt;/h1gt;   lt;BrowserRoutergt;  lt;Switchgt;   lt;Route exact path={["/Products/:ProductId"]}gt;  lt;Product  handleAddToCart={handleAddToCart}  /gt;  lt;/Routegt;   lt;Route exact path={["/"]}gt;  lt;Products /gt;  lt;/Route gt;  lt;Route exact path="/cart"gt;  lt;Cart  cart={cart}  handleUpdateCart={handleUpdateCart}  handleRemoveFromCart={handleRemoveFromCart}  handleEmptyCart={handleEmptyCart}  /gt;  lt;/Routegt;  lt;Route exact path="/Checkout"gt;  lt;Checkout cart={cart} /gt;  lt;/Routegt;   lt;Route exact path="/Login"gt;  lt;Login/gt;  lt;/Route gt;   lt;Route path={["/Login/HomePage"]}gt;  lt;HomePage/gt;  lt;/Route gt;   lt;/Switchgt;   lt;/BrowserRoutergt;   lt;/Gridgt;  lt;Grid item xs={false} sm={1} md={2} lg={2}gt;lt;/Gridgt;  lt;/Gridgt; lt;/Gridgt; ); }  export default App;  

Navbar.js

 import { AppBar, Toolbar, IconButton, Badge, Button } from '@material-ui/core';  import ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';  import ShoppingCartOutlinedIcon from '@material-ui/icons/ShoppingCartOutlined';  import { useState } from "react";  import React from 'react';  import { commerce } from '../lib/commerce';   function Navbar({ cartItems, isLogin }) {  // const isLoggedIn = true;  // const isLoggedOut = true;  if(isLogin){  console.log(commerce.customer.isLoggedIn);  }   return (  lt;AppBar position="static" color="inherit"gt;  lt;Toolbargt;  lt;IconButton href="/"gt;lt;ShoppingBasketIcon /gt;lt;/IconButtongt;  e-Comm Shop  lt;IconButton href="/cart"gt;  lt;Badge badgeContent={cartItems} color="secondary"gt;  lt;ShoppingCartOutlinedIcon /gt;  lt;/Badgegt;  lt;/IconButtongt;   {/* lt;Button onClick=  {(event) =gt; {  window.location.href = '/Login'  }}gt;  Loginlt;/Buttongt; */}  {/* {isLoggedOut amp;amp; lt;a href="/Login"gt;Loginlt;/agt;}  {isLoggedIn amp;amp; lt;a href="/"gt;Logoutlt;/agt;} */}    lt;/Toolbargt;    lt;/AppBargt;  );   }    export default Navbar;  

HomePage.js

 import { useEffect, useState } from "react";  import { useParams } from "react-router";   import { commerce } from "../lib/commerce";  //import { , useEffect } from "react";   function HomePage() {   const { userID } = useParams();  console.log(userID);   const [customerEmail, setCustomerEmail] = useState("");  const [isLogin, setIsLogin] = useState(false);    useEffect(() =gt; {  commerce.customer.getToken(userID).then(  (jwt) =gt; {  console.log(jwt);  setIsLogin(true);  }  );  }, [userID]);    useEffect(() =gt; {  if (isLogin) {  commerce.customer.about().then(  (customer) =gt; {  console.log(customer);  setCustomerEmail(customer.email);  }  );   }  },[isLogin]);   return (  lt;divgt;  lt;h3gt;Welcome, {customerEmail}lt;/h3gt;  lt;/divgt;  );  }   export default HomePage;