feat: implement dynamic server status display with loading and error …

src/components/minecraft/ServerStatus.tsx

@@ -2,22 +2,52 @@
 
 import { useState, useEffect } from "react";
 import { FiCheckCircle, FiAlertTriangle, FiClock } from "react-icons/fi";
+import { fetchWithRetry } from "../../utils/fetchWithRetry";
 
-const serverRegions = [
-  {
-    id: "aurora",
-    name: "Aurora",
-    location: "São Paulo, BR",
-    status: "online",
-    uptime: "99.98%",
-    ping: "6ms",
-    load: "Baixo",
-  },
-];
+interface ServerData {
+  name: string;
+  located: string;
+  server_isRunning: string;
+  server_status: string;
+  cpu: string;
+  ram: string;
+  uptime_days: number;
+  uptime_percentage: number;
+}
+
+interface ApiResponse {
+  status: string;
+  totalServers: number;
+  server_status: Record<string, ServerData>;
+}
 
 export default function ServerStatus() {
+  const [servers, setServers] = useState<ServerData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const [currentTime, setCurrentTime] = useState(new Date());
 
+  const fetchServerStatus = async () => {
+    try {
+      const response = await fetchWithRetry(`${process.env.NEXT_PUBLIC_API_URL}/v1/public/ServerStatus`);
+      if (!response.ok) throw new Error('Failed to fetch');
+      const data: ApiResponse = await response.json();
+      const serverList = Object.values(data.server_status);
+      setServers(serverList);
+      setLoading(false);
+      setError(null);
+    } catch (err) {
+      setError('Erro ao carregar status dos servidores');
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchServerStatus();
+    const interval = setInterval(fetchServerStatus, 60000); 
+    return () => clearInterval(interval);
+  }, []);
+
   useEffect(() => {
     const timer = setInterval(() => {
       setCurrentTime(new Date());
@@ -26,13 +56,33 @@ export default function ServerStatus() {
     return () => clearInterval(timer);
   }, []);
 
-  const formatTime = (date) => {
+  const formatTime = (date: Date) => {
     return date.toLocaleTimeString("pt-BR", {
       hour: "2-digit",
       minute: "2-digit",
     });
   };
 
+  if (loading) {
+    return (
+      <div className="card border-detail/30">
+        <div className="flex justify-center items-center h-32">
+          <span>Carregando status dos servidores...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="card border-detail/30">
+        <div className="flex justify-center items-center h-32 text-red-500">
+          <span>{error}</span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="card border-detail/30">
       <div className="flex justify-between items-center mb-6">
@@ -56,33 +106,45 @@ export default function ServerStatus() {
             </tr>
           </thead>
           <tbody>
-            {serverRegions.map((region) => (
-              <tr
-                key={region.id}
-                className="border-b border-detail/10 hover:bg-secondary/50"
-              >
-                <td className="py-3 pl-2 font-medium">{region.name}</td>
-                <td className="text-light/70">{region.location}</td>
-                <td>
-                  <div className="flex items-center">
-                    {region.status === "online" ? (
-                      <>
-                        <FiCheckCircle className="text-green-500 mr-1" />
-                        <span className="text-green-500">Online</span>
-                      </>
-                    ) : (
-                      <>
-                        <FiAlertTriangle className="text-yellow-500 mr-1" />
-                        <span className="text-yellow-500">Manutenção</span>
-                      </>
-                    )}
-                  </div>
-                </td>
-                <td>{region.uptime}</td>
-                <td>{region.ping}</td>
-                <td>{region.load}</td>
-              </tr>
-            ))}
+            {servers.map((server, index) => {
+              const status = server.server_isRunning === "running" ? "online" : "offline";
+              const uptime = `${server.uptime_percentage}%`;
+              const ping = server.located.includes("BR") ? "6-16ms" : "N/A";
+              const loadMap: Record<string, string> = {
+                critical: "Alto",
+                high: "Médio",
+                low: "Baixo"
+              };
+              const load = loadMap[server.server_status] || "Baixo";
+
+              return (
+                <tr
+                  key={index}
+                  className="border-b border-detail/10 hover:bg-secondary/50"
+                >
+                  <td className="py-3 pl-2 font-medium">{server.name}</td>
+                  <td className="text-light/70">{server.located}</td>
+                  <td>
+                    <div className="flex items-center">
+                      {status === "online" ? (
+                        <>
+                          <FiCheckCircle className="text-green-500 mr-1" />
+                          <span className="text-green-500">Online</span>
+                        </>
+                      ) : (
+                        <>
+                          <FiAlertTriangle className="text-yellow-500 mr-1" />
+                          <span className="text-yellow-500">Offline</span>
+                        </>
+                      )}
+                    </div>
+                  </td>
+                  <td>{uptime}</td>
+                  <td>{ping}</td>
+                  <td>{load}</td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>