Chore/cleanup date usage

components/chart/chart.js

@@ -6,7 +6,7 @@ import {
   FlatList,
   PixelRatio,
   StyleSheet,
-  View
+  View,
 } from 'react-native'
 
 import AppLoadingView from '../common/app-loading'
@@ -24,7 +24,11 @@ import { navigate } from '../../slices/navigation'
 
 import { getCycleDaysSortedByDate } from '../../db'
 import nothingChanged from '../../db/db-unchanged'
-import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
+import {
+  getChartFlag,
+  scaleObservable,
+  setChartFlag,
+} from '../../local-storage'
 import { makeColumnInfo, nfpLines } from '../helpers/chart'
 
 import {
@@ -32,7 +36,7 @@ import {
   CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
   CHART_XAXIS_HEIGHT_RATIO,
-  SYMPTOMS
+  SYMPTOMS,
 } from '../../config'
 import { shared } from '../../i18n/en/labels'
 import { Colors, Spacing } from '../../styles'
@@ -40,7 +44,8 @@ import { Colors, Spacing } from '../../styles'
 class CycleChart extends Component {
   static propTypes = {
     navigate: PropTypes.func,
-    end: PropTypes.bool
+    end: PropTypes.bool,
+    setDate: PropTypes.func,
   }
 
   constructor(props) {
@@ -80,12 +85,12 @@ class CycleChart extends Component {
 
   prepareSymptomData = () => {
     this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
-      return this.cycleDaysSortedByDate.some(cycleDay => {
-        return (symptomName !== 'temperature') && cycleDay[symptomName]
+      return this.cycleDaysSortedByDate.some((cycleDay) => {
+        return symptomName !== 'temperature' && cycleDay[symptomName]
       })
     })
     this.chartSymptoms = [...this.symptomRowSymptoms]
-    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
+    if (this.cycleDaysSortedByDate.some((day) => day.temperature)) {
       this.chartSymptoms.push('temperature')
       this.shouldShowTemperatureColumn = true
     }
@@ -94,6 +99,7 @@ class CycleChart extends Component {
   renderColumn = ({ item, index }) => {
     return (
       <DayColumn
+        setDate={this.props.setDate}
         dateString={item}
         index={index}
         navigate={this.props.navigate}
@@ -114,15 +120,16 @@ class CycleChart extends Component {
     this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
     const remainingHeight = height * 0.7 - this.xAxisHeight
     this.symptomHeight = PixelRatio.roundToNearestPixel(
-      remainingHeight
-      * CHART_SYMPTOM_HEIGHT_RATIO
+      remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
     )
-    this.symptomRowHeight = PixelRatio.roundToNearestPixel(
-      this.symptomRowSymptoms.length * this.symptomHeight
-    ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
+    this.symptomRowHeight =
+      PixelRatio.roundToNearestPixel(
+        this.symptomRowSymptoms.length * this.symptomHeight
+      ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
     this.columnHeight = remainingHeight - this.symptomRowHeight
-    const chartHeight = this.shouldShowTemperatureColumn ?
-      height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
+    const chartHeight = this.shouldShowTemperatureColumn
+      ? height * 0.7
+      : this.symptomRowHeight + this.xAxisHeight
     const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
     const columns = makeColumnInfo()
 
@@ -131,7 +138,7 @@ class CycleChart extends Component {
 
   updateListeners(dataUpdateHandler) {
     // remove existing listeners
-    if(this.handleDbChange) {
+    if (this.handleDbChange) {
       this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
     }
     if (this.removeObvListener) this.removeObvListener()
@@ -150,7 +157,7 @@ class CycleChart extends Component {
       chartHeight,
       chartLoaded,
       shouldShowHint,
-      numberOfColumnsToRender
+      numberOfColumnsToRender,
     } = this.state
     const hasDataToDisplay = this.chartSymptoms.length > 0
 
@@ -163,53 +170,52 @@ class CycleChart extends Component {
         {!hasDataToDisplay && <NoData />}
         {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
         <View style={styles.chartContainer}>
-          {shouldShowHint && chartLoaded &&
+          {shouldShowHint && chartLoaded && (
             <Tutorial onClose={this.setShouldShowHint} />
-          }
-          {hasDataToDisplay && chartLoaded &&
-            !this.shouldShowTemperatureColumn &&
-            <View style={styles.centerItem}>
-              <AppText style={styles.warning}>
-                {shared.noTemperatureWarning}
-              </AppText>
-            </View>
-          }
+          )}
+          {hasDataToDisplay &&
+            chartLoaded &&
+            !this.shouldShowTemperatureColumn && (
+              <View style={styles.centerItem}>
+                <AppText style={styles.warning}>
+                  {shared.noTemperatureWarning}
+                </AppText>
+              </View>
+            )}
           {hasDataToDisplay && (
             <View style={styles.chartArea}>
-
               {chartHeight && chartLoaded && (
                 <YAxis
                   height={this.columnHeight}
                   symptomsToDisplay={this.symptomRowSymptoms}
                   symptomsSectionHeight={this.symptomRowHeight}
-                  shouldShowTemperatureColumn=
-                    {this.shouldShowTemperatureColumn}
+                  shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
                   xAxisHeight={this.xAxisHeight}
                 />
               )}
 
-              {chartHeight &&
-               <FlatList
-                 horizontal={true}
-                 inverted={true}
-                 showsHorizontalScrollIndicator={false}
-                 data={this.state.columns}
-                 renderItem={this.renderColumn}
-                 keyExtractor={item => item}
-                 initialNumToRender={numberOfColumnsToRender}
-                 windowSize={30}
-                 onLayout={() => this.setState({chartLoaded: true})}
-                 onEndReached={() => this.setState({end: true})}
-                 ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
-                 updateCellsBatchingPeriod={800}
-                 contentContainerStyle={{ height: chartHeight }}
-               />
-              }
+              {chartHeight && (
+                <FlatList
+                  horizontal={true}
+                  inverted={true}
+                  showsHorizontalScrollIndicator={false}
+                  data={this.state.columns}
+                  renderItem={this.renderColumn}
+                  keyExtractor={(item) => item}
+                  initialNumToRender={numberOfColumnsToRender}
+                  windowSize={30}
+                  onLayout={() => this.setState({ chartLoaded: true })}
+                  onEndReached={() => this.setState({ end: true })}
+                  ListFooterComponent={<LoadingMoreView end={this.state.end} />}
+                  updateCellsBatchingPeriod={800}
+                  contentContainerStyle={{ height: chartHeight }}
+                />
+              )}
               {chartHeight && chartLoaded && (
                 <React.Fragment>
-                  {this.shouldShowTemperatureColumn &&
+                  {this.shouldShowTemperatureColumn && (
                     <HorizontalGrid height={this.columnHeight} />
-                  }
+                  )}
                 </React.Fragment>
               )}
             </View>
@@ -223,45 +229,42 @@ class CycleChart extends Component {
 function LoadingMoreView({ end }) {
   return (
     <View style={styles.loadingContainer}>
-      {!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
+      {!end && <ActivityIndicator size={'large'} color={Colors.orange} />}
     </View>
   )
 }
 
 LoadingMoreView.propTypes = {
-  end: PropTypes.bool
+  end: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
   chartArea: {
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   chartContainer: {
-    flexDirection: 'column'
+    flexDirection: 'column',
   },
   loadingContainer: {
     height: '100%',
     backgroundColor: Colors.turquoiseLight,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   page: {
-    marginVertical: Spacing.small
+    marginVertical: Spacing.small,
   },
   pageContainer: {
-    paddingHorizontal: Spacing.base
+    paddingHorizontal: Spacing.base,
   },
   warning: {
-    padding: Spacing.large
-  }
+    padding: Spacing.large,
+  },
 })
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     navigate: (page) => dispatch(navigate(page)),
-  })
+  }
 }
 
-export default connect(
-  null,
-  mapDispatchToProps,
-)(CycleChart)
+export default connect(null, mapDispatchToProps)(CycleChart)