Skip to content

N
NextJs-Blog
Commit ee34d3ad by Madhankumar
Options

fetch from server

parent 9fa4af0d
Showing with 39 additions and 41 deletions
app/container.js
"use client";
import { useEffect, useState } from "react";
import BlogLists from "@components/top-level/blog-lists";
import Loading from "./loading";
import { useAppContext } from "@context/index";
import styles from "./container.module.css";
export default function BlogContainer({ blogs }) {
const { input } = useAppContext();
const [filteredBlogs, setFilteredBlogs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
handleBlogs();
}, [input, blogs]); // Added 'blogs' as a dependency
const handleBlogs = () => {
setLoading(true); // Set loading state to true when starting to filter
const filtered = blogs.filter((blog) => {
const lowerCaseBlogTitle = blog.title.toLowerCase();
const lowerCaseInput = input.toLowerCase();
......@@ -20,11 +24,14 @@ export default function BlogContainer({ blogs }) {
});
setFilteredBlogs(filtered);
setLoading(false); // Set loading state to false when filtering is complete
};
console.log("dfh", filteredBlogs);
return (
<>
{filteredBlogs.length ? (
{loading ? (
<Loading />
) : filteredBlogs.length ? (
<BlogLists
title="Lifestyle"
description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
......
app/layout.js
"use client";
import { useState, useEffect } from "react";
import { ThemeProvider } from "@context/index";
import Loading from "./loading";
import "./globals.css";
export default function RootLayout({ children, header }) {
const [themeClass, setThemeClass] = useState("loading");
useEffect(() => {
// Check if localStorage is available (client-side)
const storedThemeClass =
typeof window !== "undefined" ? localStorage.getItem("theme") : "";
// Simulate an asynchronous operation (e.g., fetching theme data)
setTimeout(() => {
// Set the theme class, or use a default value if not found
setThemeClass(storedThemeClass || "defaultTheme");
}, 1000); // Adjust the delay as needed
}, []); // Empty dependency array ensures the effect runs once, similar to componentDidMount
const themeClass =
typeof window !== "undefined" ? localStorage.getItem("theme") : "light";
return (
<ThemeProvider>
<html lang="en" className={themeClass}>
<body>
{themeClass === "loading" ? (
<Loading />
) : (
<div id="root">
{header}
{children}
</div>
)}
</body>
</html>
</ThemeProvider>
......
app/page.js
"use client";
import React, { useState, useEffect } from "react";
import BlogContainer from "./container";
import Loading from "./loading";
import { getAllPosts } from "@lib/posts";
import styles from "./page.module.css";
import Loading from "./loading";
const Home = () => {
const [loading, setLoading] = useState(true);
const [blogs, setBlogs] = useState([]);
useEffect(() => {
const fetchData = async () => {
let blogs;
const fetchData = () => {
try {
const response = await fetch(`http://localhost:3000/api/posts`);
const fetchedBlogs = await response.json();
setBlogs(fetchedBlogs);
setLoading(false);
blogs = getAllPosts("posts");
} catch (error) {
console.error("Error fetching blogs:", error);
}
};
fetchData();
}, []);
return (
<div className={styles.container}>
{loading ? <Loading /> : <BlogContainer blogs={blogs} />}
{blogs.length ? <BlogContainer blogs={blogs} /> : <Loading />}
</div>
);
};
......
components/base/search/index.js
"use client";
import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Icons from "@components/base/icons";
import styles from "./styles.module.css";
......@@ -53,4 +54,8 @@ const Search = ({ onSearch, onClose }) => {
);
};
Search.propTypes = {
onSearch: PropTypes.func,
onClose: PropTypes.func,
};
export default Search;
components/top-level/blog-lists/index.js
"use client";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import Card from "@components/base/card";
import Pagination from "@components/top-level/pagination";
import { useSearchParams } from "next/navigation";
import styles from "./styles.module.css";
const BlogLists = ({ title, description, blogs }) => {
console.log("xfkjhb", blogs);
const searchParams = useSearchParams();
let searchPage = searchParams.get("page");
console.log("iuh", searchPage);
const length = blogs.length;
const itemsPerPage = 6;
const [currentPage, setCurrentPage] = useState(1);
const [currentPage, setCurrentPage] = useState(searchPage);
// Calculate the start and end indices for the current page
const startIndex = blogs.length > 6 ? (currentPage - 1) * itemsPerPage : 0;
const endIndex = startIndex + itemsPerPage;
const slicedData = blogs.slice(startIndex, endIndex);
useEffect(() => {
setCurrentPage(parseInt(searchPage));
}, [searchPage]);
// Handle page change
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
......@@ -23,7 +29,7 @@ const BlogLists = ({ title, description, blogs }) => {
return (
<div className={styles["blog-container"]}>
<h1 className={styles.title}>{title}</h1>
<h2 className={styles.title}>{title}</h2>
<p className={styles.description}>{description}</p>
<div className={styles.row}>
{slicedData.map((blogData, i) => (
......
components/top-level/pagination/index.js
import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Button from "@components/base/button";
import { useRouter } from "next/navigation";
import styles from "./styles.module.css";
function Pagination({ total, currentPage, onPageChange, perPage }) {
const router = useRouter();
//Set number of pages
const numberOfPages = [];
const totalPages = Math.ceil(total / perPage);
const totalPage = totalPages <= 1 ? 1 : totalPages;
for (let i = 1; i <= totalPage; i++) {
numberOfPages.push(i);
......@@ -56,6 +57,8 @@ function Pagination({ total, currentPage, onPageChange, perPage }) {
//update currentButton value if currentPageNo changes
useEffect(() => {
setCurrentButton(currentPage);
router.push(`/?page=${currentPage}`);
}, [currentPage]);
//onClick function
......
components/top-level/single-blog/index.js
......@@ -16,7 +16,7 @@ function SingleBlog({
return (
<div className={styles["container"]}>
<div className={styles.headtitle}>
<h2 className={styles.title}>{title}</h2>
<h1 className={styles.title}>{title}</h1>
</div>
<div className={styles["blog-list"]}>
<ul>
......@@ -71,9 +71,9 @@ function SingleBlog({
SingleBlog.propTypes = {
title: PropTypes.string,
publishedDate: PropTypes.string,
author: {
author: PropTypes.shape({
name: PropTypes.string,
},
}),
blogImage: PropTypes.shape({
url: PropTypes.string,
width: PropTypes.number,
......
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