Skip to content

Commit

Permalink
Split Blog component
Browse files Browse the repository at this point in the history
  • Loading branch information
* committed Dec 31, 2023
1 parent 28f219c commit 794dfc3
Show file tree
Hide file tree
Showing 2 changed files with 146 additions and 84 deletions.
109 changes: 69 additions & 40 deletions src/pages/Blog.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useMemo } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { format } from 'date-fns';
import Sidebar from '../components/Sidebar';
Expand All @@ -9,57 +9,91 @@ import posts from './../data/posts.js';

let pageSize = 4;

function BlogArticle({
id,
picture,
picture_description,
title,
created_by= 'Administrator',
created_at,
comments_count
}) {
return (
<article className="entry">
<div className="entry-img">
<img
src={`assets/img/blog/${picture}`}
alt={picture_description}
className="img-fluid"
/>
</div>

<h2 className="entry-title">
<Link to={`/blog/${id}`}>{title}</Link>
</h2>

<div className="entry-meta">
<ul>
<li className="d-flex align-items-center">
<i className="bi bi-person"></i>
<Link to="#">{created_by}</Link>
</li>
<li className="d-flex align-items-center">
<i className="bi bi-clock"></i>
<Link to="#">
<time
dateTime={format(new Date(created_at), 'dd-mm-yyyy')}
>
{format(new Date(created_at), 'dd MMMM yyyy')}
</time>
</Link>
</li>
<li className="d-flex align-items-center">
<i className="bi bi-chat-dots"></i>
<Link to="#">{comments_count} Comments</Link>
</li>
</ul>
</div>

<div className="entry-content">
<div className="read-more">
<Link to={`/blog/${id}`}>Read More</Link>
</div>
</div>

</article>
)
}

