code changes in header

app/@header/default.js

 "use client";
-import { useEffect } from "react";
+
 import Header from "@components/base/header";
-import { useAppContext } from "app/theme-context";
+import { useThemeContext } from "app/theme-context";
 import { useRouter } from "next/navigation";
 
 export default function PageHeader({ searchParams }) {
-  const { theme, toggleTheme, handleSearchInput, text, isDisabled } =
-    useAppContext();
+  const { theme, toggleTheme } = useThemeContext();
   const router = useRouter();
 
   const currentPage = 1; // Assuming currentPage is constant for now
   const search = searchParams.search;
 
-  useEffect(() => {
-    if (search) handleSearchInput(search, currentPage);
-  }, [search]);
-
   const handleSearch = (value) => {
-    handleSearchInput(value, currentPage);
+    const query = value
+      ? `?page=${currentPage}&search=${value}`
+      : `?page=${currentPage}`;
+    router.push(query);
   };
 
   const handleClear = () => {
-    router.push(`/?page=${currentPage}`, undefined, { shallow: true });
+    router.push(`/?page=${currentPage}`);
   };
 
   return (
@@ -31,8 +29,7 @@ export default function PageHeader({ searchParams }) {
       onThemeChange={toggleTheme}
       onSearch={handleSearch}
       onClear={handleClear}
-      value={text}
-      isDisabled={isDisabled}
+      value={search}
     />
   );
 }

app/theme-context.js

 "use client";
 import { createContext, useContext, useState, useEffect } from "react";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
+// import { useRouter, useSearchParams, usePathname } from "next/navigation";
 
 export const ThemeContext = createContext();
 
-export const useAppContext = () => useContext(ThemeContext);
+export const useThemeContext = () => 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");
+  // 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 || "light");
   }, []);
 
-  useEffect(() => {
-    setText(search || "");
-    setIsDisabled(pathName.includes("singleblog"));
-  }, [pathName, search]);
+  // useEffect(() => {
+  //   setText(search || "");
+  //   setIsDisabled(pathName.includes("singleblog"));
+  // }, [pathName, search]);
 
   const toggleTheme = () => {
     const newTheme = theme === "light" ? "dark" : "light";
@@ -31,20 +31,17 @@ export const ThemeProvider = ({ children }) => {
     setTheme(newTheme);
   };
 
-  const handleSearchInput = (value, currentPage) => {
-    setText(value);
-    const query = value
-      ? `?page=${currentPage}&search=${value}`
-      : `?page=${currentPage}`;
-    router.push(query, undefined, { shallow: true });
-  };
+  // 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 (

components/base/header/index.js

@@ -11,7 +11,6 @@ function Header({
   onClear,
   onThemeChange,
   value,
-  isDisabled,
 }) {
   const handleTheme = () => {
     onThemeChange(currentTheme);
@@ -37,7 +36,6 @@ function Header({
               onSearch={handleSearch}
               onClear={handleClear}
               value={value}
-              disabled={isDisabled}
             />
           </div>
 

components/base/search/index.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 
-const Search = ({ onSearch, onClear, value, ...props }) => {
+const Search = ({ onSearch, onClear, value }) => {
   const [inputValue, setInputValue] = useState(value);
 
   useEffect(() => {
@@ -37,7 +37,6 @@ const Search = ({ onSearch, onClear, value, ...props }) => {
         onChange={handleChange}
         onKeyUp={handleKeyPress}
         placeholder="Discover news, articles and more"
-        {...props}
       />
       {inputValue && (
         <span className={`${styles["close-icon"]}`} onClick={handleCustomClear}>

package-lock.json

@@ -13,7 +13,7 @@
         "@fortawesome/react-fontawesome": "^0.1.14",
         "classnames": "^2.3.2",
         "gray-matter": "^4.0.3",
-        "next": "^14.0.3",
+        "next": "^14.0.4",
         "path": "^0.12.7",
         "prettier": "^3.1.0",
         "react": "^18",

package.json

@@ -16,7 +16,7 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "classnames": "^2.3.2",
     "gray-matter": "^4.0.3",
-    "next": "^14.0.3",
+    "next": "^14.0.4",
     "path": "^0.12.7",
     "prettier": "^3.1.0",
     "react": "^18",