FINALLY

frontend/src/RelayForm.tsx

@@ -4,7 +4,8 @@ import SolverForm from "./SolverForm";
 import axios from "axios";
 
 type Assignment = {
-  [solver: string]: string[];
+  solver: string;
+  events: string[];
 };
 
 const backend = axios.create({ baseURL: "http://localhost:8080" });
@@ -66,8 +67,14 @@ const RelayForm: React.FC = () => {
       .post("/relay", data)
       .then((response) => {
         setRelayTime(response.data.response.time);
-        console.log("assi", response.data.response.assignment);
-        setAssignments(response.data.response.assignment);
+        setAssignments(
+          Object.entries(response.data.response.assignment).map(
+            ([solver, events]) => ({
+              solver,
+              events: events as string[],
+            }),
+          ),
+        );
       })
       .catch((error) => {
         console.error(error);
@@ -92,7 +99,19 @@ const RelayForm: React.FC = () => {
         <Statistic title="Relay Time" value={relayTime} precision={2} />
       </Space>
       <Space>
-        {Object.entries(assignments).toString()}
+        {assignments.map((assignment, index) => (
+          <Card
+            key={index}
+            title={assignment.solver}
+            style={{ width: 300, margin: "16px" }}
+          >
+            <div>
+              {assignment.events.map((event, idx) => (
+                <Tag key={idx}>{event}</Tag>
+              ))}
+            </div>
+          </Card>
+        ))}
       </Space>
     </Space>
   );