Update state rendering

frontend/src/pages/Index.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { State } from "../proto";
+import { Computer, State } from "../proto";
 import { TokenContext } from "../tokenStorage";
 
 export const Index: React.FC = () => {
 
     const tokenStorage = React.useContext(TokenContext);
-    
+
     const [state, setState] = useState<State>();
 
     useEffect(() => {
@@ -24,11 +24,52 @@ export const Index: React.FC = () => {
     }, [tokenStorage.token]);
 
     return <>
-        <p>Hallo i bims 1 index u d1 token bimst {tokenStorage.token}</p>
-        <button onClick={tokenStorage.reset}>Resetteroni</button>
-        <p>Der State ist:</p>
-        {JSON.stringify(state)}
+        <button onClick={tokenStorage.reset}>Logout</button>
+        <p>State:</p>
+        {
+            state
+                ? <Groups computers={state.computers} />
+                : <p>loading</p>
+        }
     </>
 }
 
-export default Index;
+export default Index;
+
+const Groups: React.FC<{ computers: Array<Computer> }> = ({ computers }) => {
+    const groupMap = new Map<string, Array<Computer>>();
+
+    for (const computer of computers) {
+        if (!groupMap.has(computer.group)) {
+            groupMap.set(computer.group, []);
+        }
+        groupMap.get(computer.group)!.push(computer);
+    }
+
+    return <>
+        {
+            Array.from(groupMap.entries()).map((entry, index) => {
+                const [group, computers] = entry;
+                return <div key={group}>
+                    <p>{group}:</p>
+                    <CardList computers={computers}/>
+                </div>
+            })
+        }
+    </>
+}
+
+
+const CardList: React.FC<{ computers: Array<Computer> }> = ({ computers }) => {
+    return <>
+        {computers.map(
+            (computer, index) => <ComputerCard key={computer.uuid} computer={computer} />
+        )}
+    </>
+}
+
+const ComputerCard: React.FC<{ computer: Computer }> = ({ computer }) => {
+    return <div>
+        {computer.label}
+    </div>
+}