Symptom view redesign

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

@@ -1,118 +1,89 @@
 import React, { Component } from 'react'
-import { ScrollView, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
+import AppPage from '../common/app-page'
+import SymptomBox from './symptom-box'
+import SymptomPageTitle from './symptom-page-title'
+
 import { connect } from 'react-redux'
 import { getDate, setDate } from '../../slices/date'
 import { navigate } from '../../slices/navigation'
 
-import { LocalDate } from 'js-joda'
-import Header from '../header'
-import FillerBoxes from './FillerBoxes'
-import SymptomBox from './SymptomBox'
-
 import cycleModule from '../../lib/cycle'
-import formatDate from '../helpers/format-date'
+import { dateToTitle } from '../helpers/format-date'
 import { getCycleDay } from '../../db'
-import styles from '../../styles'
+import { getData } from '../helpers/cycle-day'
+
+import { general as labels} from '../../i18n/en/cycle-day'
+import { Spacing } from '../../styles/redesign'
+import { SYMPTOMS } from '../../config'
 
 class CycleDayOverView extends Component {
 
   static propTypes = {
     navigate: PropTypes.func,
     setDate: PropTypes.func,
-    // The following are not being used,
-    // we could see if it's possible to not pass them from the <App />
     cycleDay: PropTypes.object,
     date: PropTypes.string,
   }
 
   constructor(props) {
     super(props)
-    this.state = {
-      cycleDay: getCycleDay(props.date)
-    }
+
+    this.state = { cycleDay: getCycleDay(props.date), data: null }
   }
 
   updateCycleDay = (date) => {
     this.props.setDate(date)
-    this.setState({
-      cycleDay: getCycleDay(date)
-    })
-  }
-
-  goToPrevDay = () => {
-    const { date } = this.props
-    const prevDate = LocalDate.parse(date).minusDays(1).toString()
-    this.updateCycleDay(prevDate)
-  }
-
-  goToNextDay = () => {
-    const { date } = this.props
-    const nextDate = LocalDate.parse(date).plusDays(1).toString()
-    this.updateCycleDay(nextDate)
+    this.setState({ cycleDay: getCycleDay(date) })
   }
 
   render() {
     const { cycleDay } = this.state
     const { date } = this.props
 
-    const dateInFuture = LocalDate.now().isBefore(LocalDate.parse(date))
-
-    const symptomBoxesList = [
-      'bleeding',
-      'temperature',
-      'mucus',
-      'cervix',
-      'desire',
-      'sex',
-      'pain',
-      'mood',
-      'note',
-    ]
-
     const { getCycleDayNumber } = cycleModule()
     const cycleDayNumber = getCycleDayNumber(date)
-    const headerSubtitle = cycleDayNumber && `Cycle day ${cycleDayNumber}`
+    const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
 
     return (
-      <View style={{ flex: 1 }}>
-        <Header
-          handleBack={this.goToPrevDay}
-          handleNext={this.goToNextDay}
-          title={formatDate(date)}
-          subtitle={headerSubtitle}
+      <AppPage>
+        <SymptomPageTitle
+          reloadSymptomData={this.updateCycleDay}
+          subtitle={subtitle}
+          title={dateToTitle(date)}
         />
-        <ScrollView>
-          <View style={styles.symptomBoxesView}>
-            {
-              symptomBoxesList.map(symptom => {
-                const symptomEditView =
-                  `${symptom[0].toUpperCase() + symptom.substring(1)}EditView`
-                const symptomData =
-                  cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
-                return(
-                  <SymptomBox
-                    key={symptom}
-                    symptom={symptom}
-                    symptomData={symptomData}
-                    onPress={() => this.props.navigate(symptomEditView)}
-                    disabled={dateInFuture && symptom !== 'note'}
-                  />)
-              })
-            }
-            {
-              // this is just to make the last row adhere to the grid
-              // (and) because there are no pseudo properties in RN
-            }
-            <FillerBoxes />
-          </View>
-        </ScrollView>
-      </View>
+        <View style={styles.container}>
+          {SYMPTOMS.map(symptom => {
+            const symptomData = cycleDay && cycleDay[symptom]
+              ? cycleDay[symptom] : null
+
+            return(
+              <SymptomBox
+                key={symptom}
+                symptom={symptom}
+                symptomData={symptomData}
+                symptomDataToDisplay={getData(symptom, symptomData)}
+                updateCycleDayData={this.updateCycleDay}
+              />
+            )
+          })}
+        </View>
+      </AppPage>
     )
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    padding: Spacing.base
+  }
+})
+
 const mapStateToProps = (state) => {
   return({
     date: getDate(state),