Skip to content

Commit

Permalink
Merge branch 'Cart' of https://github.com/nqq203/udemy-app into Creat…
Browse files Browse the repository at this point in the history 
…e-Course
  • Loading branch information
@nqq203
nqq203 committed Apr 3, 2024
2 parents f8428cf + cba0f29 commit 461f848
Show file tree
Hide file tree
Showing 10 changed files with 549 additions and 379 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.12",
"@mui/material": "^5.15.10",
"@reduxjs/toolkit": "^2.2.2",
"@reduxjs/toolkit": "^2.2.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand Down
3 changes: 2 additions & 1 deletion src/api/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import axios from 'axios';

const api = axios.create({
baseURL: 'http://localhost:8080',
});
}
);

export default api;
11 changes: 11 additions & 0 deletions src/api/cart.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import api from './api';

export const callApiGetCart = async () => {
const token = localStorage.getItem('accessToken');
const { data } = await api.get('/carts', { headers: { Authorization: `Bearer ${token}` } })
return data;
}
export const callApiCreateItemCart = async (courseId) => {
const { data } = await api.post('/carts', { courseId })
return data;
}
1 change: 1 addition & 0 deletions src/components/Card/CheckoutCourseCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {

const CheckoutCourseCard = (props) => {
const { data, extraCss } = props;

const {
id = 1,
img = '',
Expand Down
125 changes: 90 additions & 35 deletions src/components/Header/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { SearchBar } from '../SearchBar/SearchBar';
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { SearchBar } from "../SearchBar/SearchBar";
import { MdLanguage, MdOutlineShoppingCart } from "react-icons/md";
import { CiHeart } from "react-icons/ci";
import { HeaderWrapper } from './HeaderStyle';
import { useAuth } from '../../context/AuthContext';
import { HeaderWrapper } from "./HeaderStyle";
import { useAuth } from "../../context/AuthContext";

const Header = () => {
const { isAuthenticated, setIsAuthenticated } = useAuth();
Expand All @@ -19,7 +19,16 @@ const Header = () => {

useEffect(() => {
console.log(isAuthenticated);
}, [isAuthenticated]);
if (!isAuthenticated) {
// Log out the user
// localStorage.removeItem("accessToken");
// localStorage.removeItem("email");
// localStorage.removeItem("fullname");
// localStorage.removeItem("role");
// localStorage.removeItem("_id");
setIsAuthenticated(false);
}
}, [isAuthenticated, setIsAuthenticated]);

function onLogout() {
setIsAuthenticated(false);
Expand All @@ -30,59 +39,105 @@ const Header = () => {
<HeaderWrapper>
<nav className="header-first">
<ul style={{ display: "flex", alignItems: "center" }}>
<li className='logo'><Link to="/"><img src='../../../assets/udemy.png' alt='udemy-logo' /></Link></li>
<li><Link to="/courses">Categories</Link></li>
<li className="logo">
<Link to="/">
<img src="../../../assets/udemy.png" alt="udemy-logo" />
</Link>
</li>
<li>
<Link to="/courses">Categories</Link>
</li>
</ul>
</nav>
<div className="header-search-bar"><SearchBar /></div>
<nav className='header-third'>
<div className="header-search-bar">
<SearchBar />
</div>
<nav className="header-third">
<ul>
{/* <li className='three-words-item'><Link to="/">Teach on Udemy</Link></li> */}
<li><Link to="/instructor/courses">Instructor</Link></li>
<li><Link to="/my-courses/learning">My learning</Link></li>
<li>
<Link to="/instructor/courses">Instructor</Link>
</li>
<li>
<Link to="/my-courses/learning">My learning</Link>
</li>
</ul>
</nav>
{!isAuthenticated ?
(<div className='header-forth'>
{!isAuthenticated ? (
<div className="header-forth">
<MdOutlineShoppingCart size={31} className="shopping" />
<Link to="/sign-in" className="btn login">Log in</Link>
<Link to="/sign-up" className="btn signup">Sign up</Link>
<Link to="/sign-in" className="btn login">
Log in
</Link>
<Link to="/sign-up" className="btn signup">
Sign up
</Link>
<MdLanguage className="language" size={31} />
</div>
) :
(<div className='header-forth'>
<MdOutlineShoppingCart size={31} className="shopping" />
) : (
<div className="header-forth">
<Link to="/shopping-cart">
<MdOutlineShoppingCart size={31} className="shopping" />
</Link>
<CiHeart size={31} className="shopping" />
<Link className="profile" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
<Link to="/profile/info"><img src="https://pluspng.com/img-png/user-png-icon-download-icons-logos-emojis-users-2240.png" style={{ width: "40px" }} alt='user-profile' /></Link>
<Link
className="profile"
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>
<Link to="/profile/info">
<img
src="https://pluspng.com/img-png/user-png-icon-download-icons-logos-emojis-users-2240.png"
style={{ width: "40px" }}
alt="user-profile"
/>
</Link>
{isHovering && (
<div className="account-dropdown">
<div className="dropdown-content-info">
<img className='dropdown-content-info-item' src="https://pluspng.com/img-png/user-png-icon-download-icons-logos-emojis-users-2240.png" alt="uesr-profile" style={{ width: "60px" }} />
<div className='dropdown-content-info-item'>
<div className='dropdown-content-info-item-name'>{localStorage.getItem("fullname")}</div>
<div className='dropdown-content-info-item-email'>{localStorage.getItem("email")}</div>
<img
className="dropdown-content-info-item"
src="https://pluspng.com/img-png/user-png-icon-download-icons-logos-emojis-users-2240.png"
alt="uesr-profile"
style={{ width: "60px" }}
/>
<div className="dropdown-content-info-item">
<div className="dropdown-content-info-item-name">
{localStorage.getItem("fullname")}
</div>
<div className="dropdown-content-info-item-email">
{localStorage.getItem("email")}
</div>
</div>
</div>
<div className="dropdown-content">
<div className='dropdown-content-item'>My Learning</div>
<div className='dropdown-content-item'>My Cart</div>
<div className='dropdown-content-item'>Wish List</div>
<div className='dropdown-content-item'>Instructor Dashboard</div>
<div className="dropdown-content-item">My Learning</div>
<div className="dropdown-content-item">My Cart</div>
<div className="dropdown-content-item">Wish List</div>
<div className="dropdown-content-item">
Instructor Dashboard
</div>
</div>
<div className="dropdown-content">
<Link to="/profile/info"><div className='dropdown-content-item'>Edit Profile</div></Link>
<div className='dropdown-content-item'>Payment Methods</div>
<Link to="/profile/info">
<div className="dropdown-content-item">Edit Profile</div>
</Link>
<div className="dropdown-content-item">Payment Methods</div>
</div>
<div className="dropdown-content">
<Link to="/"><div className='dropdown-content-item' onClick={onLogout}>Log out</div></Link>
<Link to="/">
<div className="dropdown-content-item" onClick={onLogout}>
Log out
</div>
</Link>
</div>
</div>
)}
</Link>
</div>)}
</div>
)}
</HeaderWrapper>
)
);
};

export default Header;
export default Header;
14 changes: 7 additions & 7 deletions src/context/AuthContext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

const isTokenExpired = (token) => {
const decodedToken = jwtDecode(token);
const isTokenExpired = (accessToken) => {
const decodedToken = jwtDecode(accessToken);
const currentDate = new Date();

// JWT exp is in seconds
Expand All @@ -16,19 +16,19 @@ const isTokenExpired = (token) => {

export const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [token, setToken] = useState(localStorage.getItem('token'));
const [accessToken, setToken] = useState(localStorage.getItem('accessToken'));

useEffect(() => {
if (!token || isTokenExpired(token)) {
if (!accessToken || isTokenExpired(accessToken)) {
// Log out the user
localStorage.removeItem('token');
setToken(localStorage.getItem('token'));
localStorage.removeItem('accessToken');
setToken(localStorage.getItem('accessToken'));
setIsAuthenticated(false);
}
else {
setIsAuthenticated(true);
}
}, [token]);
}, [accessToken]);

return (
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
Expand Down
Loading

0 comments on commit 461f848

Please sign in to comment.