From 7d412ad439722328697b75d79d9fa48cfd259ddb Mon Sep 17 00:00:00 2001
From: Alikia2x <ziwen243@outlook.com>
Date: Fri, 5 Apr 2024 00:09:55 +0800
Subject: [PATCH] debug: hydration error

---
 components/background.tsx          | 85 ++++++++++++++++--------------
 components/backgroundContainer.tsx | 39 ++++++++++++++
 components/index.tsx               | 32 +++--------
 3 files changed, 92 insertions(+), 64 deletions(-)
 create mode 100644 components/backgroundContainer.tsx

diff --git a/components/background.tsx b/components/background.tsx
index 97d6b6d..eee6090 100644
--- a/components/background.tsx
+++ b/components/background.tsx
@@ -1,41 +1,48 @@
-import Image from "next/image";
-import { useRecoilValue } from "recoil";
-import { settingsState } from "./state/settings";
-import validUrl from "valid-url";
-import validateColor from "validate-color";
+"use client";
 
-function Background(props: {
-    isFocus: boolean;
-    src: string;
-    onClick: () => void;
-}) {
-    const settings = useRecoilValue(settingsState);
-    if (validateColor(props.src)) {
-        return (
-            <div
-                className="w-full h-full fixed object-cover inset-0 duration-200 z-0"
-                style={{ backgroundColor: props.src }}
-                onClick={props.onClick}
-            ></div>
-        );
-    } else if (validUrl.isWebUri(props.src)) {
-        return (
-            <Image
-                src={props.src}
-                className={
-                    "w-full h-full fixed object-cover inset-0 duration-200 z-0 " +
-                    (props.isFocus
-                        ? settings.bgBlur
-                            ? "blur-lg scale-110"
-                            : "brightness-50 scale-105"
-                        : "")
-                }
-                alt="background"
-                onClick={props.onClick}
-                fill={true}
-            />
-        );
-    }
+import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { bgFocusState } from "./state/background";
+
+import dynamic from "next/dynamic";
+
+const Background = dynamic(() => import("./backgroundContainer"), { ssr: false });
+
+export default function () {
+    const [isFocus, setFocus] = useRecoilState(bgFocusState);
+    const [colorScheme, setColorScheme] = useState("light");
+
+    useEffect(() => {
+        const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+        setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
+
+        const handleChange = () => {
+            setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
+        };
+
+        colorSchemeQueryList.addEventListener("change", handleChange);
+
+        return () => {
+            colorSchemeQueryList.removeEventListener("change", handleChange);
+        };
+    }, []);
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return (
+        <div suppressHydrationWarning>
+            {isClient && (
+                <div>
+                    {colorScheme === "dark" && (
+                        <Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
+                    )}
+                    {colorScheme === "light" && (
+                        <Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />
+                    )}
+                </div>
+            )}
+        </div>
+    );
 }
-
-export default Background;
diff --git a/components/backgroundContainer.tsx b/components/backgroundContainer.tsx
new file mode 100644
index 0000000..dc8a021
--- /dev/null
+++ b/components/backgroundContainer.tsx
@@ -0,0 +1,39 @@
+import Image from "next/image";
+import { useRecoilValue } from "recoil";
+import { settingsState } from "./state/settings";
+import validUrl from "valid-url";
+import validateColor from "validate-color";
+
+export default function(props: {
+    isFocus: boolean;
+    src: string;
+    onClick: () => void;
+}) {
+    const settings = useRecoilValue(settingsState);
+    if (validateColor(props.src)) {
+        return (
+            <div
+                className="w-full h-full fixed object-cover inset-0 duration-200 z-0"
+                style={{ backgroundColor: props.src }}
+                onClick={props.onClick}
+            ></div>
+        );
+    } else if (validUrl.isWebUri(props.src)) {
+        return (
+            <Image
+                src={props.src}
+                className={
+                    "w-full h-full fixed object-cover inset-0 duration-200 z-0 " +
+                    (props.isFocus
+                        ? settings.bgBlur
+                            ? "blur-lg scale-110"
+                            : "brightness-50 scale-105"
+                        : "")
+                }
+                alt="background"
+                onClick={props.onClick}
+                fill={true}
+            />
+        );
+    }
+}
\ No newline at end of file
diff --git a/components/index.tsx b/components/index.tsx
index eadbc78..5ed1331 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -1,41 +1,25 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { useRecoilState } from "recoil";
+import { useEffect } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import { settingsState } from "./state/settings";
-import Background from "./background";
 import Search from "./search/search";
 import { bgFocusState } from "./state/background";
 import Time from "./time";
 import loadSettings from "@/lib/loadSettings";
 import EngineSelector from "./search/engineSelector";
-import SuggestionBox from "./search/onesearch/suggestionBox";
-import Suggestion from "./search/onesearch/suggestion";
 import Onesearch from "./search/onesearch/onesearch";
+import Background from "./background";
+
 
 export default function Homepage() {
     const [settings, setSettings] = useRecoilState(settingsState);
-    const [isFocus, setFocus] = useRecoilState(bgFocusState);
-    const [colorScheme, setColorScheme] = useState("");
+    const setFocus = useSetRecoilState(bgFocusState);
 
     useEffect(() => {
         loadSettings(setSettings);
     }, [setSettings]);
 
-    useEffect(() => {
-        const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
-        setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
-
-        const handleChange = () => {
-            setColorScheme(colorSchemeQueryList.matches ? "dark" : "light");
-        };
-
-        colorSchemeQueryList.addEventListener("change", handleChange);
-
-        return () => {
-            colorSchemeQueryList.removeEventListener("change", handleChange);
-        };
-    }, []);
 
     return (
         <div className="h-full fixed overflow-hidden w-full bg-black">
@@ -43,12 +27,10 @@ export default function Homepage() {
             <EngineSelector className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
             left-1/2 w-11/12 sm:w-[700px] text:black text-right
             dark:text-white text-3xl text-shadow-lg z-10"/>
-            {colorScheme === "dark" && (
-                <Background src="rgb(23,25,29)" isFocus={isFocus} onClick={() => setFocus(false)} />
-            )}
-            {colorScheme === "light" && <Background src="white" isFocus={isFocus} onClick={() => setFocus(false)} />}
+            <Background />
             <Search onFocus={() => setFocus(true)} />
             <Onesearch />
+            <p className="z-20 relative text-white text-2xl">FUCK YOU SSR</p>
         </div>
     );
 }