Skip to content

Commit 194a952

Browse files
asafshenasafshen
authored
Anonymous users (#235)
* anonymus users * yarn
1 parent 7661a7c commit 194a952

4 files changed

Lines changed: 1907 additions & 1901 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/react": "14.2.2",
99
"@testing-library/user-event": "14.5.2",
1010
"antd": "5.12.8",
11+
"jwt-decode": "^4.0.0",
1112
"prismjs": "1.29.0",
1213
"react": "18.2.0",
1314
"react-dom": "18.2.0",

‎src/common/header/Header.js‎

Lines changed: 153 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,170 @@
11
import React, { useEffect } from "react";
22
import { useState } from "react";
3-
import { Link ,NavLink } from "react-router-dom";
3+
import { Link, NavLink } from "react-router-dom";
44
import { useSession, useUser } from "@descope/react-sdk";
55
import hamburger from "../../assets/hamburger.svg";
66
import close from "../../assets/close.svg";
77
import "./Header.css";
88
import { Badge, Button } from "antd";
9+
import { jwtDecode } from "jwt-decode";
910

1011
const getDisplayName = (user) => {
11-
return user?.name || user?.email || "";
12+
return user?.name || user?.email || "";
1213
};
1314

1415
function Header() {
15-
let selectedItems = JSON.parse(localStorage.getItem("selectedItem"))
16-
? JSON.parse(localStorage.getItem("selectedItem"))
17-
: [];
18-
const [isNavExpanded, setIsNavExpanded] = useState(false);
19-
const [cartLength, setCartLength] = useState([]);
20-
const { isAuthenticated } = useSession();
21-
const { user } = useUser();
22-
const { loginLabel, linkPath } = isAuthenticated
23-
? { loginLabel: `${getDisplayName(user)} (Logout)`, linkPath: "/logout" }
24-
: { loginLabel: "Login", linkPath: "/login" };
25-
const doLogout = () => {
26-
const localStorageKeysToRemove = [
27-
"selectedItem",
28-
"productData",
29-
"newArrivalData",
30-
"loginDetails",
31-
"firstVisit",
32-
];
33-
for (const key of localStorageKeysToRemove) {
34-
localStorage.removeItem(key);
35-
}
36-
setIsNavExpanded(!isNavExpanded);
37-
};
38-
useEffect(() => {
39-
if (cartLength && selectedItems.length !== cartLength.length)
40-
setCartLength(selectedItems);
41-
}, [selectedItems]);
16+
let selectedItems = JSON.parse(localStorage.getItem("selectedItem"))
17+
? JSON.parse(localStorage.getItem("selectedItem"))
18+
: [];
19+
const [isNavExpanded, setIsNavExpanded] = useState(false);
20+
const [cartLength, setCartLength] = useState([]);
21+
const { isAuthenticated, sessionToken, isSessionLoading } = useSession();
22+
const isAnonymousUser =
23+
(sessionToken && jwtDecode(sessionToken)["danu"]) || false;
24+
const isLoggedIn = isAuthenticated && !isAnonymousUser;
4225

43-
return (
44-
<>
45-
<nav className="main-nav">
46-
<button
47-
className="hamburger"
48-
onClick={() => {
49-
setIsNavExpanded(!isNavExpanded);
50-
}}
51-
>
52-
{!isNavExpanded ? (
53-
<img src={hamburger} alt="hamburger" />
54-
) : (
55-
<img src={close} alt="close" />
56-
)}
57-
</button>
58-
<div className="logo">
59-
<Link to="/">
60-
<h2>Tee-Hee Tees</h2>
61-
</Link>
62-
</div>
26+
const { user } = useUser();
27+
const { loginLabel, linkPath } = isLoggedIn
28+
? {
29+
loginLabel: `${getDisplayName(user)} (Logout)`,
30+
linkPath: "/logout",
31+
}
32+
: { loginLabel: "Login", linkPath: "/login" };
33+
const doLogout = () => {
34+
const localStorageKeysToRemove = [
35+
"selectedItem",
36+
"productData",
37+
"newArrivalData",
38+
"loginDetails",
39+
"firstVisit",
40+
];
41+
for (const key of localStorageKeysToRemove) {
42+
localStorage.removeItem(key);
43+
}
44+
setIsNavExpanded(!isNavExpanded);
45+
};
46+
useEffect(() => {
47+
if (cartLength && selectedItems.length !== cartLength.length)
48+
setCartLength(selectedItems);
49+
}, [selectedItems]);
6350

64-
<div className={!isNavExpanded ? "navbar-expanded" : "navbar"}>
65-
<ul className="menu-list">
66-
<li className="menu-lists">
67-
<NavLink
68-
to="/"
69-
className="menu-title"
70-
onClick={() => {
71-
setIsNavExpanded(!isNavExpanded);
72-
}}
73-
>
74-
Popular
75-
</NavLink>
76-
</li>
77-
<li className="menu-lists">
78-
<NavLink
79-
to="/"
80-
className="menu-title"
81-
onClick={() => {
82-
setIsNavExpanded(!isNavExpanded);
83-
}}
84-
>
85-
New
86-
</NavLink>
87-
</li>
88-
<li className="menu-lists">
89-
<div className="btntag-mobile">
90-
<NavLink to={linkPath} className="nav-link" onClick={() => isAuthenticated ? doLogout() : setIsNavExpanded(!isNavExpanded)}>
91-
<Button className={isAuthenticated ? "btn-login" : "login-nav"}>
92-
{loginLabel}
93-
</Button>
94-
</NavLink>
95-
</div>
96-
</li>
97-
</ul>
98-
</div>
99-
<div className="navbar-right">
100-
<div className="btntag">
101-
<NavLink data-cy="login-logout-button" to={linkPath} className="nav-link" onClick={() => isAuthenticated ? doLogout() : ''}>
102-
{loginLabel}
103-
</NavLink>
104-
</div>
105-
<NavLink to="cart">
106-
<Badge
107-
count={cartLength.length}
108-
overflowCount={100}
109-
style={{ top: "2em" }}
110-
className="cart-display"
111-
>
112-
<img src={require("../../assets/cart.svg").default} alt="cart-img" />
113-
</Badge>
114-
</NavLink>
115-
<NavLink to="profile">
116-
<Badge
117-
style={{ top: "2em" }}
118-
className="profile-display"
119-
>
120-
<img src={require("../../assets/profile.svg").default} alt="profile-img" />
121-
</Badge>
122-
</NavLink>
123-
</div>
124-
</nav>
125-
</>
126-
);
51+
return (
52+
<>
53+
<nav className="main-nav">
54+
<button
55+
className="hamburger"
56+
onClick={() => {
57+
setIsNavExpanded(!isNavExpanded);
58+
}}
59+
>
60+
{!isNavExpanded ? (
61+
<img src={hamburger} alt="hamburger" />
62+
) : (
63+
<img src={close} alt="close" />
64+
)}
65+
</button>
66+
<div className="logo">
67+
<Link to="/">
68+
<h2>Tee-Hee Tees</h2>
69+
</Link>
70+
</div>
71+
72+
<div className={!isNavExpanded ? "navbar-expanded" : "navbar"}>
73+
<ul className="menu-list">
74+
<li className="menu-lists">
75+
<NavLink
76+
to="/"
77+
className="menu-title"
78+
onClick={() => {
79+
setIsNavExpanded(!isNavExpanded);
80+
}}
81+
>
82+
Popular
83+
</NavLink>
84+
</li>
85+
<li className="menu-lists">
86+
<NavLink
87+
to="/"
88+
className="menu-title"
89+
onClick={() => {
90+
setIsNavExpanded(!isNavExpanded);
91+
}}
92+
>
93+
New
94+
</NavLink>
95+
</li>
96+
<li className="menu-lists">
97+
<div className="btntag-mobile">
98+
{isSessionLoading ? (
99+
<div className="loading">Loading...</div>
100+
) : (
101+
<NavLink
102+
to={linkPath}
103+
className="nav-link"
104+
onClick={() =>
105+
isLoggedIn
106+
? doLogout()
107+
: setIsNavExpanded(
108+
!isNavExpanded
109+
)
110+
}
111+
>
112+
<Button
113+
className={
114+
isLoggedIn
115+
? "btn-login"
116+
: "login-nav"
117+
}
118+
>
119+
{loginLabel}
120+
</Button>
121+
</NavLink>
122+
)}
123+
</div>
124+
</li>
125+
</ul>
126+
</div>
127+
<div className="navbar-right">
128+
<div className="btntag">
129+
<NavLink
130+
data-cy="login-logout-button"
131+
to={linkPath}
132+
className="nav-link"
133+
onClick={() => (isLoggedIn ? doLogout() : "")}
134+
>
135+
{loginLabel}
136+
</NavLink>
137+
</div>
138+
<NavLink to="cart">
139+
<Badge
140+
count={cartLength.length}
141+
overflowCount={100}
142+
style={{ top: "2em" }}
143+
className="cart-display"
144+
>
145+
<img
146+
src={require("../../assets/cart.svg").default}
147+
alt="cart-img"
148+
/>
149+
</Badge>
150+
</NavLink>
151+
<NavLink to="profile">
152+
<Badge
153+
style={{ top: "2em" }}
154+
className="profile-display"
155+
>
156+
<img
157+
src={
158+
require("../../assets/profile.svg").default
159+
}
160+
alt="profile-img"
161+
/>
162+
</Badge>
163+
</NavLink>
164+
</div>
165+
</nav>
166+
</>
167+
);
127168
}
128169

129170
export default Header;

‎src/components/profile/Profile.js‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
11
import { UserProfile, useSession } from "@descope/react-sdk";
2-
import './profile.css';
3-
2+
import "./profile.css";
3+
import { jwtDecode } from "jwt-decode";
4+
import { useEffect } from "react";
45
function Profile() {
5-
const { isAuthenticated, isSessionLoading } = useSession();
6-
7-
return (
8-
<>
9-
<div className="profile">
10-
{isAuthenticated || isSessionLoading ? <UserProfile
11-
widgetId="user-profile-widget"
12-
onLogout={() => {
13-
window.location.href = '/login';
14-
}}></UserProfile> : window.location.href = '/login'}
15-
</div>
16-
</>);
6+
const { isAuthenticated, sessionToken, isSessionLoading } = useSession();
7+
const isAnonymousUser =
8+
(sessionToken && jwtDecode(sessionToken)["danu"]) || false;
9+
const isLoggedIn = isAuthenticated && !isAnonymousUser;
1710

11+
useEffect(() => {
12+
if (!isSessionLoading && !isLoggedIn) {
13+
window.location.href = "/login";
14+
}
15+
}, [isSessionLoading, isLoggedIn]);
16+
return (
17+
<>
18+
<div className="profile">
19+
{isSessionLoading && <div className="loading">Loading...</div>}
20+
{!isSessionLoading && isLoggedIn && (
21+
<UserProfile
22+
widgetId="user-profile-widget"
23+
onLogout={() => {
24+
window.location.href = "/login";
25+
}}
26+
/>
27+
)}
28+
</div>
29+
</>
30+
);
1831
}
1932

20-
export default Profile;
33+
export default Profile;

0 commit comments

Comments
 (0)