Merge branch 'main' into 'feature/prods'

# Conflicts:
#   components/cycle-day/symptom-edit-view.js
#   i18n/en/cycle-day.js

components/chart/chart-legend.js

@@ -1,23 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
-import moment from 'moment'
 
 import AppText from '../common/app-text'
 
 import { Sizes, Typography } from '../../styles'
 import { CHART_YAXIS_WIDTH } from '../../config'
+import { shared as labels } from '../../i18n/en/labels'
 
-const ChartLegend = ({ height, currentDate }) => {
-  const displayedMonth = moment(currentDate).format('MMM')
-
+const ChartLegend = ({ height }) => {
   return (
     <View style={[styles.container, { height }]}>
       <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
         <AppText style={styles.textBold}>#</AppText>
       </View>
       <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
-        <AppText style={styles.text}>{displayedMonth}</AppText>
+        <AppText style={styles.text}>{labels.date}</AppText>
       </View>
     </View>
   )
@@ -25,7 +23,6 @@ const ChartLegend = ({ height, currentDate }) => {
 
 ChartLegend.propTypes = {
   height: PropTypes.number.isRequired,
-  currentDate: PropTypes.string,
 }
 
 const styles = StyleSheet.create({

components/chart/chart.js

@@ -32,7 +32,6 @@ import {
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
   CHART_XAXIS_HEIGHT_RATIO,
-  CHART_YAXIS_WIDTH,
   SYMPTOMS,
 } from '../../config'
 import { Spacing } from '../../styles'
@@ -98,7 +97,8 @@ const CycleChart = ({ navigate, setDate }) => {
   const shouldShowNoDataWarning =
     isTemperatureEnabled && chartSymptoms.indexOf('temperature') <= -1
 
-  const { height } = Dimensions.get('window')
+  const { width, height } = Dimensions.get('window')
+  const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
 
   const xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
   const remainingHeight = height * 0.7 - xAxisHeight
@@ -117,35 +117,6 @@ const CycleChart = ({ navigate, setDate }) => {
 
   const columns = makeColumnInfo()
 
-  // Monitor scrolling to show proper month abbreviation in symptom chart
-
-  const [currentScrollPosition, setCurrentScrollPosition] = useState(0)
-
-  const handleScroll = (event) => {
-    const currentPosition = event.nativeEvent.contentOffset.x
-    setCurrentScrollPosition(currentPosition)
-  }
-
-  const [numberOfColumnsToRender, setNumberOfColumnsToRender] = useState(0)
-  const onLayout = (event) => {
-    const { width } = event.nativeEvent.layout
-    setNumberOfColumnsToRender(
-      Math.round((width - CHART_YAXIS_WIDTH) / CHART_COLUMN_WIDTH)
-    )
-  }
-
-  const getLeftmostComputedDateInView = () => {
-    const rightmostVisibleIndexInView = Math.floor(
-      currentScrollPosition / CHART_COLUMN_WIDTH
-    )
-    const leftmostVisibleIndexInView =
-      rightmostVisibleIndexInView + numberOfColumnsToRender >= columns.length
-        ? columns.length - 1
-        : rightmostVisibleIndexInView + numberOfColumnsToRender
-    // detect leftmost aka oldest visible day to render its month dynamically
-    return columns[leftmostVisibleIndexInView]
-  }
-
   const renderColumn = ({ item }) => {
     return (
       <DayColumn
@@ -173,7 +144,7 @@ const CycleChart = ({ navigate, setDate }) => {
       contentContainerStyle={styles.pageContainer}
       scrollViewStyle={styles.page}
     >
-      <View style={styles.chartContainer} onLayout={onLayout}>
+      <View style={styles.chartContainer}>
         {shouldShowHint && <Tutorial onClose={hideHint} />}
         {shouldShowNoDataWarning && <NoTemperature />}
         <View style={styles.chartArea}>
@@ -183,15 +154,12 @@ const CycleChart = ({ navigate, setDate }) => {
             symptomsSectionHeight={symptomRowHeight}
             shouldShowTemperatureColumn={shouldShowTemperatureColumn}
             xAxisHeight={xAxisHeight}
-            computedDate={getLeftmostComputedDateInView()}
           />
           <MainGrid
             data={columns}
             renderItem={renderColumn}
             initialNumToRender={numberOfColumnsToRender}
             contentContainerStyle={{ height: chartHeight }}
-            onScroll={handleScroll}
-            scrollEventThrottle={16} // Detects scroll events at roughly 60fps
           />
           {shouldShowTemperatureColumn && (
             <HorizontalGrid height={columnHeight} />

components/chart/y-axis.js

@@ -14,14 +14,13 @@ const YAxis = ({
   symptomsSectionHeight,
   shouldShowTemperatureColumn,
   xAxisHeight,
-  computedDate,
 }) => {
   const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
 
   return (
     <View>
       {shouldShowTemperatureColumn && <TickList height={height} />}
-      <ChartLegend height={xAxisHeight} currentDate={computedDate} />
+      <ChartLegend height={xAxisHeight} />
       <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
         {symptomsToDisplay.map((symptom) => (
           <SymptomIcon
@@ -41,7 +40,6 @@ YAxis.propTypes = {
   symptomsSectionHeight: PropTypes.number,
   shouldShowTemperatureColumn: PropTypes.bool,
   xAxisHeight: PropTypes.number.isRequired,
-  computedDate: PropTypes.string,
 }
 
 const styles = StyleSheet.create({

components/cycle-day/symptom-box.js

@@ -63,11 +63,11 @@ const SymptomBox = ({
         />
         <View style={styles.textContainer}>
           <AppText style={symptomNameStyle}>{t(symptom)}</AppText>
-          {symptomDataToDisplay && (
+          {symptomDataToDisplay ? (
             <AppText style={textStyle} numberOfLines={4}>
               {symptomDataToDisplay}
             </AppText>
-          )}
+          ) : null}
         </View>
       </TouchableOpacity>
     </>

components/cycle-day/symptom-edit-view.js

@@ -12,7 +12,7 @@ import SelectBoxGroup from './select-box-group'
 import SelectTabGroup from './select-tab-group'
 import Temperature from './temperature'
 
-import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
+import { blank, save, shouldShow, symptomPage } from '../helpers/cycle-day'
 import { showToast } from '../helpers/general'
 
 import { fertilityTrackingObservable } from '../../local-storage'
@@ -21,9 +21,10 @@ import info from '../../i18n/en/symptom-info'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
 const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
-  const symptomConfig = symtomPage[symptom]
+  const symptomConfig = symptomPage[symptom]
   const [data, setData] = useState(symptomData ? symptomData : blank[symptom])
   const [shouldShowInfo, setShouldShowInfo] = useState(false)
+  const isBleeding = symptom === 'bleeding'
   const getParsedData = () => JSON.parse(JSON.stringify(data))
   const onPressLearnMore = () => setShouldShowInfo(!shouldShowInfo)
   const isFertilityTrackingEnabled = fertilityTrackingObservable.value
@@ -116,6 +117,15 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
     style: styles.input,
     textAlignVertical: 'top',
   }
+  const excludeToggle = shouldShow(symptomConfig.excludeText) && (
+    <Segment style={styles.segmentBorder}>
+      <AppSwitch
+        onToggle={onExcludeToggle}
+        text={symptomPage[symptom].excludeText}
+        value={data.exclude}
+      />
+    </Segment>
+  )
 
   return (
     <AppModal onClose={onSave}>
@@ -130,10 +140,16 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
             save={(value, field) => onSaveTemperature(value, field)}
           />
         )}
+
+        {/* There should not be a line between the bleeding tab group and the exclude toggle */}
         {shouldShow(symptomConfig.selectTabGroups) &&
-          symtomPage[symptom].selectTabGroups.map((group) => {
+          symptomPage[symptom].selectTabGroups.map((group) => {
             return (
-              <Segment key={group.key} style={styles.segmentBorder}>
+              <Segment
+                key={group.key}
+                style={styles.segmentBorder}
+                last={isBleeding}
+              >
                 <AppText style={styles.title}>{group.title}</AppText>
                 <SelectTabGroup
                   activeButton={data[group.key]}
@@ -143,8 +159,12 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
               </Segment>
             )
           })}
+
+        {/*for bleeding, we want to move the "exclude" toggle up between the tab and box groups, all other symptoms should still have it at the bottom*/}
+        {isBleeding && excludeToggle}
+
         {shouldShow(symptomConfig.selectBoxGroups) &&
-          symtomPage[symptom].selectBoxGroups.map((group) => {
+          symptomPage[symptom].selectBoxGroups.map((group) => {
             const isOtherSelected =
               data['other'] !== null &&
               data['other'] !== false &&
@@ -183,7 +203,7 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
           )}
         {shouldShow(symptomConfig.note) && (
           <Segment style={styles.segmentBorder}>
-            <AppText>{symtomPage[symptom].note}</AppText>
+            <AppText>{symptomPage[symptom].note}</AppText>
             <AppTextInput
               {...inputProps}
               onChangeText={onEditNote}

components/helpers/cycle-day.js

@@ -23,6 +23,7 @@ const noteDescription = labels.noteExplainer
 const painLabels = labels.pain.categories
 const sexLabels = labels.sex.categories
 const temperatureLabels = labels.temperature
+const productLabels = labels.products.categories
 
 const minutes = ChronoUnit.MINUTES
 
@@ -60,6 +61,15 @@ export const blank = {
   bleeding: {
     exclude: false,
     value: null,
+    pad: null,
+    tampon: null,
+    underwear: null,
+    cup: null,
+    softTampon: null,
+    disk: null,
+    none: null,
+    other: null,
+    note: null,
   },
   cervix: {
     exclude: false,
@@ -125,11 +135,10 @@ export const blank = {
   },
 }
 
-export const symtomPage = {
+export const symptomPage = {
   bleeding: {
     excludeText: labels.bleeding.exclude.explainer,
     note: null,
-    selectBoxGroups: null,
     selectTabGroups: [
       {
         key: 'value',
@@ -137,6 +146,13 @@ export const symtomPage = {
         title: labels.bleeding.heaviness.explainer,
       },
     ],
+    selectBoxGroups: [
+      {
+        key: 'products',
+        options: productLabels,
+        title: labels.products.explainer,
+      },
+    ],
   },
   cervix: {
     excludeText: cervixLabels.excludeExplainer,
@@ -246,12 +262,7 @@ export const symtomPage = {
 
 export const save = {
   bleeding: (data, date, shouldDeleteData) => {
-    const { exclude, value } = data
-    const isDataEntered = isNumber(value)
-    const valuesToSave =
-      shouldDeleteData || !isDataEntered ? null : { value, exclude }
-
-    saveSymptom('bleeding', date, valuesToSave)
+    saveBoxSymptom(data, date, shouldDeleteData, 'bleeding')
   },
   cervix: (data, date, shouldDeleteData) => {
     const { opening, firmness, position, exclude } = data
@@ -329,10 +340,36 @@ const saveBoxSymptom = (data, date, shouldDeleteData, symptom) => {
 }
 
 const label = {
-  bleeding: ({ value, exclude }) => {
-    if (isNumber(value)) {
-      const bleedingLabel = bleedingLabels[value]
-      return exclude ? `(${bleedingLabel})` : bleedingLabel
+  bleeding: (bleeding) => {
+    bleeding = mapRealmObjToJsObj(bleeding)
+    const bleedingLabel = []
+    if (bleeding && Object.values({ ...bleeding }).some((val) => val)) {
+      Object.keys(bleeding).forEach((key) => {
+        if (bleeding[key] != null && key === 'value') {
+          bleedingLabel.push(
+            bleeding.exclude
+              ? `(${bleedingLabels[bleeding[key]]})`
+              : bleedingLabels[bleeding[key]]
+          )
+        }
+        if (
+          bleeding[key] &&
+          key !== 'other' &&
+          key !== 'note' &&
+          key !== 'value' &&
+          key !== 'exclude'
+        ) {
+          bleedingLabel.push(bleedingLabels[key] || productLabels[key])
+        }
+        if (key === 'other' && bleeding.other) {
+          let label = productLabels[key]
+          if (bleeding.note) {
+            label = `${label} (${bleeding.note})`
+          }
+          bleedingLabel.push(label)
+        }
+      })
+      return bleedingLabel.join(', ')
     }
   },
   temperature: ({ value, time, exclude }) => {

db/index.js

@@ -65,6 +65,7 @@ export function getBleedingDaysSortedByDate() {
   return db
     .objects('CycleDay')
     .filtered('bleeding != null')
+    .filtered('bleeding.value != null')
     .sorted('date', true)
 }
 export function getTemperatureDaysSortedByDate() {
@@ -88,9 +89,8 @@ export function getCycleStartsSortedByDate() {
 export function saveSymptom(symptom, date, val) {
   let cycleDay = getCycleDay(date)
   if (!cycleDay) cycleDay = createCycleDay(date)
-
   db.write(() => {
-    if (symptom === 'bleeding') {
+    if (symptom === 'bleeding' && val != null && val.value != null) {
       const mensesDaysAfter = getMensesDaysRightAfter(cycleDay)
       maybeSetNewCycleStart({
         val,

db/schemas/5.js

@@ -0,0 +1,195 @@
+const TemperatureSchema = {
+  name: 'Temperature',
+  properties: {
+    value: 'double',
+    exclude: 'bool',
+    time: {
+      type: 'string',
+      optional: true,
+    },
+    note: {
+      type: 'string',
+      optional: true,
+    },
+  },
+}
+
+const BleedingSchema = {
+  name: 'Bleeding',
+  properties: {
+    value: { type: 'int', optional: true },
+    exclude: 'bool',
+    pad: { type: 'bool', optional: true },
+    tampon: { type: 'bool', optional: true },
+    underwear: { type: 'bool', optional: true },
+    cup: { type: 'bool', optional: true },
+    softTampon: { type: 'bool', optional: true },
+    disk: { type: 'bool', optional: true },
+    none: { type: 'bool', optional: true },
+    other: { type: 'bool', optional: true },
+    note: { type: 'string', optional: true },
+  },
+}
+
+const MucusSchema = {
+  name: 'Mucus',
+  properties: {
+    feeling: { type: 'int', optional: true },
+    texture: { type: 'int', optional: true },
+    value: { type: 'int', optional: true },
+    exclude: 'bool',
+  },
+}
+
+const CervixSchema = {
+  name: 'Cervix',
+  properties: {
+    opening: { type: 'int', optional: true },
+    firmness: { type: 'int', optional: true },
+    position: { type: 'int', optional: true },
+    exclude: 'bool',
+  },
+}
+
+const NoteSchema = {
+  name: 'Note',
+  properties: {
+    value: 'string',
+  },
+}
+
+const DesireSchema = {
+  name: 'Desire',
+  properties: {
+    value: 'int',
+  },
+}
+
+const SexSchema = {
+  name: 'Sex',
+  properties: {
+    solo: { type: 'bool', optional: true },
+    partner: { type: 'bool', optional: true },
+    condom: { type: 'bool', optional: true },
+    pill: { type: 'bool', optional: true },
+    iud: { type: 'bool', optional: true },
+    patch: { type: 'bool', optional: true },
+    ring: { type: 'bool', optional: true },
+    implant: { type: 'bool', optional: true },
+    diaphragm: { type: 'bool', optional: true },
+    none: { type: 'bool', optional: true },
+    other: { type: 'bool', optional: true },
+    note: { type: 'string', optional: true },
+  },
+}
+
+const PainSchema = {
+  name: 'Pain',
+  properties: {
+    cramps: { type: 'bool', optional: true },
+    ovulationPain: { type: 'bool', optional: true },
+    headache: { type: 'bool', optional: true },
+    backache: { type: 'bool', optional: true },
+    nausea: { type: 'bool', optional: true },
+    tenderBreasts: { type: 'bool', optional: true },
+    migraine: { type: 'bool', optional: true },
+    other: { type: 'bool', optional: true },
+    note: { type: 'string', optional: true },
+  },
+}
+
+const MoodSchema = {
+  name: 'Mood',
+  properties: {
+    happy: { type: 'bool', optional: true },
+    sad: { type: 'bool', optional: true },
+    stressed: { type: 'bool', optional: true },
+    balanced: { type: 'bool', optional: true },
+    fine: { type: 'bool', optional: true },
+    anxious: { type: 'bool', optional: true },
+    energetic: { type: 'bool', optional: true },
+    fatigue: { type: 'bool', optional: true },
+    angry: { type: 'bool', optional: true },
+    other: { type: 'bool', optional: true },
+    note: { type: 'string', optional: true },
+  },
+}
+
+const CycleDaySchema = {
+  name: 'CycleDay',
+  primaryKey: 'date',
+  properties: {
+    date: 'string',
+    temperature: {
+      type: 'Temperature',
+      optional: true,
+    },
+    isCycleStart: 'bool',
+    bleeding: {
+      type: 'Bleeding',
+      optional: true,
+    },
+    mucus: {
+      type: 'Mucus',
+      optional: true,
+    },
+    cervix: {
+      type: 'Cervix',
+      optional: true,
+    },
+    note: {
+      type: 'Note',
+      optional: true,
+    },
+    desire: {
+      type: 'Desire',
+      optional: true,
+    },
+    sex: {
+      type: 'Sex',
+      optional: true,
+    },
+    pain: {
+      type: 'Pain',
+      optional: true,
+    },
+    mood: {
+      type: 'Mood',
+      optional: true,
+    },
+  },
+}
+
+export default {
+  schema: [
+    CycleDaySchema,
+    TemperatureSchema,
+    BleedingSchema,
+    MucusSchema,
+    CervixSchema,
+    NoteSchema,
+    DesireSchema,
+    SexSchema,
+    PainSchema,
+    MoodSchema,
+  ],
+  schemaVersion: 5,
+  migration: (oldRealm, newRealm) => {
+    if (oldRealm.schemaVersion < 5) {
+      const newObjects = newRealm.objects('Bleeding')
+
+      // loop through all objects and assign a default value for new properties
+      for (let i = 0; i < newObjects.length; i++) {
+        newObjects[i].pad = false
+        newObjects[i].tampon = false
+        newObjects[i].underwear = false
+        newObjects[i].cup = false
+        newObjects[i].softTampon = false
+        newObjects[i].disk = false
+        newObjects[i].none = false
+        newObjects[i].other = false
+        newObjects[i].note = null
+      }
+    }
+  },
+}

db/schemas/index.js

@@ -3,5 +3,6 @@ import schema1 from './1.js'
 import schema2 from './2.js'
 import schema3 from './3.js'
 import schema4 from './4.js'
+import schema5 from './5.js'
 
-export default [schema0, schema1, schema2, schema3, schema4]
+export default [schema0, schema1, schema2, schema3, schema4, schema5]

i18n/en/cycle-day.js

@@ -13,6 +13,21 @@ export const bleeding = {
   },
 }
 
+export const products = {
+  categories: {
+    pad: 'pad',
+    tampon: 'tampon',
+    underwear: 'underwear',
+    cup: 'cup',
+    softTampon: 'soft tampon',
+    disk: 'disk',
+    none: 'none',
+    other: 'other',
+  },
+  header: 'period products',
+  explainer: 'Did you use period products?',
+}
+
 export const cervix = {
   subcategories: {
     opening: 'opening',