myheats

Live heats, scoring and leaderboard for sport events
git clone https://git.in0rdr.ch/myheats.git
Log | Files | Refs | README | LICENSE

Athletes.js (3970B)

      1 import { lazy, useEffect, useState } from 'react'
      2 import { supabase } from './supabaseClient'
      3 
      4 const Auth = lazy(() => import('./Auth'))
      5 
      6 async function addAthlete(e) {
      7   e.preventDefault()
      8 
      9   // Read the form data
     10   const formData = new FormData(e.target);
     11   const formJson = Object.fromEntries(formData.entries());
     12 
     13   if (defaultsSet(formJson)) {
     14     alert('Check data of the new athlete, seems like the defaults')
     15     return
     16   }
     17 
     18   // create new athlete
     19   const { error } = await supabase
     20     .from('athletes')
     21     .insert({
     22       nr: formJson.nr,
     23       firstname: formJson.firstname,
     24       lastname: formJson.lastname,
     25       birthday: formJson.birthday ? formJson.birthday : null,
     26       school: formJson.school
     27     })
     28 
     29   if (error === null) {
     30     window.location.reload()
     31   } else {
     32     alert('Failed to create new athlete: ' + error.message)
     33   }
     34 }
     35 
     36 function defaultsSet({nr, firstname, lastname, birthday, school}) {
     37   return (
     38     nr === '00'
     39     || firstname === 'Firstname'
     40     || lastname === 'Lastname'
     41     || birthday === '0000-00-00'
     42     || school === 'School/team'
     43   )
     44 }
     45 
     46 async function deleteAthlete(e, athleteId, athleteFirstName, athleteLastName) {
     47   e.preventDefault()
     48 
     49   const athleteName = athleteFirstName + (athleteLastName ? ' ' + athleteLastName : '')
     50   if (window.confirm('Do you really want to delete athlete "' + athleteName + '"?')) {
     51     await supabase
     52       .from('athletes')
     53       .delete()
     54       .eq('id', athleteId)
     55     window.location.reload()
     56   }
     57 }
     58 
     59 function AthleteForm({session}) {
     60   const [loading, setLoading] = useState(false)
     61   const [athletes, setAthletes] = useState([])
     62 
     63   useEffect(() => {
     64     (async () => {
     65       setLoading(true)
     66       const athleteList = await supabase.from('athletes').select()
     67       if (athleteList.error === null)
     68         setAthletes(athleteList.data)
     69       setLoading(false)
     70     })();
     71   }, [])
     72 
     73   return (
     74     <div>
     75       <h1>Athletes <button disabled={!loading}>{loading ? '🔄 loading' : ''}</button></h1>
     76       <form method='post' onSubmit={addAthlete}>
     77         <table>
     78           <thead>
     79             <tr>
     80               <th>Created at</th>
     81               <th>Nr</th>
     82               <th>Firstname</th>
     83               <th>Lastname</th>
     84               <th>Birthday</th>
     85               <th>School</th>
     86               <th>New/delete</th>
     87             </tr>
     88           </thead>
     89           <tbody>
     90             {athletes.map(a => (
     91               <tr key={a.id}>
     92                 <td className='right'>{new Date(a.created_at).toLocaleString()}</td>
     93                 <td className='right'>{a.nr}</td>
     94                 <td>{a.firstname}</td>
     95                 <td>{a.lastname}</td>
     96                 <td className='right'>{a.birthday}</td>
     97                 <td>{a.school}</td>
     98                 <td className='right'><button onClick={e => deleteAthlete(e, a.id, a.firstname, a.lastname)}>🗑️ delete</button></td>
     99               </tr>
    100             ))}
    101             <tr>
    102               <td className='right'><i>* required</i></td>
    103               <td className='right'>
    104                 <input type='number' name='nr' defaultValue='00' /> *
    105               </td>
    106               <td>
    107                 <input type='text' name='firstname' defaultValue='Firstname' /> *
    108               </td>
    109               <td>
    110                 <input type='text' name='lastname' defaultValue='Lastname' />
    111               </td>
    112               <td className='right'>
    113                 <input
    114                   type='date'
    115                   name='birthday' />
    116               </td>
    117               <td>
    118                 <input type='text' name='school' defaultValue='School/team' />
    119               </td>
    120               <td className='right'>
    121                 <button type='submit'>➕ new</button>
    122               </td>
    123             </tr>
    124           </tbody>
    125         </table>
    126       </form>
    127     </div>
    128   )
    129 }
    130 
    131 function Athletes({session}) {
    132     return (
    133       <div>
    134         {!session ? <Auth /> : <AthleteForm session={session} />}
    135       </div>
    136     )
    137   }
    138   
    139 export default Athletes