Make desire, pain, mood and note customizable

components/settings/customization/index.js

@@ -7,12 +7,20 @@ import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
 
 import {
-  periodPredictionObservable,
-  savePeriodPrediction,
-  useCervixObservable,
-  saveUseCervix,
-  saveSexTrackingCategory,
+  desireTrackingCategoryObservable,
+  moodTrackingCategoryObservable,
+  noteTrackingCategoryObservable,
+  painTrackingCategoryObservable,
   sexTrackingCategoryObservable,
+  saveDesireTrackingCategory,
+  saveMoodTrackingCategory,
+  saveNoteTrackingCategory,
+  savePainTrackingCategory,
+  savePeriodPrediction,
+  saveSexTrackingCategory,
+  saveUseCervix,
+  periodPredictionObservable,
+  useCervixObservable,
 } from '../../../local-storage'
 import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
@@ -30,6 +38,22 @@ const Settings = () => {
     sexTrackingCategoryObservable.value
   )
 
+  const [isDesireTrackingCategoryEnabled, setDesireTrackingCategory] = useState(
+    desireTrackingCategoryObservable.value
+  )
+
+  const [isPainTrackingCategoryEnabled, setPainTrackingCategory] = useState(
+    painTrackingCategoryObservable.value
+  )
+
+  const [isMoodTrackingCategoryEnabled, setMoodTrackingCategory] = useState(
+    moodTrackingCategoryObservable.value
+  )
+
+  const [isNoteTrackingCategoryEnabled, setNoteTrackingCategory] = useState(
+    noteTrackingCategoryObservable.value
+  )
+
   const [isEnabled, setIsEnabled] = useState(false)
   const toggleSwitch = () => setIsEnabled((previousState) => !previousState)
 
@@ -38,6 +62,23 @@ const Settings = () => {
     saveSexTrackingCategory(value)
   }
 
+  const desireTrackingCategoryToggle = (value) => {
+    setDesireTrackingCategory(value)
+    saveDesireTrackingCategory(value)
+  }
+  const painTrackingCategoryToggle = (value) => {
+    setPainTrackingCategory(value)
+    savePainTrackingCategory(value)
+  }
+  const moodTrackingCategoryToggle = (value) => {
+    setMoodTrackingCategory(value)
+    saveMoodTrackingCategory(value)
+  }
+  const noteTrackingCategoryToggle = (value) => {
+    setNoteTrackingCategory(value)
+    saveNoteTrackingCategory(value)
+  }
+
   const onPeriodPredictionToggle = (value) => {
     setPeriodPrediction(value)
     savePeriodPrediction(value)
@@ -66,27 +107,27 @@ const Settings = () => {
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
-          text={'desire'}
-          value={isEnabled}
+          onToggle={desireTrackingCategoryToggle}
+          text={"desire: when turned off it won't show"}
+          value={isDesireTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
-          text={'pain'}
-          value={isEnabled}
+          onToggle={painTrackingCategoryToggle}
+          text={"pain: when turned off it won't show"}
+          value={isPainTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
-          text={'mood'}
-          value={isEnabled}
+          onToggle={moodTrackingCategoryToggle}
+          text={"mood: when turned off it won't show"}
+          value={isMoodTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
-          text={'note'}
-          value={isEnabled}
+          onToggle={noteTrackingCategoryToggle}
+          text={"note: when turned off it won't show"}
+          value={isNoteTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>