Merge branch 'feature/Customize-tracking-categories-sex-desire-pain–mood-note' into 'main'

Feature: customize tracking categories sex desire pain mood note

See merge request bloodyhealth/drip!648

components/chart/chart.js

@@ -13,7 +13,15 @@ import Tutorial from './Tutorial'
 import YAxis from './y-axis'
 
 import { getCycleDaysSortedByDate } from '../../db'
-import { getChartFlag, setChartFlag } from '../../local-storage'
+import {
+  getChartFlag,
+  setChartFlag,
+  desireTrackingCategoryObservable,
+  moodTrackingCategoryObservable,
+  noteTrackingCategoryObservable,
+  painTrackingCategoryObservable,
+  sexTrackingCategoryObservable,
+} from '../../local-storage'
 import { makeColumnInfo } from '../helpers/chart'
 
 import {
@@ -60,6 +68,22 @@ const CycleChart = ({ navigate, setDate }) => {
     (symptom) => symptom !== 'temperature'
   )
 
+  const symptomRowEnabledSymptoms = symptomRowSymptoms.filter((symptom) => {
+    if (symptom === 'sex') {
+      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 shouldShowTemperatureColumn = chartSymptoms.indexOf('temperature') > -1
 
   const { width, height } = Dimensions.get('window')
@@ -71,8 +95,9 @@ const CycleChart = ({ navigate, setDate }) => {
     remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
   )
   const symptomRowHeight =
-    PixelRatio.roundToNearestPixel(symptomRowSymptoms.length * symptomHeight) +
+    PixelRatio.roundToNearestPixel(
-    CHART_GRID_LINE_HORIZONTAL_WIDTH
+      symptomRowEnabledSymptoms.length * symptomHeight
+    ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
   const columnHeight = remainingHeight - symptomRowHeight
 
   const chartHeight = shouldShowTemperatureColumn
@@ -89,7 +114,7 @@ const CycleChart = ({ navigate, setDate }) => {
         navigate={navigate}
         symptomHeight={symptomHeight}
         columnHeight={columnHeight}
-        symptomRowSymptoms={symptomRowSymptoms}
+        symptomRowSymptoms={symptomRowEnabledSymptoms}
         chartSymptoms={chartSymptoms}
         shouldShowTemperatureColumn={shouldShowTemperatureColumn}
         xAxisHeight={xAxisHeight}
@@ -114,7 +139,7 @@ const CycleChart = ({ navigate, setDate }) => {
         <View style={styles.chartArea}>
           <YAxis
             height={columnHeight}
-            symptomsToDisplay={symptomRowSymptoms}
+            symptomsToDisplay={symptomRowEnabledSymptoms}
             symptomsSectionHeight={symptomRowHeight}
             shouldShowTemperatureColumn={shouldShowTemperatureColumn}
             xAxisHeight={xAxisHeight}

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

@@ -9,6 +9,13 @@ import SymptomPageTitle from './symptom-page-title'
 import { getCycleDay } from '../../db'
 import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 
+import {
+  desireTrackingCategoryObservable,
+  moodTrackingCategoryObservable,
+  noteTrackingCategoryObservable,
+  painTrackingCategoryObservable,
+  sexTrackingCategoryObservable,
+} from '../../local-storage'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
@@ -27,6 +34,23 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
     setDate(prevDate(date))
   }
 
+  const allEnabledSymptoms = SYMPTOMS.map((symptom) => {
+    if (symptom === 'sex') {
+      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 = allEnabledSymptoms.filter(Boolean)
+
   return (
     <AppPage>
       <SymptomPageTitle
@@ -35,7 +59,7 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
         onPrevCycleDay={showPrevCycleDay}
       />
       <View style={styles.container}>
-        {SYMPTOMS.map((symptom) => {
+        {cleanSymptoms.map((symptom) => {
           const symptomData =
             cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
 

components/settings/customization/index.js

@@ -7,10 +7,20 @@ import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
 
 import {
-  periodPredictionObservable,
+  desireTrackingCategoryObservable,
+  moodTrackingCategoryObservable,
+  noteTrackingCategoryObservable,
+  painTrackingCategoryObservable,
+  sexTrackingCategoryObservable,
+  saveDesireTrackingCategory,
+  saveMoodTrackingCategory,
+  saveNoteTrackingCategory,
+  savePainTrackingCategory,
   savePeriodPrediction,
-  useCervixObservable,
+  saveSexTrackingCategory,
   saveUseCervix,
+  periodPredictionObservable,
+  useCervixObservable,
 } from '../../../local-storage'
 import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
@@ -24,9 +34,51 @@ const Settings = () => {
     periodPredictionObservable.value
   )
 
+  const [isSexTrackingCategoryEnabled, setSexTrackingCategory] = useState(
+    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)
 
+  const sexTrackingCategoryToggle = (value) => {
+    setSexTrackingCategory(value)
+    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)
@@ -49,51 +101,33 @@ const Settings = () => {
     <AppPage title={'Customization'}>
       <Segment title={'Tracking categories'}>
         <AppSwitch
-          onToggle={toggleSwitch}
+          onToggle={sexTrackingCategoryToggle}
-          text={'temperature'}
+          text={"sex: when turned off it won't show"}
-          value={isEnabled}
+          value={isSexTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
+          onToggle={desireTrackingCategoryToggle}
-          text={'cervical mucus'}
+          text={"desire: when turned off it won't show"}
-          value={isEnabled}
+          value={isDesireTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
+          onToggle={painTrackingCategoryToggle}
-          text={'cervix'}
+          text={"pain: when turned off it won't show"}
-          value={isEnabled}
+          value={isPainTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
+          onToggle={moodTrackingCategoryToggle}
-          text={'sex'}
+          text={"mood: when turned off it won't show"}
-          value={isEnabled}
+          value={isMoodTrackingCategoryEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
-          onToggle={toggleSwitch}
+          onToggle={noteTrackingCategoryToggle}
-          text={'desire'}
+          text={"note: when turned off it won't show"}
-          value={isEnabled}
+          value={isNoteTrackingCategoryEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
-        />
-        <AppSwitch
-          onToggle={toggleSwitch}
-          text={'pain'}
-          value={isEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
-        />
-        <AppSwitch
-          onToggle={toggleSwitch}
-          text={'mood'}
-          value={isEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
-        />
-        <AppSwitch
-          onToggle={toggleSwitch}
-          text={'note'}
-          value={isEnabled}
           trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>

local-storage.js

@@ -92,6 +92,46 @@ export async function setChartFlag() {
   await AsyncStorage.setItem('isFirstChartView', JSON.stringify(false))
 }
 
+export const sexTrackingCategoryObservable = Observable()
+setObvWithInitValue('sex', sexTrackingCategoryObservable, true)
+
+export async function saveSexTrackingCategory(bool) {
+  await AsyncStorage.setItem('sex', JSON.stringify(bool))
+  sexTrackingCategoryObservable.set(bool)
+}
+
+export const desireTrackingCategoryObservable = Observable()
+setObvWithInitValue('desire', desireTrackingCategoryObservable, true)
+
+export async function saveDesireTrackingCategory(bool) {
+  await AsyncStorage.setItem('desire', JSON.stringify(bool))
+  desireTrackingCategoryObservable.set(bool)
+}
+
+export const painTrackingCategoryObservable = Observable()
+setObvWithInitValue('pain', painTrackingCategoryObservable, true)
+
+export async function savePainTrackingCategory(bool) {
+  await AsyncStorage.setItem('pain', JSON.stringify(bool))
+  painTrackingCategoryObservable.set(bool)
+}
+
+export const moodTrackingCategoryObservable = Observable()
+setObvWithInitValue('mood', moodTrackingCategoryObservable, true)
+
+export async function saveMoodTrackingCategory(bool) {
+  await AsyncStorage.setItem('mood', JSON.stringify(bool))
+  moodTrackingCategoryObservable.set(bool)
+}
+
+export const noteTrackingCategoryObservable = Observable()
+setObvWithInitValue('note', noteTrackingCategoryObservable, true)
+
+export async function saveNoteTrackingCategory(bool) {
+  await AsyncStorage.setItem('note', JSON.stringify(bool))
+  noteTrackingCategoryObservable.set(bool)
+}
+
 async function setObvWithInitValue(key, obv, defaultValue) {
   const result = await AsyncStorage.getItem(key)
   let value