refactoring disable function of temperature slider

components/cycle-day/select-tab-group.js

@@ -21,7 +21,7 @@ export default function SelectTabGroup({
 
   // Disable is only used for secondarySymptom in customization, if more come up maybe consider more tidy solution
   const showDisableAlert = (label) => {
-    if (label === 'cervix' || 'mucus') {
+    if (label === 'cervix' || label === 'mucus') {
       Alert.alert(
         labels.secondarySymptom.disabled.title,
         labels.secondarySymptom.disabled.message
@@ -68,6 +68,7 @@ SelectTabGroup.propTypes = {
   activeButton: PropTypes.number,
   buttons: PropTypes.array.isRequired,
   onSelect: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({

components/settings/customization/disabled-temperature-slider.js

@@ -1,62 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import Slider from '@ptomasroos/react-native-multi-slider'
-
-import SliderLabel from './slider-label'
-
-import { scaleObservable } from '../../../local-storage'
-import { Colors, Sizes } from '../../../styles'
-
-import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
-
-const DisabledTemperatureSlider = () => {
-  const savedValue = scaleObservable.value
-  const minTemperature = savedValue.min
-  const maxTemperature = savedValue.max
-
-  return (
-    <View style={styles.container}>
-      <Slider
-        customLabel={SliderLabel}
-        enableLabel={true}
-        markerStyle={styles.marker}
-        markerOffsetY={Sizes.tiny}
-        max={TEMP_MAX}
-        min={TEMP_MIN}
-        selectedStyle={styles.sliderAccentBackground}
-        step={TEMP_SLIDER_STEP}
-        trackStyle={styles.slider}
-        unselectedStyle={styles.sliderBackground}
-        values={[minTemperature, maxTemperature]}
-        enabledOne={false}
-        enabledTwo={false}
-      />
-    </View>
-  )
-}
-
-export default DisabledTemperatureSlider
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    paddingTop: Sizes.base,
-  },
-  marker: {
-    backgroundColor: Colors.grey,
-    borderRadius: 50,
-    elevation: 4,
-    height: Sizes.subtitle,
-    width: Sizes.subtitle,
-  },
-  slider: {
-    borderRadius: 25,
-    height: Sizes.small,
-  },
-  sliderAccentBackground: {
-    backgroundColor: Colors.grey,
-  },
-  sliderBackground: {
-    backgroundColor: Colors.greyLight,
-  },
-})

components/settings/customization/index.js

@@ -35,7 +35,6 @@ import {
 } from '../../../local-storage'
 import labels from '../../../i18n/en/settings'
 import { SYMPTOMS } from '../../../config'
-import DisabledTemperatureSlider from './disabled-temperature-slider'
 
 const Settings = () => {
   const { t } = useTranslation(null, { keyPrefix: 'symptoms' })
@@ -81,6 +80,7 @@ const Settings = () => {
   const [isFertilityTrackingEnabled, setFertilityTrackingEnabled] = useState(
     fertilityTrackingObservable.value
   )
+
   const fertilityTrackingToggle = (value) => {
     setFertilityTrackingEnabled(value)
     saveFertilityTrackingEnabled(value)
@@ -203,14 +203,17 @@ const Settings = () => {
     : labels.secondarySymptom.cervixModeOff
 
   const sliderDisabledPrompt = () => {
-    if (!isFertilityTrackingEnabled) {
+    if (!isTemperatureTrackingCategoryEnabled) {
       Alert.alert(labels.tempScale.disabled, labels.tempScale.disabledMessage)
     }
   }
 
   const fertilityDisabledPrompt = () => {
-    if (!isFertilityTrackingEnabled) {
-      Alert.alert(labels.disabled.title, labels.fertilityTracking.disabled)
+    if (!manageFertilityFeature) {
+      Alert.alert(
+        labels.fertilityTracking.disabledTitle,
+        labels.fertilityTracking.disabled
+      )
     }
   }
 
@@ -273,19 +276,11 @@ const Settings = () => {
           />
         </Segment>
       </Pressable>
-      {/* Not ideal to have a extra DisabledTemperatureSlider but right now hard to have always the correct state of fertilityTrackingObservable in TemperatureSlider */}
+
       <Pressable onPress={sliderDisabledPrompt}>
         <Segment title={labels.tempScale.segmentTitle}>
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
-          {isTemperatureTrackingCategoryEnabled & isFertilityTrackingEnabled ? (
-            <>
-              <TemperatureSlider />
-            </>
-          ) : (
-            <>
-              <DisabledTemperatureSlider />
-            </>
-          )}
+          <TemperatureSlider disabled={!isTemperatureTrackingCategoryEnabled} />
         </Segment>
       </Pressable>
 

components/settings/customization/temperature-slider.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
 import Slider from '@ptomasroos/react-native-multi-slider'
 
 import alertError from '../common/alert-error'
@@ -10,7 +11,7 @@ import { Colors, Sizes } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
 
-const TemperatureSlider = () => {
+const TemperatureSlider = ({ disabled }) => {
   const savedValue = scaleObservable.value
   const [minTemperature, setMinTemperature] = useState(savedValue.min)
   const [maxTemperature, setMaxTemperature] = useState(savedValue.max)
@@ -25,6 +26,14 @@ const TemperatureSlider = () => {
     }
   }
 
+  const sliderAccentBackground = disabled
+    ? styles.disabledSliderAccentBackground
+    : styles.sliderAccentBackground
+
+  const sliderBackground = disabled
+    ? styles.disabledSliderBackground
+    : styles.sliderBackground
+
   return (
     <View style={styles.container}>
       <Slider
@@ -35,11 +44,13 @@ const TemperatureSlider = () => {
         max={TEMP_MAX}
         min={TEMP_MIN}
         onValuesChange={onTemperatureSliderChange}
-        selectedStyle={styles.sliderAccentBackground}
         step={TEMP_SLIDER_STEP}
         trackStyle={styles.slider}
-        unselectedStyle={styles.sliderBackground}
         values={[minTemperature, maxTemperature]}
+        enabledOne={!disabled}
+        enabledTwo={!disabled}
+        selectedStyle={sliderAccentBackground}
+        unselectedStyle={sliderBackground}
       />
     </View>
   )
@@ -47,6 +58,10 @@ const TemperatureSlider = () => {
 
 export default TemperatureSlider
 
+TemperatureSlider.propTypes = {
+  disabled: PropTypes.bool,
+}
+
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -54,6 +69,7 @@ const styles = StyleSheet.create({
   },
   marker: {
     backgroundColor: Colors.turquoiseDark,
+
     borderRadius: 50,
     elevation: 4,
     height: Sizes.subtitle,
@@ -66,7 +82,13 @@ const styles = StyleSheet.create({
   sliderAccentBackground: {
     backgroundColor: Colors.turquoiseDark,
   },
+  disabledSliderAccentBackground: {
+    backgroundColor: Colors.grey,
+  },
   sliderBackground: {
     backgroundColor: Colors.turquoise,
   },
+  disabledSliderBackground: {
+    backgroundColor: Colors.greyLight,
+  },
 })

i18n/en/settings.js

@@ -43,7 +43,7 @@ export default {
     saveError: 'Could not save temperature scale settings',
     disabled: 'Disabled',
     disabledMessage:
-      'To use the temperature scale please first enable both temperature tracking and fertility phase calculation above.',
+      'To use the temperature scale please first enable temperature tracking above.',
   },
 
   tempReminder: {
@@ -71,8 +71,9 @@ export default {
   },
   fertilityTracking: {
     title: 'Fertility phases calculation',
+    disabledTitle: 'Disabled',
     disabled:
-      'To use this feature please enable temperature tracking and cervical mucus or cervix tracking.',
+      'To use fertility phases calculation please enable temperature tracking and cervical mucus or cervix tracking above.',
     message:
       'If you enter menstrual bleeding, temperature and cervical mucus or cervix data according to the sympto-thermal rules, drip will calculate cycle phases with the provided data.',
     on: 'If you switch this off, drip will not show fertility related information.',