Make desire, pain, mood and note customizable

components/chart/chart.js

@@ -16,6 +16,10 @@ import { getCycleDaysSortedByDate } from '../../db'
 import {
   getChartFlag,
   setChartFlag,
+  desireTrackingCategoryObservable,
+  moodTrackingCategoryObservable,
+  noteTrackingCategoryObservable,
+  painTrackingCategoryObservable,
   sexTrackingCategoryObservable,
 } from '../../local-storage'
 import { makeColumnInfo } from '../helpers/chart'
@@ -66,9 +70,15 @@ const CycleChart = ({ navigate, setDate }) => {
 
   const symptomRowEnabledSymptoms = symptomRowSymptoms.filter((symptom) => {
     if (symptom === 'sex') {
-      if (sexTrackingCategoryObservable.value) {
-        return symptom
-      }
+      return sexTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'desire') {
+      return desireTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'pain') {
+      return painTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'mood') {
+      return moodTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'note') {
+      return noteTrackingCategoryObservable.value ? symptom : null
     } else {
       return symptom
     }

components/cycle-day/cycle-day-overview.js

@@ -9,7 +9,13 @@ import SymptomPageTitle from './symptom-page-title'
 import { getCycleDay } from '../../db'
 import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 
-import { sexTrackingCategoryObservable } from '../../local-storage'
+import {
+  desireTrackingCategoryObservable,
+  moodTrackingCategoryObservable,
+  noteTrackingCategoryObservable,
+  painTrackingCategoryObservable,
+  sexTrackingCategoryObservable,
+} from '../../local-storage'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
@@ -28,18 +34,22 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
     setDate(prevDate(date))
   }
 
-  const isSexEnabled = sexTrackingCategoryObservable.value
-  const allesymptoms = SYMPTOMS.map((symptom) => {
+  const allEnabledSymptoms = SYMPTOMS.map((symptom) => {
     if (symptom === 'sex') {
-      if (isSexEnabled) {
-        return symptom
-      }
+      return sexTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'desire') {
+      return desireTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'pain') {
+      return painTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'mood') {
+      return moodTrackingCategoryObservable.value ? symptom : null
+    } else if (symptom === 'note') {
+      return noteTrackingCategoryObservable.value ? symptom : null
     } else {
       return symptom
     }
   })
-
-  const cleanSymptoms = allesymptoms.filter(Boolean)
+  const cleanSymptoms = allEnabledSymptoms.filter(Boolean)
 
   return (
     <AppPage>

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>