Skip to content

N
NextJs-Blog
Commit f0939df5 by Madhankumar
Options

code changes

parent 82e10e1f
Showing with 153 additions and 111 deletions
app/@header/default.js
......@@ -19,7 +19,7 @@ export default function PageHeader({ searchParams }) {
}
};
const handleClose = () => {
const handleClear = () => {
router.push(`/?page=${currentPage}`, undefined, { shallow: true });
};
......@@ -29,7 +29,7 @@ export default function PageHeader({ searchParams }) {
currentTheme={theme}
onThemeChange={toggleTheme}
onSearch={handleSearch}
onClose={handleClose}
onClear={handleClear}
value={urlParams}
/>
);
......
app/page.js
......@@ -4,35 +4,33 @@ import { getPosts, getPostsBySearch } from "@lib/api";
import styles from "./page.module.css";
const Home = async ({ searchParams }) => {
let blogs = [];
let blogs;
let pageNo = searchParams.page || 1;
let search = searchParams.search;
let response;
response = await getPosts("posts", pageNo);
blogs = response.data;
if ("search" in searchParams && pageNo !== "") {
if ("search" in searchParams) {
if (search !== "") {
response = await getPostsBySearch("posts", pageNo, search);
blogs = response.data;
blogs = await getPostsBySearch("posts", pageNo, search);
} else {
blogs.length = 0;
blogs.data.length = 0;
}
} else {
blogs = await getPosts("posts", pageNo);
}
return (
<div className={styles.container}>
{blogs?.length ? (
{blogs.data?.length ? (
<div>
<BlogLists
title="Lifestyle"
description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
blogs={blogs}
blogs={blogs.data}
/>
<div className={styles.pagination}>
<Pagination
currentPage={Number(pageNo)}
total={Number(response.total)}
total={Number(blogs.total)}
perPage={6}
search={search}
/>
......
components/base/card/card.stories.js
......@@ -10,10 +10,12 @@ export const card = {
title: "How to get a perfect start for beginning runners",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle1.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle1.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......
components/base/card/index.js
......@@ -8,7 +8,7 @@ const Card = ({
id,
title,
description,
image,
images,
publishedDate,
author,
readingTime,
......@@ -19,9 +19,9 @@ const Card = ({
<Link href={`singleblog/${id}`}>
<Image
className={styles.img}
src={image.url}
height={image.height}
width={image.width}
src={images.card.url}
height={images.card.height}
width={images.card.width}
loading="eager"
alt={title}
/>
......@@ -57,10 +57,12 @@ const Card = ({
Card.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
image: PropTypes.shape({
url: PropTypes.string,
height: PropTypes.number,
width: PropTypes.number,
images: PropTypes.shape({
card: PropTypes.shape({
url: PropTypes.string,
height: PropTypes.number,
width: PropTypes.number,
}),
}),
publishedDate: PropTypes.string,
author: PropTypes.shape({
......
components/base/header/index.js
......@@ -8,7 +8,7 @@ function Header({
name,
currentTheme,
onSearch,
onClose,
onClear,
onThemeChange,
value,
}) {
......@@ -18,15 +18,15 @@ function Header({
const handleSearch = (value) => {
onSearch(value);
};
const handleClose = () => {
onClose("");
const handleClear = () => {
onClear("");
};
return (
<header className={styles.header}>
<div className={styles.container}>
<nav className={styles.navbar}>
<Link className={styles["navbar-brand"]} href={`/?page=1`}>
<Link className={styles["navbar-brand"]} href="/">
<Icons name="newspaper" size="large" classes="newspaper-icon" />
<h3>{name}</h3>
</Link>
......@@ -34,7 +34,7 @@ function Header({
<div className={styles.search}>
<Search
onSearch={handleSearch}
onClose={handleClose}
onClear={handleClear}
value={value}
/>
</div>
......
components/base/search/index.js
......@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
import Icons from "@components/base/icons";
import styles from "./styles.module.css";
const Search = ({ onSearch, onClose, value }) => {
const Search = ({ onSearch, onClear, value }) => {
const [inputValue, setInputValue] = useState(value);
const handleCustomClear = () => {
onClose("");
onClear("");
setInputValue(""); // Reset the input value
};
......@@ -46,7 +46,7 @@ const Search = ({ onSearch, onClose, value }) => {
Search.propTypes = {
onSearch: PropTypes.func,
onClose: PropTypes.func,
onClear: PropTypes.func,
};
export default Search;
components/base/search/search.stories.js
......@@ -4,7 +4,7 @@ export default {
component: Search,
argTypes: {
onSearch: { actions: "onSearch" },
onClose: { actions: "onClose" },
onClear: { actions: "onClear" },
},
};
export const search = {};
components/top-level/blog-lists/blog-lists.stories.js
......@@ -14,10 +14,12 @@ export const blogLists = {
title: "How to get perfect start for beginning runners",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle1.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle1.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......@@ -36,10 +38,12 @@ export const blogLists = {
title: "Great tools to improve your personal blogging experience",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle2.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle2.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
......@@ -59,10 +63,12 @@ export const blogLists = {
title: "Blog Guide: How to Start a Personal blog on WordPress",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle3.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle3.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......@@ -81,10 +87,12 @@ export const blogLists = {
title: "The technical setup when starting a personal blog",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle4.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle4.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......@@ -102,10 +110,12 @@ export const blogLists = {
title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle5.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle5.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......@@ -124,10 +134,12 @@ export const blogLists = {
title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......@@ -145,10 +157,12 @@ export const blogLists = {
title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......@@ -166,10 +180,12 @@ export const blogLists = {
title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......@@ -187,10 +203,12 @@ export const blogLists = {
title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
image: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
images: {
card: {
url: require("@img/lifestyle6.jpg").default.src,
width: 470,
height: 300,
},
},
publishedDate: "July 13, 2020.",
author: {
......
components/top-level/pagination/index.js
......@@ -2,10 +2,8 @@ import PropTypes from "prop-types";
import Button from "@components/base/button";
import styles from "./styles.module.css";
function Pagination({ total, currentPage, perPage, search }) {
const totalPages = Math.ceil(total / perPage);
const totalPage = totalPages <= 1 ? 1 : totalPages;
function Pagination({ total, currentPage, search }) {
const totalPage = total <= 1 ? 1 : total;
const numberOfPages = [];
for (let i = 1; i <= totalPage; i++) {
numberOfPages.push(i);
......@@ -89,8 +87,7 @@ function Pagination({ total, currentPage, perPage, search }) {
Pagination.propTypes = {
total: PropTypes.number.isRequired,
currentPage: PropTypes.number,
onPageChange: PropTypes.func,
currentPage: PropTypes.number.isRequired,
};
export default Pagination;
components/top-level/pagination/pagination.stories.js
......@@ -2,15 +2,12 @@ import Pagination from "@components/top-level/pagination/index";
export default {
title: "Top-Level/Pagination",
component: Pagination,
argTypes: {
onPageChange: { actions: "onPageChange" },
},
argTypes: {},
};
export const pagination = {
args: {
total: 10,
currentPage: 1,
perPage: 2,
},
};
components/top-level/single-blog/index.js
......@@ -8,7 +8,7 @@ function SingleBlog({
title,
publishedDate,
author,
blogImage,
images,
category,
readingTime,
categories,
......@@ -49,10 +49,10 @@ function SingleBlog({
<div className={styles.blogImage}>
<Image
className={styles.img}
src={blogImage.url}
src={images.banner.url}
alt={author.name}
width={blogImage.width}
height={blogImage.height}
width={images.banner.width}
height={images.banner.height}
/>
</div>
<div className={styles.blogContent}>
......
components/top-level/single-blog/single-blog.stories.js
......@@ -10,10 +10,12 @@ export const singleBlog = {
author: {
name: "Charlotte mia",
},
blogImage: {
url: require("@img/blogsingle.jpg").default.src,
width: 1920,
height: 500,
images: {
banner: {
url: require("@img/blogsingle.jpg").default.src,
width: 1920,
height: 500,
},
},
category: "Fashion",
......
context/index.js
......@@ -7,7 +7,6 @@ export const useAppContext = () => useContext(ThemeContext);
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState("light");
const [input, setInput] = useState("");
useEffect(() => {
const storedTheme = localStorage.getItem("theme") || "light";
......@@ -25,8 +24,6 @@ export const ThemeProvider = ({ children }) => {
const contextValue = {
theme,
toggleTheme,
input,
setInput,
};
return (
......
lib/api.js
......@@ -59,7 +59,9 @@ function getSlicedPost(post, page) {
const slicedData = Array.isArray(post)
? post.slice(startIndex, endIndex)
: [];
const response = { data: slicedData, total: post?.length };
const totalPages = Math.ceil(post?.length / itemsPerPage);
const response = { data: slicedData, total: totalPages };
return response;
}
......
posts/blog1.md
---
id: 1
image: { url: "/images/lifestyle1.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle1.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "How to get a perfect start for beginning runners"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -12,7 +16,6 @@ publishedDate: "2023-05-14."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog2.md
---
id: 2
image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle2.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "Great tools to improve your personal blogging experience"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -12,7 +16,6 @@ publishedDate: "2023-03-24."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog3.md
---
id: 3
image: { url: "/images/lifestyle3.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle3.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "Blog Guide: How to Start a Personal Blog on WordPress"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -12,7 +16,6 @@ publishedDate: "2023-07-18."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog4.md
---
id: 4
image: { url: "/images/lifestyle4.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle4.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "The technical setup when starting a personal blog"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -12,7 +16,6 @@ publishedDate: "2023-07-12."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog5.md
---
id: 5
image: { url: "/images/lifestyle5.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle5.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -9,7 +13,6 @@ publishedDate: "2023-01-09."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog6.md
---
id: 6
image: { url: "/images/lifestyle6.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle6.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "Blog Guide: How to Start a Personal Blog on WordPress"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -12,7 +16,6 @@ publishedDate: "2023-09-20."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog7.md
---
id: 7
image: { url: "/images/lifestyle7.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle7.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "How to get a perfect start for beginning runners"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -9,7 +13,6 @@ publishedDate: "2023-08-28."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog8.md
---
id: 8
image: { url: "/images/lifestyle8.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle8.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "Great tools to improve your personal blogging experience"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -9,7 +13,6 @@ publishedDate: "2023-02-16."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
posts/blog9.md
---
id: 9
image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
images:
{
card: { url: "/images/lifestyle2.jpg", width: 470, height: 300 },
banner: { url: "/images/blogsingle.jpg", width: 1920, height: 500 },
}
title: "How to get a perfect start for beginning runners"
description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
author:
......@@ -12,7 +16,6 @@ publishedDate: "2023-10-11."
readingTime: "1 min"
category: "Fashion"
categories: ["Fashion", "Beauty"]
blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
---
### How to create an Art that shows the beauty in everyone ideas of flaws.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment