From 8ee53ba75fc1acdfa78684babf9bd63986e2f1de Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 5 Jun 2018 17:44:31 +0200
Subject: [PATCH] Extract labels and format date

---
 bleeding.js | 14 ++++++++------
 day-view.js |  4 +++-
 db.js       |  1 -
 format.js   |  2 +-
 labels.js   |  5 +++++
 5 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 labels.js

diff --git a/bleeding.js b/bleeding.js
index 6175be5..b755910 100644
--- a/bleeding.js
+++ b/bleeding.js
@@ -8,13 +8,14 @@ import {
 import styles from './styles'
 import { saveBleeding } from './db'
 import { formatDateForViewHeader } from './format'
+import { bleeding as labels } from './labels'
 
 export default class Bleeding extends Component {
   constructor(props) {
     super(props)
     this.state = {
       cycleDay: props.navigation.state.params.cycleDay,
-      currentValue: null
+      currentValue: "1"
     }
   }
 
@@ -25,16 +26,17 @@ export default class Bleeding extends Component {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>{formatDateForViewHeader(day.date)}</Text>
+        <Text>Bleeding</Text>
         <Picker
           selectedValue={this.state.currentValue}
-          style={{ height: 50, width: 100 }}
+          style={{ height: 50, width: 150 }}
           onValueChange={(itemValue) => {
             this.setState({ currentValue: itemValue })
           }}>
-          <Picker.Item label="spotting" value="1" />
-          <Picker.Item label="light" value="2" />
-          <Picker.Item label="medium" value="3" />
-          <Picker.Item label="heavy" value="4" />
+          <Picker.Item label={labels[0]} value="0" />
+          <Picker.Item label={labels[1]} value="1" />
+          <Picker.Item label={labels[2]} value="2" />
+          <Picker.Item label={labels[3]} value="3" />
         </Picker>
         <Button
           onPress={() => {
diff --git a/day-view.js b/day-view.js
index 3b74f20..4b7c626 100644
--- a/day-view.js
+++ b/day-view.js
@@ -6,6 +6,7 @@ import {
 } from 'react-native'
 import styles from './styles'
 import { formatDateForViewHeader } from './format'
+import { bleeding as labels} from './labels'
 
 export default class DayView extends Component {
   constructor(props) {
@@ -18,10 +19,11 @@ export default class DayView extends Component {
   render() {
     const navigate = this.props.navigation.navigate
     const day = this.state.cycleDay
+    const bleedingValue = day.bleeding && day.bleeding.value
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>{formatDateForViewHeader(day.date)}</Text>
-        <Text style={styles.welcome}>{day.bleeding && day.bleeding.value}</Text>
+        <Text style={styles.welcome}>{bleedingValue != undefined ? labels[bleedingValue] : ''}</Text>
         <Button
           onPress={() => navigate('bleeding', { cycleDay: day })}
           title="Edit bleeding">
diff --git a/db.js b/db.js
index 27cbc0c..c854526 100644
--- a/db.js
+++ b/db.js
@@ -1,5 +1,4 @@
 import realm from 'realm'
-import moment from 'moment'
 import { v4 as uuid } from 'uuid'
 
 let db
diff --git a/format.js b/format.js
index 16e2f71..d8250ed 100644
--- a/format.js
+++ b/format.js
@@ -1,5 +1,5 @@
 import moment from "moment"
 
 export function formatDateForViewHeader(date) {
-  return moment(date).format()
+  return moment(date).format('MMMM Do YYYY')
 }
\ No newline at end of file
diff --git a/labels.js b/labels.js
new file mode 100644
index 0000000..a5ed61a
--- /dev/null
+++ b/labels.js
@@ -0,0 +1,5 @@
+const bleeding = ['spotting', 'light', 'medium', 'heavy']
+
+export {
+  bleeding
+}
\ No newline at end of file