Move api connection from Home to Header

client/src/App.tsx

@@ -36,14 +36,7 @@ export function App() {
           <Routes>
             <Route
               path="/"
-              element={
-                <Home
-                  servers={servers}
-                  setServers={setServers}
-                  searchState={searchState}
-                  setAlertInfo={setAlertInfo}
-                />
-              }
+              element={<Home servers={servers} searchState={searchState} />}
             />
             <Route
               path="/server/:id"

client/src/apiUtil.tsx

@@ -21,7 +21,10 @@ export const fetchDemo = async () => {
   }
 };
 
-export const fetchData = async (dir = 'servers', queryParams = {}) => {
+export const fetchDataFromBackend = async (
+  dir = 'servers',
+  queryParams = {}
+) => {
   const queryString = new URLSearchParams(queryParams).toString();
   const url = `${import.meta.env.PROD ? 'https://api.ixion.dev' : 'http://localhost:8000'}/${dir}/${queryString ? `?${queryString}` : ''}`;
   try {

client/src/components/Header.tsx

@@ -8,9 +8,9 @@ import {
   Typography,
 } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { fetchData } from '../apiUtil';
+import { fetchDataFromBackend } from '../apiUtil';
 import SearchState from '../data/SearchState';
 import ServerData from '../data/ServerData';
 import AddServer from './AddServer';
@@ -36,11 +36,11 @@ export default function Header({
     setShowSearchServer((prev) => !prev);
   };
 
-  const fetchServerData = async () => {
+  const fetchServerData = useCallback(async () => {
     let data: ServerData[] = [];
     try {
       setFetchLoading(25);
-      data = await fetchData();
+      data = await fetchDataFromBackend();
     } catch (err) {
       if (err instanceof Error) {
         setAlertInfo({
@@ -59,7 +59,11 @@ export default function Header({
     setTimeout(() => {
       setFetchLoading(0);
     }, 500);
-  };
+  }, [setFetchLoading, setAlertInfo, setServers]);
+
+  useEffect(() => {
+    fetchServerData();
+  }, [fetchServerData]);
 
   return (
     <Box>

client/src/components/ServerDetailsModal.tsx

@@ -2,7 +2,7 @@ import { Info } from '@mui/icons-material';
 import { Card, IconButton, Tooltip, Typography } from '@mui/material';
 import Modal from '@mui/material/Modal';
 import { useState } from 'react';
-import { fetchData } from '../apiUtil';
+import { fetchDataFromBackend } from '../apiUtil';
 import ServerData from '../data/ServerData';
 import ServerSettingsDataGrid from './ServerSettingsDataGrid';
 
@@ -15,7 +15,7 @@ export default function ServerDetailsModal({ id }: { id: number }) {
     let data: ServerData;
     const fetchServerData = async () => {
       try {
-        data = await fetchData(`server/${id}`);
+        data = await fetchDataFromBackend(`server/${id}`);
       } catch (err) {
         if (err instanceof Error) {
           setError(err.message);

client/src/pages/Home.tsx

@@ -1,7 +1,4 @@
 import { Box } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { fetchData } from '../apiUtil';
-import { AlertResponse } from '../components/Alert';
 import ErrorCard from '../components/ErrorCard';
 import ServerCard from '../components/ServerCard';
 import SearchState from '../data/SearchState';
@@ -9,39 +6,11 @@ import ServerData from '../data/ServerData';
 
 export default function Home({
   servers,
-  setServers,
   searchState,
-  setAlertInfo,
 }: {
   servers: ServerData[];
-  setServers: React.Dispatch<React.SetStateAction<ServerData[]>>;
   searchState: SearchState;
-  setAlertInfo: React.Dispatch<React.SetStateAction<AlertResponse>>;
 }) {
-  const [error, setError] = useState<string>('');
-
-  useEffect(() => {
-    const fetchServerData = async () => {
-      let data: ServerData[] = [];
-      try {
-        data = await fetchData();
-      } catch (err) {
-        if (err instanceof Error) {
-          setAlertInfo({
-            message: err.message,
-            severity: 'error',
-          });
-        } else {
-          setError('An unknown error occurred.');
-        }
-      }
-
-      setServers(data);
-    };
-
-    fetchServerData();
-  }, [setAlertInfo, setServers]);
-
   const filterServers = (server: ServerData): boolean => {
     if (searchState.name.length > 0) {
       const serverName = server.name.toLowerCase();
@@ -156,8 +125,8 @@ export default function Home({
 
   return (
     <Box>
-      {error || filteredServers.length === 0 ? (
-        <ErrorCard error={error} />
+      {filteredServers.length === 0 ? (
+        <ErrorCard error="" />
       ) : (
         filteredServers.map((server: ServerData) => (
           <ServerCard key={server.id} server={server} />

client/src/pages/ServerDetails.tsx

@@ -17,7 +17,7 @@ import {
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { fetchData, fetchDemo } from '../apiUtil';
+import { fetchDataFromBackend, fetchDemo } from '../apiUtil';
 import { AlertResponse } from '../components/Alert';
 import ErrorCard from '../components/ErrorCard';
 import ExpansionBar from '../components/ExpansionsBar';
@@ -41,7 +41,7 @@ export default function ServerDetails({
         if (id === 'demo') {
           data = await fetchDemo();
         } else {
-          data = await fetchData(`server/${id}`);
+          data = await fetchDataFromBackend(`server/${id}`);
         }
       } catch (err) {
         if (err instanceof Error) {