myheats

Score.jsx (3381B)

---

 import { lazy, useEffect, useState } from 'react'
 import { getStartlistForHeats } from './Leaderboard'
 import Select from 'react-select'
 import { supabase } from './supabaseClient'
 
 const Auth = lazy(() => import('./Auth'))
 
 async function updateScore(score, heatId, athleteId, userId) {
   await supabase.from('scores').upsert({
     score: score,
     heat: heatId,
     athlete: athleteId,
     judge: userId
   })
 }
 
 function ScoringForm({session}) {
   const [heats, setHeats] = useState([])
   const [heatSelection, setHeatSelection] = useState(0)
   const [athleteOpts, setAthleteOpts] = useState([])
   const [athleteSelection, setAthleteSelection] = useState(0)
   const [score, setScore] = useState(0)
   const [loading, setLoading] = useState(false)
 
   // add options to select or rank by heat
   const heatOpts = heats.map(h => {
     return {
       value: h.id,
       label: h.name
     }
   })
 
   useEffect(() => {
     (async () => {
       setLoading(true)
       const heatList = await supabase.from('heats').select()
       setHeats(heatList.data)
 
       const startlist = await getStartlistForHeats([heatSelection.value])
 
       if (startlist.error) {
         setLoading(false)
         return
       }
 
       setAthleteOpts(startlist.data.map(s => {
         return {
           value: s.athlete,
           label: s.nr + " " + s.firstname + " " + (s.lastname ? s.lastname : "")
         }
       }))
 
       if (heatSelection.value === undefined || athleteSelection.value === undefined) {
         setLoading(false)
         return
       }
 
       // check if existing score for heat and athlete exists
       const currentScore = await supabase.from('scores').select()
         .eq('heat', heatSelection.value)
         .eq('athlete', athleteSelection.value)
         .eq('judge', session.user.id)
 
       if (score === 0 && currentScore.data?.length > 0) {
         // fallback to current score when no new scoring took place
         setScore(currentScore.data[0].score)
       } else {
         // store new score
         updateScore(score,
           heatSelection.value,
           athleteSelection.value,
           session.user.id)
       }
       setLoading(false)
     })();
   }, [heatSelection, athleteSelection, session.user.id, score]);
 
   return (
     <div>
       <button disabled={!loading}>{loading ? '↺ loading' : ''}</button>
       <table>
         <thead>
           <tr>
             <th>Heat</th>
             <th>Athlete</th>
             <th>Score</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td data-title='Heat'>
               <Select
                 options={heatOpts}
                 onChange={h => { setHeatSelection(h); setScore(0) }}
               />
             </td>
             <td data-title='Athlete'>
               <Select
                 options={athleteOpts}
                 onChange={a => { setAthleteSelection(a); setScore(0) }}
               />
             </td>
             <td data-title='Score'>
               <input
                 className='scoreInput'
                 type="number"
                 value={score}
                 onChange={(e) => setScore(e.target.value)}
               />
             </td>
           </tr>
         </tbody>
       </table>
     </div>
   )
 }
 
 function Score({session}) {
   return (
     <div>
       {!session ? <Auth /> : <ScoringForm session={session} />}
     </div>
   )
 }
 
 export default Score