myheats

commit b8e95381bf4b488d2694cd1040890e4e2ee92a20
parent d01c7a7f290538e87ea46bec2b53a5c640ca27cb
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Wed,  8 Mar 2023 19:53:21 +0100

fix: cleanup nested table

Diffstat:
M
src/App.css
 | 
6
+++++-
M
src/App.js
 | 
70
++++++++++++++++++++++++++++++++--------------------------------------

2 files changed, 37 insertions(+), 39 deletions(-)
diff --git a/src/App.css b/src/App.css
@@ -3,6 +3,10 @@ table {
 }
 
 tr, th,td {
-  border-bottom: 1px solid black;
+  border: 1px solid black;
   padding: 5px;
+}
+
+.right {
+  text-align: right;
 }
 \ No newline at end of file
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import './App.css';
-import React, { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import Select from 'react-select'
 import { createClient } from '@supabase/supabase-js'
 
@@ -48,7 +48,7 @@ async function getRatingSummary(heatIds) {
       if (summary.data.length > 0) {
         i.summary[h] = summary.data[0].rating_summary
       } else {
-        i.summary[h] = null
+        i.summary[h] = 0
       }
     }
 
@@ -75,18 +75,18 @@ function App() {
 
   // subscribe to ratings from judges and
   // reload all ratings to refresh leaderboard
-  // const channel = supabase.channel('ratings')
-  // channel.on(
-  //   'postgres_changes',
-  //   {
-  //     event: '*',
-  //     table: 'ratings',
-  //   },
-  //   async (payload) => {
-  //     let ratingSummary = await getRatingSummary(1)
-  //     setLeaderboard(ratingSummary)
-  //   }
-  // ).subscribe()
+  const channel = supabase.channel('ratings')
+  channel.on(
+    'postgres_changes',
+    {
+      event: '*',
+      table: 'ratings',
+    },
+    async (payload) => {
+      let ratingSummary = await getRatingSummary(1)
+      setLeaderboard(ratingSummary)
+    }
+  ).subscribe()
 
   return (
     <div className="App">
@@ -103,7 +103,7 @@ function App() {
             onChange={h => setHeatSelection(h)}
           />
         </div>
-        <h1>Leaderboard</h1>
+        <h1>🏅 Leaderboard</h1>
       </header>
       <table>
         <thead>
@@ -113,8 +113,17 @@ function App() {
             <th>Lastname</th>
             <th>Birthday</th>
             <th>School</th>
-            <th>Ratings</th>
-            <th>Summary</th>
+            <th colSpan={heatSelection.length*2}>Ratings & Total</th>
+          </tr>
+          <tr>
+            <th></th>
+            <th></th>
+            <th></th>
+            <th></th>
+            <th></th>
+            {heatSelection.map(h => (
+              <th key={h.value} colSpan={2}>{h.label}</th>
+            ))}
           </tr>
         </thead>
         <tbody>
@@ -125,27 +134,12 @@ function App() {
             <td>{i.lastname}</td>
             <td>{i.birthday}</td>
             <td>{i.school}</td>
-            <td>
-              {heatSelection.map(h => (
-                <table key={h.value}>
-                  <thead>
-                    <tr>
-                      <th>{h.label}</th>
-                    </tr>
-                    <tr>
-                      <th>Ratings</th>
-                      <th>Summary</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>{i.ratings[h.value]?.map(r => r.rating).join(" / ")}</td>
-                      <td>{i.summary[h.value]}</td>
-                    </tr>
-                  </tbody>
-                  </table>
-              ))}
-            </td>
+            {heatSelection.map(h => (
+              <Fragment key={h.value}>
+                <td className='right'>{i.ratings[h.value]?.map(r => r.rating).join(" / ")}</td>
+                <td className='right'>{i.summary[h.value]}</td>
+              </Fragment>
+            ))}
           </tr>
         ))}
         </tbody>