lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Feature: customize tracking categories sex desire pain mood note

See merge request bloodyhealth/drip!648
This commit is contained in:
bl00dymarie
2024-01-23 13:25:20 +00:00
parent c645c48d31 28fd610e9d
commit 27274aa994
4 changed files with 164 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chart/chart.js
+30 -5
View File
@@ -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) +
CHART_GRID_LINE_HORIZONTAL_WIDTH
PixelRatio.roundToNearestPixel(
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
+25 -1
View File
@@ -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
+69 -35
View File
@@ -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}
text={'temperature'}
value={isEnabled}
onToggle={sexTrackingCategoryToggle}
text={"sex: when turned off it won't show"}
value={isSexTrackingCategoryEnabled}
trackColor={{ true: Colors.turquoiseDark }}
/>
<AppSwitch
onToggle={toggleSwitch}
text={'cervical mucus'}
value={isEnabled}
onToggle={desireTrackingCategoryToggle}
text={"desire: when turned off it won't show"}
value={isDesireTrackingCategoryEnabled}
trackColor={{ true: Colors.turquoiseDark }}
/>
<AppSwitch
onToggle={toggleSwitch}
text={'cervix'}
value={isEnabled}
onToggle={painTrackingCategoryToggle}
text={"pain: when turned off it won't show"}
value={isPainTrackingCategoryEnabled}
trackColor={{ true: Colors.turquoiseDark }}
/>
<AppSwitch
onToggle={toggleSwitch}
text={'sex'}
value={isEnabled}
onToggle={moodTrackingCategoryToggle}
text={"mood: when turned off it won't show"}
value={isMoodTrackingCategoryEnabled}
trackColor={{ true: Colors.turquoiseDark }}
/>
<AppSwitch
onToggle={toggleSwitch}
text={'desire'}
value={isEnabled}
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}
onToggle={noteTrackingCategoryToggle}
text={"note: when turned off it won't show"}
value={isNoteTrackingCategoryEnabled}
trackColor={{ true: Colors.turquoiseDark }}
/>
</Segment>
local-storage.js
+40
View File
@@ -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