Skip to content

Commit

Permalink
fix(*): update logged in blog management
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed Apr 11, 2024
1 parent 7f851dd commit 27da74e
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 12 deletions.
4 changes: 4 additions & 0 deletions src/Components/NavBar/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ import { Link } from "react-router-dom";
import { GlobalState } from '../../GlobalState';
import {StyledHr} from '../../Layout/Hr/styledHr';
import { AiOutlineShoppingCart } from 'react-icons/ai';
import { useCookies } from "react-cookie";


const NavBar = () => {
const [cookies, setCookie, removeCookie] = useCookies(["cookie-name"]);
const state = useContext(GlobalState);
const [isLoggedIn] = state.userAPI.isLoggedIn
const [isAdmin] = state.userAPI.isAdmin
Expand All @@ -23,6 +25,8 @@ const NavBar = () => {
const logoutUser = async () => {
await axios.post("/api/user/logout");
localStorage.removeItem("firstLogin");
localStorage.removeItem("isLoggedIn");
removeCookie("accesstoken");
window.location.href = "/";
};

Expand Down
4 changes: 1 addition & 3 deletions src/Pages/Articles/Articles.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import "react-loading-skeleton/dist/skeleton.css";
import axios from "axios";
import Pagination from "../../Components/Pagination/pagination";
import { StyledHr } from "../../Layout/Hr/styledHr";
import { truncate } from "../../Utils/helperFunctions";

const Articles = () => {
const [isMobileView, setIsMobileView] = useState(false);
Expand Down Expand Up @@ -46,9 +47,6 @@ const Articles = () => {
.filter(article => article !== currentPosts)
.slice(0, 5);

const truncate = str => {
return str.length > 10 ? str.substring(0, 150) + "..." : str;
};
const paginate = pageNum => setCurrentPage(pageNum);

const nextPage = () => {
Expand Down
195 changes: 187 additions & 8 deletions src/Pages/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useContext, useEffect } from "react";
import "../Home/Home.css";
import SocialMedia from "../../Components/SocialMedia/SocialMedia";
import PersonalBrand from "../../Components/PersonalBrand/PersonalBrandOriginal";
Expand All @@ -9,11 +9,177 @@ import ProjectHighlight from "../../Components/Project/projectHighlight";
import Hero from "../../Components/Hero/hero";
import { StyledHr } from "../../Layout/Hr/styledHr";
import { AncorButton } from "../../Components/Button/AncorButton";
import { GlobalState } from "../../GlobalState";
import { truncate } from "../../Utils/helperFunctions";
import moment from "moment-timezone";
import { HeroText } from "../../Layout/Hero/styledHero";

const Home = () => {
return (
<>
<section className="home-page">
const state = useContext(GlobalState);
const [isLoggedIn] = state.userAPI.isLoggedIn;
const [articles] = state.articlesAPI.articles;
useEffect(() => {
console.log({ articles });
}, [articles]);

if (!articles && isLoggedIn) return <>loading...</>;
const mainPosts = articles.sort(
(a, b) => new Date(b.createdAt) - new Date(a.createdAt)
);

const loggedInHome = () => {
return (
<>
<div className="homepage-combo">
<div className="d-none d-md-block">
<HeroText>All Blog Posts</HeroText>
{mainPosts.map((article) => {
const timeFormater = moment
.utc(article.createdAt)
.format("MMMM Do YYYY");
const updateTimeFormater = moment
.utc(article.updatedAt)
.format("MMMM Do YYYY");
return (
<section className="list-group">
<li className="list-group-item">
<div className="mr-5 d-flex flex-row justify-content-end align-items-center">
<div className="p-2 d-flex flex-row justify-content-between align-items-center">
<input
className="form-check-input"
type="checkbox"
value=""
id="flexCheckChecked"
// checked
/>
&nbsp;&nbsp;
<label
className="form-check-label"
for="flexCheckChecked"
>
Draft
</label>
</div>
<br />
<div className="p-2 d-flex flex-row justify-content-between align-items-center">
<input
className="form-check-input"
type="checkbox"
value=""
id="flexCheckChecked"
// checked
/>
&nbsp;&nbsp;
<label
className="form-check-label"
for="flexCheckChecked"
>
Archive
</label>
</div>
<div className="p-2 d-flex flex-row justify-content-between align-items-center">
<input
className="form-check-input"
type="checkbox"
value=""
id="flexCheckChecked"
// checked
/>
&nbsp;&nbsp;
<label
className="form-check-label"
for="flexCheckChecked"
>
Delete
</label>
</div>
</div>

<a
href={`/blog/${article._id}`}
className={`list-group-item list-group-item-action ${
article[0] && "active"
}`}
aria-current="true"
>
<div className="d-flex w-100 justify-content-between">
<h5 className="mb-1">{article.title}</h5>
<div>
<small>Created On: {timeFormater}</small>
<br />
<small>Last Updated On: {updateTimeFormater}</small>
<h6 className="mb-1">
Comments: &nbsp;
<span className="badge text-bg-primary rounded-pill">
{article.comments.length}
</span>
</h6>
<h6 className="mb-1">
Likes: &nbsp;
<span className="badge text-bg-primary rounded-pill">
{article.likes}
</span>
</h6>
</div>
</div>
<br />
<p className="mb-1">{truncate(article.description)}</p>
<span>Categories: </span>
{article.categories.length >= 1 ? (
article.categories.map((category) => {
return (
<small
key={category}
style={{
backgroundColor: "#206a5d",
color: "white",
padding: ".5rem",
borderRadius: "5px",
}}
>
{category}
</small>
);
})
) : (
<small>None</small>
)}
<br />
<span>Tags: </span>
{article.tags.length >= 1 ? (
article.tags.map((tag) => {
return (
<small
key={tag}
style={{
backgroundColor: "#206a5d",
color: "white",
padding: ".5rem",
borderRadius: "5px",
}}
>
{tag}
</small>
);
})
) : (
<small>None</small>
)}
</a>
</li>
</section>
);
})}
</div>
</div>
<StyledHr Primary />
</>
);
};

const publicHome = () => {
return (
<>
<Hero
id="top"
Home
Expand Down Expand Up @@ -61,7 +227,7 @@ const Home = () => {
opacity: ".8",
textTransform: "uppercase",
textShadow: "2px 2px 2px #206a5d",
letterSpacing: "1rem"
letterSpacing: "1rem",
}}
>
Send Me A Message
Expand All @@ -81,7 +247,14 @@ const Home = () => {
</div>
<StyledHr Primary />
<br />
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'}}>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<AncorButton
primary
href="#top"
Expand All @@ -94,8 +267,14 @@ const Home = () => {
/>
</div>
</div>
</section>
</>
</>
);
};

return (
<section className="home-page">
{isLoggedIn ? loggedInHome() : publicHome()}
</section>
);
};

Expand Down
6 changes: 5 additions & 1 deletion src/Utils/helperFunctions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,8 @@ function sleep(num) {
}
}

export { copyTextToClipboard, responsive, sleep };
const truncate = (str) => {
return str.length > 10 ? str.substring(0, 150) + "..." : str;
};

export { copyTextToClipboard, responsive, sleep, truncate };

0 comments on commit 27da74e

Please sign in to comment.