Calendar redesign

components/calendar.js

@@ -1,17 +1,22 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
-import { connect } from 'react-redux'
 
+import { connect } from 'react-redux'
 import { setDate } from '../slices/date'
 import { navigate } from '../slices/navigation'
 
-import { LocalDate } from 'js-joda'
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
-import { shadesOfRed, calendarTheme } from '../styles/index'
-import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'
+import {
+  predictionToCalFormat,
+  toCalFormat,
+  todayToCalFormat
+} from './helpers/calendar'
+
+import { Colors, Fonts, Sizes } from '../../styles'
 
 class CalendarView extends Component {
   static propTypes = {
@@ -52,26 +57,50 @@ class CalendarView extends Component {
   }
 
   render() {
+    const {
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
+    } = this.state
+    const markedDates = Object.assign(
+      {},
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
+    )
+
     return (
-      <CalendarList
-        onDayPress={this.passDateToDayView.bind(this)}
-        markedDates={
-          Object.assign(
-            {},
-            this.state.todayInCalFormat,
-            this.state.bleedingDaysInCalFormat,
-            this.state.predictedBleedingDaysInCalFormat
-          )
-        }
-        markingType={'custom'}
-        // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
-        firstDay={1}
-        theme={calendarTheme}
-      />
+      <View style={styles.container}>
+        <CalendarList
+          // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+          firstDay={1}
+          onDayPress={this.passDateToDayView.bind(this)}
+          markedDates={markedDates}
+          markingType={'custom'}
+          theme={calendarTheme}
+        />
+      </View>
     )
   }
 }
 
+const styles = StyleSheet.create({
+  container: { flex: 1 }
+})
+
+const calendarTheme = StyleSheet.create({
+  calendarBackground: Colors.tourquiseLight,
+  dayTextColor: Colors.greyDark,
+  monthTextColor: Colors.purple,
+  textDayFontFamily: Fonts.main,
+  textMonthFontFamily: Fonts.bold,
+  textDayHeaderFontFamily: Fonts.bold,
+  textDayFontSize: Sizes.small,
+  textMonthFontSize: Sizes.subtitle,
+  textDayHeaderFontSize: Sizes.small,
+  textSectionTitleColor: Colors.orange,
+})
+
 const mapDispatchToProps = (dispatch) => {
   return({
     setDate: (date) => dispatch(setDate(date)),
@@ -83,62 +112,3 @@ export default connect(
   null,
   mapDispatchToProps,
 )(CalendarView)
-
-
-function toCalFormat(bleedingDaysSortedByDate) {
-  const todayDateString = LocalDate.now().toString()
-  return bleedingDaysSortedByDate.reduce((acc, day) => {
-    acc[day.date] = {
-      customStyles: {
-        container: {
-          backgroundColor: shadesOfRed[day.bleeding.value],
-        }
-      }
-    }
-    if (day.date === todayDateString) {
-      acc[day.date].customStyles.text = styles.calendarToday
-    }
-    return acc
-  }, {})
-}
-
-function predictionToCalFormat(predictedDays) {
-  if (!predictedDays.length) return {}
-  const todayDateString = LocalDate.now().toString()
-  const middleIndex = (predictedDays[0].length - 1) / 2
-  return predictedDays.reduce((acc, setOfDays) => {
-    setOfDays.reduce((accSet, day, i) => {
-      accSet[day] = {
-        customStyles: {
-          container: {
-            borderColor: (i === middleIndex) ? shadesOfRed[3] : shadesOfRed[2],
-            borderWidth: 3,
-          },
-          text: {
-            marginTop: 1,
-          }
-        }
-      }
-      if (day === todayDateString) {
-        accSet[day].customStyles.text = Object.assign(
-          {},
-          styles.calendarToday,
-          {marginTop: -2}
-        )
-      }
-      return accSet
-    }, acc)
-    return acc
-  }, {})
-}
-
-function todayToCalFormat() {
-  const todayDateString = LocalDate.now().toString()
-  const todayFormated = {}
-  todayFormated[todayDateString] = {
-    customStyles: {
-      text: styles.calendarToday
-    }
-  }
-  return todayFormated
-}