feat(settings-data): Add option to automatically download backups

Author: PrettyCoffee

src/app/routes/settings/settings-data.tsx

@@ -14,6 +14,7 @@ import { FileInput } from "components/ui/file-input/file-input"
 import { NumberInput } from "components/ui/number-input"
 import { Spinner } from "components/ui/spinner"
 import { showToast } from "components/ui/toaster"
+import { Toggle } from "components/ui/toggle"
 import { allData } from "data/all-data"
 import { dataBackupData } from "data/data-backup"
 import { TimeEntry, timeEntriesData } from "data/time-entries"
@@ -59,16 +60,23 @@ const BackupReminderData = () => (
       "Here you can define how often you want to be reminded."
     }
   >
-    <div className="mx-auto w-max">
+    <div className={cn(hstack({ gap: 4, wrap: true }), "mx-auto w-max")}>
       <NumberInput
         value={useAtomValue(dataBackupData).reminderSchedule}
         min={1}
         max={356}
         unit="day schedule"
-        onChange={(reminderSchedule = 0) =>
+        onChange={(reminderSchedule = 1) =>
           dataBackupData.set(state => ({ ...state, reminderSchedule }))
         }
       />
+      <Toggle
+        label="Auto download"
+        checked={useAtomValue(dataBackupData).autoDownload}
+        onChange={autoDownload =>
+          dataBackupData.set(state => ({ ...state, autoDownload }))
+        }
+      />
     </div>
   </Card>
 )

src/components/ui/toaster/toaster-data.ts

@@ -13,7 +13,7 @@ const defaultDurations: Record<AlertKind, number> = {
   error: 0,
 }
 
-interface ToastAction
+export interface ToastAction
   extends Pick<ButtonProps, "look" | "onClick" | "icon" | "to"> {
   label: string
 }

src/data/data-backup/data-backup.ts

@@ -4,11 +4,13 @@ import { dateHelpers } from "utils/date-helpers"
 interface DataBackupPreferences {
   last: string
   reminderSchedule: number
+  autoDownload: boolean
 }
 
 const defaultValue: DataBackupPreferences = {
   last: dateHelpers.today(),
   reminderSchedule: 30,
+  autoDownload: false,
 }
 
 export const dataBackupData = createAtom({

src/features/data-backup/check-backup-reminder.tsx

@@ -1,6 +1,6 @@
 import { HardDriveDownload, Settings } from "lucide-react"
 
-import { showToast } from "components/ui/toaster"
+import { showToast, ToastAction } from "components/ui/toaster"
 import { dataBackupData } from "data/data-backup"
 import { dateHelpers } from "utils/date-helpers"
 
@@ -11,10 +11,21 @@ const shouldRemind = () => {
   return dateHelpers.daysSince(last) >= reminderSchedule
 }
 
-export const checkBackupReminder = async () => {
-  await dataBackupData.didInit
-  if (!shouldRemind()) return
+const toBackupSettings: ToastAction = {
+  icon: Settings,
+  label: "Data Settings",
+  look: "flat",
+  to: "settings/data",
+}
 
+const downloadBackup: ToastAction = {
+  icon: HardDriveDownload,
+  label: "Export Data",
+  look: "ghost",
+  onClick: dataBackup.download,
+}
+
+const suggestDownload = () => {
   const toast = showToast({
     kind: "warn",
     title: "Backup Reminder",
@@ -24,25 +35,62 @@ export const checkBackupReminder = async () => {
         save it, to prevent data loss.
       </>
     ),
+    actions: [toBackupSettings, downloadBackup],
+  })
+
+  const unsubscribe = dataBackupData.subscribe(() => {
+    if (shouldRemind()) return
+    unsubscribe()
+    toast.close()
+  })
+}
+
+const autoDownload = () => {
+  let canceled = false
+
+  const toast = showToast({
+    kind: "info",
+    title: "Automated backup",
+    duration: 5000,
+    message: (
+      <>A backup of your data will be created automatically in a moment.</>
+    ),
     actions: [
       {
-        icon: Settings,
-        label: "Data Settings",
-        look: "flat",
-        to: "settings/data",
-      },
-      {
-        icon: HardDriveDownload,
-        label: "Export Data",
+        label: "Cancel",
         look: "ghost",
-        onClick: dataBackup.download,
+        onClick: () => {
+          canceled = true
+          toast.edit({
+            kind: "warn",
+            duration: undefined,
+            message: (
+              <>
+                Automated backup was cancelled. You can permanently disable it
+                in the data settings.
+              </>
+            ),
+            actions: [toBackupSettings, downloadBackup],
+          })
+        },
       },
     ],
   })
 
-  const unsubscribe = dataBackupData.subscribe(({ last, reminderSchedule }) => {
-    if (dateHelpers.daysSince(last) >= reminderSchedule) return
-    unsubscribe()
-    toast.close()
-  })
+  setTimeout(() => {
+    if (canceled) return
+    dataBackup.download()
+  }, 5000)
+}
+
+export const checkBackupReminder = async () => {
+  await dataBackupData.didInit
+  if (!shouldRemind()) return
+
+  const data = dataBackupData.get()
+  if (data.autoDownload) {
+    autoDownload()
+  } else {
+    suggestDownload()
+  }
 }