myheats

commit c94994971ed9a186af78a42d94cf78686119f7cd
parent 83353f5db8b953a2e09965846066a1ca91f21add
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Mon, 13 Mar 2023 22:02:57 +0100

feat: improve signout and heatref

Diffstat:
M
src/App.js
 | 
6
+++---
M
src/Leaderboard.js
 | 
14
+++++++++++---
M
src/Rate.js
 | 
1
-

3 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -10,14 +10,14 @@ const Leaderboard = lazy(() => import('./Leaderboard'));
 
 document.title = process.env.REACT_APP_DOC_TITLE ? process.env.REACT_APP_DOC_TITLE : 'My Heats'
 
-function Layout() {
+function Layout(session) {
   return (
     <div>
       <nav>
         <ul>
           <li><Link to="/leaderboard">Leaderboard</Link></li>
           <li><Link to="/rate">Rate</Link></li>
-          <li><button onClick={() => supabase.auth.signOut()}>Sign out</button></li>
+          {session.session ? <li><button onClick={() => supabase.auth.signOut()}>Sign out {session.session.user.email}</button></li> : ""}
         </ul>
       </nav>
       <Outlet />
@@ -55,7 +55,7 @@ function App() {
       <Router>
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
-            <Route path="/" element={<Layout />}>
+            <Route path="/" element={<Layout session={session} />}>
               <Route path="/leaderboard" element={<Leaderboard />} />
               <Route path="/rate" element={<Rate session={session} />} />
               <Route path="/auth" element={<Auth />} />
diff --git a/src/Leaderboard.js b/src/Leaderboard.js
@@ -1,5 +1,5 @@
 import { supabase } from './supabaseClient'
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useEffect, useState, useRef } from 'react'
 import Select from 'react-select'
 
 async function getStartlistForHeats(heatIds) {
@@ -87,9 +87,11 @@ function rankByHeat(rankingComp) {
   }
 }
 
-async function newHeatFromLeaderboard(e, leaderboard, rankingComp, newHeatSize, newHeatName) {
+async function newHeatFromLeaderboard(e, leaderboard, rankingComp, selectHeatRef, newHeatSize, newHeatName) {
   e.preventDefault()
 
+  selectHeatRef.current.clearValue()
+
   if (leaderboard.length === 0) {
     // cannot create new heat from empty leaderboard
     return
@@ -102,7 +104,7 @@ async function newHeatFromLeaderboard(e, leaderboard, rankingComp, newHeatSize, 
     .select()
 
   if (error !== null) {
-    alert('Failed to create new heat')
+    alert('Failed to create new heat. Verify that you are signed in.')
     return
   }
 
@@ -114,6 +116,8 @@ async function newHeatFromLeaderboard(e, leaderboard, rankingComp, newHeatSize, 
       .insert({ heat: data[0].id, athlete: sortedBoard[i].athlete })
   }
 
+  // clear values in heat Select box to refresh list of heats
+  selectHeatRef.current.clearValue()
   alert('Created new heat "' + newHeatName + '" with top ' + newHeatSize + ' athletes')
 }
 
@@ -127,6 +131,8 @@ function Leaderboard() {
   const [newHeatSize, setNewHeatSize] = useState(6)
   const [newHeatName, setNewHeatName] = useState("Heat name")
 
+  const selectHeatRef = useRef();
+
   // add options to select or rank by heat
   let heatOpts = heats.map(h => {
     return {
@@ -185,6 +191,7 @@ function Leaderboard() {
             isMulti
             options={heatOpts}
             onChange={h => setHeatSelection(h)}
+            ref={selectHeatRef}
           />
           Rank by (in this order):
           <Select
@@ -205,6 +212,7 @@ function Leaderboard() {
               e,
               leaderboard,
               rankingComp,
+              selectHeatRef,
               newHeatSize,
               newHeatName
             )}>Create</button>
diff --git a/src/Rate.js b/src/Rate.js
@@ -6,7 +6,6 @@ function RatingForm(session) {
   return (
     <div>
       <h1>Rate Athletes</h1>
-      <p>Welcome <i>{session.session.user.email}</i></p>
     </div>
   )
 }