Add sexTrackingCategory as toggle

components/settings/customization/index.js

@@ -11,6 +11,8 @@ import {
   savePeriodPrediction,
   useCervixObservable,
   saveUseCervix,
+  saveSexTrackingCategory,
+  sexTrackingCategoryObservable,
 } from '../../../local-storage'
 import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
@@ -24,9 +26,18 @@ const Settings = () => {
     periodPredictionObservable.value
   )
 
+  const [isSexTrackingCategoryEnabled, setSexTrackingCategory] = useState(
+    sexTrackingCategoryObservable.value
+  )
+
   const [isEnabled, setIsEnabled] = useState(false)
   const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
 
+  const sexTrackingCategoryToggle = (value) => {
+    setSexTrackingCategory(value)
+    saveSexTrackingCategory(value)
+  }
+
   const onPeriodPredictionToggle = (value) => {
     setPeriodPrediction(value)
     savePeriodPrediction(value)
@@ -49,27 +60,9 @@ const Settings = () => {
     <AppPage title={'Customization'}>
       <Segment title={'Tracking categories'}>
         <AppSwitch
-          onToggle={toggleSwitch}
-          text={'temperature'}
-          value={isEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
-        />
-        <AppSwitch
-          onToggle={toggleSwitch}
-          text={'cervical mucus'}
-          value={isEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
-        />
-        <AppSwitch
-          onToggle={toggleSwitch}
-          text={'cervix'}
-          value={isEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
-        />
-        <AppSwitch
-          onToggle={toggleSwitch}
-          text={'sex'}
-          value={isEnabled}
+          onToggle={sexTrackingCategoryToggle}
+          text={"sex: when turned off it won't show"}
+          value={isSexTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch