fixed search results not getting cleared when doing another search

frontend/src/Pages/Search/Search.tsx

@@ -1,20 +1,35 @@
-import { useEffect, useState } from "react";
+import { useEffect, useReducer } from "react";
 import { getServerList, type Server } from "../../Lib/Servers";
 import ServerSearch from "../../Components/ServerSearch/ServerSearch";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { Spinner } from "react-bootstrap";
 import Cookies from "js-cookie";
 
+type serverListAction = { type: "CLEAR" } | { type: "SET", payload: Server[] };
+
+const serverReducer = (state: Server[], action: serverListAction): Server[] => {
+  switch (action.type) {
+    case "CLEAR":
+      return [];
+    case "SET":
+      return action.payload;
+    default:
+      return state;
+  }
+}
 
 const Search = () => {
   const [searchParams] = useSearchParams();
-  const [servers, setServers] = useState<Array<Server>>([]);
+  // const [servers, setServers] = useState<Array<Server>>([]);
+  const [servers, serversDispatch] = useReducer(serverReducer, []);
   const navigate = useNavigate();
   const sessionCookie = Cookies.get("session");
 
   const searchTerm = searchParams.get("search") || "";
 
   useEffect(() => {
+    serversDispatch({ type: "CLEAR" });
+
     if (!sessionCookie) {
       navigate("/login");
       return;
@@ -43,11 +58,11 @@ const Search = () => {
         navigate("/");
       }
 
-      setServers(workingServers);
+      serversDispatch({ type: "SET", payload: workingServers });
     }).catch(e => {
       alert(e);
     });
-  }, [searchTerm, navigate]);
+  }, [searchTerm, navigate, sessionCookie]);
 
   return (
     <>