From 6914ff6796b105221b38ee711956fe8258d44b75 Mon Sep 17 00:00:00 2001
From: Madhankumar <madhankumar.r@krds.fr>
Date: Fri, 5 Jan 2024 12:53:39 +0530
Subject: [PATCH] code changes
---
app/@header/default.js | 26 ++++++++++++++------------
app/layout.js | 14 +++++---------
app/page.js | 46 ++++++++++++++++++++--------------------------
app/theme-context.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
components/base/header/index.js | 2 ++
components/base/search/index.js | 12 ++++++++----
theme-context/index.js | 36 ------------------------------------
7 files changed, 110 insertions(+), 87 deletions(-)
create mode 100644 app/theme-context.js
delete mode 100644 theme-context/index.js
diff --git a/app/@header/default.js b/app/@header/default.js
index 5d05739..fc007b4 100644
--- a/app/@header/default.js
+++ b/app/@header/default.js
@@ -1,22 +1,23 @@
"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}
/>
);
}
diff --git a/app/layout.js b/app/layout.js
index 8a9c084..fb70d93 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,16 +1,12 @@
-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>
);
}
diff --git a/app/page.js b/app/page.js
index d6af829..9a72eb6 100644
--- a/app/page.js
+++ b/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>
);
};
diff --git a/app/theme-context.js b/app/theme-context.js
new file mode 100644
index 0000000..5584316
--- /dev/null
+++ b/app/theme-context.js
@@ -0,0 +1,61 @@
+"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);
+ }, [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);
+ };
+ 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}>
+ <body className={theme}>{children}</body>
+ </ThemeContext.Provider>
+ );
+};
diff --git a/components/base/header/index.js b/components/base/header/index.js
index 5557ee8..c0c03cc 100644
--- a/components/base/header/index.js
+++ b/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>
diff --git a/components/base/search/index.js b/components/base/search/index.js
index 8fadd8a..71c5579 100644
--- a/components/base/search/index.js
+++ b/components/base/search/index.js
@@ -1,11 +1,14 @@
-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}>
diff --git a/theme-context/index.js b/theme-context/index.js
deleted file mode 100644
index 27d20bd..0000000
--- a/theme-context/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-import { createContext, useContext, useState, useEffect } from "react";
-
-export const ThemeContext = createContext();
-
-export const useAppContext = () => useContext(ThemeContext);
-
-export const ThemeProvider = ({ children }) => {
- const [theme, setTheme] = useState("light");
-
- useEffect(() => {
- const storedTheme = localStorage.getItem("theme");
- setTheme(storedTheme);
- document.documentElement.setAttribute("class", storedTheme);
- }, [theme]);
-
- const toggleTheme = () => {
- const newTheme = theme === "light" ? "dark" : "light";
- localStorage.setItem("theme", newTheme);
- setTheme(newTheme);
- document.documentElement.setAttribute("class", newTheme);
- };
-
- const contextValue = {
- theme,
- toggleTheme,
- };
-
- return (
- <ThemeContext.Provider value={contextValue}>
- <div id="root" className={theme}>
- {children}
- </div>
- </ThemeContext.Provider>
- );
-};
--
libgit2 0.27.0