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/customization/advance-notice-days-slider.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+import Slider from '@ptomasroos/react-native-multi-slider'
+import SliderLabel from './slider-label'
+
+import { styles } from './slider-styles'
+import {
+  ADVANCE_PERIOD_NOTICE_DAYS_MIN,
+  ADVANCE_PERIOD_NOTICE_DAYS_MAX,
+} from '../../../config'
+
+const AdvanceNoticeDaysSlider = ({
+  disabled,
+  advanceNoticeDays,
+  onAdvanceNoticeDaysChange,
+}) => {
+  const sliderAccentBackground = disabled
+    ? styles.disabledSliderAccentBackground
+    : styles.sliderAccentBackground
+
+  const sliderBackground = disabled
+    ? styles.disabledSliderBackground
+    : styles.sliderBackground
+
+  return (
+    <View style={styles.container}>
+      <Slider
+        customLabel={SliderLabel}
+        enableLabel={true}
+        markerStyle={styles.marker}
+        markerOffsetY={styles.markerOffsetY}
+        max={ADVANCE_PERIOD_NOTICE_DAYS_MAX}
+        min={ADVANCE_PERIOD_NOTICE_DAYS_MIN}
+        onValuesChange={onAdvanceNoticeDaysChange}
+        step={1}
+        showSteps={true}
+        snapped={true}
+        trackStyle={styles.slider}
+        values={[advanceNoticeDays]}
+        enabledOne={!disabled}
+        enabledTwo={false}
+        selectedStyle={sliderAccentBackground}
+        unselectedStyle={sliderBackground}
+      />
+    </View>
+  )
+}
+
+export default AdvanceNoticeDaysSlider
+
+AdvanceNoticeDaysSlider.propTypes = {
+  disabled: PropTypes.bool,
+  advanceNoticeDays: PropTypes.number,
+  onAdvanceNoticeDaysChange: PropTypes.func,
+}

components/settings/customization/slider-styles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native'
+import { Colors, Sizes } from '../../../styles'
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingTop: Sizes.base,
+  },
+  marker: {
+    backgroundColor: Colors.turquoiseDark,
+
+    borderRadius: 50,
+    elevation: 4,
+    height: Sizes.subtitle,
+    width: Sizes.subtitle,
+  },
+  slider: {
+    borderRadius: 25,
+    height: Sizes.small,
+    paddingTop: Sizes.base,
+  },
+  sliderAccentBackground: {
+    backgroundColor: Colors.turquoiseDark,
+  },
+  disabledSliderAccentBackground: {
+    backgroundColor: Colors.grey,
+  },
+  sliderBackground: {
+    backgroundColor: Colors.turquoise,
+  },
+  disabledSliderBackground: {
+    backgroundColor: Colors.greyLight,
+  },
+  markerOffsetY: Sizes.tiny,
+})

components/settings/customization/temperature-slider.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 import PropTypes from 'prop-types'
 import Slider from '@ptomasroos/react-native-multi-slider'
 
@@ -7,9 +7,9 @@ import alertError from '../common/alert-error'
 import SliderLabel from './slider-label'
 
 import { scaleObservable, saveTempScale } from '../../../local-storage'
-import { Colors, Sizes } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
+import { styles } from './slider-styles'
 
 const TemperatureSlider = ({ disabled }) => {
   const savedValue = scaleObservable.value
@@ -40,7 +40,7 @@ const TemperatureSlider = ({ disabled }) => {
         customLabel={SliderLabel}
         enableLabel={true}
         markerStyle={styles.marker}
-        markerOffsetY={Sizes.tiny}
+        markerOffsetY={styles.markerOffsetY}
         max={TEMP_MAX}
         min={TEMP_MIN}
         onValuesChange={onTemperatureSliderChange}
@@ -61,34 +61,3 @@ export default TemperatureSlider
 TemperatureSlider.propTypes = {
   disabled: PropTypes.bool,
 }
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    paddingTop: Sizes.base,
-  },
-  marker: {
-    backgroundColor: Colors.turquoiseDark,
-
-    borderRadius: 50,
-    elevation: 4,
-    height: Sizes.subtitle,
-    width: Sizes.subtitle,
-  },
-  slider: {
-    borderRadius: 25,
-    height: Sizes.small,
-  },
-  sliderAccentBackground: {
-    backgroundColor: Colors.turquoiseDark,
-  },
-  disabledSliderAccentBackground: {
-    backgroundColor: Colors.grey,
-  },
-  sliderBackground: {
-    backgroundColor: Colors.turquoise,
-  },
-  disabledSliderBackground: {
-    backgroundColor: Colors.greyLight,
-  },
-})

components/settings/reminders/period-reminder.js

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import AppSwitch from '../../common/app-switch'
+import AdvanceNoticeDaysSlider from '../customization/advance-notice-days-slider'
+
+import {
+  periodReminderObservable,
+  savePeriodReminder,
+  periodPredictionObservable,
+  saveAdvanceNoticeDays,
+  advanceNoticeDaysObservable,
+} from '../../../local-storage'
+import labels from '../../../i18n/en/settings'
+
+const PeriodReminder = () => {
+  const isPeriodPredictionDisabled = !periodPredictionObservable.value
+
+  const [isPeriodReminderEnabled, setIsPeriodReminderEnabled] = useState(
+    periodReminderObservable.value.enabled
+  )
+
+  const [advanceNoticeDays, setAdvanceNoticeDays] = useState(
+    advanceNoticeDaysObservable.value
+  )
+
+  const periodReminderToggle = (isEnabled) => {
+    setIsPeriodReminderEnabled(isEnabled)
+    savePeriodReminder({ enabled: isEnabled })
+  }
+
+  const handleAdvanceNoticeDaysChange = (days) => {
+    setAdvanceNoticeDays(days)
+    saveAdvanceNoticeDays(days)
+  }
+
+  return (
+    <>
+      <AppSwitch
+        onToggle={periodReminderToggle}
+        text={labels.periodReminder.reminderText(advanceNoticeDays)}
+        value={isPeriodReminderEnabled}
+        disabled={isPeriodPredictionDisabled}
+      />
+      {isPeriodReminderEnabled && (
+        <AdvanceNoticeDaysSlider
+          disabled={isPeriodPredictionDisabled}
+          advanceNoticeDays={parseInt(advanceNoticeDays, 10)}
+          onAdvanceNoticeDaysChange={handleAdvanceNoticeDaysChange}
+        />
+      )}
+    </>
+  )
+}
+
+export default PeriodReminder

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}>