feat: runner dashboard save data in local storage (#271)

Author: maxpou

src/hooks/useLocalStorage.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+export function useLocalStorage<T>(key: string, defaultValue: T) {
+  const [value, setValue] = useState<T>(defaultValue)
+  const isFirstRender = useRef(true)
+
+  // Read from localStorage after hydration
+  useEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(key)
+      if (stored !== null) {
+        setValue(JSON.parse(stored) as T)
+      }
+    } catch {
+      // localStorage unavailable
+    }
+    isFirstRender.current = false
+  }, [key])
+
+  // Persist to localStorage on subsequent changes (skip initial render)
+  useEffect(() => {
+    if (isFirstRender.current) return
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value))
+    } catch {
+      /* storage full or unavailable */
+    }
+  }, [key, value])
+
+  return [value, setValue] as const
+}

src/pages/apps/GlucidCalculatorComponent.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'preact'
 // biome-ignore lint/correctness/noUnusedImports: Needed for JSX types
 import * as React from 'preact/compat'
-import { useState } from 'preact/hooks'
+import { useLocalStorage } from '../../hooks/useLocalStorage'
 
 type NutritionZone = {
   min: number
@@ -51,12 +51,12 @@ const PRESET_DISTANCES = [
 ]
 
 export default function GlucidCalculator(): JSX.Element {
-  const [weight, setWeight] = useState<number>(70)
-  const [distance, setDistance] = useState<number>(42.195)
-  const [estimatedHours, setEstimatedHours] = useState<number>(3)
-  const [estimatedMinutes, setEstimatedMinutes] = useState<number>(50)
-  const [glucidPerGel, setGlucidPerGel] = useState<number>(25)
-  const [numberOfGels, setNumberOfGels] = useState<number>(9)
+  const [weight, setWeight] = useLocalStorage<number>('runner-dashboard:nutrition.weight', 70)
+  const [distance, setDistance] = useLocalStorage<number>('runner-dashboard:nutrition.distance', 42.195)
+  const [estimatedHours, setEstimatedHours] = useLocalStorage<number>('runner-dashboard:nutrition.estimatedHours', 3)
+  const [estimatedMinutes, setEstimatedMinutes] = useLocalStorage<number>('runner-dashboard:nutrition.estimatedMinutes', 50)
+  const [glucidPerGel, setGlucidPerGel] = useLocalStorage<number>('runner-dashboard:nutrition.glucidPerGel', 25)
+  const [numberOfGels, setNumberOfGels] = useLocalStorage<number>('runner-dashboard:nutrition.numberOfGels', 9)
 
   // Calculations
   const totalTimeHours = estimatedHours + estimatedMinutes / 60

src/pages/apps/RunnerDashboardTabs.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'preact'
 // biome-ignore lint/correctness/noUnusedImports: Needed for JSX types
 import * as React from 'preact/compat'
-import { useState } from 'preact/hooks'
+import { useLocalStorage } from '../../hooks/useLocalStorage'
 import GlucidCalculatorComponent from './GlucidCalculatorComponent'
 import PaceCalculatorComponent from './PaceCalculatorComponent'
 import SplitsCalculatorComponent from './SplitsCalculatorComponent'
@@ -15,7 +15,7 @@ const TABS: { id: Tab; label: string; icon: string }[] = [
 ]
 
 export default function RunnerDashboardTabs(): JSX.Element {
-  const [activeTab, setActiveTab] = useState<Tab>('pace')
+  const [activeTab, setActiveTab] = useLocalStorage<Tab>('runner-dashboard:activeTab', 'pace')
 
   return (
     <div class="space-y-6">

src/pages/apps/SplitsCalculatorComponent.tsx

@@ -2,7 +2,7 @@ import type { JSX } from 'preact'
 // biome-ignore lint/correctness/noUnusedImports: Needed for JSX types
 import * as React from 'preact/compat'
 import type { Dispatch, StateUpdater } from 'preact/hooks'
-import { useState } from 'preact/hooks'
+import { useLocalStorage } from '../../hooks/useLocalStorage'
 
 type Distance = {
   name: string
@@ -56,20 +56,24 @@ function calculateSpeed(totalSeconds: number, distanceKm: number): number {
 }
 
 export default function SplitsCalculator(): JSX.Element {
-  const [selectedDistance, setSelectedDistance] = useState<Distance>(
-    DISTANCES[6],
-  ) // Marathon default
-  const [time1, setTime1] = useState<TimeInput>({
-    hours: 3,
-    minutes: 50,
-    seconds: 0,
-  })
-  const [showSecondTime, setShowSecondTime] = useState(false)
-  const [time2, setTime2] = useState<TimeInput>({
-    hours: 4,
-    minutes: 15,
-    seconds: 0,
-  })
+  const [distanceName, setDistanceName] = useLocalStorage<string>(
+    'runner-dashboard:splits.distanceName',
+    'Marathon',
+  )
+  const selectedDistance =
+    DISTANCES.find(d => d.name === distanceName) ?? DISTANCES[6]
+  const [time1, setTime1] = useLocalStorage<TimeInput>(
+    'runner-dashboard:splits.time1',
+    { hours: 3, minutes: 50, seconds: 0 },
+  )
+  const [showSecondTime, setShowSecondTime] = useLocalStorage<boolean>(
+    'runner-dashboard:splits.showSecondTime',
+    false,
+  )
+  const [time2, setTime2] = useLocalStorage<TimeInput>(
+    'runner-dashboard:splits.time2',
+    { hours: 4, minutes: 15, seconds: 0 },
+  )
 
   const totalSeconds1 = timeToSeconds(time1)
   const pacePerKm1 = calculatePacePerKm(totalSeconds1, selectedDistance.km)
@@ -139,7 +143,7 @@ export default function SplitsCalculator(): JSX.Element {
             <button
               key={dist.name}
               type="button"
-              onClick={() => setSelectedDistance(dist)}
+              onClick={() => setDistanceName(dist.name)}
               class={`rounded-lg px-4 py-2 text-sm font-medium transition-all cursor-pointer ${
                 selectedDistance.name === dist.name
                   ? 'bg-blue-500 text-white shadow-md'