From 4415d503427d8220b9508ba409f7e61fc80111b2 Mon Sep 17 00:00:00 2001
From: William Correa <wilcorrea@gmail.com>
Date: Tue, 9 Apr 2024 01:13:44 -0300
Subject: [PATCH] feature: improve UI

---
 src/view/components/game/GamePlaySession.tsx   |  3 +++
 .../GamePlaySessionQuestionUnanswered.tsx      |  3 ++-
 .../general/{Hydrated.tsx => Async.tsx}        | 18 +++++++++---------
 src/view/pages/game/GamePlayPage.tsx           | 14 +++++++-------
 src/view/pages/game/GameWelcomePage.tsx        | 14 +++++++-------
 5 files changed, 28 insertions(+), 24 deletions(-)
 rename src/view/components/general/{Hydrated.tsx => Async.tsx} (73%)

diff --git a/src/view/components/game/GamePlaySession.tsx b/src/view/components/game/GamePlaySession.tsx
index e50c229..4d74702 100644
--- a/src/view/components/game/GamePlaySession.tsx
+++ b/src/view/components/game/GamePlaySession.tsx
@@ -96,6 +96,9 @@ export function GamePlaySession ({ game, onStart, onFinish }: GamePlaySessionPro
           answerQuestion={answerQuestion}
           nextQuestion={nextQuestion}
         />
+        <div className="pt-1">
+          <small>{game.questions.length - questions.length} / {game.questions.length}</small>
+        </div>
       </Case>
       <Case value={GamePlaySessionStatus.FINISHED}>
         <Warning />
diff --git a/src/view/components/game/game-play-session/game-play-session-question/GamePlaySessionQuestionUnanswered.tsx b/src/view/components/game/game-play-session/game-play-session-question/GamePlaySessionQuestionUnanswered.tsx
index e408b68..c41188e 100644
--- a/src/view/components/game/game-play-session/game-play-session-question/GamePlaySessionQuestionUnanswered.tsx
+++ b/src/view/components/game/game-play-session/game-play-session-question/GamePlaySessionQuestionUnanswered.tsx
@@ -30,7 +30,7 @@ export function GamePlaySessionQuestionUnanswered (props: GameQuestionOptionsPro
 
   return (
     <div className="GamePlaySessionQuestionUnanswered">
-      <div className="card pb-2">
+      <div className="card mb-2">
         <div className="card-header">
           <h4>
             <Markdown
@@ -72,6 +72,7 @@ export function GamePlaySessionQuestionUnanswered (props: GameQuestionOptionsPro
           </span>
         </div>
       </div>
+
       <div className="d-grid">
         <button
           className="btn btn-lg btn-primary"
diff --git a/src/view/components/general/Hydrated.tsx b/src/view/components/general/Async.tsx
similarity index 73%
rename from src/view/components/general/Hydrated.tsx
rename to src/view/components/general/Async.tsx
index cda5e52..168ad68 100644
--- a/src/view/components/general/Hydrated.tsx
+++ b/src/view/components/general/Async.tsx
@@ -3,18 +3,18 @@ import { ReactNode, useEffect, useRef, useState } from 'react'
 
 export type HydrateElementProps = {
   children: ReactNode | ReactNode[]
-  status: HydratedStatus
+  status: AsyncStatus
 }
 
 export type HydrateProps = {
-  hidrate: () => Promise<any>
+  using: () => Promise<any>
   onResolve: (data: any) => void
   onReject?: (data: any) => void
   children: ReactNode | ReactNode[]
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
-export enum HydratedStatus {
+export enum AsyncStatus {
   Pending = 'Pending',
   Resolved = 'Resolved',
   Rejected = 'Rejected'
@@ -24,9 +24,9 @@ export function On ({ children }: HydrateElementProps) {
   return children
 }
 
-export function Hydrated ({ hidrate, onResolve, onReject, children }: HydrateProps) {
+export function Async ({ using, onResolve, onReject, children }: HydrateProps) {
   const fetched = useRef(false)
-  const [status, setStatus] = useState(HydratedStatus.Pending)
+  const [status, setStatus] = useState(AsyncStatus.Pending)
 
   useEffect(() => {
     if (fetched.current) {
@@ -35,19 +35,19 @@ export function Hydrated ({ hidrate, onResolve, onReject, children }: HydratePro
     const fetchData = async () => {
       fetched.current = true
       try {
-        const data = await hidrate()
+        const data = await using()
         onResolve(data)
-        setStatus(HydratedStatus.Resolved)
+        setStatus(AsyncStatus.Resolved)
       } catch (e) {
         console.error(e)
-        setStatus(HydratedStatus.Rejected)
+        setStatus(AsyncStatus.Rejected)
         if (onReject) {
           onReject(e)
         }
       }
     }
     fetchData()
-  }, [fetched, hidrate, onReject, onResolve])
+  }, [fetched, using, onReject, onResolve])
 
   if (!children) {
     return null
diff --git a/src/view/pages/game/GamePlayPage.tsx b/src/view/pages/game/GamePlayPage.tsx
index e2d521d..9e66b73 100644
--- a/src/view/pages/game/GamePlayPage.tsx
+++ b/src/view/pages/game/GamePlayPage.tsx
@@ -6,7 +6,7 @@ import GameRepository from '../../../app/Domain/Game/GameRepository.ts'
 import Game from '../../../app/Domain/Game/Game.ts'
 
 import { useApp } from '../../hooks'
-import { Hydrated, HydratedStatus, On } from '../../components/general/Hydrated.tsx'
+import { Async, AsyncStatus, On } from '../../components/general/Async.tsx'
 import { Loading } from '../../components/general/Loading.tsx'
 import { Warning } from '../../components/general/Alert.tsx'
 import { GamePlaySession } from '../../components/game/GamePlaySession.tsx'
@@ -42,23 +42,23 @@ export function GamePlayPage () {
   }
 
   return (
-    <Hydrated
-      hidrate={() => gameRepository.findById(gameId)}
+    <Async
+      using={() => gameRepository.findById(gameId)}
       onResolve={onResolve}
       onReject={onReject}
     >
-      <On status={HydratedStatus.Pending}>
+      <On status={AsyncStatus.Pending}>
         <div className="py-3">
           <Loading label={t('pending')} />
         </div>
       </On>
-      <On status={HydratedStatus.Resolved}>
+      <On status={AsyncStatus.Resolved}>
         <GamePlaySession
           game={game}
           onFinish={() => navigate(`/game/${gameId}/end`)}
         />
       </On>
-      <On status={HydratedStatus.Rejected}>
+      <On status={AsyncStatus.Rejected}>
         <div className="py-2">
           <Warning
             strong={t('error')}
@@ -66,6 +66,6 @@ export function GamePlayPage () {
           />
         </div>
       </On>
-    </Hydrated>
+    </Async>
   )
 }
diff --git a/src/view/pages/game/GameWelcomePage.tsx b/src/view/pages/game/GameWelcomePage.tsx
index 23c45be..c5496a6 100644
--- a/src/view/pages/game/GameWelcomePage.tsx
+++ b/src/view/pages/game/GameWelcomePage.tsx
@@ -5,7 +5,7 @@ import GameRepository from '../../../app/Domain/Game/GameRepository.ts'
 import Game from '../../../app/Domain/Game/Game.ts'
 
 import { useApp } from '../../hooks'
-import { Hydrated, HydratedStatus, On } from '../../components/general/Hydrated.tsx'
+import { Async, AsyncStatus, On } from '../../components/general/Async.tsx'
 import { Loading } from '../../components/general/Loading.tsx'
 import { Warning } from '../../components/general/Alert.tsx'
 
@@ -24,19 +24,19 @@ export function GameWelcomePage () {
     <div className="py-3 px-4 rounded">
       <h1 className="text-center">{t('title')}</h1>
       <p className="text-center">{t('description')}</p>
-      <Hydrated
-        hidrate={() => gameRepository.paginate(1, 10)}
+      <Async
+        using={() => gameRepository.paginate(1, 10)}
         onResolve={setGames}
       >
-        <On status={HydratedStatus.Pending}>
+        <On status={AsyncStatus.Pending}>
           <div className="py-3">
             <Loading label={t('pending')} />
           </div>
         </On>
-        <On status={HydratedStatus.Resolved}>
+        <On status={AsyncStatus.Resolved}>
           <GameList games={games} />
         </On>
-        <On status={HydratedStatus.Rejected}>
+        <On status={AsyncStatus.Rejected}>
           <div className="py-2">
             <Warning
               strong={t('error')}
@@ -44,7 +44,7 @@ export function GameWelcomePage () {
             />
           </div>
         </On>
-      </Hydrated>
+      </Async>
     </div>
   )
 }