Fix defaults for freshly installed app

Closes #95

App.tsx

@@ -52,6 +52,7 @@ const App = () => {
   useEffect(() => {
     runMigrations().then(async () => {
       const gotSettings = await getSettings();
+      console.log(`${App.name}.runMigrations:`, {gotSettings});
       setSettings(gotSettings);
       if (gotSettings.color) setColor(gotSettings.color);
     });

SettingsPage.tsx

@@ -11,7 +11,8 @@ import {MARGIN} from './constants';
 import Input from './input';
 import {useSnackbar} from './MassiveSnack';
 import Page from './Page';
-import {getSettings, updateSettings} from './settings.service';
+import Settings from './settings';
+import {updateSettings} from './settings.service';
 import Switch from './Switch';
 import {useSettings} from './use-settings';
 
@@ -20,75 +21,56 @@ export default function SettingsPage() {
   const [ignoring, setIgnoring] = useState(false);
   const [search, setSearch] = useState('');
   const {settings, setSettings} = useSettings();
-  const [vibrate, setVibrate] = useState(!!settings.vibrate);
+  const {
-  const [alarm, setAlarm] = useState(!!settings.alarm);
+    vibrate,
-  const [sound, setSound] = useState(settings.sound);
+    sound,
-  const [notify, setNotify] = useState(!!settings.notify);
+    notify,
-  const [images, setImages] = useState(!!settings.images);
+    images,
-  const [showUnit, setShowUnit] = useState(!!settings.showUnit);
+    showUnit,
-  const [steps, setSteps] = useState(!!settings.steps);
+    steps,
-  const [date, setDate] = useState(settings.date || '%Y-%m-%d %H:%M');
+    showDate,
-  const [theme, setTheme] = useState(settings.theme || 'system');
+    showSets,
-  const [showDate, setShowDate] = useState(!!settings.showDate);
+    theme,
-  const [showSets, setShowSets] = useState(!!settings.showSets);
+    alarm,
+  } = settings;
   const {color, setColor} = useColor();
   const {toast} = useSnackbar();
 
+  useEffect(() => {
+    console.log(`${SettingsPage.name}.useEffect:`, {settings});
+  }, [settings]);
+
   useFocusEffect(
     useCallback(() => {
       NativeModules.AlarmModule.ignoringBattery(setIgnoring);
     }, []),
   );
 
-  useEffect(() => {
+  const update = useCallback(
-    updateSettings({
+    (value: boolean, field: keyof Settings) => {
-      vibrate: +vibrate,
+      updateSettings({...settings, [field]: +value});
-      alarm: +alarm,
+      setSettings({...settings, [field]: +value});
-      sound,
+    },
-      notify: +notify,
+    [settings, setSettings],
-      images: +images,
+  );
-      showUnit: +showUnit,
-      color,
-      steps: +steps,
-      date,
-      showDate: +showDate,
-      theme,
-      showSets: +showSets,
-    });
-    getSettings().then(setSettings);
-  }, [
-    vibrate,
-    alarm,
-    sound,
-    notify,
-    images,
-    showUnit,
-    color,
-    steps,
-    setSettings,
-    date,
-    showDate,
-    theme,
-    showSets,
-  ]);
 
   const changeAlarmEnabled = useCallback(
     (enabled: boolean) => {
-      setAlarm(enabled);
       if (enabled) toast('Timers will now run after each set.', 4000);
       else toast('Stopped timers running after each set.', 4000);
       if (enabled && !ignoring) setBattery(true);
+      update(enabled, 'alarm');
     },
-    [setBattery, ignoring, toast],
+    [setBattery, ignoring, toast, update],
   );
 
   const changeVibrate = useCallback(
     (enabled: boolean) => {
-      setVibrate(enabled);
       if (enabled) toast('When a timer completes, vibrate your phone.', 4000);
       else toast('Stop vibrating at the end of timers.', 4000);
+      update(enabled, 'vibrate');
     },
-    [setVibrate, toast],
+    [toast, update],
   );
 
   const changeSound = useCallback(async () => {
@@ -97,75 +79,92 @@ export default function SettingsPage() {
       copyTo: 'documentDirectory',
     });
     if (!fileCopyUri) return;
-    setSound(fileCopyUri);
+    updateSettings({sound: fileCopyUri} as Settings);
+    setSettings({...settings, sound: fileCopyUri});
     toast('This song will now play after rest timers complete.', 4000);
-  }, [toast]);
+  }, [toast, setSettings, settings]);
 
   const changeNotify = useCallback(
     (enabled: boolean) => {
-      setNotify(enabled);
+      update(enabled, 'notify');
       if (enabled) toast('Show when a set is a new record.', 4000);
       else toast('Stopped showing notifications for new records.', 4000);
     },
-    [toast],
+    [toast, update],
   );
 
   const changeImages = useCallback(
     (enabled: boolean) => {
-      setImages(enabled);
+      update(enabled, 'images');
       if (enabled) toast('Show images for sets.', 4000);
       else toast('Stopped showing images for sets.', 4000);
     },
-    [toast],
+    [toast, update],
   );
 
   const changeUnit = useCallback(
     (enabled: boolean) => {
-      setShowUnit(enabled);
+      update(enabled, 'showUnit');
       if (enabled) toast('Show option to select unit for sets.', 4000);
       else toast('Hid unit option for sets.', 4000);
     },
-    [toast],
+    [toast, update],
   );
 
   const changeSteps = useCallback(
     (enabled: boolean) => {
-      setSteps(enabled);
+      update(enabled, 'steps');
       if (enabled) toast('Show steps for a workout.', 4000);
       else toast('Stopped showing steps for workouts.', 4000);
     },
-    [toast],
+    [toast, update],
   );
 
   const changeShowDate = useCallback(
     (enabled: boolean) => {
-      setShowDate(enabled);
+      update(enabled, 'showDate');
       if (enabled) toast('Show date for sets by default.', 4000);
       else toast('Stopped showing date for sets by default.', 4000);
     },
-    [toast],
+    [toast, update],
   );
 
   const changeShowSets = useCallback(
     (enabled: boolean) => {
-      setShowSets(enabled);
+      update(enabled, 'showSets');
       if (enabled) toast('Show maximum sets for workouts.', 4000);
       else toast('Stopped showing maximum sets for workouts.', 4000);
     },
-    [toast],
+    [toast, update],
   );
 
   const switches: Input<boolean>[] = [
-    {name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
+    {name: 'Rest timers', value: !!alarm, onChange: changeAlarmEnabled},
-    {name: 'Vibrate', value: vibrate, onChange: changeVibrate},
+    {name: 'Vibrate', value: !!vibrate, onChange: changeVibrate},
-    {name: 'Record notifications', value: notify, onChange: changeNotify},
+    {name: 'Record notifications', value: !!notify, onChange: changeNotify},
-    {name: 'Show images', value: images, onChange: changeImages},
+    {name: 'Show images', value: !!images, onChange: changeImages},
-    {name: 'Show unit', value: showUnit, onChange: changeUnit},
+    {name: 'Show unit', value: !!showUnit, onChange: changeUnit},
-    {name: 'Show steps', value: steps, onChange: changeSteps},
+    {name: 'Show steps', value: !!steps, onChange: changeSteps},
-    {name: 'Show date', value: showDate, onChange: changeShowDate},
+    {name: 'Show date', value: !!showDate, onChange: changeShowDate},
-    {name: 'Show sets', value: showSets, onChange: changeShowSets},
+    {name: 'Show sets', value: !!showSets, onChange: changeShowSets},
   ];
 
+  const changeTheme = useCallback(
+    (value: string) => {
+      updateSettings({...settings, theme: value as any});
+      setSettings({...settings, theme: value as any});
+    },
+    [settings, setSettings],
+  );
+
+  const changeDate = useCallback(
+    (value: string) => {
+      updateSettings({...settings, date: value as any});
+      setSettings({...settings, date: value as any});
+    },
+    [settings, setSettings],
+  );
+
   return (
     <Page search={search} setSearch={setSearch}>
       <ScrollView style={{marginTop: MARGIN}}>
@@ -187,7 +186,7 @@ export default function SettingsPage() {
             style={{color}}
             dropdownIconColor={color}
             selectedValue={theme}
-            onValueChange={value => setTheme(value)}>
+            onValueChange={changeTheme}>
             <Picker.Item value="system" label="Follow system theme" />
             <Picker.Item value="dark" label="Dark theme" />
             <Picker.Item value="light" label="Light theme" />
@@ -213,8 +212,8 @@ export default function SettingsPage() {
           <Picker
             style={{color, marginTop: -10}}
             dropdownIconColor={color}
-            selectedValue={date}
+            selectedValue={settings.date}
-            onValueChange={value => setDate(value)}>
+            onValueChange={changeDate}>
             <Picker.Item
               value="%Y-%m-%d %H:%M"
               label="Format date as 1990-12-24 15:05"

db.ts

@@ -30,7 +30,6 @@ const migrations = [
       seconds INTEGER NOT NULL DEFAULT 30,
       alarm BOOLEAN NOT NULL DEFAULT 0,
       vibrate BOOLEAN NOT NULL DEFAULT 1,
-      predict BOOLEAN NOT NULL DEFAULT 1,
       sets INTEGER NOT NULL DEFAULT 3
     )
 `,
@@ -51,7 +50,7 @@ const migrations = [
     ALTER TABLE sets ADD COLUMN image TEXT NULL
   `,
   `
-    ALTER TABLE settings ADD COLUMN images BOOLEAN DEFAULT 0
+    ALTER TABLE settings ADD COLUMN images BOOLEAN DEFAULT 1
   `,
   `
     SELECT * FROM settings LIMIT 1

settings.ts

@@ -1,15 +1,14 @@
 export default interface Settings {
   alarm: number;
   vibrate: number;
-  sound?: string;
+  sound: string;
-  notify?: number;
+  notify: number;
-  images?: number;
+  images: number;
-  showUnit?: number;
+  showUnit: number;
-  color?: string;
+  color: string;
-  nextAlarm?: string;
+  steps: number;
-  steps?: number;
+  date: string;
-  date?: string;
   showDate: number;
-  theme?: 'system' | 'dark' | 'light';
+  theme: 'system' | 'dark' | 'light';
-  showSets?: number;
+  showSets: number;
 }

use-settings.ts

@@ -7,8 +7,17 @@ export const SettingsContext = React.createContext<{
 }>({
   settings: {
     alarm: 0,
-    vibrate: 1,
+    color: '',
+    date: '',
+    images: 1,
+    notify: 0,
     showDate: 0,
+    showSets: 1,
+    showUnit: 1,
+    sound: '',
+    steps: 0,
+    theme: 'system',
+    vibrate: 1,
   },
   setSettings: () => null,
 });