Skip to content

Commit bac67d9

Browse files
NguyenTri-2207NguyenTri-2207
committed
login firebase
1 parent 5f72628 commit bac67d9

File tree

8 files changed

+334
-184
lines changed

8 files changed

+334
-184
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/react": "^11.1.0",
99
"@testing-library/user-event": "^12.1.10",
1010
"bootstrap": "^5.1.3",
11+
"firebase": "^9.6.0",
1112
"react": "^17.0.2",
1213
"react-bootstrap": "^2.0.2",
1314
"react-dom": "^17.0.2",

‎src/component/molecules/Cart/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { Button } from "react-bootstrap";
44
import { GrFormClose } from "react-icons/gr";
55
const dollarUSLocale = Intl.NumberFormat("en-US");
66
export default function Cart({ ClickClose, deleteProduct, data }) {
7-
8-
console.log(data);
97
return (
108
<div className="cart pb-3">
119
<div className="cart_header ">

‎src/component/molecules/User/index.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useRef, useEffect } from "react";
2+
import "./index.scss";
3+
import { GrFormClose } from "react-icons/gr";
4+
import { auth } from "../../../service/firebase";
5+
function useOutsideAlerter(ref ,hidden) {
6+
useEffect(() => {
7+
/**
8+
* Alert if clicked on outside of element
9+
*/
10+
function handleClickOutside(event) {
11+
if (ref.current && !ref.current.contains(event.target)) {
12+
hidden()
13+
}
14+
}
15+
// Bind the event listener
16+
document.addEventListener("mousedown", handleClickOutside);
17+
return () => {
18+
// Unbind the event listener on clean up
19+
document.removeEventListener("mousedown", handleClickOutside);
20+
};
21+
}, [ref]);
22+
}
23+
24+
export default function Cart({ ClickClose, data }) {
25+
const wrapperRef = useRef(null);
26+
useOutsideAlerter(wrapperRef ,ClickClose);
27+
const user= data.multiFactor.user
28+
return (
29+
<div ref={wrapperRef} className="user p-3 ">
30+
31+
32+
<div className="user_header d-flex align-items-center pb-3">
33+
<img src={user.photoURL} alt="img" />
34+
<div>
35+
<h6 className="m-0">{user.displayName}
36+
37+
</h6>
38+
<p>{user.email}</p>
39+
</div>
40+
41+
42+
</div>
43+
<div className="user_content">
44+
<ul>
45+
<li><a href="#">Đơn hàng của bạn</a></li>
46+
<li><a href="#">Sản phẩm yêu thích</a></li>
47+
<li><a href="#">Liên hệ</a></li>
48+
<li><a onClick={() => auth.signOut()} href="#">Đăng xuất</a></li>
49+
</ul>
50+
51+
</div>
52+
53+
</div>
54+
);
55+
}

‎src/component/molecules/User/index.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.user {
2+
position: absolute;
3+
background: #fff;
4+
z-index: 222;
5+
width: 250px;
6+
right: 15px;
7+
top: 57px;
8+
border-radius: 4px;
9+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
10+
@media (min-width: 768px) {
11+
right: 10%;
12+
}
13+
@media (min-width: 991) {
14+
right: 8%;
15+
}
16+
17+
&_header {
18+
border-bottom: 1px solid #666;
19+
display: flex;
20+
justify-content: flex-start;
21+
align-items: center;
22+
img {
23+
border-radius: 50%;
24+
margin-right: 8px;
25+
width: 40px;
26+
height: 40px;
27+
}
28+
h6 {
29+
font-size: 18px;
30+
margin-bottom: 4px;
31+
}
32+
p {
33+
font-size: 14px;
34+
margin: 0;
35+
color: #666;
36+
}
37+
}
38+
&_content {
39+
ul {
40+
list-style: none;
41+
padding: 8px 0 0 0;
42+
margin: 0;
43+
li {
44+
a {
45+
font-size: 16px;
46+
color: #666;
47+
display: block;
48+
padding: 4px 0;
49+
text-decoration: none;
50+
}
51+
}
52+
}
53+
}
54+
}

‎src/component/organisms/Layout/index.js‎

Lines changed: 65 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
import React, { useState, useEffect } from "react";
2+
import { useSelector } from "react-redux";
3+
import {
4+
Navbar,
5+
Badge,
6+
Offcanvas,
7+
Nav,
8+
Accordion,
9+
NavDropdown,
10+
Button,
11+
} from "react-bootstrap";
212

13+
// icons
314
import { BiUser, BiMenu } from "react-icons/bi";
415
import {
516
AiOutlineHeart,
@@ -14,31 +25,39 @@ import {
1425
FaFacebookF,
1526
FaChevronDown,
1627
} from "react-icons/fa";
17-
import {
18-
Navbar,
19-
Badge,
20-
Offcanvas,
21-
Nav,
22-
Accordion,
23-
NavDropdown,
24-
Button,
25-
} from "react-bootstrap";
26-
import { useSelector } from "react-redux";
28+
29+
//styles
30+
import "./index.scss";
31+
//components
2732
import Cart from "../../molecules/Cart";
33+
import User from "../../molecules/User";
2834
import Love from "../../molecules/Love";
2935
import LogIn from "../Login";
30-
import "./index.scss";
3136
import logo from "../../../images/icons/logo.png";
32-
import LoginSuccess from "../../molecules/LoginSuccess";
37+
import firebase from "../../../service/firebase";
38+
39+
3340
const Layout = ({ children }) => {
34-
const [show, setShow] = useState(false);
41+
const [showMenuMobile, setShowMenuMobile] = useState(false);
3542
const [login, setLogin] = useState(false);
43+
44+
// state xử lý popup menu
3645
const [showCart, setShowCart] = useState(false);
3746
const [showLove, setShowLove] = useState(false);
38-
const [showLoginSuccess, setShowLoginSuccess] = useState(false);
39-
const user = useSelector((state) => state.user[0]);
47+
const [showUser, setShowUser] = useState(false);
48+
49+
// gọi data redux cart
4050
const dataCart = useSelector((state) => state.cart);
41-
// console.log(dataCart);
51+
52+
// gọi data login
53+
const [userSucsecss, setUserSucsecss] = useState(null);
54+
useEffect(() => {
55+
firebase.auth().onAuthStateChanged((user) => {
56+
setUserSucsecss(user);
57+
});
58+
}, []);
59+
60+
// xử lý click
4261
const onClickCloseLove = () => {
4362
setShowLove(!showLove);
4463
setShowCart(false);
@@ -49,19 +68,19 @@ const Layout = ({ children }) => {
4968
};
5069

5170
const handleUserClick = () => {
52-
setLogin(true);
53-
if (user) {
54-
setShowLoginSuccess(!showLoginSuccess);
71+
if (userSucsecss) {
72+
setShowUser(!showUser);
73+
} else {
74+
setLogin(true);
5575
}
5676
};
5777

58-
5978
///sticky
6079
const [sticky, setSticky] = useState(false);
6180
useEffect(() => {
6281
const scrollCallBack = window.addEventListener("scroll", () => {
6382
if (window.pageYOffset > 160) {
64-
setSticky(true)
83+
setSticky(true);
6584
} else {
6685
setSticky(false);
6786
}
@@ -74,14 +93,18 @@ const Layout = ({ children }) => {
7493
<>
7594
<div>
7695
<div className={`${sticky ? "d-block" : "d-none"} menuboi`}></div>
77-
<Navbar bg="light" expanded={show} id="myHeader" className={`${sticky ? "sticky" : ""} myHeader`}>
96+
<Navbar
97+
bg="light"
98+
expanded={showMenuMobile}
99+
id="myHeader"
100+
className={`${sticky ? "sticky" : ""} myHeader`}
101+
>
78102
<div className="container">
79-
80103
<div className="menu row">
81104
<div className="menuLeft col-8 col-md-10 col-xl-9 ">
82105
<button
83106
className={`burger d-block d-md-none`}
84-
onClick={() => setShow(true)}
107+
onClick={() => showMenuMobile(true)}
85108
>
86109
<BiMenu style={{ fontSize: "30px" }} />
87110
</button>
@@ -132,6 +155,13 @@ const Layout = ({ children }) => {
132155
>
133156
<BiUser style={{ fontSize: "20px" }} />
134157
</Button>
158+
{showUser && userSucsecss && (
159+
<User
160+
data={userSucsecss}
161+
ClickClose={() => setShowUser(false)}
162+
163+
/>
164+
)}
135165
<div className="positon-relative">
136166
<Button
137167
className="btnheart"
@@ -164,12 +194,17 @@ const Layout = ({ children }) => {
164194
{dataCart.length - 1}
165195
</Badge>
166196
</Button>
167-
{showCart && <Cart ClickClose={() => setShowCart(false)} data={dataCart} />}
197+
{showCart && (
198+
<Cart
199+
ClickClose={() => setShowCart(false)}
200+
data={dataCart}
201+
/>
202+
)}
168203
</div>
169204
</div>
170205
</div>
171206
</div>
172-
{show && (
207+
{showMenuMobile && (
173208
<Navbar.Offcanvas
174209
id="offcanvasNavbar"
175210
aria-labelledby="offcanvasNavbarLabel"
@@ -181,8 +216,8 @@ const Layout = ({ children }) => {
181216
<img width={100} src={logo} alt="logo" />
182217
</Offcanvas.Title>
183218
<button
184-
className={`burger ${show ? "toggle" : ""}`}
185-
onClick={() => setShow(false)}
219+
className={`burger ${showMenuMobile ? "toggle" : ""}`}
220+
onClick={() => showMenuMobile(false)}
186221
>
187222
<GrFormClose style={{ fontSize: "30px" }} />
188223
</button>
@@ -267,14 +302,8 @@ const Layout = ({ children }) => {
267302
</Navbar>
268303
{children}
269304
</div>
270-
<LogIn show={login} handleClose={() => setLogin(false)} />
271-
272-
{showLoginSuccess && (
273-
<LoginSuccess
274-
name={user.name}
275-
src={user.imageUrl}
276-
ClickClose={() => setShowLoginSuccess(false)}
277-
/>
305+
{!userSucsecss && (
306+
<LogIn show={login} handleClose={() => setLogin(false)} />
278307
)}
279308
</>
280309
);

0 commit comments

Comments
 (0)