From 592a099f7bb9883c64ba60f149c29d319452288c Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@users.noreply.github.com>
Date: Sun, 8 Jun 2025 19:08:01 +0800
Subject: [PATCH] update demo-score-board,

---
 .../AppPages/ActiveScoreboard.jsx             |  4 +-
 .../DemoScoreBoard/AppPages/Dashboard.jsx     |  2 +-
 .../AppPages/PreviousScoreboards.jsx          | 67 +++++++++++++------
 3 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/03_source/mobile/src/pages/DemoScoreBoard/AppPages/ActiveScoreboard.jsx b/03_source/mobile/src/pages/DemoScoreBoard/AppPages/ActiveScoreboard.jsx
index 818054b..434da5d 100644
--- a/03_source/mobile/src/pages/DemoScoreBoard/AppPages/ActiveScoreboard.jsx
+++ b/03_source/mobile/src/pages/DemoScoreBoard/AppPages/ActiveScoreboard.jsx
@@ -31,8 +31,8 @@ import FinishModal from '../components/FinishModal';
 import { useParams } from 'react-router';
 
 const ActiveScoreboard = () => {
-  const pageRef = useRef();
-  const headingRef = useRef();
+  const pageRef = useRef(null);
+  const headingRef = useRef(null);
   const router = useIonRouter();
 
   const { id } = useParams();
diff --git a/03_source/mobile/src/pages/DemoScoreBoard/AppPages/Dashboard.jsx b/03_source/mobile/src/pages/DemoScoreBoard/AppPages/Dashboard.jsx
index 55163eb..c697ad2 100644
--- a/03_source/mobile/src/pages/DemoScoreBoard/AppPages/Dashboard.jsx
+++ b/03_source/mobile/src/pages/DemoScoreBoard/AppPages/Dashboard.jsx
@@ -33,7 +33,7 @@ import { getActiveScoreboard } from '../store/Selectors';
 import './Page.css';
 
 const Dashboard = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const router = useIonRouter();
 
   const activeScoreboard = useStoreState(MainStore, getActiveScoreboard);
diff --git a/03_source/mobile/src/pages/DemoScoreBoard/AppPages/PreviousScoreboards.jsx b/03_source/mobile/src/pages/DemoScoreBoard/AppPages/PreviousScoreboards.jsx
index b8a5491..12669d0 100644
--- a/03_source/mobile/src/pages/DemoScoreBoard/AppPages/PreviousScoreboards.jsx
+++ b/03_source/mobile/src/pages/DemoScoreBoard/AppPages/PreviousScoreboards.jsx
@@ -1,4 +1,21 @@
-import { IonButton, IonButtons, IonCard, IonCardContent, IonCardSubtitle, IonCol, IonContent, IonHeader, IonIcon, IonLabel, IonMenuButton, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonLabel,
+  IonMenuButton,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
 import { arrowForward } from 'ionicons/icons';
 import { useStoreState } from 'pullstate';
 import { useRef } from 'react';
@@ -8,12 +25,11 @@ import { getScoreboards } from '../store/Selectors';
 import './Page.css';
 
 const PreviousScoreboards = () => {
-
-  const pageRef = useRef();
-  const scoreboards = useStoreState(MainStore, getScoreboards)
+  const pageRef = useRef(null);
+  const scoreboards = useStoreState(MainStore, getScoreboards);
 
   return (
-    <IonPage ref={ pageRef }>
+    <IonPage ref={pageRef}>
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
@@ -30,33 +46,37 @@ const PreviousScoreboards = () => {
           </IonToolbar>
         </IonHeader>
 
-        { scoreboards.length > 0 &&
-
+        {scoreboards.length > 0 && (
           <>
-            { scoreboards.map((scoreboard, index) => {
-
+            {scoreboards.map((scoreboard, index) => {
               return (
-
-                <IonCard key={ index } className="animate__animated animate__slideInLeft active-scoreboard-card">
+                <IonCard
+                  key={index}
+                  className="animate__animated animate__slideInLeft active-scoreboard-card"
+                >
                   <IonCardContent>
                     <IonRow>
                       <IonCol size="6">
                         <IonCardSubtitle color="light">Title</IonCardSubtitle>
                         <IonText color="light">
-                          <p className="ion-text-wrap">{ scoreboard.title }</p>
+                          <p className="ion-text-wrap">{scoreboard.title}</p>
                         </IonText>
                       </IonCol>
 
                       <IonCol size="3" className="ion-text-center">
                         <IonCardSubtitle color="light">Players</IonCardSubtitle>
-                        <IonText color="light"> 
-                          <p>{ scoreboard.players && scoreboard.players.length }</p>
+                        <IonText color="light">
+                          <p>{scoreboard.players && scoreboard.players.length}</p>
                         </IonText>
                       </IonCol>
 
                       <IonCol size="2">
-                        <IonButton color="light" fill="outline" routerLink={ `/page/active-scoreboard/${ scoreboard.id }`}>
-                          <IonIcon icon={ arrowForward } />
+                        <IonButton
+                          color="light"
+                          fill="outline"
+                          routerLink={`/page/active-scoreboard/${scoreboard.id}`}
+                        >
+                          <IonIcon icon={arrowForward} />
                         </IonButton>
                       </IonCol>
                     </IonRow>
@@ -65,19 +85,26 @@ const PreviousScoreboards = () => {
               );
             })}
           </>
-        }
+        )}
 
-        { scoreboards.length < 1 &&
+        {scoreboards.length < 1 && (
           <IonRow>
             <IonCol size="12" className="ion-text-center">
               <IonLabel color="primary">
                 <h1>No scoreboards to show</h1>
                 <p>You can easily add a new one</p>
               </IonLabel>
-              <IonButton className="ion-margin-top" color="primary" fill="outline" routerLink="/page/Dashboard">Add one &rarr;</IonButton>
+              <IonButton
+                className="ion-margin-top"
+                color="primary"
+                fill="outline"
+                routerLink="/page/Dashboard"
+              >
+                Add one &rarr;
+              </IonButton>
             </IonCol>
           </IonRow>
-        }
+        )}
       </IonContent>
     </IonPage>
   );