Skip to content

Commit

Permalink
fix(user): handled user service and auth
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed Mar 17, 2022
1 parent 05486cb commit 39f5ea4
Show file tree
Hide file tree
Showing 11 changed files with 457 additions and 114 deletions.
26 changes: 26 additions & 0 deletions src/API/UserAPI.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ function UserAPI(token) {
const [history, setHistory] = useState([]);
const [user, setUser] = useState(initialState);
const [authenticated, isAuthenticated] = useState(false);
const [cart, setCart] = useState([]);

useEffect(() => {
if (token) {
Expand All @@ -31,6 +32,7 @@ function UserAPI(token) {
const res = await axios.get("/api/user/info", {
headers: { Authorization: token },
});
console.log(res.data._id)
setIsLoggedIn(true);
isAuthenticated(true);
setUser(res.data);
Expand All @@ -44,11 +46,35 @@ function UserAPI(token) {
}
}, [token]);

const addCart = async (product) => {
if (!isLoggedIn) return alert("Please login to continue buying");

const check = cart.every((item) => {
return item._id !== product._id;
});

if (check) {
setCart([...cart, { ...product, quantity: 1 }]);

await axios.patch(
"/api/user/addcart",
{ cart: [...cart, { ...product, quantity: 1 }] },
{
headers: { Authorization: token },
}
);
} else {
alert("This product has been added to the cart");
}
};

return {
isLoggedIn: [isLoggedIn, setIsLoggedIn],
isAdmin: [isAdmin, setIsAdmin],
history: [history, setHistory],
user: [user, setUser],
cart: [cart, setCart],
addCart: addCart,
authenticated: [authenticated, isAuthenticated],
};
}
Expand Down
126 changes: 50 additions & 76 deletions src/Components/Article/MainContainer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,72 @@
import React from 'react';
import Alert from 'react-bootstrap/Alert'
import { AiFillStar, AiFillPlayCircle, AiFillTwitterCircle } from 'react-icons/ai';
import {FaRegThumbsUp, FaRegComment, FaFacebook} from 'react-icons/fa';
import {TiSocialLinkedinCircular} from 'react-icons/ti';
import {MdBookmarkBorder} from 'react-icons/md';
import {RiShareCircleFill} from 'react-icons/ri';
import Sticky from 'react-sticky-state';
import { AiFillStar, AiFillPlayCircle } from 'react-icons/ai';
import {JustifyContent, StyledMainContainer,
PaddingContent, BlogCard, BlogPost} from '../../Layout/Container/styledArticle';
import {CircleImage, BlogDisplayImage} from '../../Layout/Image/styledImage';
import {NamePlate, WarppedDate, GrayText, DisplayItem, BlogTitle, BlogSubTitle,
BlogPhotoCredit, BlogContent, Font2} from '../../Layout/Text/styledText';
BlogPhotoCredit, BlogContent} from '../../Layout/Text/styledText';
import {ArticleHr} from '../../Layout/Hr/styledHr';
import {AlertP} from '../../Layout/Paragraph/styledParagraph';
import {AlertLink} from '../../Layout/ATag/styledATag';
import marked from 'marked';
import './StickyState.css';
import Newsletter from '../Subscribe/Newsletter';
import RelatedPosts from './RelatedPosts';
import StickyFooter from '../Sticky/StickyFooter';

const MainContainer = (props) => {
const { title, subtitle, description, images, markdown } = props.detailArticle;
const { title, subtitle, description, images, markdown } = props.detailArticle;
const timeFormater = props.timeFormater;
const readTime = props.readTime;

return (
<StyledMainContainer>
<PaddingContent>
<section>
<Alert transition="false" variant="light">
<AlertP>
You have <strong style={{ color: 'black' }}>1</strong> free member-only story left this month.&nbsp;
<AlertLink href="#">Sign up for Medium and get an extra one.</AlertLink>
</AlertP>
</Alert>
<JustifyContent AlignCenter>
<CircleImage src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
alt="author" />
<div>
<NamePlate>Will Smith</NamePlate>
<WarppedDate>
<GrayText>{timeFormater}</GrayText>
<span>&nbsp;&#183;&nbsp;</span>
<DisplayItem>{readTime} min read &nbsp; <AiFillStar/></DisplayItem>
<span>&nbsp;&#183;&nbsp;</span>
<DisplayItem Green><AiFillPlayCircle style={{fontSize: 'larger'}}/> &nbsp; Listen</DisplayItem>
</WarppedDate>
</div>
</JustifyContent>
<ArticleHr Primary/>
<BlogTitle>{title}</BlogTitle>
<BlogSubTitle>{subtitle}</BlogSubTitle>
<BlogDisplayImage src={images.url} alt={title} />
<BlogPhotoCredit>Photo Credit by <u>You</u></BlogPhotoCredit>
<BlogCard>
<br />
<BlogPost>
<br />
<BlogContent>{description}</BlogContent>
<br />
<br />
<BlogContent Markdown dangerouslySetInnerHTML={{ __html: marked(markdown) }}></BlogContent>
<br />
<Sticky >
<div className="bottom sticky">
<ArticleHr Primary/>
<JustifyContent SpaceAround>
<JustifyContent Font2>
<JustifyContent MarginRight>
<FaRegThumbsUp/> &nbsp; <span>1</span>
</JustifyContent>
<JustifyContent MarginRight>
<FaRegComment/> &nbsp; <span>1</span>
</JustifyContent>
</JustifyContent>
<Font2>
<FaFacebook/>
<AiFillTwitterCircle/>
<TiSocialLinkedinCircular/>
<RiShareCircleFill/>
<MdBookmarkBorder/>
</Font2>
</JustifyContent>
</div>
</Sticky>
<Newsletter/>
</BlogPost>
{/* <input type="checkbox" checked={checked}
onChange={() => props.handleCheck(_id)} /> */}
{/* <BtnRender article={props.article} deleteArticle={props.deleteArticle} /> */}
</BlogCard>
</section>
</PaddingContent>
<RelatedPosts timeFormater={timeFormater} readTime={readTime}/>
<PaddingContent>
<section>
<Alert transition="false" variant="light">
<AlertP>
You have <strong style={{ color: 'black' }}>1</strong> free member-only story left this month.&nbsp;
<AlertLink href="#">Sign up for Medium and get an extra one.</AlertLink>
</AlertP>
</Alert>
<JustifyContent AlignCenter>
<CircleImage src={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
alt="author" />
<div>
<NamePlate>Will Smith</NamePlate>
<WarppedDate>
<GrayText>{timeFormater}</GrayText>
<span>&nbsp;&#183;&nbsp;</span>
<DisplayItem>{readTime} min read &nbsp; <AiFillStar/></DisplayItem>
<span>&nbsp;&#183;&nbsp;</span>
<DisplayItem Green><AiFillPlayCircle style={{fontSize: 'larger'}}/> &nbsp; Listen</DisplayItem>
</WarppedDate>
</div>
</JustifyContent>
<ArticleHr Primary/>
<BlogTitle>{title}</BlogTitle>
<BlogSubTitle>{subtitle}</BlogSubTitle>
<BlogDisplayImage src={images.url} alt={title} />
<BlogPhotoCredit>Photo Credit by <u>You</u></BlogPhotoCredit>
<BlogCard>
<br />
<BlogPost>
<br />
<BlogContent>{description}</BlogContent>
<br />
<br />
<BlogContent Markdown dangerouslySetInnerHTML={{ __html: marked(markdown) }}></BlogContent>
<br />
<StickyFooter/>
<Newsletter/>
</BlogPost>
{/* <input type="checkbox" checked={checked}
onChange={() => props.handleCheck(_id)} /> */}
{/* <BtnRender article={props.article} deleteArticle={props.deleteArticle} /> */}
</BlogCard>
</section>
</PaddingContent>
<RelatedPosts timeFormater={timeFormater} readTime={readTime}/>
</StyledMainContainer>
)
}
Expand Down
28 changes: 28 additions & 0 deletions src/Components/Loading/Loading.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.load-page {
background: white;
overflow: hidden;
}

.loader {
width: 300px;
height: 300px;
margin: auto;
}

.loader div {
width: calc(100% - 15px);
height: calc(100% - 15px);
border: 2px solid #fff;
border-top: 2px solid lavender;
border-radius: 50%;
animation: rotate 10s linear infinite alternate-reverse;
}

@keyframes rotate {
50% {
transform: rotate(80deg);
}
100% {
transform: rotate(360deg);
}
}
29 changes: 29 additions & 0 deletions src/Components/Loading/Loading.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';

import './Loading.css';

const Loading = () => {
return (
<div className="load-page">
<div className="loader">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}

export default Loading;
91 changes: 67 additions & 24 deletions src/Components/NavBar/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,56 @@ import { Link } from "react-router-dom";
import Logo from '../../Assets/Images/logo-min.png';
import { GlobalState } from '../../GlobalState';
import {StyledHr} from '../../Layout/Hr/styledHr';
import axios from "axios";
import { AiOutlineShoppingCart } from 'react-icons/ai';


const NavBar = () => {
const state = useContext(GlobalState);
const [isLoggedIn] = state.userAPI.isLoggedIn
const [isAdmin] = state.userAPI.isAdmin
const [user] = state.userAPI.user
const [cart] = state.userAPI.cart;
const [isActive, toggle] = useReducer(
(isActive) => !isActive,
true
);

const logoutUser = async () => {
await axios.post("/api/user/logout");
localStorage.removeItem("firstLogin");
window.location.href = "/";
};

const adminRouter = () => {
return (
<>
<Link className="nav-link" to="/create_product">Create Product</Link>
<Link to="/products" className="nav-link">Products</Link>
{/* Admin User Management */}
<Link to="/users" className="nav-link">Users</Link>
</>
)};

const loggedInRouter = () => {
return (
<>
<Link to="/profile" className="nav-link">Profile</Link>
<Link to="/shop" className="nav-link">Shop</Link>
<Link className="nav-link" to="/history">History</Link>
<div className="nav-link" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<span >{cart.length}</span>
<Link to="/cart">
{" "}
<AiOutlineShoppingCart style={{marginLeft: '1rem',color: 'white'}}/>
{/* <img src={} alt="Shoppingcart" width="30" /> */}
</Link>
</div>
<Link to="/settings" className="nav-link">Settings</Link>
<Link className="nav-link" onClick={logoutUser}>Logout</Link>
</>
)};

return (
<header className="header-nav conatiner">
<div className='burger-nav'>
Expand All @@ -30,40 +68,45 @@ const NavBar = () => {
!isLoggedIn ?
<img className='nav-logo' src={Logo} alt="HoseaCodes" />
:
<h1>Welcome, {user.name.split(' ')[0]}</h1>
<h1 style={{color: 'white'}}>Welcome, {user.name.split(' ')[0]}</h1>
}
<ul className={`left-nav ${isActive ? "" : "left-nav open"}`}>
<Link to="/" className="nav-link active">Home</Link>
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Portfolio</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<a href="http://www.dominiquehosea.com" rel="noopener noreferrer"
target="_blank" className="dropdown-item nav-link">Backend Portfolio</a>
<a href="/project" rel="noopener noreferrer"
className="dropdown-item nav-link">Project Case Studies</a>
</div>
</li>
<Link to="/blog" className="nav-link">Blog</Link>
<Link to="/about" className="nav-link">About</Link>
<Link to="/contact" className="nav-link">Contact</Link>
{isAdmin && adminRouter()}
{
isLoggedIn ?
<>
<Link to="/profile" className="nav-link">Profile</Link>
</>
loggedInRouter()
:
null
}
{
isAdmin ?
<>
<Link to="/settings" className="nav-link">Settings</Link>
<li className="dropdown">
<a className="nav-link dropdown-toggle" href="/"
id="navdrop" role="button" data-toggle="dropdown"
data-hover="dropdown">Portfolio</a>
<div className="dropdown-menu" aria-labelledby="navdrop">
<a href="http://www.dominiquehosea.com" rel="noopener noreferrer"
target="_blank" className="dropdown-item nav-link">Backend Portfolio</a>
<a href="/project" rel="noopener noreferrer"
className="dropdown-item nav-link">Project Case Studies</a>
</div>
</li>
<Link to="/about" className="nav-link">About</Link>
<Link to="/contact" className="nav-link">Contact</Link>
</>
:
null
}

{/* {isAdmin ?
("")
:
(
<div className="cart-icon">
<span>{cart.length}</span>
<Link to="/cart">
{" "}
<img src={Cart} alt="Shoppingcart" width="30" />
</Link>
</div>
)} */}
</ul>
</nav>
<StyledHr Primary/>
Expand Down
Loading

0 comments on commit 39f5ea4

Please sign in to comment.