506: Enable custom timing for period reminders

Users can now specify how many days prior to their next predicted period they want to be notified

components/settings/reminders/reminders.js

@@ -1,13 +1,11 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import AppPage from '../../common/app-page'
-import AppSwitch from '../../common/app-switch'
 import Segment from '../../common/segment'
 import TemperatureReminder from './temperature-reminder'
+import PeriodReminder from './period-reminder'
 
 import {
-  periodReminderObservable,
-  savePeriodReminder,
   periodPredictionObservable,
   temperatureTrackingCategoryObservable,
 } from '../../../local-storage'
@@ -16,17 +14,7 @@ import labels from '../../../i18n/en/settings'
 import { Alert, Pressable } from 'react-native'
 
 const Reminders = () => {
-  const isPeriodPredictionDisabled = !periodPredictionObservable.value
-
-  const [isPeriodReminderEnabled, setIsPeriodReminderEnabled] = useState(
-    periodReminderObservable.value.enabled
-  )
-  const periodReminderToggle = (isEnabled) => {
-    setIsPeriodReminderEnabled(isEnabled)
-    savePeriodReminder({ enabled: isEnabled })
-  }
-
-  const reminderDisabledPrompt = () => {
+  const periodReminderDisabledPrompt = () => {
     if (!periodPredictionObservable.value) {
       Alert.alert(
         labels.periodReminder.alertNoPeriodReminder.title,
@@ -43,16 +31,12 @@ const Reminders = () => {
       )
     }
   }
+
   return (
     <AppPage>
-      <Pressable onPress={reminderDisabledPrompt}>
+      <Pressable onPress={periodReminderDisabledPrompt}>
         <Segment title={labels.periodReminder.title}>
-          <AppSwitch
-            onToggle={periodReminderToggle}
-            text={labels.periodReminder.reminderText}
-            value={isPeriodReminderEnabled}
-            disabled={isPeriodPredictionDisabled}
-          />
+          <PeriodReminder />
         </Segment>
       </Pressable>
       <Pressable onPress={tempReminderDisabledPrompt}>