Merge branch 'chore/batch-prettify-rest' into 'main'

Prettify rest of the components files except stats

See merge request bloodyhealth/drip!507

components/calendar.js

@@ -75,7 +75,7 @@ class CalendarView extends Component {
           firstDay={1}
           onDayPress={this.passDateToDayView.bind(this)}
           markedDates={markedDates}
-          markingType='custom'
+          markingType="custom"
           theme={calendarTheme}
           // Max amount of months allowed to scroll to the past.
           pastScrollRange={120}

components/chart/chart.js

@@ -6,7 +6,7 @@ import {
   FlatList,
   PixelRatio,
   StyleSheet,
-  View
+  View,
 } from 'react-native'
 
 import AppLoadingView from '../common/app-loading'
@@ -24,7 +24,11 @@ import { navigate } from '../../slices/navigation'
 
 import { getCycleDaysSortedByDate } from '../../db'
 import nothingChanged from '../../db/db-unchanged'
-import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
+import {
+  getChartFlag,
+  scaleObservable,
+  setChartFlag,
+} from '../../local-storage'
 import { makeColumnInfo, nfpLines } from '../helpers/chart'
 
 import {
@@ -32,7 +36,7 @@ import {
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
   CHART_XAXIS_HEIGHT_RATIO,
-  SYMPTOMS
+  SYMPTOMS,
 } from '../../config'
 import { shared } from '../../i18n/en/labels'
 import { Colors, Spacing } from '../../styles'
@@ -40,7 +44,7 @@ import { Colors, Spacing } from '../../styles'
 class CycleChart extends Component {
   static propTypes = {
     navigate: PropTypes.func,
-    end: PropTypes.bool
+    end: PropTypes.bool,
   }
 
   constructor(props) {
@@ -80,12 +84,12 @@ class CycleChart extends Component {
 
   prepareSymptomData = () => {
     this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
-      return this.cycleDaysSortedByDate.some(cycleDay => {
+      return this.cycleDaysSortedByDate.some((cycleDay) => {
-        return (symptomName !== 'temperature') && cycleDay[symptomName]
+        return symptomName !== 'temperature' && cycleDay[symptomName]
       })
     })
     this.chartSymptoms = [...this.symptomRowSymptoms]
-    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
+    if (this.cycleDaysSortedByDate.some((day) => day.temperature)) {
       this.chartSymptoms.push('temperature')
       this.shouldShowTemperatureColumn = true
     }
@@ -114,15 +118,16 @@ class CycleChart extends Component {
     this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
     const remainingHeight = height * 0.7 - this.xAxisHeight
     this.symptomHeight = PixelRatio.roundToNearestPixel(
-      remainingHeight
+      remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
-      * CHART_SYMPTOM_HEIGHT_RATIO
     )
-    this.symptomRowHeight = PixelRatio.roundToNearestPixel(
+    this.symptomRowHeight =
+      PixelRatio.roundToNearestPixel(
         this.symptomRowSymptoms.length * this.symptomHeight
       ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
     this.columnHeight = remainingHeight - this.symptomRowHeight
-    const chartHeight = this.shouldShowTemperatureColumn ?
+    const chartHeight = this.shouldShowTemperatureColumn
-      height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
+      ? height * 0.7
+      : this.symptomRowHeight + this.xAxisHeight
     const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
     const columns = makeColumnInfo()
 
@@ -150,7 +155,7 @@ class CycleChart extends Component {
       chartHeight,
       chartLoaded,
       shouldShowHint,
-      numberOfColumnsToRender
+      numberOfColumnsToRender,
     } = this.state
     const hasDataToDisplay = this.chartSymptoms.length > 0
 
@@ -163,39 +168,38 @@ class CycleChart extends Component {
         {!hasDataToDisplay && <NoData />}
         {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
         <View style={styles.chartContainer}>
-          {shouldShowHint && chartLoaded &&
+          {shouldShowHint && chartLoaded && (
             <Tutorial onClose={this.setShouldShowHint} />
-          }
+          )}
-          {hasDataToDisplay && chartLoaded &&
+          {hasDataToDisplay &&
-            !this.shouldShowTemperatureColumn &&
+            chartLoaded &&
+            !this.shouldShowTemperatureColumn && (
               <View style={styles.centerItem}>
                 <AppText style={styles.warning}>
                   {shared.noTemperatureWarning}
                 </AppText>
               </View>
-          }
+            )}
           {hasDataToDisplay && (
             <View style={styles.chartArea}>
-
               {chartHeight && chartLoaded && (
                 <YAxis
                   height={this.columnHeight}
                   symptomsToDisplay={this.symptomRowSymptoms}
                   symptomsSectionHeight={this.symptomRowHeight}
-                  shouldShowTemperatureColumn=
+                  shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
-                    {this.shouldShowTemperatureColumn}
                   xAxisHeight={this.xAxisHeight}
                 />
               )}
 
-              {chartHeight &&
+              {chartHeight && (
                 <FlatList
                   horizontal={true}
                   inverted={true}
                   showsHorizontalScrollIndicator={false}
                   data={this.state.columns}
                   renderItem={this.renderColumn}
-                 keyExtractor={item => item}
+                  keyExtractor={(item) => item}
                   initialNumToRender={numberOfColumnsToRender}
                   windowSize={30}
                   onLayout={() => this.setState({ chartLoaded: true })}
@@ -204,12 +208,12 @@ class CycleChart extends Component {
                   updateCellsBatchingPeriod={800}
                   contentContainerStyle={{ height: chartHeight }}
                 />
-              }
+              )}
               {chartHeight && chartLoaded && (
                 <React.Fragment>
-                  {this.shouldShowTemperatureColumn &&
+                  {this.shouldShowTemperatureColumn && (
                     <HorizontalGrid height={this.columnHeight} />
-                  }
+                  )}
                 </React.Fragment>
               )}
             </View>
@@ -229,39 +233,36 @@ function LoadingMoreView({ end }) {
 }
 
 LoadingMoreView.propTypes = {
-  end: PropTypes.bool
+  end: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
   chartArea: {
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   chartContainer: {
-    flexDirection: 'column'
+    flexDirection: 'column',
   },
   loadingContainer: {
     height: '100%',
     backgroundColor: Colors.turquoiseLight,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   page: {
-    marginVertical: Spacing.small
+    marginVertical: Spacing.small,
   },
   pageContainer: {
-    paddingHorizontal: Spacing.base
+    paddingHorizontal: Spacing.base,
   },
   warning: {
-    padding: Spacing.large
+    padding: Spacing.large,
-  }
+  },
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(CycleChart)
-  null,
-  mapDispatchToProps,
-)(CycleChart)

components/chart/day-column.js

@@ -15,7 +15,7 @@ import CycleDayLabel from './cycle-day-label'
 import {
   symptomColorMethods,
   getTemperatureProps,
-  isSymptomDataComplete
+  isSymptomDataComplete,
 } from '../helpers/chart'
 
 class DayColumn extends Component {
@@ -40,12 +40,15 @@ class DayColumn extends Component {
     this.data = {}
 
     if (cycleDayData) {
-      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
+      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
         const symptomData = cycleDayData[symptom]
 
         if (symptomData && symptom === 'temperature') {
-          symptomDataToDisplay[symptom] =
+          symptomDataToDisplay[symptom] = getTemperatureProps(
-           getTemperatureProps(symptomData, columnHeight, dateString)
+            symptomData,
+            columnHeight,
+            dateString
+          )
         } else {
           if (symptomData && !symptomData.exclude) {
             // if symptomColorMethods entry doesn't exist for given symptom,
@@ -78,12 +81,13 @@ class DayColumn extends Component {
   }
 
   render() {
-    const { columnHeight,
+    const {
+      columnHeight,
       dateString,
       shouldShowTemperatureColumn,
       symptomHeight,
       symptomRowSymptoms,
-      xAxisHeight
+      xAxisHeight,
     } = this.props
 
     return (
@@ -91,22 +95,22 @@ class DayColumn extends Component {
         onPress={() => this.onDaySelect(dateString)}
         activeOpacity={1}
       >
-
+        {shouldShowTemperatureColumn && (
-        {shouldShowTemperatureColumn && <TemperatureColumn
+          <TemperatureColumn
             horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
             isVerticalLine={this.fhmAndLtl.drawFhmLine}
             data={this.data && this.data.temperature}
             columnHeight={columnHeight}
-        />}
-
-        <CycleDayLabel
-          height={xAxisHeight}
-          date={dateString}
           />
+        )}
+
+        <CycleDayLabel height={xAxisHeight} date={dateString} />
 
         {symptomRowSymptoms.map((symptom, i) => {
-          const hasSymptomData =
+          const hasSymptomData = Object.prototype.hasOwnProperty.call(
-            Object.prototype.hasOwnProperty.call(this.data, symptom)
+            this.data,
+            symptom
+          )
           return (
             <SymptomCell
               index={i}
@@ -117,23 +121,19 @@ class DayColumn extends Component {
                 hasSymptomData && isSymptomDataComplete(symptom, dateString)
               }
               height={symptomHeight}
-            />)
+            />
-        }
+          )
-        )}
+        })}
-
       </TouchableOpacity>
     )
   }
 }
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(DayColumn)
-  null,
-  mapDispatchToProps,
-)(DayColumn)

components/chart/no-data.js

@@ -15,7 +15,12 @@ const NoData = ({ navigate }) => {
   return (
     <View style={styles.container}>
       <AppText>{shared.noDataWarning}</AppText>
-      <Button isCTA onPress={() => {navigate('CycleDay')}}>
+      <Button
+        isCTA
+        onPress={() => {
+          navigate('CycleDay')
+        }}
+      >
         {shared.noDataButtonText}
       </Button>
     </View>
@@ -28,17 +33,14 @@ NoData.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems
+    ...Containers.centerItems,
-  }
+  },
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(NoData)
-  null,
-  mapDispatchToProps,
-)(NoData)

components/header/logo.js

@@ -18,24 +18,21 @@ const Logo = ({ navigate }) => {
 }
 
 Logo.propTypes = {
-  navigate: PropTypes.func.isRequired
+  navigate: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
   logo: {
     color: Colors.turquoiseDark,
     fontFamily: Fonts.bold,
-    fontSize: Sizes.title
+    fontSize: Sizes.title,
-  }
+  },
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(Logo)
-  null,
-  mapDispatchToProps,
-)(Logo)

components/header/menu-item.js

@@ -26,22 +26,19 @@ const MenuItem = ({ item, navigate, closeMenu }) => {
 MenuItem.propTypes = {
   item: PropTypes.object.isRequired,
   navigate: PropTypes.func.isRequired,
-  closeMenu: PropTypes.func.isRequired
+  closeMenu: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
   text: {
-    ...Typography.subtitle
+    ...Typography.subtitle,
-  }
+  },
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(MenuItem)
-  null,
-  mapDispatchToProps,
-)(MenuItem)

components/menu/menu-item.js

@@ -10,17 +10,16 @@ import { getNavigation, navigate } from '../../slices/navigation'
 import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles'
 
 const MenuItem = ({ component, icon, label, navigate, navigation }) => {
-  const isActive = (component === navigation.currentPage)
+  const isActive = component === navigation.currentPage
   const textStyle = isActive ? styles.menuTextActive : styles.menuText
   const testID = isActive ? 'activeMenuItem' : `menuItem${label}`
 
   return (
-    <TouchableOpacity
+    <TouchableOpacity style={styles.button} onPress={() => navigate(component)}>
-      style={styles.button}
-      onPress={() => navigate(component)}
-    >
       <Icon name={icon} isActive={isActive} />
-      <Text testID={testID} style={textStyle} >{label}</Text>
+      <Text testID={testID} style={textStyle}>
+        {label}
+      </Text>
     </TouchableOpacity>
   )
 }
@@ -36,37 +35,34 @@ MenuItem.propTypes = {
 const text = {
   fontFamily: Fonts.bold,
   fontSize: Sizes.small,
-  textTransform: 'uppercase'
+  textTransform: 'uppercase',
 }
 
 const styles = StyleSheet.create({
   button: {
     padding: Spacing.base,
-    ...Containers.centerItems
+    ...Containers.centerItems,
   },
   menuText: {
     color: Colors.grey,
-    ...text
+    ...text,
   },
   menuTextActive: {
     color: Colors.orange,
-    ...text
+    ...text,
-  }
+  },
 })
 
 const mapStateToProps = (state) => {
-  return({
+  return {
     navigation: getNavigation(state),
-  })
+  }
 }
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(MenuItem)
-  mapStateToProps,
-  mapDispatchToProps,
-)(MenuItem)

components/password-prompt.js

@@ -17,7 +17,7 @@ const cancelButton = { text: shared.cancel, style: 'cancel' }
 
 export default class PasswordPrompt extends Component {
   static propTypes = {
-    enableShowApp: PropTypes.func.isRequired
+    enableShowApp: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -32,22 +32,20 @@ export default class PasswordPrompt extends Component {
   }
 
   onConfirmDeletion = async () => {
-    Alert.alert(
+    Alert.alert(labels.deleteDatabaseTitle, labels.deleteDatabaseExplainer, [
-      labels.deleteDatabaseTitle,
+      cancelButton,
-      labels.deleteDatabaseExplainer,
+      { text: labels.deleteData, onPress: this.onDeleteData },
-      [cancelButton, { text: labels.deleteData, onPress: this.onDeleteData}]
+    ])
-    )
   }
 
   onDeleteData = () => {
-    Alert.alert(
+    Alert.alert(labels.areYouSureTitle, labels.areYouSure, [
-      labels.areYouSureTitle,
+      cancelButton,
-      labels.areYouSure,
+      {
-      [cancelButton, {
         text: labels.reallyDeleteData,
-        onPress: this.onDeleteDataConfirmation
+        onPress: this.onDeleteDataConfirmation,
-      }]
+      },
-    )
+    ])
   }
 
   onDeleteDataConfirmation = async () => {
@@ -56,17 +54,15 @@ export default class PasswordPrompt extends Component {
     this.props.enableShowApp()
   }
 
-  passHashToDb = async hash => {
+  passHashToDb = async (hash) => {
     const connected = await openDb(hash)
     if (!connected) {
-      Alert.alert(
+      Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
-        shared.incorrectPassword,
+        {
-        shared.incorrectPasswordMessage,
-        [{
           text: shared.tryAgain,
-          onPress: () => this.setState({ password: null })
+          onPress: () => this.setState({ password: null }),
-        }]
+        },
-      )
+      ])
       return
     }
     this.props.enableShowApp()
@@ -116,10 +112,10 @@ const styles = StyleSheet.create({
   contentContainer: {
     flex: 1,
     justifyContent: 'center',
-    marginHorizontal: Spacing.base
+    marginHorizontal: Spacing.base,
   },
   containerButtons: {
     ...Containers.rowContainer,
-    justifyContent: 'space-around'
+    justifyContent: 'space-around',
-  }
+  },
 })

components/settings/common/confirm-with-password.js

@@ -27,22 +27,20 @@ export default class ConfirmWithPassword extends Component {
     this.setState({ password: null })
   }
 
-
   onIncorrectPassword = () => {
-    Alert.alert(
+    Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
-      shared.incorrectPassword,
+      {
-      shared.incorrectPasswordMessage,
-      [{
         text: shared.cancel,
-        onPress: this.props.onCancel
+        onPress: this.props.onCancel,
-      }, {
+      },
+      {
         text: shared.tryAgain,
-        onPress: this.resetPasswordInput
+        onPress: this.resetPasswordInput,
-      }]
+      },
-    )
+    ])
   }
 
-  checkPassword = async hash => {
+  checkPassword = async (hash) => {
     try {
       await openDb(hash)
       this.props.onSuccess()
@@ -73,9 +71,7 @@ export default class ConfirmWithPassword extends Component {
           secureTextEntry={true}
         />
         <View style={styles.container}>
-          <Button onPress={this.props.onCancel}>
+          <Button onPress={this.props.onCancel}>{shared.cancel}</Button>
-            {shared.cancel}
-          </Button>
           <Button
             disabled={!isPassword}
             isCTA={isPassword}
@@ -86,17 +82,16 @@ export default class ConfirmWithPassword extends Component {
         </View>
       </React.Fragment>
     )
-
   }
 }
 
 ConfirmWithPassword.propTypes = {
   onSuccess: PropTypes.func,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
 }
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
-  }
+  },
 })

components/settings/data-management/delete-data.js

@@ -23,7 +23,7 @@ export default class DeleteData extends Component {
 
     this.state = {
       isPasswordSet: hasEncryptionObservable.value,
-      isConfirmingWithPassword: false
+      isConfirmingWithPassword: false,
     }
   }
 
@@ -38,21 +38,20 @@ export default class DeleteData extends Component {
 
   alertBeforeDeletion = async () => {
     const { question, message, confirmation, errors } = settings.deleteSegment
-    if (isDbEmpty() && !await RNFS.exists(exportedFilePath)) {
+    if (isDbEmpty() && !(await RNFS.exists(exportedFilePath))) {
       alertError(errors.noData)
     } else {
-      Alert.alert(
+      Alert.alert(question, message, [
-        question,
+        {
-        message,
-        [{
           text: confirmation,
-          onPress: this.onAlertConfirmation
+          onPress: this.onAlertConfirmation,
-        }, {
+        },
+        {
           text: sharedLabels.cancel,
           style: 'cancel',
-          onPress: this.cancelConfirmationWithPassword
+          onPress: this.cancelConfirmationWithPassword,
-        }]
+        },
-      )
+      ])
     }
   }
 
@@ -104,5 +103,5 @@ export default class DeleteData extends Component {
 
 DeleteData.propTypes = {
   isDeletingData: PropTypes.bool,
-  onStartDeletion: PropTypes.func.isRequired
+  onStartDeletion: PropTypes.func.isRequired,
 }

components/settings/data-management/index.js

@@ -14,13 +14,12 @@ import labels from '../../../i18n/en/settings'
 import { ACTION_DELETE, ACTION_EXPORT, ACTION_IMPORT } from '../../../config'
 
 export default class DataManagement extends Component {
-
   constructor(props) {
     super(props)
 
     this.state = {
       isLoading: false,
-      currentAction: null
+      currentAction: null,
     }
   }
 
@@ -62,7 +61,7 @@ export default class DataManagement extends Component {
     return (
       <React.Fragment>
         {isLoading && <AppLoadingView />}
-        {!isLoading &&
+        {!isLoading && (
           <AppPage>
             <Segment title={labels.export.button}>
               <AppText>{labels.export.segmentExplainer}</AppText>
@@ -84,7 +83,7 @@ export default class DataManagement extends Component {
               />
             </Segment>
           </AppPage>
-        }
+        )}
       </React.Fragment>
     )
   }

components/settings/menu-item.js

@@ -23,7 +23,7 @@ const MenuItem = ({ item, last, navigate }) => {
           <AppText style={styles.title}>{item.name}</AppText>
           {item.text.length > 0 && <AppText>{item.text}</AppText>}
         </View>
-        <AppIcon name='chevron-right' color={Colors.orange}/>
+        <AppIcon name="chevron-right" color={Colors.orange} />
       </TouchableOpacity>
     </Segment>
   )
@@ -32,26 +32,23 @@ const MenuItem = ({ item, last, navigate }) => {
 MenuItem.propTypes = {
   item: PropTypes.object.isRequired,
   last: PropTypes.bool.isRequired,
-  navigate: PropTypes.func.isRequired
+  navigate: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
   },
   title: {
     color: Colors.purple,
-    fontSize: Sizes.subtitle
+    fontSize: Sizes.subtitle,
-  }
+  },
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(MenuItem)
-  null,
-  mapDispatchToProps
-)(MenuItem)

components/settings/nfp-settings/temperature-slider.js

@@ -21,7 +21,7 @@ export default class TemperatureSlider extends Component {
   onTemperatureSliderChange = (values) => {
     this.setState({
       minTemperature: values[0],
-      maxTemperature: values[1]
+      maxTemperature: values[1],
     })
 
     try {
@@ -58,23 +58,23 @@ export default class TemperatureSlider extends Component {
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
-    paddingTop: Sizes.base
+    paddingTop: Sizes.base,
   },
   marker: {
     backgroundColor: Colors.turquoiseDark,
     borderRadius: 50,
     elevation: 4,
     height: Sizes.subtitle,
-    width: Sizes.subtitle
+    width: Sizes.subtitle,
   },
   slider: {
     borderRadius: 25,
-    height: Sizes.small
+    height: Sizes.small,
   },
   sliderAccentBackground: {
-    backgroundColor: Colors.turquoiseDark
+    backgroundColor: Colors.turquoiseDark,
   },
   sliderBackground: {
-    backgroundColor: Colors.turquoise
+    backgroundColor: Colors.turquoise,
   },
 })

components/settings/reminders/reminders.js

@@ -5,7 +5,10 @@ import AppSwitch from '../../common/app-switch'
 import Segment from '../../common/segment'
 import TemperatureReminder from './temperature-reminder'
 
-import { periodReminderObservable, savePeriodReminder } from '../../../local-storage'
+import {
+  periodReminderObservable,
+  savePeriodReminder,
+} from '../../../local-storage'
 
 import labels from '../../../i18n/en/settings'
 
@@ -14,7 +17,7 @@ export default class Reminders extends Component {
     super(props)
 
     this.state = {
-      isPeriodReminderEnabled: periodReminderObservable.value.enabled
+      isPeriodReminderEnabled: periodReminderObservable.value.enabled,
     }
   }