Skip to content

Instantly share code, notes, and snippets.

@Alsaheem
Created August 13, 2020 14:44
Show Gist options
  • Save Alsaheem/e57bd61f97b1b5a78ee305e27bc504aa to your computer and use it in GitHub Desktop.
Save Alsaheem/e57bd61f97b1b5a78ee305e27bc504aa to your computer and use it in GitHub Desktop.
gist for the stuff with itunu
import Layout from "../../components/layout";
import Link from "next/link";
import Head from "next/head";
import Admin from "../../components/auth/Admin";
import Card from "../../components/Card";
import React, { useState } from "react";
import { listBlogsWithCategoriesAndTags } from "../../actions/blog";
import { API, DOMAIN, APP_NAME } from "../../config";
import { withRouter } from "next/router";
const Blogs = ({
blogs,
categories,
tags,
totalBlogs,
blogsSkip,
blogsLimit,
router,
}) => {
const [limit, setLimit] = useState(blogsLimit);
const [skip, setSkip] = useState(blogsSkip);
const [size, setSize] = useState(totalBlogs);
const [loadedBlogs, setLoadedBlogs] = useState([]);
const loadMore = () => {
let toSkip = skip + limit;
listBlogsWithCategoriesAndTags(toSkip, limit).then((data) => {
if (data.error) {
console.log(data.error);
} else {
setLoadedBlogs([...loadedBlogs, ...data.blogs]);
setSize(data.size);
setSkip(toSkip);
}
});
};
const loadMoreButton = () => {
return (
size > 0 &&
size >= limit && (
<button
onClick={() => loadMore()}
className="btn btn-outline-primary btn-lg"
>
Load More
</button>
)
);
};
const showcaseAllBlogs = () => {
console.log(blogs);
return blogs.map((blog, index) => {
return <Card blog={blog} key={index} />;
});
};
const showAllCategories = () => {
return categories.map((category, index) => {
return (
<Link key={index} href={`/categories/${category.slug}`}>
<a className="btn btn-outline-success ml-1 btn-sm">{category.name}</a>
</Link>
);
});
};
const showAllTags = () => {
return tags.map((tag, index) => {
return (
<Link key={index} href={`/tags/${tag.slug}`}>
<a className="btn btn-outline-primary ml-1 btn-sm">{tag.name}</a>
</Link>
);
});
};
const showLoadedBlogs = () => {
return loadedBlogs.map((blog, index) => {
return <Card blog={blog} key={index} />;
});
};
return (
<Layout>
<main className="container-fluid">
<div className="container-fluid">
<h1 className=" font-weight-bold text-center">Blogs...</h1>
<section></section>
</div>
<div className="content text-center">
<div className="pb-5 mt-4">
{showAllCategories()}
<br />
<br />
{showAllTags()}
</div>
<div className="row">
<div className="col-md-10">
<div className="card-columns">
{showcaseAllBlogs()}
{showLoadedBlogs()}
</div>
<br />
<br />
<div className="text-center pt-5 pb-5">{loadMoreButton()}</div>
</div>
<div className="col-md-2 bg-info">
<p>jists</p>
</div>
</div>
</div>
</main>
</Layout>
);
};
Blogs.getInitialProps = () => {
let skip = 0;
let limit = 3;
return listBlogsWithCategoriesAndTags(skip, limit).then((data) => {
if (data.error) {
console.log(data.error);
} else {
return {
blogs: data.blogs,
categories: data.categories,
tags: data.tags,
blogsLimit: limit,
blogsSkip: skip,
totalBlogs: data.size,
};
}
});
};
export default withRouter(Blogs);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment