node-mongo-demo

Lucky7.js

(4780B)

 import React from 'react';
 import * as api from '../api';
 
 const useSession = () => {
     const [session, setSession] = React.useState(undefined);
 
     React.useEffect(() => {
         const func = async () => {
             const response = await api.lucky7Session();
             setSession(response.data);
         };
         func();
     }, []);
 
     return {
         session,
     };
 };
 
 const useBetEvents = onEvent => {
     const [listening, setListening] = React.useState(false);
 
     React.useEffect(() => {
         const connect = async () => {
             const response = await api.lucky7BetEvents();
             const stream = response.data;
 
             const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
             setListening(true);
             while (true) {
                 const { value, done } = await reader.read();
                 if (done) {
                     setListening(false);
                     break;
                 }
                 const json = JSON.parse(value.slice(5));
                 onEvent(json);
             }
         };
         if (!listening) connect();
     }, [listening, onEvent]);
 };
 
 const getNextGameTime = (createdAt) => {
   const startDateTime = new Date(createdAt);
   const currentSeconds = Math.ceil(new Date() / 1000);
   const startSeconds = Math.floor(startDateTime.getTime() / 1000);
   const difference = currentSeconds - startSeconds;
 
   const nextChunk = Math.ceil(difference / 15) * 15;
   return new Date((startSeconds + nextChunk) * 1000);
 };
 
 const millisRemaining = date => date - Date.now();
 const secondsRemaining = date => Math.ceil((date - Date.now()) / 1000);
 
 const Timer = ({ createdAt }) => {
     const [nextGameTime, setNextGameTime] = React.useState(getNextGameTime(createdAt));
     const [seconds, setSeconds] = React.useState(secondsRemaining(nextGameTime));
 
     React.useEffect(() => {
         let timeout;
         let interval;
 
         const countdown = () => {
             setSeconds((prevSeconds) => prevSeconds === 0 ? 0 : prevSeconds - 1);
         };
 
         const resetTimer = () => {
             const nextGameTime = getNextGameTime(createdAt);
             setNextGameTime(nextGameTime);
             setSeconds(secondsRemaining(nextGameTime));
             clearInterval(interval);
 
             interval = setInterval(countdown, 1000);
             timeout = setTimeout(resetTimer, millisRemaining(nextGameTime));
         };
 
         resetTimer();
 
         return () => {
             clearTimeout(timeout);
             clearInterval(interval);
         };
     }, [createdAt, setSeconds, setNextGameTime]);
 
     return (
         <>
             Timer: {seconds}s<br/>
         </>
     );
 };
 
 const sortBets = bets =>
     Object.values(bets).sort((a, b) => a.rollAt < b.rollAt ? 1 : -1);
 
 const Lucky7 = user => {
     const { session } = useSession();
 
     const [bets, setBets] = React.useState({});
     const [error, setError] = React.useState(undefined);
 
     const eventHandler = React.useCallback(e => {
         const { bet } = e;
         setBets(bets => ({ ...bets, [bet.id]: { ...bets[bet.id], ...bet } }));
         setError(undefined);
     }, [setBets, setError]);
 
     useBetEvents(eventHandler);
 
     const handleBet = lucky => async () => {
         try {
             await api.lucky7Bet(lucky);
             setError(undefined);
         } catch (error) {
             if (error.status === 409 && error.response.data.code === 'SESSION_TIMER') {
                 setError(error.response.data.error);
             } else {
                 console.error(error)
             }
         }
     };
 
     return (
         <>
             {error ? <div>{error}</div> : <>&nbsp;</>}
             <div>
                 <button onClick={handleBet(true)}>Lucky</button>
                 <button onClick={handleBet(false)}>Unlucky</button>
                 {session ? <Timer createdAt={session.createdAt} /> : null}
             </div>
             <table>
                 <thead>
                     <tr>
                         <th>state</th>
                         <th>rollAt</th>
                         <th>lucky</th>
                         <th>roll</th>
                         <th>win</th>
                     </tr>
                 </thead>
                 <tbody>
                     {sortBets(bets).map(bet => (
                         <tr key={bet.id}>
                             <td>{bet.state}</td>
                             <td>{bet.rollAt}</td>
                             <td>{String(bet.lucky ?? '')}</td>
                             <td>{(bet.roll || []).join(',')}</td>
                             <td>{String(bet.win ?? '')}</td>
                         </tr>
                     ))}
                 </tbody>
             </table>
         </>
     );
 };
 
 export default Lucky7;