From c24284a57db78763bb0d42aad4c0600fe4c604fb Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Mon, 18 Nov 2019 17:29:40 +0100
Subject: [PATCH] Move YAxis & HorizontalGrid components in a common
 conditional expression

---
 components/chart/chart.js  | 33 ++++++++++++++++-----------------
 components/chart/styles.js |  4 ++++
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/components/chart/chart.js b/components/chart/chart.js
index 61c5d91..03702c0 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -2,19 +2,19 @@ import React, { Component } from 'react'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 import { LocalDate } from 'js-joda'
 
+import AppLoadingView from '../app-loading'
 import YAxis from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
 import HorizontalGrid from './horizontal-grid'
 
 import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
-import styles from './styles'
+import nothingChanged from '../../db/db-unchanged'
 import { scaleObservable } from '../../local-storage'
+
 import config from '../../config'
 
-import AppLoadingView from '../app-loading'
-
-import nothingChanged from '../../db/db-unchanged'
+import styles from './styles'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -121,25 +121,24 @@ export default class CycleChart extends Component {
     return (
       <View
         onLayout={this.onLayout}
-        style={{ flexDirection: 'row', flex: 1 }}
+        style={styles.container}
       >
         {!chartLoaded && <AppLoadingView />}
 
         {chartHeight && chartLoaded && (
-          <YAxis
-            height={this.columnHeight}
-            symptomsToDisplay={this.symptomRowSymptoms}
-            symptomsSectionHeight={this.symptomRowHeight}
-          />
+          <React.Fragment>
+            <YAxis
+              height={this.columnHeight}
+              symptomsToDisplay={this.symptomRowSymptoms}
+              symptomsSectionHeight={this.symptomRowHeight}
+            />
+            <HorizontalGrid
+              height={this.columnHeight}
+              startPosition={this.symptomRowHeight}
+            />
+          </React.Fragment>
         )}
 
-        {chartHeight && chartLoaded && (
-          <HorizontalGrid
-            height={this.columnHeight}
-            startPosition={this.symptomRowHeight}
-          />)
-        }
-
         {chartHeight &&
           <FlatList
             horizontal={true}
diff --git a/components/chart/styles.js b/components/chart/styles.js
index dc3a69b..5580af0 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -25,6 +25,10 @@ const orangeColor = '#bc6642'
 const mintColor = '#6ca299'
 
 const styles = {
+  container: {
+    flexDirection: 'row',
+    flex: 1,
+  },
   curve: {
     stroke: colorTemperature,
     strokeWidth: lineWidth,