fixed hook order

Kensaa · Oct 10, 2023 · 6f3c98d · 6f3c98d
1 parent 3691d09
commit 6f3c98d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 30 deletions.
diff --git a/ui/src/pages/SingleDay.tsx b/ui/src/pages/SingleDay.tsx
@@ -20,17 +20,10 @@ export default function SingleDay() {
         }
     }, [data])
 
-    if (Object.keys(data).length === 0) {
-        return (
-            <div className='h-100 d-flex flex-column justify-content-center align-items-center'>
-                Waiting for data...
-                <Spinner animation='border' />
-            </div>
-        )
-    }
-
     const pieData = useMemo(() => {
-        const selectedData = data[sortDays(Object.keys(data))[selectedFile]]
+        const sortedDays = sortDays(Object.keys(data))
+        if (sortedDays.length === 0) return { labels: [], datasets: [] }
+        const selectedData = data[sortedDays[selectedFile]]
         const days = Object.keys(selectedData)
         return {
             labels: days,
@@ -44,6 +37,15 @@ export default function SingleDay() {
         }
     }, [data, selectedFile])
 
+    if (Object.keys(data).length === 0) {
+        return (
+            <div className='h-100 d-flex flex-column justify-content-center align-items-center'>
+                Waiting for data...
+                <Spinner animation='border' />
+            </div>
+        )
+    }
+
     const text = () =>
         convertSecondsToString(
             Object.values(

diff --git a/ui/src/pages/TotalTime.tsx b/ui/src/pages/TotalTime.tsx
@@ -17,15 +17,6 @@ import { colors, convertSecondsToString } from '../utils'
 export default function TotalTime() {
     const data = dataStore()
 
-    if (Object.keys(data).length === 0) {
-        return (
-            <div className='h-100 d-flex flex-column justify-content-center align-items-center'>
-                Waiting for data...
-                <Spinner animation='border' />
-            </div>
-        )
-    }
-
     const barData = useMemo(() => {
         const games: Record<string, number> = {}
         for (const day of Object.values(data)) {
@@ -36,7 +27,6 @@ export default function TotalTime() {
                 games[game] += day[game]
             }
         }
-        console.log(games)
         const labels = Object.keys(games).sort((a, b) => games[b] - games[a])
         const values = labels.map(label => games[label])
 
@@ -52,6 +42,15 @@ export default function TotalTime() {
         }
     }, [data])
 
+    if (Object.keys(data).length === 0) {
+        return (
+            <div className='h-100 d-flex flex-column justify-content-center align-items-center'>
+                Waiting for data...
+                <Spinner animation='border' />
+            </div>
+        )
+    }
+
     return (
         <div className='page'>
             <div className='content'>

diff --git a/ui/src/pages/Week.tsx b/ui/src/pages/Week.tsx
@@ -18,15 +18,6 @@ export default function Week() {
     const data = dataStore()
     const [numberOfDays, setNumberOfDays] = useState(7)
 
-    if (Object.keys(data).length === 0) {
-        return (
-            <div className='h-100 d-flex flex-column justify-content-center align-items-center'>
-                Waiting for data...
-                <Spinner animation='border' />
-            </div>
-        )
-    }
-
     const barData = useMemo(() => {
         let selectedDays: Record<string, Record<string, number>> = {}
         let i = 0
@@ -64,7 +55,14 @@ export default function Week() {
             })
         }
     }, [data])
-
+    if (Object.keys(data).length === 0) {
+        return (
+            <div className='h-100 d-flex flex-column justify-content-center align-items-center'>
+                Waiting for data...
+                <Spinner animation='border' />
+            </div>
+        )
+    }
     return (
         <div className='page'>
             <div className='content'>