Fixes

frontend/src/Components/ServerSearch/ServerSearch.tsx

@@ -10,7 +10,7 @@ interface ServerSearchProps {
 }
 
 const ServerSearch = ({ searchTerm, server }: ServerSearchProps) => {
-  const [searchResults, setSearchResults] = useState<Array<SearchResult>>([]);
+  const [searchResults, setSearchResults] = useState<Array<SearchResult | undefined>>();
 
   useEffect(() => {
     search(searchTerm, server.id).then(results => {
@@ -28,16 +28,23 @@ const ServerSearch = ({ searchTerm, server }: ServerSearchProps) => {
         </tr>
       </thead>
       <tbody>
-        {searchResults.length > 0 ?
-          searchResults.map(result => {
-            return (
-              <tr>
-                <td>
-                  <ServerSearchResult key={result.id} searchResult={result} server={server} />
-                </td>
-              </tr>
-            )
-          })
+        {searchResults ?
+          searchResults.length > 0 ?
+            searchResults.map(result => {
+              return (
+                <tr>
+                  <td>
+                    <ServerSearchResult key={result!.id} searchResult={result!} server={server} />
+                  </td>
+                </tr>
+              )
+            })
+            :
+            <tr>
+              <td>
+                <h1>No results found</h1>
+              </td>
+            </tr>
           :
           <Spinner />
         }

frontend/src/Lib/Servers.ts

@@ -10,7 +10,10 @@ export interface Server {
 }
 
 export const getServerList = async (): Promise<Array<Server>> => {
+  console.log("fetching server list");
   const response = await axios.get<Array<Server>>(`${apiUrl}/servers`);
 
+  console.log(response);
+
   return response.data;
 }

frontend/src/Pages/Search/Search.tsx

@@ -19,6 +19,9 @@ const Search = () => {
     }
 
     getServerList().then(servers => {
+      if (servers.length === 0) {
+        alert("No servers found");
+      }
       setServers(servers);
     }).catch(e => {
       alert(e);