function Blog() {
const [currentPage, setCurrentPage] = useState(1);
const [ currentPage, setCurrentPage ] = useState(1);

const currentPostsData = useMemo(() => {
const firstPageIndex = (currentPage - 1) * pageSize;
const lastPageIndex = firstPageIndex + pageSize;
const lastPageIndex = firstPageIndex + pageSize;
return posts.slice(firstPageIndex, lastPageIndex);
}, [currentPage]);

return (
<main id="main">
<Breadcrumb page="Blog" description="" />
<section id="blog" className="blog">
<div className="container" data-aos="fade-up">
<div className="container">
<div className="row">
<div className="col-lg-8 entries">
<div className="row">
{
currentPostsData.map(post => (
<div key={post.id} className="col-md-6">
<article className="entry">

<div className="entry-img">
<img src={`assets/img/blog/${post.picture}`} alt={post.picture_description} className="img-fluid" />
</div>

<h2 className="entry-title">
<Link to={`/blog/${post.id}`}>{post.title}</Link>
</h2>

<div className="entry-meta">
<ul>
<li className="d-flex align-items-center">
<i className="bi bi-person"></i> <Link to="#">{post.created_by.name}</Link>
</li>
<li className="d-flex align-items-center">
<i className="bi bi-clock"></i> <Link to="#"><time dateTime={format(new Date(post.created_at), 'dd-mm-yyyy')}>{format(new Date(post.created_at), 'dd MMMM yyyy')}</time></Link>
</li>
<li className="d-flex align-items-center">
<i className="bi bi-chat-dots"></i> <Link to="#">{post.comments_count} Comments</Link>
</li>
</ul>
</div>

<div className="entry-content">
<div className="read-more">
<Link to={`/blog/${post.id}`}>Read More</Link>
</div>
</div>

</article>
<BlogArticle
id={post.id}
title={post.title}
picture={post.picture}
picture_description={post.picture_description}
created_by={post.created_by.name}
created_at={post.created_at}
comments_count={post.comments_count}
/>
</div>
))
}
Expand Down Expand Up @@ -91,8 +125,3 @@ function Blog() {
}

export default Blog;


/*
*/
121 changes: 77 additions & 44 deletions src/pages/BlogSingle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,67 @@ import Sidebar from '../components/Sidebar';
import Breadcrumb from '../components/widget/Breadcrumb';
import posts from './../data/posts';

function Author({name, picture, bio}) {
return (
<div className="blog-author d-flex align-items-center">
<img
src={`../assets/img/blog/${picture}`}
className="rounded-circle float-left"
alt=""
/>
<div>
<h4>{name}</h4>
<div className="social-links">
<Link to="https://twitters.com/#">
<i className="bi bi-twitter"></i>
</Link>
<Link to="https://facebook.com/#">
<i className="bi bi-facebook"></i>
</Link>
<Link to="https://instagram.com/#">
<i className="biu bi-instagram"></i>
</Link>
</div>
<p>{bio}</p>
</div>
</div>
)
}

function Reply() {
return (
<div className="reply-form">
<h4>Leave a Reply</h4>
<p>Your email address will not be published. Required fields are marked * </p>
<form action="">
<div className="row">
<div className="col-md-6 form-group">
<input name="name" type="text" className="form-control" placeholder="Your Name*" />
</div>
<div className="col-md-6 form-group">
<input name="email" type="text" className="form-control" placeholder="Your Email*" />
</div>
</div>
<div className="row">
<div className="col form-group">
<input name="website" type="text" className="form-control" placeholder="Your Website" />
</div>
</div>
<div className="row">
<div className="col form-group">
<textarea name="comment" className="form-control" placeholder="Your Comment*" />
</div>
</div>
<button type="submit" className="btn btn-primary">Post Comment</button>

</form>
</div>
)
}

function BlogSingle() {
const { id } = useParams();
const post = posts.find((pt) => pt.id === parseInt(id,10))
const post = posts.find((pt) => pt.id === parseInt(id,10))

function createMarkup(val) {
return {__html: val};
Expand All @@ -30,9 +88,20 @@ function BlogSingle() {

<div className="entry-meta">
<ul>
<li className="d-flex align-items-center"><i className="bi bi-person"></i> <Link to="blog-single">{post.created_by.name}</Link></li>
<li className="d-flex align-items-center"><i className="bi bi-clock"></i> <Link to="blog-single"><time dateTime={format(new Date(post.created_at), 'dd-mm-yyyy')}>{format(new Date(post.created_at), 'dd MMMM yyyy')}</time></Link></li>
<li className="d-flex align-items-center"><i className="bi bi-chat-dots"></i> <Link to="blog-single">{post.comments_count} Comments</Link></li>
<li className="d-flex align-items-center">
<i className="bi bi-person"></i>
<Link to="blog-single">{post.created_by.name}</Link>
</li>
<li className="d-flex align-items-center">
<i className="bi bi-clock"></i>
<Link to="blog-single">
<time dateTime={format(new Date(post.created_at), 'dd-mm-yyyy')}>{format(new Date(post.created_at), 'dd MMMM yyyy')}</time>
</Link>
</li>
<li className="d-flex align-items-center">
<i className="bi bi-chat-dots"></i>
<Link to="blog-single">{post.comments_count} Comments</Link>
</li>
</ul>
</div>

Expand All @@ -54,18 +123,7 @@ function BlogSingle() {

</article>

<div className="blog-author d-flex align-items-center">
<img src={`../assets/img/blog/${post.created_by.picture}`} className="rounded-circle float-left" alt="" />
<div>
<h4>{post.created_by.name}</h4>
<div className="social-links">
<Link to="https://twitters.com/#"><i className="bi bi-twitter"></i></Link>
<Link to="https://facebook.com/#"><i className="bi bi-facebook"></i></Link>
<Link to="https://instagram.com/#"><i className="biu bi-instagram"></i></Link>
</div>
<p>{post.created_by.bio}</p>
</div>
</div>{/* end author */}
<Author />

<div className="blog-comments">

Expand All @@ -85,35 +143,10 @@ function BlogSingle() {
</>
) : <></>}

<div className="reply-form">
<h4>Leave a Reply</h4>
<p>Your email address will not be published. Required fields are marked * </p>
<form action="">
<div className="row">
<div className="col-md-6 form-group">
<input name="name" type="text" className="form-control" placeholder="Your Name*" />
</div>
<div className="col-md-6 form-group">
<input name="email" type="text" className="form-control" placeholder="Your Email*" />
</div>
</div>
<div className="row">
<div className="col form-group">
<input name="website" type="text" className="form-control" placeholder="Your Website" />
</div>
</div>
<div className="row">
<div className="col form-group">
<textarea name="comment" className="form-control" placeholder="Your Comment*"></textarea>
</div>
</div>
<button type="submit" className="btn btn-primary">Post Comment</button>

</form>

</div>
<Reply />

</div>
</div>{/* end col-lg-8 */}
</div>

<div className="col-lg-4">
<div className="sidebar">
Expand Down

0 comments on commit 794dfc3

Please sign in to comment.