From d1457ba5a4afccea829882634f182a2bf46dfba6 Mon Sep 17 00:00:00 2001
From: Cael <MR-Addict@qq.com>
Date: Sat, 26 Oct 2024 16:56:34 +0800
Subject: [PATCH] fix: fix serach bar and refresh router when first loaded

---
 .../view/components/Searchbar/Searchbar.tsx   |  6 +--
 src/contexts/App/AppProvider.tsx              |  3 ++
 src/contexts/Popup/Popup.module.css           | 18 ---------
 src/contexts/Popup/Popup.tsx                  | 22 -----------
 src/contexts/Popup/PopupProvider.tsx          | 38 -------------------
 5 files changed, 6 insertions(+), 81 deletions(-)
 delete mode 100644 src/contexts/Popup/Popup.module.css
 delete mode 100644 src/contexts/Popup/Popup.tsx
 delete mode 100644 src/contexts/Popup/PopupProvider.tsx

diff --git a/src/app/view/components/Searchbar/Searchbar.tsx b/src/app/view/components/Searchbar/Searchbar.tsx
index 4229808..16e2dc2 100644
--- a/src/app/view/components/Searchbar/Searchbar.tsx
+++ b/src/app/view/components/Searchbar/Searchbar.tsx
@@ -12,7 +12,7 @@ export default function Searchbar() {
   const [localSearchKeywords, setLocalSearchKeywords] = useState("");
 
   useEffect(() => {
-    const timer = setTimeout(() => setSearchKeywords(localSearchKeywords), 500);
+    const timer = setTimeout(() => setSearchKeywords(localSearchKeywords.toLocaleLowerCase()), 500);
     return () => clearTimeout(timer);
   }, [localSearchKeywords]);
 
@@ -32,8 +32,8 @@ export default function Searchbar() {
       {localSearchKeywords.length !== 0 && (
         <button
           type="button"
-          aria-label="clear button"
-          className="hover:md:bg-black/30 bg-black/10 rounded-full p-1"
+          aria-label="clear"
+          className="hover:md:bg-black/20 bg-black/10 rounded-full p-1"
           onClick={() => setLocalSearchKeywords("")}
         >
           <AiOutlineClose size={13} />
diff --git a/src/contexts/App/AppProvider.tsx b/src/contexts/App/AppProvider.tsx
index 2c7436b..7487b76 100644
--- a/src/contexts/App/AppProvider.tsx
+++ b/src/contexts/App/AppProvider.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { PublicEnv, PublicEnvType } from "@/types/env";
 import { createContext, useContext, useState, useEffect } from "react";
 
@@ -16,9 +17,11 @@ interface AppContextProviderProps {
 }
 
 export const AppContextProvider = ({ children }: AppContextProviderProps) => {
+  const router = useRouter();
   const [env, setEnv] = useState<PublicEnvType | null>(null);
 
   useEffect(() => {
+    setTimeout(() => router.refresh(), 1000);
     fetch("/api/env")
       .then((res) => res.json())
       .then((res) => setEnv(PublicEnv.parse(res)));
diff --git a/src/contexts/Popup/Popup.module.css b/src/contexts/Popup/Popup.module.css
deleted file mode 100644
index df82039..0000000
--- a/src/contexts/Popup/Popup.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/* windows */
-.popupwindow {
-  @apply fixed -top-20 left-1/2 -translate-x-1/2 duration-300;
-  @apply px-4 md:px-0 w-full max-w-md z-10 translate-y-0 flex flex-col items-center;
-}
-
-.popupwindow.active {
-  @apply translate-y-36;
-}
-
-/* body */
-.popupbody {
-  @apply w-full max-w-md flex flex-row items-center gap-2 rounded-md px-4 py-3 bg-red-600 text-white;
-}
-
-.popupbody.success {
-  @apply bg-green-600;
-}
diff --git a/src/contexts/Popup/Popup.tsx b/src/contexts/Popup/Popup.tsx
deleted file mode 100644
index a3e0bd0..0000000
--- a/src/contexts/Popup/Popup.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { MdCheckCircleOutline, MdErrorOutline } from "react-icons/md";
-
-import style from "./Popup.module.css";
-
-interface Props {
-  active: boolean;
-  data: { success: boolean; message: string };
-}
-
-export default function Popup({ data, active }: Props) {
-  return (
-    <section aria-label="popup window" className={clsx(style.popupwindow, { [style.active]: active })}>
-      <div className={clsx(style.popupbody, { [style.success]: data.success })}>
-        {data.success ? <MdCheckCircleOutline size={25} /> : <MdErrorOutline size={25} />}
-        <p>{data.message}</p>
-      </div>
-    </section>
-  );
-}
diff --git a/src/contexts/Popup/PopupProvider.tsx b/src/contexts/Popup/PopupProvider.tsx
deleted file mode 100644
index 50ccdb6..0000000
--- a/src/contexts/Popup/PopupProvider.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import { createContext, useContext, useState, useEffect } from "react";
-
-import Popup from "./Popup";
-
-interface PopupContextProps {
-  popup: (data: { success: boolean; message: string }) => void;
-}
-
-const PopupContext = createContext<PopupContextProps>({
-  popup: (data: { success: boolean; message: string }) => {}
-});
-
-export const PopupContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [active, setActive] = useState(false);
-  const [data, setData] = useState({ success: false, message: "" });
-
-  function popup(data: { success: boolean; message: string }) {
-    setData(data);
-    setActive(true);
-  }
-
-  useEffect(() => {
-    const timer = setTimeout(() => setActive(false), 3000);
-
-    return () => clearTimeout(timer);
-  }, [data]);
-
-  return (
-    <PopupContext.Provider value={{ popup }}>
-      <Popup data={data} active={active} />
-      {children}
-    </PopupContext.Provider>
-  );
-};
-
-export const usePopupContext = () => useContext(PopupContext);