update demo-score-board,

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 pageRef = useRef(null);
-  const headingRef = useRef();
+  const headingRef = useRef(null);
   const router = useIonRouter();
 
   const { id } = useParams();

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);

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(null);
-  const pageRef = useRef();
+  const scoreboards = useStoreState(MainStore, getScoreboards);
-  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
-                <IonCard key={ index } className="animate__animated animate__slideInLeft active-scoreboard-card">
+                  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>
+                          <p>{scoreboard.players && scoreboard.players.length}</p>
                         </IonText>
                       </IonCol>
 
                       <IonCol size="2">
-                        <IonButton color="light" fill="outline" routerLink={ `/page/active-scoreboard/${ scoreboard.id }`}>
+                        <IonButton
-                          <IonIcon icon={ arrowForward } />
+                          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>
   );