Skip to content

N
NextJs-Blog
Commit 6914ff67 by Madhankumar
Options

code changes

parent 644f9234
Showing with 80 additions and 57 deletions
app/@header/default.js
"use client";
import { useEffect } from "react";
import Header from "@components/base/header";
import { useAppContext } from "theme-context/index";
import { useAppContext } from "app/theme-context";
import { useRouter } from "next/navigation";
export default function PageHeader({ searchParams }) {
const { theme, toggleTheme } = useAppContext();
const { theme, toggleTheme, handleSearchInput, text, isDisabled } =
useAppContext();
const router = useRouter();
let currentPage = 1;
const urlParams = searchParams.search;
const currentPage = 1; // Assuming currentPage is constant for now
const search = searchParams.search;
useEffect(() => {
if (search) handleSearchInput(search, currentPage);
}, [search]);
const handleSearch = (value) => {
if (value) {
router.push(`/?page=${currentPage}&search=${value}`, undefined, {
shallow: true,
});
} else {
router.push(`/?page=${currentPage}`, undefined, { shallow: true });
}
handleSearchInput(value, currentPage);
};
const handleClear = () => {
......@@ -30,7 +31,8 @@ export default function PageHeader({ searchParams }) {
onThemeChange={toggleTheme}
onSearch={handleSearch}
onClear={handleClear}
value={urlParams}
value={text}
isDisabled={isDisabled}
/>
);
}
app/layout.js
import { ThemeProvider } from "theme-context/index";
import { ThemeProvider } from "app/theme-context";
import "@styles/globals.css";
export default function RootLayout({ children, header }) {
return (
<html lang="en">
<body>
<div id="root">
<ThemeProvider>
{header}
{children}
</ThemeProvider>
</div>
</body>
<ThemeProvider>
{header}
{children}
</ThemeProvider>
</html>
);
}
app/page.js
......@@ -3,34 +3,28 @@ import Pagination from "@components/top-level/pagination";
import { getPosts, getPostsBySearch } from "@lib/api";
const Home = async ({ searchParams }) => {
const pageNo = searchParams.page || 1;
const search = searchParams.search;
const { page: pageNo = 1, search } = searchParams;
if (search) {
var { blogs, total } = await getPostsBySearch("posts", pageNo, search);
} else {
var { blogs, total } = await getPosts("posts", pageNo);
}
const { blogs, total } = search
? await getPostsBySearch("posts", pageNo, search)
: await getPosts("posts", pageNo);
return (
<>
{blogs?.length ? (
<div>
<BlogLists
title="Lifestyle"
description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
blogs={blogs}
/>
<Pagination
currentPage={Number(pageNo)}
total={Number(total)}
search={search}
/>
</div>
) : (
<h2 className="center">No data found</h2>
)}
</>
return blogs?.length ? (
<div>
<BlogLists
title="Lifestyle"
description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
blogs={blogs}
/>
<Pagination
currentPage={Number(pageNo)}
total={Number(total)}
search={search}
/>
</div>
) : (
<h2 className="center">No data found</h2>
);
};
......
theme-context/index.js → app/theme-context.js
"use client";
import { createContext, useContext, useState, useEffect } from "react";
import { useRouter, useSearchParams, usePathname } from "next/navigation";
export const ThemeContext = createContext();
export const useAppContext = () => useContext(ThemeContext);
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState("light");
const [text, setText] = useState("");
const [isDisabled, setIsDisabled] = useState(false);
const router = useRouter();
const pathName = usePathname();
const searchParams = useSearchParams();
const search = searchParams.get("search");
useEffect(() => {
const storedTheme = localStorage.getItem("theme");
setTheme(storedTheme);
document.documentElement.setAttribute("class", storedTheme);
}, [theme]);
useEffect(() => {
if (!search) {
setText("");
} else {
setText(search);
}
if (pathName.includes("singleblog")) {
setIsDisabled(true);
} else {
setIsDisabled(false);
}
}, [pathName, search]);
const toggleTheme = () => {
const newTheme = theme === "light" ? "dark" : "light";
localStorage.setItem("theme", newTheme);
setTheme(newTheme);
document.documentElement.setAttribute("class", newTheme);
};
const handleSearchInput = (value, currentPage) => {
setText(value);
const query = value
? `?page=${currentPage}&search=${value}`
: `?page=${currentPage}`;
router.push(query, undefined, { shallow: true });
};
const contextValue = {
theme,
toggleTheme,
text,
handleSearchInput,
isDisabled,
};
return (
<ThemeContext.Provider value={contextValue}>
<div id="root" className={theme}>
{children}
</div>
<body className={theme}>{children}</body>
</ThemeContext.Provider>
);
};
components/base/header/index.js
......@@ -11,6 +11,7 @@ function Header({
onClear,
onThemeChange,
value,
isDisabled,
}) {
const handleTheme = () => {
onThemeChange(currentTheme);
......@@ -36,6 +37,7 @@ function Header({
onSearch={handleSearch}
onClear={handleClear}
value={value}
disabled={isDisabled}
/>
</div>
......
components/base/search/index.js
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Icons from "@components/base/icons";
import styles from "./styles.module.css";
const Search = ({ onSearch, onClear, value }) => {
const Search = ({ onSearch, onClear, value, ...props }) => {
const [inputValue, setInputValue] = useState(value);
useEffect(() => {
setInputValue(value);
}, [value]);
const handleCustomClear = () => {
onClear("");
setInputValue(""); // Reset the input value
......@@ -18,7 +21,7 @@ const Search = ({ onSearch, onClear, value }) => {
};
const handleChange = (e) => {
setInputValue(e);
setInputValue(e.target.value);
};
return (
......@@ -31,9 +34,10 @@ const Search = ({ onSearch, onClear, value }) => {
type="text"
autoFocus={true}
value={inputValue}
onChange={(e) => handleChange(e.target.value)}
onChange={handleChange}
onKeyUp={handleKeyPress}
placeholder="Discover news, articles and more"
{...props}
/>
{inputValue && (
<span className={`${styles["close-icon"]}`} onClick={handleCustomClear}>
......
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