add context click add cart neet login

Author: NguyenTri-2207

src/App.js

@@ -1,15 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import Layout from "./component/organisms/Layout";
 import Banner from "./component/organisms/Banner";
 import MenuBot from "./component/organisms/MenuBot";
 import "./App.scss";
+import { LoginContex } from './component/context'
 
 function App() {
+  const [login, setLogin] = useState(false)
+  const [userSucsecss, setUserSucsecss] = useState(null);
   return (
-    <Layout>
-      <Banner />
-      <MenuBot />
-    </Layout>
+    <LoginContex.Provider value={{ login, userSucsecss, setUserSucsecss, setLogin }}>
+      <Layout>
+        <Banner />
+        <MenuBot />
+      </Layout>
+    </LoginContex.Provider>
   );
 }
 

src/component/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const LoginContex = createContext();

src/component/organisms/Layout/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useSelector } from "react-redux";
 import {
   Navbar,
@@ -35,12 +35,13 @@ import Love from "../../molecules/Love";
 import LogIn from "../Login";
 import logo from "../../../images/icons/logo.png";
 import firebase from "../../../service/firebase";
+import { LoginContex } from "../../context";
 
 
 const Layout = ({ children }) => {
   const [showMenuMobile, setShowMenuMobile] = useState(false);
-  const [login, setLogin] = useState(false);
-
+  // const [] = useState(false);
+  const { login, setLogin, userSucsecss, setUserSucsecss } = useContext(LoginContex)
   // state xử lý popup menu
   const [showCart, setShowCart] = useState(false);
   const [showLove, setShowLove] = useState(false);
@@ -50,7 +51,7 @@ const Layout = ({ children }) => {
   const dataCart = useSelector((state) => state.cart);
 
   // gọi data login
-  const [userSucsecss, setUserSucsecss] = useState(null);
+
   useEffect(() => {
     firebase.auth().onAuthStateChanged((user) => {
       setUserSucsecss(user);
@@ -104,7 +105,7 @@ const Layout = ({ children }) => {
               <div className="menuLeft  col-8 col-md-10  col-xl-9  ">
                 <button
                   className={`burger d-block d-md-none`}
-                  onClick={() => showMenuMobile(true)}
+                  onClick={() => setShowMenuMobile(true)}
                 >
                   <BiMenu style={{ fontSize: "30px" }} />
                 </button>
@@ -217,7 +218,7 @@ const Layout = ({ children }) => {
                 </Offcanvas.Title>
                 <button
                   className={`burger ${showMenuMobile ? "toggle" : ""}`}
-                  onClick={() => showMenuMobile(false)}
+                  onClick={() => setShowMenuMobile(false)}
                 >
                   <GrFormClose style={{ fontSize: "30px" }} />
                 </button>

src/component/organisms/MenuBot/index.js

@@ -4,6 +4,7 @@ import React, {
   useRef,
   useEffect,
   useCallback,
+  useContext,
 } from "react";
 import Select from "react-select";
 import CardHeader from "../../molecules/CardHeader";
@@ -13,6 +14,7 @@ import { addCart } from "../../../redux/action/cart";
 import { useDispatch } from "react-redux";
 import CardModal from "../../molecules/CardModal";
 import { dataMenu, dataSortPrice } from "./data.js";
+import { LoginContex } from "../../context";
 const reducer = (state, action) => {
   switch (action.type) {
     case "tab1":
@@ -50,6 +52,30 @@ const reducer = (state, action) => {
       return state;
   }
 };
+// custom select
+const customStyles = {
+  menu: (provided) => ({
+    ...provided,
+    width: "100%",
+    fontSize: "14px"
+  }),
+
+  control: () => ({
+    width: "100%",
+    display: "flex",
+    border: "1px solid #a1a1a1",
+    borderRadius: "4px",
+    fontSize: "14px",
+  }),
+
+  singleValue: (provided, state) => {
+    const opacity = state.isDisabled ? 0.5 : 1;
+    const transition = 'opacity 300ms';
+
+    return { ...provided, opacity, transition };
+  }
+}
+
 
 const MenuBot = () => {
   const [tab, dispatch] = useReducer(reducer, {
@@ -62,6 +88,10 @@ const MenuBot = () => {
   const [dataProduct, setDataProduct] = useState(tab.data);
   const [dataCard, setDataCard] = useState([]);
   const [dataCart, setDataCart] = useState({});
+
+  const { setLogin, userSucsecss } = useContext(LoginContex)
+
+  // click
   const handleLoadMore = () => {
     setLimit(limit + 4);
   };
@@ -72,9 +102,8 @@ const MenuBot = () => {
     setShowCard(true);
     setDataCard(item);
   };
-  const dataLength = tab.data.length;
 
-  // serch
+  // sort select
   useEffect(() => {
     setDataProduct(tab.data);
   }, [tab]);
@@ -93,39 +122,25 @@ const MenuBot = () => {
       );
     }
   };
-  const customStyles = {
-    menu: (provided) => ({
-      ...provided,
-      width: "100%",
-      fontSize: "14px"
-    }),
-
-    control: () => ({
-      width: "100%",
-      display: "flex",
-      border: "1px solid #a1a1a1",
-      borderRadius: "4px",
-      fontSize: "14px",
-    }),
 
-    singleValue: (provided, state) => {
-      const opacity = state.isDisabled ? 0.5 : 1;
-      const transition = 'opacity 300ms';
+  // cart data card redux
 
-      return { ...provided, opacity, transition };
-    }
-  }
-  // cart
   const dispatchCart = useDispatch();
-
-  const handleaddCard = (item) => {
-    setDataCart(item)
-  }
   useEffect(() => {
     const action = addCart(dataCart);
     dispatchCart(action);
   }, [dataCart, dispatchCart])
-  // console.log(dataCart)
+
+  // add card
+  const handleaddCard = (item) => {
+    if (userSucsecss) {
+      setDataCart(item)
+    } else {
+      setLogin(true);
+    }
+  }
+
+
   return (
     <div className="container">
       <div className="product">
@@ -186,13 +201,13 @@ const MenuBot = () => {
         </div>
         <div className="LoadMore my-4">
           <button
-            className={`${dataLength <= limit ? "d-none" : "d-block"}`}
+            className={`${tab.data.length <= limit ? "d-none" : "d-block"}`}
             onClick={handleLoadMore}
           >
             Load More
           </button>
           <button
-            className={`${dataLength <= limit && dataLength > 4 ? "d-block" : "d-none"
+            className={`${tab.data.length <= limit && tab.data.length > 4 ? "d-block" : "d-none"
               }`}
             onClick={handleSeeLess}
           >

src/redux/action/user.js

@@ -14,3 +14,27 @@ const userSlice = createSlice({
 const { reducer, actions } = userSlice;
 export const { addUser, deleteUser } = actions;
 export default reducer;
+
+// import { createSlice } from "@reduxjs/toolkit";
+
+// const NoteToggle = {
+//   enableDeleteButton: false,
+// };
+
+// const toggleReducer = createSlice({
+//   name: "login",
+//   initialState: NoteToggle,
+//   reducers: {
+//     showLogin: (state) => {
+//       const newToggle = { ...state, enableDeleteButton: true };
+//       console.log("new toogle", newToggle);
+
+//     },
+//     showLogin11: (state) => {
+//       const newToggle = { ...state, enableDeleteButton: false };
+//       return newToggle;
+//     },
+//   },
+// });
+// export default toggleReducer.reducer;
+// export const { showLogin } = toggleReducer.actions;