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