Formatting 5, fix merge issue with preferences

SVWEFSBRWHWBCOTSEID · May 6, 2024 · fa8a80a · fa8a80a
1 parent 8ba0977
commit fa8a80a
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 17 deletions.
diff --git a/app/preferences/ClockContent.tsx b/app/preferences/ClockContent.tsx
@@ -1,13 +1,17 @@
 'use client'
 
-import {useContext} from 'react';
+import { useContext } from 'react';
+
+// Components
 import PreferencesInputGroup from './PreferencesInputGroup';
 import PreferencesButton from './PreferencesButton';
+
+// Contexts
 import PreferencesContext from '../../contexts/PreferencesContext';
 
 
 export default function ClockContent() {
-    const {preferences, setPreferences} = useContext(PreferencesContext);
+    const { preferences, setPreferences } = useContext(PreferencesContext);
 
     function updateShowTenthSeconds(value: 'ALWAYS' | 'CRITICAL' | 'NEVER') {
         const newPreferences = structuredClone(preferences); // TODO: structured clone necessary?
@@ -33,31 +37,52 @@ export default function ClockContent() {
             <p>[...]</p>
 
             <PreferencesInputGroup label="Show tenths of seconds">
-                <PreferencesButton onClick={() => updateShowTenthSeconds('ALWAYS')} selected={preferences.clock.showTenthSeconds === 'ALWAYS'}>
+                <PreferencesButton
+                    onClick={() => updateShowTenthSeconds('ALWAYS')}
+                    selected={preferences.clock.showTenthSeconds === 'ALWAYS'}
+                >
                     Always
                 </PreferencesButton>
-                <PreferencesButton onClick={() => updateShowTenthSeconds('CRITICAL')} selected={preferences.clock.showTenthSeconds === 'CRITICAL'}>
+                <PreferencesButton
+                    onClick={() => updateShowTenthSeconds('CRITICAL')}
+                    selected={preferences.clock.showTenthSeconds === 'CRITICAL'}
+                >
                     When time remaining {'<'} 10 seconds
                 </PreferencesButton>
-                <PreferencesButton onClick={() => updateShowTenthSeconds('NEVER')} selected={preferences.clock.showTenthSeconds === 'NEVER'}>
+                <PreferencesButton
+                    onClick={() => updateShowTenthSeconds('NEVER')}
+                    selected={preferences.clock.showTenthSeconds === 'NEVER'}
+                >
                     Never
                 </PreferencesButton>
             </PreferencesInputGroup>
 
             <PreferencesInputGroup label="Show green progress bars">
-                <PreferencesButton onClick={() => updateShowProgressBars(true)} selected={preferences.clock.showProgressBars}>
+                <PreferencesButton
+                    onClick={() => updateShowProgressBars(true)}
+                    selected={preferences.clock.showProgressBars}
+                >
                     Always
                 </PreferencesButton>
-                <PreferencesButton onClick={() => updateShowProgressBars(false)} selected={!preferences.clock.showProgressBars}>
+                <PreferencesButton
+                    onClick={() => updateShowProgressBars(false)}
+                    selected={!preferences.clock.showProgressBars}
+                >
                     Never
                 </PreferencesButton>
             </PreferencesInputGroup>
 
             <PreferencesInputGroup label="Play a sound when time gets critical">
-                <PreferencesButton onClick={() => updatePlayCriticalSound(true)} selected={preferences.clock.playCriticalSound}>
+                <PreferencesButton
+                    onClick={() => updatePlayCriticalSound(true)}
+                    selected={preferences.clock.playCriticalSound}
+                >
                     Always
                 </PreferencesButton>
-                <PreferencesButton onClick={() => updatePlayCriticalSound(false)} selected={!preferences.clock.playCriticalSound}>
+                <PreferencesButton
+                    onClick={() => updatePlayCriticalSound(false)}
+                    selected={!preferences.clock.playCriticalSound}
+                >
                     Never
                 </PreferencesButton>
             </PreferencesInputGroup>

diff --git a/app/preferences/PreferencesButton.tsx b/app/preferences/PreferencesButton.tsx
@@ -1,9 +1,13 @@
 'use client'
 
-import {MouseEventHandler, ReactNode} from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 
 
-export default function PreferencesButton(props: {onClick: MouseEventHandler<HTMLButtonElement>, selected: boolean, children: ReactNode}) {
+export default function PreferencesButton(props: {
+    onClick: MouseEventHandler<HTMLButtonElement>,
+    selected: boolean,
+    children: ReactNode
+}) {
     return (
         <button
             onClick={props.onClick}

diff --git a/app/preferences/PreferencesInputGroup.tsx b/app/preferences/PreferencesInputGroup.tsx
@@ -1,7 +1,7 @@
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
 
 
-export default function PreferencesInputGroup(props: {label: string, children: ReactNode}) {
+export default function PreferencesInputGroup(props: { label: string, children: ReactNode }) {
     return (
         <div className="mt-12">
             <h2 className="flex items-center gap-4 mb-3 text-lg font-light text-secondary after:block after:h-0.5 after:w-full after:bg-gradient-to-r after:from-theme-orange/50 after:to-transparent">

diff --git a/app/preferences/layout.tsx b/app/preferences/layout.tsx
@@ -1,10 +1,12 @@
-import type {ReactNode} from 'react';
+import type { ReactNode } from 'react';
+
+// Components
 import InfoSidebarItem from '../../components/InfoSidebarItem';
 import InfoSidebar from '../../components/InfoSidebar';
 import InfoPanel from '../../components/InfoPanel';
 
 
-export default function Layout(props:{children: ReactNode}) {
+export default function Layout(props: { children: ReactNode }) {
     return (
         <div className="container flex pt-4 pb-12 w-full">
             <InfoSidebar>

diff --git a/app/preferences/page.tsx b/app/preferences/page.tsx
@@ -1,4 +1,4 @@
-import type {Metadata} from 'next';
+import type { Metadata } from 'next';
 import ClockContent from './ClockContent';
 
 

diff --git a/components/PreferencesProvider.tsx b/components/PreferencesProvider.tsx
@@ -16,7 +16,10 @@ export default function PreferencesProvider(props: { children: ReactNode }) {
         const raw = localStorage.getItem('preferences');
         if (!raw) return localStorage.setItem('preferences', JSON.stringify(preferences));
 
-        setPreferences(JSON.parse(raw));
+        // TODO: eventually need deepmerge here
+        const merged = { ...defaultPreferences, ...JSON.parse(raw) };
+        setPreferences(merged);
+        localStorage.setItem('preferences', JSON.stringify(merged));
     }, []);
 
     // Update the user's preferences by fetching the backend with the new data (if signed in). If successful, the