From 1bd0d016758c0b8c233b026e8506262c42427398 Mon Sep 17 00:00:00 2001
From: Theo Brigitte <theo.brigitte@gmail.com>
Date: Wed, 6 Nov 2024 21:09:02 +0100
Subject: [PATCH] Front WIP

---
 front/src/app/components/server.tsx |  41 +++++++++-
 front/src/app/page.tsx              | 123 ++++++++++++++++------------
 2 files changed, 109 insertions(+), 55 deletions(-)

diff --git a/front/src/app/components/server.tsx b/front/src/app/components/server.tsx
index 066792c..3b52c13 100644
--- a/front/src/app/components/server.tsx
+++ b/front/src/app/components/server.tsx
@@ -3,10 +3,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
 
 interface Props {
-    servers: Array
+    data: Object
 }
 
-const ServerLine = ({servers} : Props) => {
+function ServerLines({ servers }) {
   let statusColor = new Map<string, Object>([
       ["available", {"color":"text-lime-600", "icon":faCheckCircle}],
       ["unavailable", {"color":"text-rose-600", "icon":faTimesCircle}],
@@ -23,7 +23,42 @@ const ServerLine = ({servers} : Props) => {
         <td>{server.datacenters?.join(", ")||"-"}</td>
       </tr>
     ))
+  )
+}
+
+const ServersTable = ({data} : Props) => {
+  if (!data) {
+    return
+  }
+
+  const serversbycategory = Object.groupBy(data, ({ category }) => category);
+
+  let categoryorder = { "Kimsufi": [], "So you Start": [], "Rise": [], "": [], }
+  const ordered = Object.assign(categoryorder, serversbycategory);
+
+  const tableBody = Object.entries(ordered).map(([category, servers]) => (
+    <tbody>
+      <ServerLines key={category + " servers"} servers={servers} />
+      <tr key={category + " separator0"}><td className="p-2" colSpan={6}></td></tr>
+      <tr key={category + " separator1"}><td className="p-2" colSpan={6}></td></tr>
+    </tbody>
+  ));
+
+  return (
+      <table className="text-nowrap">
+        <thead>
+          <tr>
+            <th className="p-4">Plan Code</th>
+            <th className="p-4">Category</th>
+            <th className="p-4">Name</th>
+            <th className="p-4">Price</th>
+            <th className="p-4">Status</th>
+            <th className="p-4">Datacenters</th>
+          </tr>
+        </thead>
+        {tableBody}
+      </table>
   );
 };
 
-export default ServerLine;
+export default ServersTable;
diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
index 3a7d246..a89426f 100644
--- a/front/src/app/page.tsx
+++ b/front/src/app/page.tsx
@@ -1,69 +1,88 @@
 'use client'
 
-import ServerLine from './components/server';
+import React from 'react'
+import ServersTable from './components/server';
 import useSWR from 'swr';
+import useSWRSubscription from 'swr/subscription';
 
 const getServers = () => fetch('http://127.0.0.1:8080/list').then(res => res.json());
 
-export default function Home() {
-  const { data, error, isLoading } = useSWR('/list', getServers);
-
-  let content;
+function Status({ error, data }) {
+  let message;
+  let details;
 
   if (error) {
-    content =
-    <div className="flex flex-col justify-center text-center">
-      <div className="flex flex-row justify-center">
-        <div className="w-1/2 text-right px-1">Status :</div>
-        <div className="w-1/2 text-left px-1">Failed to load server list</div>
-      </div>
-      <div className="text-orange-700 font-mono">{error.toString()}</div>
-    </div>;
-  } else if (isLoading) {
-    content =
-    <div className="flex flex-col justify-center text-center">
-      <div className="flex flex-row justify-center">
-        <div className="w-1/2 text-right px-1">Status :</div>
-        <div className="w-1/2 text-left px-1">Loading ...</div>
-      </div>
-    </div>;
-  } else {
-    const serversByCategory = Object.groupBy(data, ({ category }) => category);
+    message = "Failed to load server list"
+    details = <div className="text-orange-700">{error.toString()}</div>
+  } else if (!data||data==undefined) {
+    message = "Loading ..."
+  }
+
+  const hidden = !message && !details ? "hidden" : ""
+
+  return (
+    <div className={`basis-1/4 flex flex-col justify-center text-nowrap font-mono transition-opacity duration-[2000ms] opacity-0 ${hidden}`}>
+      <div className="px-0">{message}</div>
+      {details}
+    </div>
+  )
+}
 
-    let categoryOrder = { "Kimsufi": {}, "So you Start": {}, "Rise": {}, "": {} }
-    const ordered = Object.assign(categoryOrder, serversByCategory);
-    console.log(ordered);
+export default function Home() {
+  const [data, setData] = React.useState(null);
 
-    content = <table className="text-nowrap">
-        <thead>
-          <tr>
-            <th className="p-4">Plan Code</th>
-            <th className="p-4">Category</th>
-            <th className="p-4">Name</th>
-            <th className="p-4">Price</th>
-            <th className="p-4">Status</th>
-            <th className="p-4">Datacenters</th>
-          </tr>
-        </thead>
-        <tbody>
-          {Object.entries(ordered).map(([category, servers]) => (
-            <>
-            <ServerLine key={category} servers={servers} />
-            <tr key={category + " separator0"}><td className="p-2" colSpan={6}></td></tr>
-            <tr key={category + " separator1"}><td className="p-2" colSpan={6}></td></tr>
-            </>
-          ))}
-        </tbody>
-      </table>
+  const startWS = (key, { next }) => {
+    let socket = new WebSocket("ws://127.0.0.1:8080/listWS",'echo-protocol');
+    socket.addEventListener('message', (event) => {
+      console.log("got data", event.data.length);
+      const res = JSON.parse(event.data)
+      next(null, res)
+      setData(res)
+    })
+    socket.addEventListener('error', (event) => {
+      console.log("socket error", event.error);
+      next(event.error)
+      //ws.close()
+    })
+    socket.addEventListener('close', (event) => {
+      console.log("socket closed", event.code, event.reason);
+      next(new Error("socket closed"))
+      setTimeout(function() {
+        console.log("reconnecting");
+        startWS(key, { next })
+      }, 5000);
+    })
+    socket.addEventListener('open', () => {
+      console.log("socket open");
+    })
+    return () => socket.close()
   }
+  
+  const { error } = useSWRSubscription('/listWS', startWS)
+  const status = <Status error={error} data={data} />
 
+  //const setServers = (data) => {
+  //  setData(data);
+  //  return 5000;
+  //}
+  //const opts = {
+  //  revalidateOnFocus: false,
+  //  refreshInterval: setServers
+  //}
+  //const { error, isLoading } = useSWR('https://127.0.0.1:8080/list', getServers, opts);
+
+  console.log("in", data?.length);
 
   return (
-    <div className="flex flex-row justify-center">
-    <div className="pt-10 pb-20">
-      <h1 className="text-center text-xl font-bold p-10">OVH Eco server availability</h1>
-      {content}
-    </div>
+    <div className="">
+      <div className="pt-10 pb-20">
+        <div className="flex flex-row flex-nowrap">
+          <div className="basis-1/4 flex-none"></div>
+          <h1 className="basis-2/4 flex-none text-center text-xl font-bold p-5">OVH Eco server availability</h1>
+          {status}
+        </div>
+        <ServersTable data={data} />
+      </div>
     </div>
   );
 }