From 9a8ae76d38a82f769b4c02d06622230654e24afc Mon Sep 17 00:00:00 2001
From: Adina Johnson <adinacjohnson@gmail.com>
Date: Tue, 30 Oct 2018 14:28:04 -0400
Subject: [PATCH 01/25] journal skeleton component

---
 src/components/Journal/Journal.css |  3 +++
 src/components/Journal/View.js     | 10 ++++++++++
 src/components/Journal/index.js    | 12 ++++++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 src/components/Journal/Journal.css
 create mode 100644 src/components/Journal/View.js
 create mode 100644 src/components/Journal/index.js

diff --git a/src/components/Journal/Journal.css b/src/components/Journal/Journal.css
new file mode 100644
index 00000000..1fef6cca
--- /dev/null
+++ b/src/components/Journal/Journal.css
@@ -0,0 +1,3 @@
+#displayContainer {
+    
+}
\ No newline at end of file
diff --git a/src/components/Journal/View.js b/src/components/Journal/View.js
new file mode 100644
index 00000000..907234d5
--- /dev/null
+++ b/src/components/Journal/View.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+const View = ({}) => (
+    <div className="displayContainer">
+        
+    </div>
+);
+
+export default View;
\ No newline at end of file
diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js
new file mode 100644
index 00000000..937b5847
--- /dev/null
+++ b/src/components/Journal/index.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import View from './View';
+
+class Journal extends Component {
+
+    render() {
+        return <View />;
+    }
+
+}
+
+export default Journal;
\ No newline at end of file

From 3d7593fab35b6af4e44013fd38987cff1bf4d57d Mon Sep 17 00:00:00 2001
From: Adina Johnson <adinacjohnson@gmail.com>
Date: Wed, 31 Oct 2018 17:45:38 -0400
Subject: [PATCH 02/25] add dylan's ex skeleton code

---
 src/components/Journal/View.js  |  4 ++--
 src/components/Journal/index.js | 30 ++++++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/Journal/View.js b/src/components/Journal/View.js
index 907234d5..98a2ef68 100644
--- a/src/components/Journal/View.js
+++ b/src/components/Journal/View.js
@@ -2,8 +2,8 @@ import React from 'react';
 
 
 const View = ({}) => (
-    <div className="displayContainer">
-        
+    <div className="Journal">
+        {title}
     </div>
 );
 
diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js
index 937b5847..613d02fb 100644
--- a/src/components/Journal/index.js
+++ b/src/components/Journal/index.js
@@ -1,10 +1,36 @@
 import React, { Component } from 'react';
 import View from './View';
 
-class Journal extends Component {
+export default class Journal extends Component {
+
+	constructor(props) {
+        super(props);
+
+        this.state = {
+            data: []
+        }
+
+        this.mytitle = "tomatoes, apples, big difference."; // to initialize
+    }
+
+    componentDidMount() {
+        // it's where you want to subscribe to whatever data you need in the model
+        // this.model.subscribe() THIS PROTOCOL IS PROBABLY GOING TO CHANGE
+    }
+    componentWillUnmount() {
+        // this is where you should '.unsubscribe(this)' from the model.  
+    }
+
+    onChange(updatedData) {
+        this.setState((state) => {
+            // how do you want to change this state based on the old state? 
+            // 'state' is the old state, and you return the new state.  
+            return state.data = updatedData;
+        });
+    }
 
     render() {
-        return <View />;
+        return <View title={this.mytitle}/>;
     }
 
 }

From 888f279a7c849c0da2158dc27376376976e75f15 Mon Sep 17 00:00:00 2001
From: Emily Hamlin <Emily@ip-69-123.wireless.oberlin.edu>
Date: Wed, 31 Oct 2018 18:00:58 -0400
Subject: [PATCH 03/25] My first commit for this branch!

---
 src/components/Analytics/View.js | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/components/Analytics/View.js

diff --git a/src/components/Analytics/View.js b/src/components/Analytics/View.js
new file mode 100644
index 00000000..ea150fbd
--- /dev/null
+++ b/src/components/Analytics/View.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+// This begins as an empty container, but we will have a function that fills it
+// on tab clicks.
+const View = ({}) => (
+    <div className="displayContainer">
+
+    </div>
+);
+
+export default View;

From b6217f2ac0376472d3b00e8701d33ea15565d213 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Wed, 31 Oct 2018 18:26:01 -0400
Subject: [PATCH 04/25] bringing back month view by putting it in taskDisplay

---
 src/components/TaskDisplay/View.js | 39 +++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/TaskDisplay/View.js b/src/components/TaskDisplay/View.js
index 049c6d1c..41bbd0fb 100644
--- a/src/components/TaskDisplay/View.js
+++ b/src/components/TaskDisplay/View.js
@@ -2,13 +2,50 @@ import React from 'react';
 import TabList from '../TabList';
 import TabDisplay from '../TabDisplay';
 import './TaskDisplay.css';
+import BigCalendar from 'react-big-calendar-like-google';
+import 'react-big-calendar/lib/css/react-big-calendar.css'
+import moment from 'moment'
+// https://github.com/intljusticemission/react-big-calendar/issues/234
+/* The current version of big calendar implemented here is the most basic, the package also allows:
+- event creation
+- Localization
+- show more via popup
+- drag and drop
+*see more here http://intljusticemission.github.io/react-big-calendar/examples/index.html
+Q&A about big-calendar availale on Discord https://discordapp.com/channels/102860784329052160/424364360731852800
+*/
+const localizer = BigCalendar.momentLocalizer(moment)
+let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
 
 const View = props => {
-
+  const myEventsList = [
+    {
+      allDay: false,
+      end: new Date('December 10, 2017 11:13:00'),
+      start: new Date('December 09, 2017 11:13:00'),
+      title: 'hi',
+    },
+    {
+      allDay: true,
+      end: new Date('December 09, 2017 11:13:00'),
+      start: new Date('December 09, 2017 11:13:00'),
+      title: 'All Day Event',
+    },
+  ];
   return (
     <div id="taskdisplay">
       <TabList />
       <TabDisplay />
+      <div className="rbc-calendar">
+              <BigCalendar
+              events={myEventsList}
+              views={allViews}
+              startAccessor='startDate'
+              endAccessor='endDate'
+              localizer='localizer'
+              />
+              </div>
+
     </div>)}
 
 export default View;

From af56afc26f5a42a20523f800d6fe6c3f1a9b73a7 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Sun, 4 Nov 2018 10:44:42 -0500
Subject: [PATCH 05/25] calendar in taskDisplay

---
 src/components/TabDisplay/TabDisplay.css |  8 +++--
 src/components/TabDisplay/View.js        |  8 ++---
 src/components/TabDisplay/index.js       |  4 +--
 src/components/TaskDisplay/View.js       | 40 ++++++++++--------------
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/components/TabDisplay/TabDisplay.css b/src/components/TabDisplay/TabDisplay.css
index 1fef6cca..58b1ce4a 100644
--- a/src/components/TabDisplay/TabDisplay.css
+++ b/src/components/TabDisplay/TabDisplay.css
@@ -1,3 +1,7 @@
 #displayContainer {
-    
-}
\ No newline at end of file
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;    
+}
diff --git a/src/components/TabDisplay/View.js b/src/components/TabDisplay/View.js
index 551a53af..9adb39da 100644
--- a/src/components/TabDisplay/View.js
+++ b/src/components/TabDisplay/View.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import ExTab from '../ExTab/';
+// import ExTab from '../ExTab/';
 import Calendar from '../Calendar'
 // This begins as an empty container, but we will have a function that fills it
 // on tab clicks.
+
 const View = ({}) => (
     <div className="displayContainer">
-        <ExTab />
-        
-    </div>
+    <Calendar />
+</div>
 );
 
 export default View;
diff --git a/src/components/TabDisplay/index.js b/src/components/TabDisplay/index.js
index 68da0186..5e8d8a9f 100644
--- a/src/components/TabDisplay/index.js
+++ b/src/components/TabDisplay/index.js
@@ -4,9 +4,9 @@ import View from './View';
 class TabDisplay extends Component {
 
     render() {
-        return <View />;
+      return <View />;
     }
 
 }
 
-export default TabDisplay;
\ No newline at end of file
+export default TabDisplay;
diff --git a/src/components/TaskDisplay/View.js b/src/components/TaskDisplay/View.js
index 41bbd0fb..1961075f 100644
--- a/src/components/TaskDisplay/View.js
+++ b/src/components/TaskDisplay/View.js
@@ -2,36 +2,30 @@ import React from 'react';
 import TabList from '../TabList';
 import TabDisplay from '../TabDisplay';
 import './TaskDisplay.css';
+import Calendar from '../Calendar';
 import BigCalendar from 'react-big-calendar-like-google';
 import 'react-big-calendar/lib/css/react-big-calendar.css'
 import moment from 'moment'
-// https://github.com/intljusticemission/react-big-calendar/issues/234
-/* The current version of big calendar implemented here is the most basic, the package also allows:
-- event creation
-- Localization
-- show more via popup
-- drag and drop
-*see more here http://intljusticemission.github.io/react-big-calendar/examples/index.html
-Q&A about big-calendar availale on Discord https://discordapp.com/channels/102860784329052160/424364360731852800
-*/
+
 const localizer = BigCalendar.momentLocalizer(moment)
 let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
 
+const myEventsList = [
+  {
+    allDay: false,
+    end: new Date('December 10, 2017 11:13:00'),
+    start: new Date('December 09, 2017 11:13:00'),
+    title: 'hi',
+  },
+  {
+    allDay: true,
+    end: new Date('December 09, 2017 11:13:00'),
+    start: new Date('December 09, 2017 11:13:00'),
+    title: 'All Day Event',
+  },
+];
 const View = props => {
-  const myEventsList = [
-    {
-      allDay: false,
-      end: new Date('December 10, 2017 11:13:00'),
-      start: new Date('December 09, 2017 11:13:00'),
-      title: 'hi',
-    },
-    {
-      allDay: true,
-      end: new Date('December 09, 2017 11:13:00'),
-      start: new Date('December 09, 2017 11:13:00'),
-      title: 'All Day Event',
-    },
-  ];
+
   return (
     <div id="taskdisplay">
       <TabList />

From bded827ff901b897b2065c4790ad8e7758676816 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Sun, 4 Nov 2018 12:30:41 -0500
Subject: [PATCH 06/25] adding calendar to its own component

---
 src/components/TaskDisplay/TaskDisplay.css | 16 +++++++++---
 src/components/TaskDisplay/View.js         | 30 +---------------------
 2 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/src/components/TaskDisplay/TaskDisplay.css b/src/components/TaskDisplay/TaskDisplay.css
index 123c0c66..0ccebdc0 100644
--- a/src/components/TaskDisplay/TaskDisplay.css
+++ b/src/components/TaskDisplay/TaskDisplay.css
@@ -1,7 +1,15 @@
 #taskdisplay {
-    width: 100%;
-    height: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
-    display: flex;
-    flex-direction: column;
+.rbc-calendar {
+  min-height: 320px;
+  max-height: 320px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
diff --git a/src/components/TaskDisplay/View.js b/src/components/TaskDisplay/View.js
index 1961075f..75e9628f 100644
--- a/src/components/TaskDisplay/View.js
+++ b/src/components/TaskDisplay/View.js
@@ -2,43 +2,15 @@ import React from 'react';
 import TabList from '../TabList';
 import TabDisplay from '../TabDisplay';
 import './TaskDisplay.css';
-import Calendar from '../Calendar';
-import BigCalendar from 'react-big-calendar-like-google';
-import 'react-big-calendar/lib/css/react-big-calendar.css'
-import moment from 'moment'
 
-const localizer = BigCalendar.momentLocalizer(moment)
-let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
+import 'react-big-calendar/lib/css/react-big-calendar.css'
 
-const myEventsList = [
-  {
-    allDay: false,
-    end: new Date('December 10, 2017 11:13:00'),
-    start: new Date('December 09, 2017 11:13:00'),
-    title: 'hi',
-  },
-  {
-    allDay: true,
-    end: new Date('December 09, 2017 11:13:00'),
-    start: new Date('December 09, 2017 11:13:00'),
-    title: 'All Day Event',
-  },
-];
 const View = props => {
 
   return (
     <div id="taskdisplay">
       <TabList />
       <TabDisplay />
-      <div className="rbc-calendar">
-              <BigCalendar
-              events={myEventsList}
-              views={allViews}
-              startAccessor='startDate'
-              endAccessor='endDate'
-              localizer='localizer'
-              />
-              </div>
 
     </div>)}
 

From 3fd97a6cc2f2a892a9f54169b913abac754f0fb4 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Sun, 4 Nov 2018 12:35:01 -0500
Subject: [PATCH 07/25] adding todos

---
 src/components/Calendar/View.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Calendar/View.js b/src/components/Calendar/View.js
index 7e833833..175a72ab 100644
--- a/src/components/Calendar/View.js
+++ b/src/components/Calendar/View.js
@@ -30,6 +30,12 @@ const View = props => {
       title: 'All Day Event',
     },
   ];
+  /*
+  TODO: Things to fix
+  - vertical overflow in views other than month
+  - align vertical location of back and forward buttons for month views
+  - fix horizonal squishing in all non-month views
+  */
   return (
     <div className="displayContainer">
       <div className="rbc-calendar">

From 0d7c1bf33a92bc18922d01d33a01985b271e1dd3 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Sun, 4 Nov 2018 12:35:34 -0500
Subject: [PATCH 08/25] more todos

---
 src/components/Calendar/View.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Calendar/View.js b/src/components/Calendar/View.js
index 175a72ab..0947f93a 100644
--- a/src/components/Calendar/View.js
+++ b/src/components/Calendar/View.js
@@ -35,6 +35,7 @@ const View = props => {
   - vertical overflow in views other than month
   - align vertical location of back and forward buttons for month views
   - fix horizonal squishing in all non-month views
+  - be able to add an event based on start and end times
   */
   return (
     <div className="displayContainer">

From 8db42e9b3128ad2ec1d6e7ace95ff4a765645e4b Mon Sep 17 00:00:00 2001
From: Adina Johnson <adinacjohnson@gmail.com>
Date: Sun, 4 Nov 2018 19:15:11 -0500
Subject: [PATCH 09/25] figured out how to do some basic form submission

---
 src/components/Journal/View.js  | 18 ++++++++++++----
 src/components/Journal/index.js | 37 ++++++++++++++++++---------------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/Journal/View.js b/src/components/Journal/View.js
index 98a2ef68..369a0260 100644
--- a/src/components/Journal/View.js
+++ b/src/components/Journal/View.js
@@ -1,10 +1,20 @@
 import React from 'react';
 
 
-const View = ({}) => (
-    <div className="Journal">
-        {title}
-    </div>
+
+const View = ({value, entries, handleSubmit, handleChange}) => (
+	<div>
+		<form onSubmit={handleSubmit}>
+	        <label>
+	          Essay:
+	          <textarea value={value} onChange={handleChange} />
+	        </label>
+	        <input type="submit" value="Submit" />
+	      </form>
+    	<div>
+	      {entries}
+	   	</div>
+     </div>
 );
 
 export default View;
\ No newline at end of file
diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js
index 613d02fb..71f60688 100644
--- a/src/components/Journal/index.js
+++ b/src/components/Journal/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom'
 import View from './View';
 
 export default class Journal extends Component {
@@ -7,32 +8,34 @@ export default class Journal extends Component {
         super(props);
 
         this.state = {
-            data: []
-        }
+            value: 'enter ur entry',
+            entries: []
+        };
 
-        this.mytitle = "tomatoes, apples, big difference."; // to initialize
-    }
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
 
-    componentDidMount() {
-        // it's where you want to subscribe to whatever data you need in the model
-        // this.model.subscribe() THIS PROTOCOL IS PROBABLY GOING TO CHANGE
     }
-    componentWillUnmount() {
-        // this is where you should '.unsubscribe(this)' from the model.  
+
+    handleChange(event) {
+        this.setState({value: event.target.value});
     }
 
-    onChange(updatedData) {
-        this.setState((state) => {
-            // how do you want to change this state based on the old state? 
-            // 'state' is the old state, and you return the new state.  
-            return state.data = updatedData;
-        });
+    handleSubmit(event) {
+        alert('An essay was submitted: ' + this.state.value);
+        event.preventDefault();
+        this.state.entries.push(this.state.value);
+      }
+
+    componentWillUnmount() {
+        // this is where you record your final state to the model
+        // ex --> this.recordFinalState("ex_tab", this.state);
+        // this is commented out because I'm not passing in the register function yet :)
     }
 
     render() {
-        return <View title={this.mytitle}/>;
+        return <View value={this.state.value} entries={this.state.entries} handleSubmit={this.handleSubmit} handleChange = {this.handleChange}/>;
     }
 
 }
 
-export default Journal;
\ No newline at end of file

From eefe83037a1fb283b86b05878232593bd0469b04 Mon Sep 17 00:00:00 2001
From: ddibened <ddibened@oberlin.edu>
Date: Mon, 5 Nov 2018 16:03:54 -0500
Subject: [PATCH 10/25] move testutils.js -> test_resources/

---
 src/test_resources/testutils.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/test_resources/testutils.js

diff --git a/src/test_resources/testutils.js b/src/test_resources/testutils.js
new file mode 100644
index 00000000..5fbf8cc8
--- /dev/null
+++ b/src/test_resources/testutils.js
@@ -0,0 +1,24 @@
+/* 
+ * This defines resources you can use for writing tests, 
+ * fake tasks, data, etc. 
+ * 
+ * If you feel that you have a lot of recources to create, feel free to make 
+ * another file in this directory. 
+ */
+
+// returns a (small) list of tasks 
+export function getTestTaskListSmall() {
+    return [ 
+        { title: "get pizza", key: 0, tabs: [ { analytics: "ooh buddy, that's a lot of pepperoni" }, { journal: "pinapple, nice!" }]},
+        {title: "go swimming", key: 1, tabs: [ { journal: "the pool was lovely this evening" }, { journal: "I look good in my new goggles" }]},
+        {title: "pick up kid", key: 2, tabs: [ { journal: "that was fun" }, { analytics: "time to put them back down" } ]},
+        {title: "practice snorkeling", key: 3, tabs: [ { analytics: "20 minutes"}, {calendar: "some dates"}]}
+    ];
+}
+export function getTestTaskListTitlesSmall() {
+    return [ 
+        "get pizza", 
+        "go swimming", 
+        "pick up kid", 
+        "practice snorkeling"];
+}

From 6cc2d4b37350bbd707cc4076ca1ae4789531815d Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Mon, 5 Nov 2018 17:00:08 -0500
Subject: [PATCH 11/25] committing to pull

---
 src/components/Calendar/View.js   |   1 +
 src/components/Calendar/events.js | 106 ++++++++++++++++++++++++++++++
 src/components/Calendar/index.js  |  25 ++++++-
 3 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Calendar/events.js

diff --git a/src/components/Calendar/View.js b/src/components/Calendar/View.js
index 0947f93a..79efe56a 100644
--- a/src/components/Calendar/View.js
+++ b/src/components/Calendar/View.js
@@ -12,6 +12,7 @@ import moment from 'moment'
 *see more here http://intljusticemission.github.io/react-big-calendar/examples/index.html
 Q&A about big-calendar availale on Discord https://discordapp.com/channels/102860784329052160/424364360731852800
 */
+
 const localizer = BigCalendar.momentLocalizer(moment)
 let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
 
diff --git a/src/components/Calendar/events.js b/src/components/Calendar/events.js
new file mode 100644
index 00000000..dbf1fa70
--- /dev/null
+++ b/src/components/Calendar/events.js
@@ -0,0 +1,106 @@
+export default [
+  {
+    id: 0,
+    title: 'All Day Event very long title',
+    allDay: true,
+    start: new Date(2015, 3, 0),
+    end: new Date(2015, 3, 1),
+  },
+  {
+    id: 1,
+    title: 'Long Event',
+    start: new Date(2015, 3, 7),
+    end: new Date(2015, 3, 10),
+  },
+
+  {
+    id: 2,
+    title: 'DTS STARTS',
+    start: new Date(2016, 2, 13, 0, 0, 0),
+    end: new Date(2016, 2, 20, 0, 0, 0),
+  },
+
+  {
+    id: 3,
+    title: 'DTS ENDS',
+    start: new Date(2016, 10, 6, 0, 0, 0),
+    end: new Date(2016, 10, 13, 0, 0, 0),
+  },
+
+  {
+    id: 4,
+    title: 'Some Event',
+    start: new Date(2015, 3, 9, 0, 0, 0),
+    end: new Date(2015, 3, 10, 0, 0, 0),
+  },
+  {
+    id: 5,
+    title: 'Conference',
+    start: new Date(2015, 3, 11),
+    end: new Date(2015, 3, 13),
+    desc: 'Big conference for important people',
+  },
+  {
+    id: 6,
+    title: 'Meeting',
+    start: new Date(2015, 3, 12, 10, 30, 0, 0),
+    end: new Date(2015, 3, 12, 12, 30, 0, 0),
+    desc: 'Pre-meeting meeting, to prepare for the meeting',
+  },
+  {
+    id: 7,
+    title: 'Lunch',
+    start: new Date(2015, 3, 12, 12, 0, 0, 0),
+    end: new Date(2015, 3, 12, 13, 0, 0, 0),
+    desc: 'Power lunch',
+  },
+  {
+    id: 8,
+    title: 'Meeting',
+    start: new Date(2015, 3, 12, 14, 0, 0, 0),
+    end: new Date(2015, 3, 12, 15, 0, 0, 0),
+  },
+  {
+    id: 9,
+    title: 'Happy Hour',
+    start: new Date(2015, 3, 12, 17, 0, 0, 0),
+    end: new Date(2015, 3, 12, 17, 30, 0, 0),
+    desc: 'Most important meal of the day',
+  },
+  {
+    id: 10,
+    title: 'Dinner',
+    start: new Date(2015, 3, 12, 20, 0, 0, 0),
+    end: new Date(2015, 3, 12, 21, 0, 0, 0),
+  },
+  {
+    id: 11,
+    title: 'Birthday Party',
+    start: new Date(2015, 3, 13, 7, 0, 0),
+    end: new Date(2015, 3, 13, 10, 30, 0),
+  },
+  {
+    id: 12,
+    title: 'Late Night Event',
+    start: new Date(2015, 3, 17, 19, 30, 0),
+    end: new Date(2015, 3, 18, 2, 0, 0),
+  },
+  {
+    id: 12.5,
+    title: 'Late Same Night Event',
+    start: new Date(2015, 3, 17, 19, 30, 0),
+    end: new Date(2015, 3, 17, 23, 30, 0),
+  },
+  {
+    id: 13,
+    title: 'Multi-day Event',
+    start: new Date(2015, 3, 20, 19, 30, 0),
+    end: new Date(2015, 3, 22, 2, 0, 0),
+  },
+  {
+    id: 14,
+    title: 'Today',
+    start: new Date(new Date().setHours(new Date().getHours() - 3)),
+    end: new Date(new Date().setHours(new Date().getHours() + 3)),
+  },
+]
diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js
index 34e769a3..ed630111 100644
--- a/src/components/Calendar/index.js
+++ b/src/components/Calendar/index.js
@@ -1,10 +1,33 @@
 import React, { Component } from 'react';
 import View from './View';
+import events from 'events'
 
 class Calendar extends Component {
+  constructor(...args) {
+    super(...args)
+    this.state = { events }
+  }
+
+  handleSelect = ({ start, end }) => {
+    const title = window.prompt('New Event name')
+    if (title)
+      this.setState({
+        events: [
+          ...this.state.events,
+          {
+            start,
+            end,
+            title,
+          },
+        ],
+      })
+  }
 
     render() {
-        return <View />;
+        return
+        <View
+        handleSelect = {this.handleSelect}
+        />;
     }
 
 }

From 7c4478f5b9a277510b2ae40a49fe67ecb7fecfc0 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Mon, 5 Nov 2018 17:26:43 -0500
Subject: [PATCH 12/25] lowercasing Model and Utilities folders to match
 imports and adding back Calendar/index.js

---
 src/components/structure/TaskDisplay/index.js | 20 +++++++++----------
 src/components/tabs/Calendar/View.js          |  8 ++++++++
 src/components/{ => tabs}/Calendar/events.js  |  0
 src/components/{ => tabs}/Calendar/index.js   |  0
 4 files changed, 18 insertions(+), 10 deletions(-)
 rename src/components/{ => tabs}/Calendar/events.js (100%)
 rename src/components/{ => tabs}/Calendar/index.js (100%)

diff --git a/src/components/structure/TaskDisplay/index.js b/src/components/structure/TaskDisplay/index.js
index 26543e6c..a5b37d12 100644
--- a/src/components/structure/TaskDisplay/index.js
+++ b/src/components/structure/TaskDisplay/index.js
@@ -8,7 +8,7 @@ class TaskDisplay extends Component {
 
         // This is the farthest down the tree the Model itself needs to go...
         this.model = props.model;
-    
+
         this.state = {
             currentTask: new InitialTask(),
             currentTabTitle: "welcome tab",
@@ -31,10 +31,10 @@ class TaskDisplay extends Component {
         });
     }
 
-    /* 
+    /*
      * Clicks to tabList should cause a different tab to be loaded...
-     * 
-     * 'tabClicked' - a string that represents which tab got clicked. 
+     *
+     * 'tabClicked' - a string that represents which tab got clicked.
      */
     onClick(tabClicked) {
         this.setState((state) => {
@@ -52,14 +52,14 @@ class TaskDisplay extends Component {
                 return tab.info;
             }
         });
-        
-        return < View 
-                    tabList={tabList} 
-                    tabToDisplay={this.state.currentTabTitle} 
-                    tabInfo={tabInfo} 
+
+        return < View
+                    tabList={tabList}
+                    tabToDisplay={this.state.currentTabTitle}
+                    tabInfo={tabInfo}
                     registerFinalState={this.model.registerFinalState} />;
     }
 
 }
 
-export default TaskDisplay;
\ No newline at end of file
+export default TaskDisplay;
diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
index 79efe56a..9074ec25 100644
--- a/src/components/tabs/Calendar/View.js
+++ b/src/components/tabs/Calendar/View.js
@@ -31,6 +31,7 @@ const View = props => {
       title: 'All Day Event',
     },
   ];
+
   /*
   TODO: Things to fix
   - vertical overflow in views other than month
@@ -38,15 +39,22 @@ const View = props => {
   - fix horizonal squishing in all non-month views
   - be able to add an event based on start and end times
   */
+  
   return (
     <div className="displayContainer">
       <div className="rbc-calendar">
               <BigCalendar
+              selectable
               events={myEventsList}
+              defaultView={BigCalendar.Views.WEEK}
               views={allViews}
               startAccessor='startDate'
               endAccessor='endDate'
               localizer='localizer'
+              scrollToTime={new Date(1970, 1, 1, 6)}
+              defaultDate={new Date(2015, 3, 12)}
+              onSelectEvent={event => alert(event.title)}
+              onSelectSlot={this.handleSelect}
               />
               </div>
     </div>
diff --git a/src/components/Calendar/events.js b/src/components/tabs/Calendar/events.js
similarity index 100%
rename from src/components/Calendar/events.js
rename to src/components/tabs/Calendar/events.js
diff --git a/src/components/Calendar/index.js b/src/components/tabs/Calendar/index.js
similarity index 100%
rename from src/components/Calendar/index.js
rename to src/components/tabs/Calendar/index.js

From abc71ceee5227564e74e57fa1aa73eb968c5b84c Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Mon, 5 Nov 2018 18:40:59 -0500
Subject: [PATCH 13/25] can now add event given start and end time, also fixed
 vertical overflow for all views

---
 src/App/App.css                               |  4 ++--
 .../structure/TabDisplay/TabDisplay.css       |  3 +--
 src/components/structure/TabDisplay/View.js   | 18 +++++++-------
 src/components/structure/TabList/TabList.css  |  4 ++--
 .../structure/TaskDisplay/TaskDisplay.css     | 19 ++++++++++++---
 src/components/structure/TaskDisplay/index.js |  1 -
 .../structure/TaskList/TaskList.css           |  2 +-
 src/components/tabs/Calendar/View.js          | 23 ++++++++++--------
 src/components/tabs/Calendar/index.js         | 24 +++++++------------
 9 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/App/App.css b/src/App/App.css
index 7b17a273..3059d893 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -1,4 +1,4 @@
 .App {
-  height: 80%;
-  width: 80%;
+  height: 100%;
+  width: 100%;
 }
diff --git a/src/components/structure/TabDisplay/TabDisplay.css b/src/components/structure/TabDisplay/TabDisplay.css
index 58b1ce4a..c6d4eda8 100644
--- a/src/components/structure/TabDisplay/TabDisplay.css
+++ b/src/components/structure/TabDisplay/TabDisplay.css
@@ -1,7 +1,6 @@
 #displayContainer {
   width: 100%;
   height: 100%;
-
   display: flex;
-  flex-direction: column;    
+  flex-direction: row;
 }
diff --git a/src/components/structure/TabDisplay/View.js b/src/components/structure/TabDisplay/View.js
index 0c3c62af..bb9bf838 100644
--- a/src/components/structure/TabDisplay/View.js
+++ b/src/components/structure/TabDisplay/View.js
@@ -1,26 +1,26 @@
 import React from 'react';
-
-/* IMPORTANT: as I am committing, I have just been commenting out the line where we've been putting 
+import Calendar from '../../tabs/Calendar';
+/* IMPORTANT: as I am committing, I have just been commenting out the line where we've been putting
  *
- * our code to debug/render it :)  
+ * our code to debug/render it :)
  */
 
-/* 
- * TAB IMPORTS: 
+/*
+ * TAB IMPORTS:
  *  import ExTab from '../ExTab/';
  *  import Calendar from '../../tabs/Calendar';
- */ 
+ */
 
 
-/* 
+/*
  * This begins as an empty container, but we will have a function that fills it
- * on tab clicks. 
+ * on tab clicks.
  */
 
 const View = ({}) => (
     <div className="displayContainer">
         {/* <ExTab /> */}
-        {/* <Calendar />  */} 
+        <Calendar />
     </div>
 );
 
diff --git a/src/components/structure/TabList/TabList.css b/src/components/structure/TabList/TabList.css
index 298e13d8..f194e398 100644
--- a/src/components/structure/TabList/TabList.css
+++ b/src/components/structure/TabList/TabList.css
@@ -3,7 +3,7 @@
     height: 4%;
     display: flex;
     flex-direction: row;
-    
+
     padding: 10px;
     background: cornflowerblue;
 
@@ -16,4 +16,4 @@
     padding: 10px;
     text-align: center;
     vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/src/components/structure/TaskDisplay/TaskDisplay.css b/src/components/structure/TaskDisplay/TaskDisplay.css
index 5b715abc..fe20046b 100644
--- a/src/components/structure/TaskDisplay/TaskDisplay.css
+++ b/src/components/structure/TaskDisplay/TaskDisplay.css
@@ -6,11 +6,24 @@
 }
 
 .rbc-calendar {
-  min-height: 320px;
-  max-height: 320px;
+  min-height: 600px;
+  max-height: 600px;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* flex-direction: column; */
+}
+
+.rbc-time-header {
   display: flex;
-  flex-direction: column;
+  flex: 0 0 auto; // should not shrink below height
+  flex-direction: row;
+
+}
+.rbc-time-content { flex: 1; }
+
+&.rbc-overflowing {
+  border-right: 1px solid @cell-border;
 }
diff --git a/src/components/structure/TaskDisplay/index.js b/src/components/structure/TaskDisplay/index.js
index a5b37d12..2496db60 100644
--- a/src/components/structure/TaskDisplay/index.js
+++ b/src/components/structure/TaskDisplay/index.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import View from './View';
 import { InitialTask } from '../../../utilities/GeneralContent';
-
 class TaskDisplay extends Component {
     constructor(props) {
         super(props);
diff --git a/src/components/structure/TaskList/TaskList.css b/src/components/structure/TaskList/TaskList.css
index b4d41bd3..6cc0d3a0 100644
--- a/src/components/structure/TaskList/TaskList.css
+++ b/src/components/structure/TaskList/TaskList.css
@@ -12,4 +12,4 @@
     background: lavender;
     padding: 10px;
     border-bottom: 2px solid var(--pinkline);
-}
\ No newline at end of file
+}
diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
index 9074ec25..3f189cfc 100644
--- a/src/components/tabs/Calendar/View.js
+++ b/src/components/tabs/Calendar/View.js
@@ -1,8 +1,13 @@
 import React from 'react';
 // This begins as an empty container, but we will have a function that fills it on tab clicks.
 import BigCalendar from 'react-big-calendar-like-google';
-import 'react-big-calendar/lib/css/react-big-calendar.css'
 import moment from 'moment'
+import events from 'events'
+// import './prism.less'
+
+require('react-big-calendar/lib/css/react-big-calendar.css');
+
+
 // https://github.com/intljusticemission/react-big-calendar/issues/234
 /* The current version of big calendar implemented here is the most basic, the package also allows:
 - event creation
@@ -20,8 +25,8 @@ const View = props => {
   const myEventsList = [
     {
       allDay: false,
-      end: new Date('December 10, 2017 11:13:00'),
-      start: new Date('December 09, 2017 11:13:00'),
+      end: new Date('November 01, 2018 11:15:00'),
+      start: new Date('November 01, 2018 11:13:00'),
       title: 'hi',
     },
     {
@@ -34,27 +39,25 @@ const View = props => {
 
   /*
   TODO: Things to fix
-  - vertical overflow in views other than month
   - align vertical location of back and forward buttons for month views
   - fix horizonal squishing in all non-month views
-  - be able to add an event based on start and end times
+  - store event start and end times into database
   */
-  
+
   return (
     <div className="displayContainer">
       <div className="rbc-calendar">
               <BigCalendar
               selectable
               events={myEventsList}
-              defaultView={BigCalendar.Views.WEEK}
+              defaultView={BigCalendar.Views.MONTH}
               views={allViews}
               startAccessor='startDate'
               endAccessor='endDate'
               localizer='localizer'
-              scrollToTime={new Date(1970, 1, 1, 6)}
-              defaultDate={new Date(2015, 3, 12)}
+              defaultDate={new Date(2018, 10, 6)}
               onSelectEvent={event => alert(event.title)}
-              onSelectSlot={this.handleSelect}
+              onSelectSlot={props.handleSelect}
               />
               </div>
     </div>
diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index ed630111..7f2f91ac 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -1,35 +1,27 @@
 import React, { Component } from 'react';
 import View from './View';
 import events from 'events'
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+
 
 class Calendar extends Component {
   constructor(...args) {
     super(...args)
-    this.state = { events }
+    this.state = { events };
   }
 
   handleSelect = ({ start, end }) => {
     const title = window.prompt('New Event name')
     if (title)
-      this.setState({
-        events: [
-          ...this.state.events,
-          {
-            start,
-            end,
-            title,
-          },
-        ],
-      })
+      console.log("Your new event name", title);
   }
 
     render() {
-        return
+        return(
         <View
         handleSelect = {this.handleSelect}
-        />;
-    }
-
+        />
+    )
+  }
 }
-
 export default Calendar;

From ab160453d8baea35ffd3774f9c9faad219dfe45c Mon Sep 17 00:00:00 2001
From: Jane Hsieh <jhsieh@oberlin.edu>
Date: Mon, 5 Nov 2018 20:21:35 -0500
Subject: [PATCH 14/25] Update README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index d35121b7..f3e605a6 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+Git tips: to push your local branch to a remote branch that it's not tracking (say this currentState for instance), use 
+git push origin your_updated_branch_name:currentState
+
 /--------------------------------- THE TREE -----------------------------------/
 
 THE TREE... (structure of the html elements)

From 988409cb8836224295d2835dfdd2444f394fc064 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Tue, 6 Nov 2018 01:22:00 -0500
Subject: [PATCH 15/25] fixing localizer passing to render css

---
 src/App/App.js                                |   2 +-
 src/components/structure/Frame/Frame.css      |   2 +-
 src/components/structure/Frame/View.js        |   2 +-
 src/components/structure/TabList/TabList.css  |   6 +-
 .../structure/TaskDisplay/TaskDisplay.css     |  20 +-
 src/components/structure/TaskDisplay/View.js  |  12 +-
 src/components/tabs/Calendar/View.js          |  35 +-
 src/components/tabs/Calendar/index.js         |  20 +-
 .../tabs/Calendar/react-big-calendar.css      | 706 ++++++++++++++++++
 src/index.css                                 |   2 +-
 10 files changed, 759 insertions(+), 48 deletions(-)
 create mode 100644 src/components/tabs/Calendar/react-big-calendar.css

diff --git a/src/App/App.js b/src/App/App.js
index dacf7f20..d2b0928a 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import Frame from '../components/structure/Frame';
 import Model from '../model/Model';
-import './App.css';
 import { getTestTaskListSmall } from '../test_resources/testutils'
+import './App.css';
 
 class App extends Component {
   constructor(props) {
diff --git a/src/components/structure/Frame/Frame.css b/src/components/structure/Frame/Frame.css
index d9ff8f1b..c64f5385 100644
--- a/src/components/structure/Frame/Frame.css
+++ b/src/components/structure/Frame/Frame.css
@@ -6,4 +6,4 @@
     flex-direction: row;
 
     border: var(--pinkborder);
-}
\ No newline at end of file
+}
diff --git a/src/components/structure/Frame/View.js b/src/components/structure/Frame/View.js
index cff392ff..e9a7df30 100644
--- a/src/components/structure/Frame/View.js
+++ b/src/components/structure/Frame/View.js
@@ -5,7 +5,7 @@ import TaskDisplay from '../TaskDisplay';
 import './Frame.css';
 
 const View = ({model}) => (
-    <div id="frame"> 
+    <div id="frame">
         <TaskList model={model}></TaskList>
         <TaskDisplay model={model}></TaskDisplay>
     </div>
diff --git a/src/components/structure/TabList/TabList.css b/src/components/structure/TabList/TabList.css
index f194e398..b60ad9de 100644
--- a/src/components/structure/TabList/TabList.css
+++ b/src/components/structure/TabList/TabList.css
@@ -1,12 +1,12 @@
 #tablist_container {
     width: auto;
-    height: 4%;
+    height: 5%;
     display: flex;
     flex-direction: row;
 
-    padding: 10px;
+    padding: 5px;
     background: cornflowerblue;
-
+    margin-bottom: 5px;
     border-bottom: var(--pinkborder);
 }
 
diff --git a/src/components/structure/TaskDisplay/TaskDisplay.css b/src/components/structure/TaskDisplay/TaskDisplay.css
index fe20046b..8553be61 100644
--- a/src/components/structure/TaskDisplay/TaskDisplay.css
+++ b/src/components/structure/TaskDisplay/TaskDisplay.css
@@ -1,24 +1,30 @@
 #taskdisplay {
   height: 100%;
-  width: 100%;
   display: flex;
   flex-direction: column;
+  font-size: 14px;
+  padding: 5 40px;
+  min-height: ~'calc(100vh - 100px)';
+  min-height: max-content;
+  height: ~'calc(100vh - 120px)';
+  width: 100%;
+  margin: 5px;
+  display: flex;
 }
 
 .rbc-calendar {
-  min-height: 600px;
-  max-height: 600px;
+  min-height: 590px;
+  max-height: 590px;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  /* display: flex; */
-  /* flex-direction: column; */
-  /* flex-direction: column; */
+  display: flex;
+  flex-direction: column;
 }
 
 .rbc-time-header {
   display: flex;
-  flex: 0 0 auto; // should not shrink below height
+  flex: 0 0 auto;
   flex-direction: row;
 
 }
diff --git a/src/components/structure/TaskDisplay/View.js b/src/components/structure/TaskDisplay/View.js
index caa7cd33..f215abf8 100644
--- a/src/components/structure/TaskDisplay/View.js
+++ b/src/components/structure/TaskDisplay/View.js
@@ -4,9 +4,9 @@ import TabDisplay from '../TabDisplay';
 import './TaskDisplay.css';
 
 /*
- * Render the TaskDisplay component, which renders the TabList and TabDisplay components. 
+ * Render the TaskDisplay component, which renders the TabList and TabDisplay components.
  *
- * This passes down the list of tabs, the title of the tab to display, and the info it will need from the 
+ * This passes down the list of tabs, the title of the tab to display, and the info it will need from the
  * current task.
  */
 const View = ({tabList, tabToDisplay, tabInfo, registerFinalState}) => {
@@ -14,10 +14,10 @@ const View = ({tabList, tabToDisplay, tabInfo, registerFinalState}) => {
   return (
     <div id="taskdisplay">
       <TabList tabList={tabList}/>
-      <TabDisplay 
-            tabToDisplay={tabToDisplay} 
-            tabInfo={tabInfo} 
-            registerFinalState={registerFinalState}/>  
+      <TabDisplay
+            tabToDisplay={tabToDisplay}
+            tabInfo={tabInfo}
+            registerFinalState={registerFinalState}/>
     </div>)}
 
 export default View;
diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
index 3f189cfc..15c4f50f 100644
--- a/src/components/tabs/Calendar/View.js
+++ b/src/components/tabs/Calendar/View.js
@@ -1,14 +1,7 @@
-import React from 'react';
-// This begins as an empty container, but we will have a function that fills it on tab clicks.
-import BigCalendar from 'react-big-calendar-like-google';
+import React, { Component } from 'react'; // This begins as an empty container, but we will have a function that fills it on tab clicks.
+import BigCalendar from 'react-big-calendar';
 import moment from 'moment'
-import events from 'events'
-// import './prism.less'
-
-require('react-big-calendar/lib/css/react-big-calendar.css');
-
-
-// https://github.com/intljusticemission/react-big-calendar/issues/234
+import BigCalendarCSS from 'react-big-calendar/lib/css/react-big-calendar.css';
 /* The current version of big calendar implemented here is the most basic, the package also allows:
 - event creation
 - Localization
@@ -16,11 +9,10 @@ require('react-big-calendar/lib/css/react-big-calendar.css');
 - drag and drop
 *see more here http://intljusticemission.github.io/react-big-calendar/examples/index.html
 Q&A about big-calendar availale on Discord https://discordapp.com/channels/102860784329052160/424364360731852800
+// https://github.com/intljusticemission/react-big-calendar/issues/234
 */
-
 const localizer = BigCalendar.momentLocalizer(moment)
 let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
-
 const View = props => {
   const myEventsList = [
     {
@@ -36,25 +28,17 @@ const View = props => {
       title: 'All Day Event',
     },
   ];
-
-  /*
-  TODO: Things to fix
-  - align vertical location of back and forward buttons for month views
-  - fix horizonal squishing in all non-month views
-  - store event start and end times into database
-  */
-
   return (
     <div className="displayContainer">
       <div className="rbc-calendar">
               <BigCalendar
               selectable
               events={myEventsList}
-              defaultView={BigCalendar.Views.MONTH}
+              defaultView={BigCalendar.Views.DAY}
               views={allViews}
               startAccessor='startDate'
               endAccessor='endDate'
-              localizer='localizer'
+              localizer={localizer}
               defaultDate={new Date(2018, 10, 6)}
               onSelectEvent={event => alert(event.title)}
               onSelectSlot={props.handleSelect}
@@ -63,4 +47,11 @@ const View = props => {
     </div>
 )}
 
+
+
+
+
+
+
+
 export default View;
diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index 7f2f91ac..a447ad9c 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -1,19 +1,27 @@
 import React, { Component } from 'react';
 import View from './View';
-import events from 'events'
-import 'react-big-calendar/lib/css/react-big-calendar.css';
-
+import Events from 'events'
+import moment from 'moment';
 
 class Calendar extends Component {
-  constructor(...args) {
-    super(...args)
-    this.state = { events };
+  /*
+  TODO: Things to fix
+  - be able to store event start and end times into localizer
+  */
+  constructor(props)
+  {
+      super(props);
+      this.state = {events: Events};
   }
 
+
   handleSelect = ({ start, end }) => {
+    //create an event
     const title = window.prompt('New Event name')
     if (title)
       console.log("Your new event name", title);
+      // this.state.events.push({start: start, end: end, title: title});
+      this.setState({});
   }
 
     render() {
diff --git a/src/components/tabs/Calendar/react-big-calendar.css b/src/components/tabs/Calendar/react-big-calendar.css
new file mode 100644
index 00000000..a37881fc
--- /dev/null
+++ b/src/components/tabs/Calendar/react-big-calendar.css
@@ -0,0 +1,706 @@
+.rbc-btn {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+button.rbc-btn {
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled].rbc-btn {
+  cursor: not-allowed;
+}
+button.rbc-input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+.rbc-calendar {
+  flex: 1;
+  min-height: 590px;
+  max-height: 590px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+
+
+.rbc-time-header {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+&.rbc-overflowing {
+  border-right: 1px solid @cell-border;
+}
+}
+
+.rbc-time-content { flex: 1; }
+
+.rbc-calendar *,
+.rbc-calendar *:before,
+.rbc-calendar *:after {
+  box-sizing: inherit;
+}
+.rbc-abs-full,
+.rbc-row-bg {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.rbc-ellipsis,
+.rbc-event-label,
+.rbc-row-segment .rbc-event-content,
+.rbc-show-more {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rbc-rtl {
+  direction: rtl;
+}
+.rbc-off-range {
+  color: #999999;
+}
+.rbc-off-range-bg {
+  background: #e5e5e5;
+}
+.rbc-header {
+  overflow: hidden;
+  -webkit-flex: 1 0 0%;
+      -ms-flex: 1 0 0%;
+          flex: 1 0 0%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 3px;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: bold;
+  font-size: 90%;
+  min-height: 0;
+  border-bottom: 1px solid #DDD;
+}
+.rbc-header + .rbc-header {
+  border-left: 1px solid #DDD;
+}
+.rbc-rtl .rbc-header + .rbc-header {
+  border-left-width: 0;
+  border-right: 1px solid #DDD;
+}
+.rbc-header > a,
+.rbc-header > a:active,
+.rbc-header > a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+.rbc-row-content {
+  position: relative;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  z-index: 4;
+}
+.rbc-today {
+  background-color: #eaf6ff;
+}
+.rbc-toolbar {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+.rbc-toolbar .rbc-toolbar-label {
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  padding: 0 10px;
+  text-align: center;
+}
+.rbc-toolbar button {
+  color: #373a3c;
+  display: inline-block;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  background: none;
+  background-image: none;
+  border: 1px solid #ccc;
+  padding: .375rem 1rem;
+  border-radius: 4px;
+  line-height: normal;
+  white-space: nowrap;
+}
+.rbc-toolbar button:active,
+.rbc-toolbar button.rbc-active {
+  background-image: none;
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.rbc-toolbar button:active:hover,
+.rbc-toolbar button.rbc-active:hover,
+.rbc-toolbar button:active:focus,
+.rbc-toolbar button.rbc-active:focus {
+  color: #373a3c;
+  background-color: #d4d4d4;
+  border-color: #8c8c8c;
+}
+.rbc-toolbar button:focus {
+  color: #373a3c;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.rbc-toolbar button:hover {
+  color: #373a3c;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.rbc-btn-group {
+  display: inline-block;
+  white-space: nowrap;
+}
+.rbc-btn-group > button:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rbc-btn-group > button:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
+  border-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rbc-btn-group > button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.rbc-btn-group button + button {
+  margin-left: -1px;
+}
+.rbc-rtl .rbc-btn-group button + button {
+  margin-left: 0;
+  margin-right: -1px;
+}
+.rbc-btn-group + .rbc-btn-group,
+.rbc-btn-group + button {
+  margin-left: 10px;
+}
+.rbc-event {
+  border: none;
+  box-shadow: none;
+  margin: 0;
+  padding: 2px 5px;
+  background-color: #3174ad;
+  border-radius: 5px;
+  color: #fff;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+.rbc-slot-selecting .rbc-event {
+  cursor: inherit;
+  pointer-events: none;
+}
+.rbc-event.rbc-selected {
+  background-color: #265985;
+}
+.rbc-event:focus {
+  outline: 5px auto #3b99fc;
+}
+.rbc-event-label {
+  font-size: 80%;
+}
+.rbc-event-overlaps {
+  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
+}
+.rbc-event-continues-prior {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rbc-event-continues-after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rbc-event-continues-earlier {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.rbc-event-continues-later {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rbc-row {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.rbc-row-segment {
+  padding: 0 1px 1px 1px;
+}
+.rbc-selected-cell {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.rbc-show-more {
+  background-color: rgba(255, 255, 255, 0.3);
+  z-index: 4;
+  font-weight: bold;
+  font-size: 85%;
+  height: auto;
+  line-height: normal;
+  white-space: nowrap;
+}
+.rbc-month-view {
+  position: relative;
+  border: 1px solid #DDD;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-flex: 1 0 0;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  width: 100%;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  height: 100%;
+}
+.rbc-month-header {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.rbc-month-row {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-flex: 1 0 0;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  -webkit-flex-basis: 0px;
+      -ms-flex-preferred-size: 0px;
+          flex-basis: 0px;
+  overflow: hidden;
+  height: 100%;
+}
+.rbc-month-row + .rbc-month-row {
+  border-top: 1px solid #DDD;
+}
+.rbc-date-cell {
+  -webkit-flex: 1 1 0;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  min-width: 0;
+  padding-right: 5px;
+  text-align: right;
+}
+.rbc-date-cell.rbc-now {
+  font-weight: bold;
+}
+.rbc-date-cell > a,
+.rbc-date-cell > a:active,
+.rbc-date-cell > a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+.rbc-row-bg {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-flex: 1 0 0;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  overflow: hidden;
+}
+.rbc-day-bg {
+  -webkit-flex: 1 0 0%;
+      -ms-flex: 1 0 0%;
+          flex: 1 0 0%;
+}
+.rbc-day-bg + .rbc-day-bg {
+  border-left: 1px solid #DDD;
+}
+.rbc-rtl .rbc-day-bg + .rbc-day-bg {
+  border-left-width: 0;
+  border-right: 1px solid #DDD;
+}
+.rbc-overlay {
+  position: absolute;
+  z-index: 5;
+  border: 1px solid #e5e5e5;
+  background-color: #fff;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
+  padding: 10px;
+}
+.rbc-overlay > * + * {
+  margin-top: 1px;
+}
+.rbc-overlay-header {
+  border-bottom: 1px solid #e5e5e5;
+  margin: -10px -10px 5px -10px;
+  padding: 2px 10px;
+}
+.rbc-agenda-view {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-flex: 1 0 0;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  overflow: auto;
+}
+.rbc-agenda-view table.rbc-agenda-table {
+  width: 100%;
+  border: 1px solid #DDD;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
+  padding: 5px 10px;
+  vertical-align: top;
+}
+.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
+  padding-left: 15px;
+  padding-right: 15px;
+  text-transform: lowercase;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+  border-left: 1px solid #DDD;
+}
+.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+  border-left-width: 0;
+  border-right: 1px solid #DDD;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
+  border-top: 1px solid #DDD;
+}
+.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+  padding: 3px 5px;
+  text-align: left;
+  border-bottom: 1px solid #DDD;
+}
+.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+  text-align: right;
+}
+.rbc-agenda-time-cell {
+  text-transform: lowercase;
+}
+.rbc-agenda-time-cell .rbc-continues-after:after {
+  content: ' »';
+}
+.rbc-agenda-time-cell .rbc-continues-prior:before {
+  content: '« ';
+}
+.rbc-agenda-date-cell,
+.rbc-agenda-time-cell {
+  white-space: nowrap;
+}
+.rbc-agenda-event-cell {
+  width: 100%;
+}
+.rbc-time-column {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 100%;
+}
+.rbc-time-column .rbc-timeslot-group {
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.rbc-timeslot-group {
+  border-bottom: 1px solid #DDD;
+  min-height: 40px;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: column nowrap;
+      -ms-flex-flow: column nowrap;
+          flex-flow: column nowrap;
+}
+.rbc-time-gutter,
+.rbc-header-gutter {
+  -webkit-flex: none;
+      -ms-flex: none;
+          flex: none;
+}
+.rbc-label {
+  padding: 0 5px;
+}
+.rbc-day-slot {
+  position: relative;
+}
+.rbc-day-slot .rbc-events-container {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
+  top: 0;
+}
+.rbc-day-slot .rbc-events-container.rbc-is-rtl {
+  left: 10px;
+  right: 0;
+}
+.rbc-day-slot .rbc-event {
+  border: 1px solid #265985;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-height: 100%;
+  min-height: 20px;
+  -webkit-flex-flow: column wrap;
+      -ms-flex-flow: column wrap;
+          flex-flow: column wrap;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  overflow: hidden;
+  position: absolute;
+}
+.rbc-day-slot .rbc-event-label {
+  -webkit-flex: none;
+      -ms-flex: none;
+          flex: none;
+  padding-right: 5px;
+  width: auto;
+}
+.rbc-day-slot .rbc-event-content {
+  width: 100%;
+  -webkit-flex: 1 1 0;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  word-wrap: break-word;
+  line-height: 1;
+  height: 100%;
+  min-height: 1em;
+}
+.rbc-day-slot .rbc-time-slot {
+  border-top: 1px solid #f7f7f7;
+}
+.rbc-time-view-resources .rbc-time-gutter,
+.rbc-time-view-resources .rbc-time-header-gutter {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  background-color: white;
+  border-right: 1px solid #DDD;
+  z-index: 10;
+  margin-right: -1px;
+}
+.rbc-time-view-resources .rbc-time-header {
+  overflow: hidden;
+}
+.rbc-time-view-resources .rbc-time-header-content {
+  min-width: auto;
+  -webkit-flex: 1 0 0;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+  -webkit-flex-basis: 0px;
+      -ms-flex-preferred-size: 0px;
+          flex-basis: 0px;
+}
+.rbc-time-view-resources .rbc-day-slot {
+  min-width: 140px;
+}
+.rbc-time-view-resources .rbc-header,
+.rbc-time-view-resources .rbc-day-bg {
+  width: 140px;
+  -webkit-flex: 1 1 0;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  -webkit-flex-basis: 0 px;
+      -ms-flex-preferred-size: 0 px;
+          flex-basis: 0 px;
+}
+.rbc-time-header-content + .rbc-time-header-content {
+  margin-left: -1px;
+}
+.rbc-time-slot {
+  -webkit-flex: 1 0 0;
+      -ms-flex: 1 0 0px;
+          flex: 1 0 0;
+}
+.rbc-time-slot.rbc-now {
+  font-weight: bold;
+}
+.rbc-day-header {
+  text-align: center;
+}
+.rbc-slot-selection {
+  z-index: 10;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-size: 75%;
+  width: 100%;
+  padding: 3px;
+}
+.rbc-slot-selecting {
+  cursor: move;
+}
+.rbc-time-view {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 100%;
+  border: 1px solid #DDD;
+  min-height: 0;
+}
+.rbc-time-view .rbc-time-gutter {
+  white-space: nowrap;
+}
+.rbc-time-view .rbc-allday-cell {
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
+  border-left: 1px solid #DDD;
+}
+.rbc-time-view .rbc-allday-events {
+  position: relative;
+  z-index: 4;
+}
+.rbc-time-view .rbc-row {
+  box-sizing: border-box;
+  min-height: 20px;
+}
+.rbc-time-header {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 0 auto;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.rbc-time-header.rbc-overflowing {
+  border-right: 1px solid #DDD;
+}
+.rbc-rtl .rbc-time-header.rbc-overflowing {
+  border-right-width: 0;
+  border-left: 1px solid #DDD;
+}
+.rbc-time-header > .rbc-row:first-child {
+  border-bottom: 1px solid #DDD;
+}
+.rbc-time-header > .rbc-row.rbc-row-resource {
+  border-bottom: 1px solid #DDD;
+}
+.rbc-time-header-content {
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-left: 1px solid #DDD;
+}
+.rbc-rtl .rbc-time-header-content {
+  border-left-width: 0;
+  border-right: 1px solid #DDD;
+}
+.rbc-time-content {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 0%;
+      -ms-flex: 1 0 0%;
+          flex: 1 0 0%;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 100%;
+  border-top: 2px solid #DDD;
+  overflow-y: auto;
+  position: relative;
+}
+.rbc-time-content > .rbc-time-gutter {
+  -webkit-flex: none;
+      -ms-flex: none;
+          flex: none;
+}
+.rbc-time-content > * + * > * {
+  border-left: 1px solid #DDD;
+}
+.rbc-rtl .rbc-time-content > * + * > * {
+  border-left-width: 0;
+  border-right: 1px solid #DDD;
+}
+.rbc-time-content > .rbc-day-slot {
+  width: 100%;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+}
+.rbc-current-time-indicator {
+  position: absolute;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #74ad31;
+  pointer-events: none;
+}
diff --git a/src/index.css b/src/index.css
index e88ff00f..8ea4155b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,4 +14,4 @@ body {
   background: var(--offwhite-bg);
   width: 100%;
   height: 100%;
-}
\ No newline at end of file
+}

From ae669bee093575f0b45aa575f058449ae12216e6 Mon Sep 17 00:00:00 2001
From: Adina Johnson <adinacjohnson@gmail.com>
Date: Thu, 8 Nov 2018 20:58:39 -0500
Subject: [PATCH 16/25] entering and displaying journal entries works now

---
 src/components/Journal/View.js  |  4 ++--
 src/components/Journal/index.js | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Journal/View.js b/src/components/Journal/View.js
index 369a0260..9a1abd69 100644
--- a/src/components/Journal/View.js
+++ b/src/components/Journal/View.js
@@ -9,10 +9,10 @@ const View = ({value, entries, handleSubmit, handleChange}) => (
 	          Essay:
 	          <textarea value={value} onChange={handleChange} />
 	        </label>
-	        <input type="submit" value="Submit" />
+	        <div onClick={handleSubmit}> submit</div>
 	      </form>
     	<div>
-	      {entries}
+	      {entries.map((txt, index) => <p key={index}>{txt}</p>)}
 	   	</div>
      </div>
 );
diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js
index 71f60688..d2ab2337 100644
--- a/src/components/Journal/index.js
+++ b/src/components/Journal/index.js
@@ -9,7 +9,7 @@ export default class Journal extends Component {
 
         this.state = {
             value: 'enter ur entry',
-            entries: []
+            entries: ["this is my first entry", "this is a second entry", "i also wrote this lol"]
         };
 
         this.handleChange = this.handleChange.bind(this);
@@ -21,19 +21,26 @@ export default class Journal extends Component {
         this.setState({value: event.target.value});
     }
 
-    handleSubmit(event) {
-        alert('An essay was submitted: ' + this.state.value);
-        event.preventDefault();
-        this.state.entries.push(this.state.value);
+    handleSubmit(event) { 
+        const itemToAdd = this.state.value;
+        const entries = this.state.entries;
+        this.setState({
+            value: "enter ur entryyyy",
+            entries: entries.concat(itemToAdd)
+        });
+        console.log(entries.concat(itemToAdd));
+
       }
 
     componentWillUnmount() {
         // this is where you record your final state to the model
-        // ex --> this.recordFinalState("ex_tab", this.state);
+        this.recordFinalState("Journal", this.state);
         // this is commented out because I'm not passing in the register function yet :)
     }
 
     render() {
+        console.log("rendering");
+        console.log(this.state);
         return <View value={this.state.value} entries={this.state.entries} handleSubmit={this.handleSubmit} handleChange = {this.handleChange}/>;
     }
 

From b782490be0bad1ab520ac7b7f3b629291fb358e1 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Sat, 10 Nov 2018 16:30:49 -0500
Subject: [PATCH 17/25] user can now add their own events!! TODO: save events
 to model

---
 src/components/tabs/Calendar/View.js          |  31 +-
 src/components/tabs/Calendar/index.js         |  53 +-
 .../tabs/Calendar/react-big-calendar.css      | 706 ------------------
 3 files changed, 61 insertions(+), 729 deletions(-)
 delete mode 100644 src/components/tabs/Calendar/react-big-calendar.css

diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
index 15c4f50f..b72749c9 100644
--- a/src/components/tabs/Calendar/View.js
+++ b/src/components/tabs/Calendar/View.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'; // This begins as an empty container, but we will have a function that fills it on tab clicks.
 import BigCalendar from 'react-big-calendar';
-import moment from 'moment'
 import BigCalendarCSS from 'react-big-calendar/lib/css/react-big-calendar.css';
+import events from 'events'
 /* The current version of big calendar implemented here is the most basic, the package also allows:
 - event creation
 - Localization
@@ -11,23 +11,14 @@ import BigCalendarCSS from 'react-big-calendar/lib/css/react-big-calendar.css';
 Q&A about big-calendar availale on Discord https://discordapp.com/channels/102860784329052160/424364360731852800
 // https://github.com/intljusticemission/react-big-calendar/issues/234
 */
-const localizer = BigCalendar.momentLocalizer(moment)
 let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
+
 const View = props => {
-  const myEventsList = [
-    {
-      allDay: false,
-      end: new Date('November 01, 2018 11:15:00'),
-      start: new Date('November 01, 2018 11:13:00'),
-      title: 'hi',
-    },
-    {
-      allDay: true,
-      end: new Date('December 09, 2017 11:13:00'),
-      start: new Date('December 09, 2017 11:13:00'),
-      title: 'All Day Event',
-    },
-  ];
+  const event = props.Event;
+  const eventAgenda = props.EventAgenda;
+  // console.log("this is the list of events", props.events);
+  var myEventsList = props.events;
+  const localizer = props.localizer;
   return (
     <div className="displayContainer">
       <div className="rbc-calendar">
@@ -36,12 +27,20 @@ const View = props => {
               events={myEventsList}
               defaultView={BigCalendar.Views.DAY}
               views={allViews}
+              step={30}
               startAccessor='startDate'
               endAccessor='endDate'
               localizer={localizer}
               defaultDate={new Date(2018, 10, 6)}
               onSelectEvent={event => alert(event.title)}
               onSelectSlot={props.handleSelect}
+              showMultiDayTimes
+              components={{
+                event: event,
+                agenda: {
+                event: eventAgenda
+             }
+}}
               />
               </div>
     </div>
diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index a447ad9c..e2471379 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -1,33 +1,72 @@
 import React, { Component } from 'react';
 import View from './View';
-import Events from 'events'
-import moment from 'moment';
+// import events from 'events'
+import BigCalendar from 'react-big-calendar';
+import moment from 'moment'
+const localizer = BigCalendar.momentLocalizer(moment)
+
+function Event({ event }) {
+  return (
+    <span>
+      <strong>{event.title}</strong>
+      {event.desc && ':  ' + event.desc}
+    </span>
+  )
+}
+
+function EventAgenda({ event }) {
+  return (
+    <span>
+      <em style={{ color: 'magenta' }}>{event.title}</em>
+      <p>{event.desc}</p>
+    </span>
+  )
+}
+
+var events = [
+    {
+      endDate: new Date('November 12, 2018 20:00:00'),
+      startDate: new Date('November 10, 2018 06:00:00'),
+      title: 'Dummy event title',
+      desc: 'Big conference for important people'
+    }
+];
 
 class Calendar extends Component {
   /*
   TODO: Things to fix
   - be able to store event start and end times into localizer
+  = be able to add reoccuring events
+  https://www.reddit.com/r/reactjs/comments/8ig9q3/using_reactbigcalendar_is_there_an_easy_way_to/
   */
+
   constructor(props)
   {
       super(props);
-      this.state = {events: Events};
+      this.state = { events : events } ;
+      this.handleSelect.bind(this);
   }
 
 
   handleSelect = ({ start, end }) => {
     //create an event
     const title = window.prompt('New Event name')
-    if (title)
-      console.log("Your new event name", title);
-      // this.state.events.push({start: start, end: end, title: title});
-      this.setState({});
+    if (title) {
+      // console.log("Your new event name", title);
+      this.setState({ events: this.state.events.concat({startDate: start, endDate: end, title: title}) });
+    }
   }
 
+
+
     render() {
         return(
         <View
         handleSelect = {this.handleSelect}
+        Event = {this.Event}
+        EventAgenda = {this.EventAgenda}
+        events = {this.state.events}
+        localizer = {localizer}
         />
     )
   }
diff --git a/src/components/tabs/Calendar/react-big-calendar.css b/src/components/tabs/Calendar/react-big-calendar.css
deleted file mode 100644
index a37881fc..00000000
--- a/src/components/tabs/Calendar/react-big-calendar.css
+++ /dev/null
@@ -1,706 +0,0 @@
-.rbc-btn {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-button.rbc-btn {
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-button[disabled].rbc-btn {
-  cursor: not-allowed;
-}
-button.rbc-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-.rbc-calendar {
-  flex: 1;
-  min-height: 590px;
-  max-height: 590px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-
-
-.rbc-time-header {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: row;
-&.rbc-overflowing {
-  border-right: 1px solid @cell-border;
-}
-}
-
-.rbc-time-content { flex: 1; }
-
-.rbc-calendar *,
-.rbc-calendar *:before,
-.rbc-calendar *:after {
-  box-sizing: inherit;
-}
-.rbc-abs-full,
-.rbc-row-bg {
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.rbc-ellipsis,
-.rbc-event-label,
-.rbc-row-segment .rbc-event-content,
-.rbc-show-more {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rbc-rtl {
-  direction: rtl;
-}
-.rbc-off-range {
-  color: #999999;
-}
-.rbc-off-range-bg {
-  background: #e5e5e5;
-}
-.rbc-header {
-  overflow: hidden;
-  -webkit-flex: 1 0 0%;
-      -ms-flex: 1 0 0%;
-          flex: 1 0 0%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 3px;
-  text-align: center;
-  vertical-align: middle;
-  font-weight: bold;
-  font-size: 90%;
-  min-height: 0;
-  border-bottom: 1px solid #DDD;
-}
-.rbc-header + .rbc-header {
-  border-left: 1px solid #DDD;
-}
-.rbc-rtl .rbc-header + .rbc-header {
-  border-left-width: 0;
-  border-right: 1px solid #DDD;
-}
-.rbc-header > a,
-.rbc-header > a:active,
-.rbc-header > a:visited {
-  color: inherit;
-  text-decoration: none;
-}
-.rbc-row-content {
-  position: relative;
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-  z-index: 4;
-}
-.rbc-today {
-  background-color: #eaf6ff;
-}
-.rbc-toolbar {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  margin-bottom: 10px;
-  font-size: 16px;
-}
-.rbc-toolbar .rbc-toolbar-label {
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  padding: 0 10px;
-  text-align: center;
-}
-.rbc-toolbar button {
-  color: #373a3c;
-  display: inline-block;
-  margin: 0;
-  text-align: center;
-  vertical-align: middle;
-  background: none;
-  background-image: none;
-  border: 1px solid #ccc;
-  padding: .375rem 1rem;
-  border-radius: 4px;
-  line-height: normal;
-  white-space: nowrap;
-}
-.rbc-toolbar button:active,
-.rbc-toolbar button.rbc-active {
-  background-image: none;
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-.rbc-toolbar button:active:hover,
-.rbc-toolbar button.rbc-active:hover,
-.rbc-toolbar button:active:focus,
-.rbc-toolbar button.rbc-active:focus {
-  color: #373a3c;
-  background-color: #d4d4d4;
-  border-color: #8c8c8c;
-}
-.rbc-toolbar button:focus {
-  color: #373a3c;
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-.rbc-toolbar button:hover {
-  color: #373a3c;
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-.rbc-btn-group {
-  display: inline-block;
-  white-space: nowrap;
-}
-.rbc-btn-group > button:first-child:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.rbc-btn-group > button:last-child:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
-  border-radius: 4px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
-  border-radius: 4px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.rbc-btn-group > button:not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-.rbc-btn-group button + button {
-  margin-left: -1px;
-}
-.rbc-rtl .rbc-btn-group button + button {
-  margin-left: 0;
-  margin-right: -1px;
-}
-.rbc-btn-group + .rbc-btn-group,
-.rbc-btn-group + button {
-  margin-left: 10px;
-}
-.rbc-event {
-  border: none;
-  box-shadow: none;
-  margin: 0;
-  padding: 2px 5px;
-  background-color: #3174ad;
-  border-radius: 5px;
-  color: #fff;
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-}
-.rbc-slot-selecting .rbc-event {
-  cursor: inherit;
-  pointer-events: none;
-}
-.rbc-event.rbc-selected {
-  background-color: #265985;
-}
-.rbc-event:focus {
-  outline: 5px auto #3b99fc;
-}
-.rbc-event-label {
-  font-size: 80%;
-}
-.rbc-event-overlaps {
-  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
-}
-.rbc-event-continues-prior {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.rbc-event-continues-after {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.rbc-event-continues-earlier {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-.rbc-event-continues-later {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.rbc-row {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-.rbc-row-segment {
-  padding: 0 1px 1px 1px;
-}
-.rbc-selected-cell {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.rbc-show-more {
-  background-color: rgba(255, 255, 255, 0.3);
-  z-index: 4;
-  font-weight: bold;
-  font-size: 85%;
-  height: auto;
-  line-height: normal;
-  white-space: nowrap;
-}
-.rbc-month-view {
-  position: relative;
-  border: 1px solid #DDD;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-flex: 1 0 0;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
-  width: 100%;
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-  height: 100%;
-}
-.rbc-month-header {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-.rbc-month-row {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-flex: 1 0 0;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
-  -webkit-flex-basis: 0px;
-      -ms-flex-preferred-size: 0px;
-          flex-basis: 0px;
-  overflow: hidden;
-  height: 100%;
-}
-.rbc-month-row + .rbc-month-row {
-  border-top: 1px solid #DDD;
-}
-.rbc-date-cell {
-  -webkit-flex: 1 1 0;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0;
-  min-width: 0;
-  padding-right: 5px;
-  text-align: right;
-}
-.rbc-date-cell.rbc-now {
-  font-weight: bold;
-}
-.rbc-date-cell > a,
-.rbc-date-cell > a:active,
-.rbc-date-cell > a:visited {
-  color: inherit;
-  text-decoration: none;
-}
-.rbc-row-bg {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-flex: 1 0 0;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
-  overflow: hidden;
-}
-.rbc-day-bg {
-  -webkit-flex: 1 0 0%;
-      -ms-flex: 1 0 0%;
-          flex: 1 0 0%;
-}
-.rbc-day-bg + .rbc-day-bg {
-  border-left: 1px solid #DDD;
-}
-.rbc-rtl .rbc-day-bg + .rbc-day-bg {
-  border-left-width: 0;
-  border-right: 1px solid #DDD;
-}
-.rbc-overlay {
-  position: absolute;
-  z-index: 5;
-  border: 1px solid #e5e5e5;
-  background-color: #fff;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
-  padding: 10px;
-}
-.rbc-overlay > * + * {
-  margin-top: 1px;
-}
-.rbc-overlay-header {
-  border-bottom: 1px solid #e5e5e5;
-  margin: -10px -10px 5px -10px;
-  padding: 2px 10px;
-}
-.rbc-agenda-view {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-flex: 1 0 0;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
-  overflow: auto;
-}
-.rbc-agenda-view table.rbc-agenda-table {
-  width: 100%;
-  border: 1px solid #DDD;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
-  padding: 5px 10px;
-  vertical-align: top;
-}
-.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
-  padding-left: 15px;
-  padding-right: 15px;
-  text-transform: lowercase;
-}
-.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
-  border-left: 1px solid #DDD;
-}
-.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
-  border-left-width: 0;
-  border-right: 1px solid #DDD;
-}
-.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
-  border-top: 1px solid #DDD;
-}
-.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
-  padding: 3px 5px;
-  text-align: left;
-  border-bottom: 1px solid #DDD;
-}
-.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
-  text-align: right;
-}
-.rbc-agenda-time-cell {
-  text-transform: lowercase;
-}
-.rbc-agenda-time-cell .rbc-continues-after:after {
-  content: ' »';
-}
-.rbc-agenda-time-cell .rbc-continues-prior:before {
-  content: '« ';
-}
-.rbc-agenda-date-cell,
-.rbc-agenda-time-cell {
-  white-space: nowrap;
-}
-.rbc-agenda-event-cell {
-  width: 100%;
-}
-.rbc-time-column {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  min-height: 100%;
-}
-.rbc-time-column .rbc-timeslot-group {
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-.rbc-timeslot-group {
-  border-bottom: 1px solid #DDD;
-  min-height: 40px;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: column nowrap;
-      -ms-flex-flow: column nowrap;
-          flex-flow: column nowrap;
-}
-.rbc-time-gutter,
-.rbc-header-gutter {
-  -webkit-flex: none;
-      -ms-flex: none;
-          flex: none;
-}
-.rbc-label {
-  padding: 0 5px;
-}
-.rbc-day-slot {
-  position: relative;
-}
-.rbc-day-slot .rbc-events-container {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  margin-right: 10px;
-  top: 0;
-}
-.rbc-day-slot .rbc-events-container.rbc-is-rtl {
-  left: 10px;
-  right: 0;
-}
-.rbc-day-slot .rbc-event {
-  border: 1px solid #265985;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  max-height: 100%;
-  min-height: 20px;
-  -webkit-flex-flow: column wrap;
-      -ms-flex-flow: column wrap;
-          flex-flow: column wrap;
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  overflow: hidden;
-  position: absolute;
-}
-.rbc-day-slot .rbc-event-label {
-  -webkit-flex: none;
-      -ms-flex: none;
-          flex: none;
-  padding-right: 5px;
-  width: auto;
-}
-.rbc-day-slot .rbc-event-content {
-  width: 100%;
-  -webkit-flex: 1 1 0;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0;
-  word-wrap: break-word;
-  line-height: 1;
-  height: 100%;
-  min-height: 1em;
-}
-.rbc-day-slot .rbc-time-slot {
-  border-top: 1px solid #f7f7f7;
-}
-.rbc-time-view-resources .rbc-time-gutter,
-.rbc-time-view-resources .rbc-time-header-gutter {
-  position: -webkit-sticky;
-  position: sticky;
-  left: 0;
-  background-color: white;
-  border-right: 1px solid #DDD;
-  z-index: 10;
-  margin-right: -1px;
-}
-.rbc-time-view-resources .rbc-time-header {
-  overflow: hidden;
-}
-.rbc-time-view-resources .rbc-time-header-content {
-  min-width: auto;
-  -webkit-flex: 1 0 0;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
-  -webkit-flex-basis: 0px;
-      -ms-flex-preferred-size: 0px;
-          flex-basis: 0px;
-}
-.rbc-time-view-resources .rbc-day-slot {
-  min-width: 140px;
-}
-.rbc-time-view-resources .rbc-header,
-.rbc-time-view-resources .rbc-day-bg {
-  width: 140px;
-  -webkit-flex: 1 1 0;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0;
-  -webkit-flex-basis: 0 px;
-      -ms-flex-preferred-size: 0 px;
-          flex-basis: 0 px;
-}
-.rbc-time-header-content + .rbc-time-header-content {
-  margin-left: -1px;
-}
-.rbc-time-slot {
-  -webkit-flex: 1 0 0;
-      -ms-flex: 1 0 0px;
-          flex: 1 0 0;
-}
-.rbc-time-slot.rbc-now {
-  font-weight: bold;
-}
-.rbc-day-header {
-  text-align: center;
-}
-.rbc-slot-selection {
-  z-index: 10;
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  font-size: 75%;
-  width: 100%;
-  padding: 3px;
-}
-.rbc-slot-selecting {
-  cursor: move;
-}
-.rbc-time-view {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  width: 100%;
-  border: 1px solid #DDD;
-  min-height: 0;
-}
-.rbc-time-view .rbc-time-gutter {
-  white-space: nowrap;
-}
-.rbc-time-view .rbc-allday-cell {
-  box-sizing: content-box;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
-  border-left: 1px solid #DDD;
-}
-.rbc-time-view .rbc-allday-events {
-  position: relative;
-  z-index: 4;
-}
-.rbc-time-view .rbc-row {
-  box-sizing: border-box;
-  min-height: 20px;
-}
-.rbc-time-header {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-.rbc-time-header.rbc-overflowing {
-  border-right: 1px solid #DDD;
-}
-.rbc-rtl .rbc-time-header.rbc-overflowing {
-  border-right-width: 0;
-  border-left: 1px solid #DDD;
-}
-.rbc-time-header > .rbc-row:first-child {
-  border-bottom: 1px solid #DDD;
-}
-.rbc-time-header > .rbc-row.rbc-row-resource {
-  border-bottom: 1px solid #DDD;
-}
-.rbc-time-header-content {
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  min-width: 0;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  border-left: 1px solid #DDD;
-}
-.rbc-rtl .rbc-time-header-content {
-  border-left-width: 0;
-  border-right: 1px solid #DDD;
-}
-.rbc-time-content {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 0%;
-      -ms-flex: 1 0 0%;
-          flex: 1 0 0%;
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  width: 100%;
-  border-top: 2px solid #DDD;
-  overflow-y: auto;
-  position: relative;
-}
-.rbc-time-content > .rbc-time-gutter {
-  -webkit-flex: none;
-      -ms-flex: none;
-          flex: none;
-}
-.rbc-time-content > * + * > * {
-  border-left: 1px solid #DDD;
-}
-.rbc-rtl .rbc-time-content > * + * > * {
-  border-left-width: 0;
-  border-right: 1px solid #DDD;
-}
-.rbc-time-content > .rbc-day-slot {
-  width: 100%;
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-}
-.rbc-current-time-indicator {
-  position: absolute;
-  z-index: 3;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: #74ad31;
-  pointer-events: none;
-}

From 1ca51ad5e78d8278f37396798a31881cf7ff09fe Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Sat, 10 Nov 2018 17:12:26 -0500
Subject: [PATCH 18/25] can now delete events

---
 src/components/structure/TabDisplay/View.js  |  12 ++-
 src/components/structure/TabDisplay/index.js |  11 +-
 src/components/tabs/Calendar/View.js         |   4 +-
 src/components/tabs/Calendar/events.js       | 106 -------------------
 src/components/tabs/Calendar/index.js        |  22 +++-
 src/test_resources/testutils.js              |  36 +++----
 6 files changed, 49 insertions(+), 142 deletions(-)
 delete mode 100644 src/components/tabs/Calendar/events.js

diff --git a/src/components/structure/TabDisplay/View.js b/src/components/structure/TabDisplay/View.js
index bb9bf838..c1128b8e 100644
--- a/src/components/structure/TabDisplay/View.js
+++ b/src/components/structure/TabDisplay/View.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Calendar from '../../tabs/Calendar';
+import ExTab from '../../tabs/Calendar';
 /* IMPORTANT: as I am committing, I have just been commenting out the line where we've been putting
  *
  * our code to debug/render it :)
@@ -17,11 +17,13 @@ import Calendar from '../../tabs/Calendar';
  * on tab clicks.
  */
 
-const View = ({}) => (
+const View = props => {
+  return (
     <div className="displayContainer">
-        {/* <ExTab /> */}
-        <Calendar />
+        {/* <Calendar /> */}
+        <ExTab />
     </div>
-);
+)
+}
 
 export default View;
diff --git a/src/components/structure/TabDisplay/index.js b/src/components/structure/TabDisplay/index.js
index 4c2d4716..3a0afb99 100644
--- a/src/components/structure/TabDisplay/index.js
+++ b/src/components/structure/TabDisplay/index.js
@@ -1,15 +1,16 @@
 import React, { Component } from 'react';
 import View from './View';
+import Calendar from '../../tabs/Calendar';
 
 class TabDisplay extends Component {
 
     constructor(props) {
         super(props);
-        
+
         this.tabInfo = props.tabInfo;
         this.tabToDisplay = props.tabToDisplay;
         this.registerFinalStateFunc = props.registerFinalStateFunc;
-        // this is being passed the registerFinalState function, it just isn't passing it yet. 
+        // this is being passed the registerFinalState function, it just isn't passing it yet.
     }
 
     /*
@@ -33,13 +34,13 @@ class TabDisplay extends Component {
             case "journal":
                 console.log("display journal");
                 break;
-            case "menu": 
+            case "menu":
                 console.log("display menu");
                 break;
             case "welcome tab":
                 console.log("display welcome tab");
                 break;
-            default: 
+            default:
                 console.log(`TabDisplay parser didn't recognize ${this.tabToDisplay}`);
                 break;
         }
@@ -48,4 +49,4 @@ class TabDisplay extends Component {
 
 }
 
-export default TabDisplay;
\ No newline at end of file
+export default TabDisplay;
diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
index 4cc455c7..0ef9da11 100644
--- a/src/components/tabs/Calendar/View.js
+++ b/src/components/tabs/Calendar/View.js
@@ -32,8 +32,8 @@ const View = props => {
               endAccessor='endDate'
               localizer={localizer}
               defaultDate={new Date(2018, 10, 6)}
-              onSelectEvent={event => alert(event.title)}
-              onSelectSlot={props.handleSelect}
+              onSelectEvent={event => props.handleSelectToDelete(event)}
+              onSelectSlot={props.handleSelectSlot}
               showMultiDayTimes
               components={{
                 event: event,
diff --git a/src/components/tabs/Calendar/events.js b/src/components/tabs/Calendar/events.js
deleted file mode 100644
index dbf1fa70..00000000
--- a/src/components/tabs/Calendar/events.js
+++ /dev/null
@@ -1,106 +0,0 @@
-export default [
-  {
-    id: 0,
-    title: 'All Day Event very long title',
-    allDay: true,
-    start: new Date(2015, 3, 0),
-    end: new Date(2015, 3, 1),
-  },
-  {
-    id: 1,
-    title: 'Long Event',
-    start: new Date(2015, 3, 7),
-    end: new Date(2015, 3, 10),
-  },
-
-  {
-    id: 2,
-    title: 'DTS STARTS',
-    start: new Date(2016, 2, 13, 0, 0, 0),
-    end: new Date(2016, 2, 20, 0, 0, 0),
-  },
-
-  {
-    id: 3,
-    title: 'DTS ENDS',
-    start: new Date(2016, 10, 6, 0, 0, 0),
-    end: new Date(2016, 10, 13, 0, 0, 0),
-  },
-
-  {
-    id: 4,
-    title: 'Some Event',
-    start: new Date(2015, 3, 9, 0, 0, 0),
-    end: new Date(2015, 3, 10, 0, 0, 0),
-  },
-  {
-    id: 5,
-    title: 'Conference',
-    start: new Date(2015, 3, 11),
-    end: new Date(2015, 3, 13),
-    desc: 'Big conference for important people',
-  },
-  {
-    id: 6,
-    title: 'Meeting',
-    start: new Date(2015, 3, 12, 10, 30, 0, 0),
-    end: new Date(2015, 3, 12, 12, 30, 0, 0),
-    desc: 'Pre-meeting meeting, to prepare for the meeting',
-  },
-  {
-    id: 7,
-    title: 'Lunch',
-    start: new Date(2015, 3, 12, 12, 0, 0, 0),
-    end: new Date(2015, 3, 12, 13, 0, 0, 0),
-    desc: 'Power lunch',
-  },
-  {
-    id: 8,
-    title: 'Meeting',
-    start: new Date(2015, 3, 12, 14, 0, 0, 0),
-    end: new Date(2015, 3, 12, 15, 0, 0, 0),
-  },
-  {
-    id: 9,
-    title: 'Happy Hour',
-    start: new Date(2015, 3, 12, 17, 0, 0, 0),
-    end: new Date(2015, 3, 12, 17, 30, 0, 0),
-    desc: 'Most important meal of the day',
-  },
-  {
-    id: 10,
-    title: 'Dinner',
-    start: new Date(2015, 3, 12, 20, 0, 0, 0),
-    end: new Date(2015, 3, 12, 21, 0, 0, 0),
-  },
-  {
-    id: 11,
-    title: 'Birthday Party',
-    start: new Date(2015, 3, 13, 7, 0, 0),
-    end: new Date(2015, 3, 13, 10, 30, 0),
-  },
-  {
-    id: 12,
-    title: 'Late Night Event',
-    start: new Date(2015, 3, 17, 19, 30, 0),
-    end: new Date(2015, 3, 18, 2, 0, 0),
-  },
-  {
-    id: 12.5,
-    title: 'Late Same Night Event',
-    start: new Date(2015, 3, 17, 19, 30, 0),
-    end: new Date(2015, 3, 17, 23, 30, 0),
-  },
-  {
-    id: 13,
-    title: 'Multi-day Event',
-    start: new Date(2015, 3, 20, 19, 30, 0),
-    end: new Date(2015, 3, 22, 2, 0, 0),
-  },
-  {
-    id: 14,
-    title: 'Today',
-    start: new Date(new Date().setHours(new Date().getHours() - 3)),
-    end: new Date(new Date().setHours(new Date().getHours() + 3)),
-  },
-]
diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index 03abd0e5..9a95f169 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -44,11 +44,12 @@ class Calendar extends Component {
   {
       super(props);
       this.state = { events : events } ;
-      this.handleSelect = this.handleSelect.bind(this);
+      this.handleSelectSlot = this.handleSelectSlot.bind(this);
+      this.handleSelectToDelete = this.handleSelectToDelete.bind(this);
   }
 
 
-  handleSelect = ({ start, end }) => {
+  handleSelectSlot = ({ start, end }) => {
     //create an event
     const title = window.prompt('New Event name')
     if (title) {
@@ -56,10 +57,25 @@ class Calendar extends Component {
     }
   }
 
+  handleSelectToDelete = (pEvent) => {
+   const r = window.confirm("Would you like to remove this event?")
+   console.log('handling select to delete');
+   if(r === true){
+
+     this.setState((prevState, props) => {
+       const events = [...prevState.events]
+       const idx = events.indexOf(pEvent)
+       events.splice(idx, 1);
+       return { events };
+     });
+   }
+ }
+
     render() {
         return(
         <View
-        handleSelect = {this.handleSelect}
+        handleSelectSlot = {this.handleSelectSlot}
+        handleSelectToDelete = {this.handleSelectToDelete}
         Event = {this.Event}
         EventAgenda = {this.EventAgenda}
         events = {this.state.events}
diff --git a/src/test_resources/testutils.js b/src/test_resources/testutils.js
index 7a12b3a3..6a4700db 100644
--- a/src/test_resources/testutils.js
+++ b/src/test_resources/testutils.js
@@ -1,16 +1,16 @@
-/* 
- * This defines resources you can use for writing tests, like 
- * fake tasks, data, etc. 
- * 
- * If you feel that you have a lot of test recources to create, feel free to make 
- * another file in this directory. 
- * 
- * These do not reflect the way that tabs 'info' needs to look. 
+/*
+ * This defines resources you can use for writing tests, like
+ * fake tasks, data, etc.
+ *
+ * If you feel that you have a lot of test recources to create, feel free to make
+ * another file in this directory.
+ *
+ * These do not reflect the way that tabs 'info' needs to look.
  */
 
-// returns a (small) list of tasks 
+// returns a (small) list of tasks
 export function getTestTaskListSmall() {
-    return [ 
+    return [
         { title: "get pizza", key: 0, tabs: [ { title: "analytics", info: "ooh buddy, that's a lot of pepperoni" }, { title: "journal", info: "pinapple, nice!" }]},
         {title: "go swimming", key: 1, tabs: [ { title: "analytics", info: {laptimes: [40, 35, 36] } }, { title: "journal", info: "I look good in my new goggles" }]},
         {title: "pick up kid", key: 2, tabs: [ { title: "analytics", info: {label: "duration", data: [15, 11, 16 ]} }, { title: "journal", info: "time to put them back down" } ]},
@@ -18,26 +18,20 @@ export function getTestTaskListSmall() {
     ];
 }
 
-// returns the map of titles and keys from the other small list.  
+// returns the map of titles and keys from the other small list.
 export function getTestTitleKeyListSmall() {
     return getTestTaskListSmall().map((task, index) => {
         return {key: index, title: task.title};
-<<<<<<< HEAD
-    });;
-}
-
-=======
     });
 }
 
 export function getNewTestTask() {
-    return { 
-        title: "finish that potatoe", key: 4, 
-        tabs: [ 
-            { title: "analytics", info: [4, 11, 10, 8, 12, 13] }, 
+    return {
+        title: "finish that potatoe", key: 4,
+        tabs: [
+            { title: "analytics", info: [4, 11, 10, 8, 12, 13] },
             { title: "journal", info: "this is the only journal"},
             { title: "calendar", info: {events: [1, 2, 3, 4]}
         }]
     };
 }
->>>>>>> 6d18fd38b845e9980d88fd7fd73244a970b3b510

From ea6180557bfbfd4c0be48a68b7f1f2ba6d6b363a Mon Sep 17 00:00:00 2001
From: ddibened <ddibened@oberlin.edu>
Date: Sun, 11 Nov 2018 14:01:15 -0500
Subject: [PATCH 19/25] Model adds and removes tasks.

It also checks for bad input (duplicate titles, empty titles) and warns users.  It supports
removing tasks, though that is implemented in the tab that edits tasks.  All tests are passing.
---
 src/App/App.test.js                           |  8 +-
 src/Model/Model.js                            | 20 +++--
 src/Model/Model.test.js                       | 25 +++++-
 src/Model/ObservableData.test.js              |  2 +-
 src/Model/Resources.js                        |  9 +-
 src/Model/Resources.test.js                   | 11 +++
 .../NewTaskButton/NewTaskButton.test.js       | 88 ++++++++++++++++++-
 .../structure/TaskList/NewTaskButton/View.js  |  0
 .../structure/TaskList/NewTaskButton/index.js | 88 +++++++++++++++++++
 .../structure/TaskList/TaskList.test.js       | 45 ++++++++--
 src/components/structure/TaskList/View.js     |  7 +-
 src/components/structure/TaskList/index.js    | 20 ++---
 src/setupTests.js                             |  3 +-
 src/test_resources/testutils.js               | 15 ++++
 src/utilities/constants.js                    | 12 +++
 src/utilities/general_content.js              |  4 +-
 16 files changed, 317 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/structure/TaskList/NewTaskButton/View.js
 create mode 100644 src/utilities/constants.js

diff --git a/src/App/App.test.js b/src/App/App.test.js
index a754b201..84abf4da 100644
--- a/src/App/App.test.js
+++ b/src/App/App.test.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
+});
\ No newline at end of file
diff --git a/src/Model/Model.js b/src/Model/Model.js
index 449e475e..486fef28 100644
--- a/src/Model/Model.js
+++ b/src/Model/Model.js
@@ -114,16 +114,16 @@ class Model {
     /*
      * Create a new task
      * 'title' is the title of the new task. 
+     * returns - 'true' if it added, 'false' if it was a duplicate. 
      */
     createTask(title) {
 
         // look for duplicate titles
-        const duplicateTitles = this.resources.titleKeyList.getData().filter(titleKeyPair => titleKeyPair.key === title);
+        const duplicateTitles = this.resources.titleKeyList.getData().filter(titleKeyPair => titleKeyPair.title === title);
 
         if (duplicateTitles.length > 0) {
-            // make an alert and exit this function
-            throw new Error("woops, a task with that title already exists");
-
+            // there was a duplicate, handle it! (meaning make the alert in the outer component)
+            return false;
         } else {
             // find the key for the new task
             const maxKey = this.findMaxKey(this.resources.titleKeyList.getData());
@@ -136,11 +136,20 @@ class Model {
 
             // update the taskkey list
             this.resources.refreshTitleKeyList();
+
+            return true
         }
     }
 
-    findMaxKey(titleKeyList) {
+    /*
+     * Deletes the selected task, a deleted task cannot be recovered(!)
+     */
+    deleteTask(key) {
+        this.resources.removeTask(key);
+        this.resources.refreshTitleKeyList();
+    }
 
+    findMaxKey(titleKeyList) {
         const reducer = (sofar, newTK) => {
             const newKey = newTK.key;
             if (newKey > sofar) {
@@ -149,7 +158,6 @@ class Model {
                 return sofar;
             }
         };
-
         return titleKeyList.reduce(reducer, 0);
     }
 }
diff --git a/src/Model/Model.test.js b/src/Model/Model.test.js
index 7eb38c71..57bda266 100644
--- a/src/Model/Model.test.js
+++ b/src/Model/Model.test.js
@@ -2,8 +2,10 @@ import Model from './Model';
 import { getTestTaskListSmall, getTestTitleKeyListSmall, getNewTestTask } from '../test_resources/testutils.js';
 import { InitialTask } from '../utilities/general_content.js';
 import ObservableData from './ObservableData';
+import { NO_DUPLICATE_TASK_TITLES } from '../utilities/constants';
 
 describe('Model', () => {
+
     it('constructs a new Model', () => {
         const testing = true;
         const model = new Model(testing, getTestTaskListSmall());
@@ -107,7 +109,28 @@ describe('Model', () => {
         const testing = true;
         const model = new Model(testing, getTestTaskListSmall());
 
-        
+        const duplicateTitle = getTestTaskListSmall()[2].title;
+
+        expect(model.createTask(duplicateTitle)).toEqual(false);
+    });
+
+    it("remove deleted tasks from titlekeylist", () => {
+        // and deletion should also change current task back to the welcome task
+        const testing = true;
+        const model = new Model(testing, getTestTaskListSmall());
+
+        const keyToRemove = 2;
+
+        model.deleteTask(keyToRemove);
+
+        const resultingTitleKeyList = model.resources.titleKeyList.getData();
+
+        expect(resultingTitleKeyList.length).toEqual(getTestTaskListSmall().length - 1);
+        expect(resultingTitleKeyList.filter(tk => tk.key === keyToRemove)).toEqual([]);
+    });
+
+    it("should reset current task to the InitialTask on deletion", () => {
+        const testing = true;
     });
 
 });
diff --git a/src/Model/ObservableData.test.js b/src/Model/ObservableData.test.js
index f0efe9fe..752135c0 100644
--- a/src/Model/ObservableData.test.js
+++ b/src/Model/ObservableData.test.js
@@ -89,7 +89,7 @@ describe('ObservableData', () => {
         expect(od.data).toEqual(originalTitle);
     });
 
-    it('call \'obs.onChange(newData)\' with a shallow copy of data when data is an object', () => {
+    it('calls \'obs.onChange(newData)\' with a shallow copy of data when data is an object', () => {
         const od = new ObservableData();
         var originalData = {
             title: "tomatoes",
diff --git a/src/Model/Resources.js b/src/Model/Resources.js
index a56b7fb8..e6e65d71 100644
--- a/src/Model/Resources.js
+++ b/src/Model/Resources.js
@@ -44,7 +44,7 @@ import { InitialTask } from '../utilities/general_content';
      */
     refreshTitleKeyList() {
         const currentStateOfList = this.parseTasksToTitles();
-        if (currentStateOfList != this.titleKeyList.getData()) {
+        if (currentStateOfList !== this.titleKeyList.getData()) {
             this.titleKeyList.updateData(currentStateOfList);
         } 
         // it they are the same, then nothing needs to happen :)
@@ -58,4 +58,11 @@ import { InitialTask } from '../utilities/general_content';
         obsWrapper.updateData(newTask);
         this.taskList.push(obsWrapper);
     }
+
+    /*
+     * Remove a task (with the matching key)
+     */
+    removeTask(keyOfTaskToRemove) {
+        this.taskList = this.taskList.filter(taskObs => taskObs.getData().key !== keyOfTaskToRemove);
+    }
  }
\ No newline at end of file
diff --git a/src/Model/Resources.test.js b/src/Model/Resources.test.js
index 31f8556e..20588fe1 100644
--- a/src/Model/Resources.test.js
+++ b/src/Model/Resources.test.js
@@ -40,4 +40,15 @@ describe('Resources', () => {
 
         expect(res.taskList.map(task => task.getData())).toEqual(correctList);
     });
+
+    it("removes a task", () => {
+        const res = new Resources(getTestTaskListSmall());
+
+        const taskToRemove = getTestTaskListSmall()[2];
+
+        res.removeTask(taskToRemove.key);
+
+        expect(res.taskList.length).toEqual(getTestTaskListSmall().length - 1);
+        expect(res.taskList.filter(task => task.key == taskToRemove.key)).toEqual([]);
+    });
 });
\ No newline at end of file
diff --git a/src/components/structure/TaskList/NewTaskButton/NewTaskButton.test.js b/src/components/structure/TaskList/NewTaskButton/NewTaskButton.test.js
index a39b34be..6ef9c2de 100644
--- a/src/components/structure/TaskList/NewTaskButton/NewTaskButton.test.js
+++ b/src/components/structure/TaskList/NewTaskButton/NewTaskButton.test.js
@@ -1,12 +1,92 @@
 import React from 'react';
 import {shallow, mount} from 'enzyme';
 import NewTaskButton from './index';
-
+import { getMockEvent } from '../../../../test_resources/testutils';
+import { NO_DUPLICATE_TASK_TITLES, NO_EMPTY_TASK_TITLES } from '../../../../utilities/constants';
 
 describe('NewTaskButton', () => {
 
-    it("should have tests", () => {
-        expect(false).toEqual(true);
+    // replace console with spy
+    // disable this if you need to see output. 
+    global.console = {
+        log: jest.fn()
+    }
+
+    it("should call 'createTask' on form entry", () => {
+        const mock = getMock();
+        const nt_btn = mount(<NewTaskButton createTask={mock.call}/>);
+
+        expect(mock.state).toEqual(0);
+
+        const testVal = "fix floor";
+        nt_btn.find('#new-task-input').simulate('change', getMockEvent(testVal));
+        nt_btn.update();
+        nt_btn.find("#new-task-button").find('form').simulate('submit', {});
+        
+        expect(mock.state).toEqual(1);
+    });
+
+    it("should call 'createTask' with proper input", () => {
+        const mock = getMock();
+        const nt_btn = shallow(<NewTaskButton createTask={mock.callWithValue}/>);
+
+        const testVal = "do a somersault";
+
+        nt_btn.find('#new-task-input').simulate('change', getMockEvent(testVal));
+
+        nt_btn.update();
+        
+        nt_btn.find("#new-task-button").find('form').simulate('submit', getMockEvent());
+
+        expect(mock.lastValue).toEqual(testVal);
+    });
+
+    // Also tests for alert message
+    it("should not allow tasks to be created with empty titles", () => {
+        const mock = getMock();
+        const nt_btn = shallow(<NewTaskButton createTask={mock.callWithValue}/>);
+
+        nt_btn.find('#new-task-input').simulate('change', getMockEvent(""));
+        nt_btn.update();
+        nt_btn.find("#new-task-button").find('form').simulate('submit', getMockEvent());
+
+        expect(mock.lastValue).toEqual("never clicked");
+
+        expect(global.console.log).toHaveBeenCalledWith(NO_EMPTY_TASK_TITLES);
+    });
+
+    it("should reset input on submit clicks", () => {
+        const mock = getMock();
+        const nt_btn = shallow(<NewTaskButton createTask={mock.callWithValue}/>);
+
+        nt_btn.find('#new-task-input').simulate('change', getMockEvent("clean potatoes"));
+        nt_btn.update();
+        nt_btn.find("#new-task-button").find('form').simulate('submit', getMockEvent());
+
+        nt_btn.update();
+
+        expect(nt_btn.find('#new-task-input').text()).toEqual(nt_btn.instance().initialState().value);
     });
+});
 
-});
\ No newline at end of file
+function getMock() {
+    const mock = {
+        state: 0,
+        lastValue: "never clicked",
+        call() {
+            mock.state += 1;
+            return true;
+        },
+        // returns true, 
+        callWithValue(val) {
+            mock.lastValue = val;
+            return true;
+        },
+        // returns false
+        callWithValueF(val) {
+            mock.lastValue = val
+            return false;
+        } 
+    }
+    return mock;
+}
\ No newline at end of file
diff --git a/src/components/structure/TaskList/NewTaskButton/View.js b/src/components/structure/TaskList/NewTaskButton/View.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/structure/TaskList/NewTaskButton/index.js b/src/components/structure/TaskList/NewTaskButton/index.js
index aaf40464..d1ca0974 100644
--- a/src/components/structure/TaskList/NewTaskButton/index.js
+++ b/src/components/structure/TaskList/NewTaskButton/index.js
@@ -1 +1,89 @@
 import React from 'react';
+import { NO_EMPTY_TASK_TITLES, NO_DUPLICATE_TASK_TITLES} from '../../../../utilities/constants';
+
+export default class NewTaskButton extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.createTask = props.createTask;
+
+        this.state = this.initialState();
+        // what to show when nothing has been enetered. 
+        this.hint = "+ new task";
+    }
+
+    /*
+     * Returns the initial value of state.  
+     */
+    initialState() {
+        return { value: '' }
+    }
+
+    /*
+     * Update value to be whatever has been typed into the input box.
+     */
+    handleChange(e) {
+        // see 'SyntheticEvents' as to why this is necessary...
+        e.persist();
+        this.setState((state) => {
+            state.value = e.target.value;
+            return state;
+        });
+    }
+
+    /*
+     * Try and create a task, if succesful, refresh the button's state, 
+     * otherwise show an alert and don't do anything.
+     */
+    handleSubmit(e) {
+        e.persist();
+        e.preventDefault();
+
+        // grabbing title
+        const newTitle = this.state.value;
+
+        // check that input is ok
+        if (this.filterInput(newTitle)) {
+            // Try and create the task
+            const taskCreated = this.createTask(newTitle);
+
+            if (taskCreated) {
+                // reset state...
+                this.setState((state) => {
+                    return this.initialState();
+                });
+            } else {
+                alert(NO_DUPLICATE_TASK_TITLES);
+            }
+        } else {
+            // output handled by filterInput()
+        }
+    }
+
+    /*
+     * Check that the input is not the empty string...
+     */
+    filterInput(newTitle) {
+        if (newTitle === "") {
+            alert(NO_EMPTY_TASK_TITLES);
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    /*
+     * this would usually be in the 'View.js', but it felt like such a small 
+     * component, it made more sense to leave it in here. 
+     */
+    render() {
+        return (
+            <div id="new-task-button">
+                <form onSubmit={(e) => this.handleSubmit(e)}>
+                    <input id="new-task-input" type="text" placeholder={this.hint} value={this.state.value} onChange={(e) => this.handleChange(e)}/>
+                </form>
+            </div>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/structure/TaskList/TaskList.test.js b/src/components/structure/TaskList/TaskList.test.js
index 15e0a0bd..dffa87b7 100644
--- a/src/components/structure/TaskList/TaskList.test.js
+++ b/src/components/structure/TaskList/TaskList.test.js
@@ -1,11 +1,16 @@
 import React from 'react';
 import TaskList from './index';
-import { getTestTaskListSmall } from '../../../test_resources/testutils';
-import { shallow, mount } from 'enzyme';
+import { getTestTaskListSmall, getMockEvent } from '../../../test_resources/testutils';
+import { mount } from 'enzyme';
 import Model from '../../../model/Model';
-import NewTaskButton from '../TaskList/NewTaskButton/index';
+import { NO_DUPLICATE_TASK_TITLES } from '../../../utilities/constants';
 
 describe('TaskList', () => {
+
+    global.console = {
+        log: jest.fn()
+    }
+
     // this is also testing that it subscribes to task_key list changes...
     it('should display all tasks', () => {
         const model = new Model(true, getTestTaskListSmall());
@@ -40,13 +45,39 @@ describe('TaskList', () => {
     it("should update when tasks are added", () => {
         const model = new Model(true, getTestTaskListSmall());
         const tl = mount(<TaskList model={model}/>);
-    });
 
-    it("should update when tasks are removed", () => {
+        // verify there are the right number of tasks to start
+        // this slice is removing the new-button, which is styled as if it were a task
+        const tasksInListPre = tl.find('.task').slice(1);
+
+        expect(tasksInListPre.length).toEqual(getTestTaskListSmall().length);
+
+        // add a new task with new-task-button
+        const newTitle = "learn to somersault";
+        tl.find('#new-task-input').simulate('change', getMockEvent(newTitle));
+        tl.update();
+        tl.find('#new-task-button').find('form').simulate('submit', getMockEvent());
+
+        const tasksInListPost = tl.find('.task').slice(1);
 
+        // verify that task was added to the list. 
+        expect(tasksInListPost.length).toEqual(getTestTaskListSmall().length + 1);
+        expect(tasksInListPost.findWhere((task_el) => task_el.text() === newTitle));
+        
     });
 
-    it("should be updated when task titles are edited", () => {
-        // Not yet implemented...
+    it("shouldn't allow duplicate task titles", () => {
+        const model = new Model(true, getTestTaskListSmall());
+        const tl = mount(<TaskList model={model}/>);
+
+        const newTitle = getTestTaskListSmall()[2].title;
+        tl.find('#new-task-input').simulate('change', getMockEvent(newTitle));
+        tl.update();
+        tl.find('#new-task-button').find('form').simulate('submit', getMockEvent());
+
+        const tasksInListPost = tl.find('.task').slice(1);
+
+        expect(tasksInListPost.length).toEqual(getTestTaskListSmall().length);
+        expect(global.console.log).toHaveBeenCalledWith(NO_DUPLICATE_TASK_TITLES);
     });
 });
\ No newline at end of file
diff --git a/src/components/structure/TaskList/View.js b/src/components/structure/TaskList/View.js
index 82b69cf5..96ae1e6d 100644
--- a/src/components/structure/TaskList/View.js
+++ b/src/components/structure/TaskList/View.js
@@ -6,11 +6,10 @@ import "./TaskList.css";
 import NewTaskButton from './NewTaskButton';
 
 // 'taskElementList' is a list of html elements that represent tasks. 
-const View = ({taskTitleElementList}) => (
+const View = ({createTask, taskTitleElementList}) => (
     <div id="tasklist_container">
-            <div className="task" id="addTask">
-                
-
+            <div className="task" id="newTaskButtonContainer">
+                <NewTaskButton createTask={createTask}/>
             </div>
             <div id="tasklist">
                 {taskTitleElementList}
diff --git a/src/components/structure/TaskList/index.js b/src/components/structure/TaskList/index.js
index b11bc9be..b6b4ae8c 100644
--- a/src/components/structure/TaskList/index.js
+++ b/src/components/structure/TaskList/index.js
@@ -9,10 +9,11 @@ class TaskList extends Component {
     constructor(props) {
         super(props);
         
+        // farthest down the model should go...
         this.model = props.model;
         // setting the initial state
         this.state = {
-            taskTitles: [ { key:-2, title: "no tasks to display..." } ]
+            titleKeyList: [ { key:-2, title: "no tasks to display..." } ]
         };
     }
 
@@ -31,12 +32,12 @@ class TaskList extends Component {
     }
 
     /*
-     * When the list of titles changes, this component should update its state to reflect 
-     * the new title list.
+     * When the list of title/keys changes, this component should update its state to reflect 
+     * the new titlekey list.
      */
-    onChange(newTitles) {
+    onChange(newTitleKeyList) {
         this.setState((state) => {
-            state.taskTitles = newTitles;
+            state.titleKeyList = newTitleKeyList;
             return state;
         });
     }
@@ -48,11 +49,10 @@ class TaskList extends Component {
         this.model.updateCurrentTask(parseInt(key));
     }
 
-    // TODO -> Create the button that adds new tasks, pass it an on click method
-
     render() {
-        // converting task objects to task elements
-        const taskTitleElementList = this.state.taskTitles.map((titleKeyPair) => {
+
+        // converting task objects to task html elements
+        const taskTitleElementList = this.state.titleKeyList.map((titleKeyPair) => {
             const key = titleKeyPair.key;
             return <div className="task" 
                         onClick={(e) => this.onClick(key)}
@@ -61,7 +61,7 @@ class TaskList extends Component {
                     </div>;
         });
 
-        return <View taskTitleElementList={taskTitleElementList}/>;
+        return <View createTask={this.model.createTask.bind(this.model)} taskTitleElementList={taskTitleElementList}/>;
     }
 }
 
diff --git a/src/setupTests.js b/src/setupTests.js
index 19f48671..fbfa206b 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -3,4 +3,5 @@
 
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-configure({ adapter: new Adapter() });
\ No newline at end of file
+configure({ adapter: new Adapter() });
+window.alert = (msg) => {console.log(msg);} ;
\ No newline at end of file
diff --git a/src/test_resources/testutils.js b/src/test_resources/testutils.js
index 81c0310d..abe8643f 100644
--- a/src/test_resources/testutils.js
+++ b/src/test_resources/testutils.js
@@ -34,4 +34,19 @@ export function getNewTestTask() {
             { title: "calendar", info: {events: [1, 2, 3, 4]}
         }]
     };
+}
+
+/*
+ * Returns a mock event for manipulating forms. 
+ */
+export function getMockEvent(initialValue) {
+    return {
+        target: { value: initialValue},
+        persist() {
+            // don't do anything...
+        },
+        preventDefault() {
+            // don't do anything...
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/utilities/constants.js b/src/utilities/constants.js
new file mode 100644
index 00000000..55f67900
--- /dev/null
+++ b/src/utilities/constants.js
@@ -0,0 +1,12 @@
+/*
+ * Definition of constants (so they only have one definition)
+ */
+
+
+/* --------------------------------- MESSAGES FOR USER INPUT ---------------------------------- */
+
+// The message to output when the user enters an empty string as a task title. 
+export const NO_EMPTY_TASK_TITLES = "a task's title needs to contain at least one character...";
+
+// the message to output when the user tries to create a task with a duplicate title.
+export const NO_DUPLICATE_TASK_TITLES = "a task with that title already exists...";
\ No newline at end of file
diff --git a/src/utilities/general_content.js b/src/utilities/general_content.js
index 0f6809da..b11f4c3a 100644
--- a/src/utilities/general_content.js
+++ b/src/utilities/general_content.js
@@ -12,4 +12,6 @@ export class InitialTask {
         this.tabs = [ {title: "welcome tab", info: {welcomeMessage: "Welcome, select a task, or create a new one :) "}}];
         this.key = -1;
     }
-}
\ No newline at end of file
+}
+
+// Is this where all tabs' initial states should be catalogued?  
\ No newline at end of file

From 0a3edf298b765ea355b84d8b3f41ef096338f499 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Mon, 12 Nov 2018 20:03:08 -0500
Subject: [PATCH 20/25] can now drag events and add recurring events

---
 src/components/structure/TabDisplay/View.js   |   8 +-
 src/components/structure/TabDisplay/index.js  |   7 +-
 src/components/structure/TaskDisplay/index.js |  16 +-
 src/components/tabs/Calendar/View.js          |  56 +++--
 src/components/tabs/Calendar/index.js         | 193 +++++++++++++-----
 src/test_resources/testutils.js               |   6 +-
 6 files changed, 196 insertions(+), 90 deletions(-)

diff --git a/src/components/structure/TabDisplay/View.js b/src/components/structure/TabDisplay/View.js
index c1128b8e..dacc1882 100644
--- a/src/components/structure/TabDisplay/View.js
+++ b/src/components/structure/TabDisplay/View.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import ExTab from '../../tabs/Calendar';
+// import ExTab from '../../tabs/ExTab';
+import Calendar from '../../tabs/Calendar';
 /* IMPORTANT: as I am committing, I have just been commenting out the line where we've been putting
  *
  * our code to debug/render it :)
@@ -18,10 +19,11 @@ import ExTab from '../../tabs/Calendar';
  */
 
 const View = props => {
+  // console.log("Props for TabDisplay",props); // testing what props look like as passed from tabdisplay
   return (
     <div className="displayContainer">
-        {/* <Calendar /> */}
-        <ExTab />
+        {/* <ExTab /> */}
+        <Calendar />
     </div>
 )
 }
diff --git a/src/components/structure/TabDisplay/index.js b/src/components/structure/TabDisplay/index.js
index 3a0afb99..0c992854 100644
--- a/src/components/structure/TabDisplay/index.js
+++ b/src/components/structure/TabDisplay/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import View from './View';
-import Calendar from '../../tabs/Calendar';
+// import Calendar from '../../tabs/Calendar';
 
 class TabDisplay extends Component {
 
@@ -10,6 +10,7 @@ class TabDisplay extends Component {
         this.tabInfo = props.tabInfo;
         this.tabToDisplay = props.tabToDisplay;
         this.registerFinalStateFunc = props.registerFinalStateFunc;
+        // console.log("TabDisplay's prop function", props.registerFinalState); // testing funtion in tabdisplay
         // this is being passed the registerFinalState function, it just isn't passing it yet.
     }
 
@@ -20,6 +21,7 @@ class TabDisplay extends Component {
         this.tabInfo = newProps.tabInfo;
         this.tabToDisplay = newProps.tabToDisplay;
         this.registerFinalStateFunc = newProps.registerFinalStateFunc;
+
     }
 
     render() {
@@ -44,7 +46,8 @@ class TabDisplay extends Component {
                 console.log(`TabDisplay parser didn't recognize ${this.tabToDisplay}`);
                 break;
         }
-        return <View />;
+        return <View
+          registerFinalState={this.registerFinalStateFunc}/>;
     }
 
 }
diff --git a/src/components/structure/TaskDisplay/index.js b/src/components/structure/TaskDisplay/index.js
index 3e8756f1..b6f9714e 100644
--- a/src/components/structure/TaskDisplay/index.js
+++ b/src/components/structure/TaskDisplay/index.js
@@ -2,12 +2,10 @@ import React, { Component } from 'react';
 import View from './View';
 import { InitialTask } from '../../../utilities/general_content';
 
-<<<<<<< HEAD
-=======
 /*
- * parses the 'currentTask' into its tablist and tabdisplay.  
+ * parses the 'currentTask' into its tablist and tabdisplay.
  */
->>>>>>> 817f2fa32a52139491b7855e4b7fed4cc0fc200c
+
 class TaskDisplay extends Component {
     constructor(props) {
         super(props);
@@ -45,13 +43,8 @@ class TaskDisplay extends Component {
 
     /*
      * Clicks to tabList should cause a different tab to be loaded...
-<<<<<<< HEAD
      *
      * 'tabClicked' - a string that is the title of the clicked tab.
-=======
-     * 
-     * 'tabClicked' - a string that is the title of the clicked tab. 
->>>>>>> 817f2fa32a52139491b7855e4b7fed4cc0fc200c
      */
     onTabClick(tabTitle) {
         this.setState((state) => {
@@ -85,13 +78,8 @@ class TaskDisplay extends Component {
                     tabList={tabList}
                     // TabList is going to wrap this onClick with the appropriate args.
                     onTabClick={this.onTabClick}
-<<<<<<< HEAD
                     tabToDisplay={this.state.currentTabTitle}
                     tabInfo={tabInfo}
-=======
-                    tabToDisplay={this.state.currentTabTitle} 
-                    tabInfo={tabInfo} 
->>>>>>> 817f2fa32a52139491b7855e4b7fed4cc0fc200c
                     registerFinalState={this.model.registerFinalState} />;
     }
 
diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
index 26beaf14..1bc06d18 100644
--- a/src/components/tabs/Calendar/View.js
+++ b/src/components/tabs/Calendar/View.js
@@ -1,6 +1,11 @@
-import React, { Component } from 'react'; // This begins as an empty container, but we will have a function that fills it on tab clicks.
+import React from 'react'; // This begins as an empty container, but we will have a function that fills it on tab clicks.
 import BigCalendar from 'react-big-calendar';
-import BigCalendarCSS from 'react-big-calendar/lib/css/react-big-calendar.css';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'
+
+const DragAndDropCalendar = withDragAndDrop(BigCalendar)
 
 /* The current version of big calendar implemented here is the most basic, the package also allows:
 - event creation
@@ -16,32 +21,57 @@ let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
 const View = props => {
   const event = props.Event;
   const eventAgenda = props.EventAgenda;
+  var today = new Date();
   // console.log("this is the list of events", props.events);
-  var events = props.events;
-  const localizer = props.localizer;
   return (
     <div className="displayContainer">
       <div className="rbc-calendar">
+      <DragAndDropCalendar
+      selectable
+      events={props.events}
+      defaultView={BigCalendar.Views.DAY}
+      defaultDate={today}
+      views={allViews}
+      step={30}
+      startAccessor='start'
+      endAccessor='end'
+      localizer={props.localizer}
+      onEventDrop={props.onEventDrop}
+      onSelectEvent={event => props.handleSelectToDelete(event)}
+      onSelectSlot={event => props.handleSelectSlot(event)}
+      resourceIdAccessor="resourceId"
+      resourceTitleAccessor="resourceTitle"
+      defaultView="day"
+      resizable
+      onEventResize={props.onEventResize}
+      showMultiDayTimes
+      components={{
+        event: event,
+        agenda: {event: eventAgenda}
+      }}
+      />
+      {/*
               <BigCalendar
               selectable
-              events={events}
+              events={props.events}
               defaultView={BigCalendar.Views.DAY}
               views={allViews}
               step={30}
-              startAccessor='startDate'
-              endAccessor='endDate'
-              localizer={localizer}
-              defaultDate={new Date(2018, 10, 6)}
+              startAccessor='start'
+              endAccessor='end'
+              localizer={props.localizer}
+              defaultDate={today}
               onSelectEvent={event => props.handleSelectToDelete(event)}
               onSelectSlot={event => props.handleSelectSlot(event)}
+              resizable
+              onEventResize={props.onEventResize}
               showMultiDayTimes
               components={{
                 event: event,
-                agenda: {
-                event: eventAgenda
-             }
-}}
+                agenda: {event: eventAgenda}
+              }}
               />
+              */}
               </div>
     </div>
 )}
diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index d035f6a2..51abc2c0 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -2,31 +2,18 @@ import React, { Component } from 'react';
 import View from './View';
 import BigCalendar from 'react-big-calendar';
 import moment from 'moment'
-const localizer = BigCalendar.momentLocalizer(moment)
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
 
-function Event({ event }) {
-  return (
-    <span>
-      <strong>{event.title}</strong>
-      {event.desc && ':  ' + event.desc}
-    </span>
-  )
-}
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'
 
-function EventAgenda({ event }) {
-  return (
-    <span>
-      <em style={{ color: 'magenta' }}>{event.title}</em>
-      <p>{event.desc}</p>
-    </span>
-  )
-}
+const DragAndDropCalendar = withDragAndDrop(BigCalendar)
 
+const localizer = BigCalendar.momentLocalizer(moment)
 var events = [
     {
-      endDate: new Date('November 12, 2018 20:00:00'),
-      startDate: new Date('November 10, 2018 06:00:00'),
-      title: 'Dummy event title',
+      end: new Date('November 11, 2018 20:00:00'),
+      start: new Date('November 11, 2018 06:00:00'),
+      title: 'Happy 11/11',
       desc: 'Big conference for important people'
     }
 ];
@@ -45,57 +32,154 @@ class Calendar extends Component {
       this.state = { events : events } ;
       this.handleSelectSlot = this.handleSelectSlot.bind(this);
       this.handleSelectToDelete = this.handleSelectToDelete.bind(this);
+      this.addRecurringEvents = this.addRecurringEvents.bind(this);
+      this.resizeEvent = this.resizeEvent.bind(this);
+      this.moveEvent = this.moveEvent.bind(this)
   }
 
-  addRecurringEvents(start,end) {
-    console.log("Start", start);
-    console.log("Start + 1", start+1);
-    console.log("End", end);
-    var frequency = window.prompt("Would you like for these to repeat daily, weekly, or monthly? (please type your selection exactly as the options appears)", "daily");
-    if (frequency) {
-      switch (frequency.toString()) {
-        case "daily":
-          frequency = "day";
-          break;
-        case "weekly":
-          frequency = "week";
-          break;
-        case "monthly":
-          frequency = "month"
-          break;
-        default:
-      }
-    }
-    if (!frequency) window.alert("Please select from the available units of time for repeated events")
-    else {
-      const every = !window.confirm("Every " + frequency +"?");
-      var gap = '';
-      if (every) gap = window.prompt("How many " + frequency + "s in between?", "2");
-      if (gap === '') window.prompt("For how many " + frequency + "s?", "10");
-      else {
-        const timesRepeating = window.prompt("Every " + gap + " " + frequency + "s, " + "how many times?", "10");
-      }
+  resizeEvent = (resizeType, { event, start, end }) => {
+    const { events } = this.state
+
+    const nextEvents = events.map(existingEvent => {
+      return existingEvent.id === event.id
+        ? { ...existingEvent, start, end }
+        : existingEvent
+    })
+
+    this.setState({
+      events: nextEvents,
+    })
+  }
+
+  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
+    const { events } = this.state
+
+    const idx = events.indexOf(event)
+    let allDay = event.allDay
+
+    if (!event.allDay && droppedOnAllDaySlot) {
+      allDay = true
+    } else if (event.allDay && !droppedOnAllDaySlot) {
+      allDay = false
     }
 
+    const updatedEvent = { ...event, start, end, allDay }
+
+    const nextEvents = [...events]
+    nextEvents.splice(idx, 1, updatedEvent)
+
+    console.log("events", events);
+    console.log("spliced next events", nextEvents);
+    console.log("updated Event", updatedEvent);
+    this.setState({
+      events: nextEvents,
+    })
+  }
+
+  addRecurringEvents(start, end, title, desc, frequency, gap, timesRepeating) {
+    var i; var newStart; var newEnd;
+    switch (frequency) {
+      case "minute":
+        for (i = 0; i < timesRepeating; i++) {
+          newStart = new Date(start.getTime()); newEnd = new Date(end.getTime());
+          newStart.setMinutes(newStart.getMinutes()+i*gap); newEnd.setMinutes(newEnd.getMinutes()+i*gap);
+          this.setState({ events: this.state.events.concat({start: newStart, end: newEnd, title: title, desc:desc}) });
+        }
+        break;
+      case "hour":
+        for (i = 0; i < timesRepeating; i++) {
+          newStart = new Date(start.getTime()); newEnd = new Date(end.getTime());
+          newStart.setHours(newStart.getHours()+i*gap); newEnd.setHours(newEnd.getHours()+i*gap);
+          this.setState({ events: this.state.events.concat({start: newStart, end: newEnd, title: title, desc:desc}) });
+        }
+        break;
+      case "day":
+        for (i = 0; i < timesRepeating; i++) {
+          newStart = new Date(start.getTime());newEnd = new Date(end.getTime());
+          newStart.setDate(newStart.getDate()+i*gap); newEnd.setDate(newEnd.getDate()+i*gap);
+          this.setState({ events: this.state.events.concat({start: newStart, end: newEnd, title: title, desc:desc}) });
+        }
+        break;
+      case "week":
+        for (i = 0; i < timesRepeating; i++) {
+          newStart = new Date(start.getTime()); newEnd = new Date(end.getTime());
+          newStart.setDate(newStart.getDate()+i*gap*7); newEnd.setDate(newEnd.getDate()+i*gap*7)
+          this.setState({ events: this.state.events.concat({start: newStart, end: newEnd, title: title, desc:desc}) });
+        }
+        break;
+      case "month":
+        for (i = 0; i < timesRepeating; i++) {
+          newStart = new Date(start.getTime()); newEnd = new Date(end.getTime());
+          newStart.setMonth(newStart.getMonth()+i*gap); newEnd.setMonth(newEnd.getMonth()+i*gap);
+          this.setState({ events: this.state.events.concat({start: newStart, end: newEnd, title: title, desc:desc}) });
+        }
+        break;
+      case "year":
+        for (i = 0; i < timesRepeating; i++) {
+          newStart = new Date(start.getTime()); newEnd = new Date(end.getTime());
+          newStart.setFullYear(newStart.getFullYear()+i*gap); newEnd.setFullYear(newEnd.getFullYear()+i*gap);
+          this.setState({ events: this.state.events.concat({start: newStart, end: newEnd, title: title, desc:desc}) });
+        }
+        break;
+      default:
+    }
   }
 
   handleSelectSlot = ({ start, end }) => {
+    // console.log("Start date", start);
     //create an event
     const title = window.prompt('New Event name');
-    var desc; var repeat;
+    var desc = ""; var repeat;
     if (title != null) {
-      desc = window.prompt('Event description', title);
-      repeat = window.confirm("Would you like for this to become a repeating event?");
+      desc = window.prompt('Give your event some description', "describe " + title);
+      repeat = window.confirm("Repeat this event? (Press cancel to add single, nonrepeated event)");
     }
 
 
     if (repeat) {
       // handling recurring events
-      this.addRecurringEvents(start,end);
+      var frequency = window.prompt("Repeat hourly, daily, weekly, monthly, or annually? \n (please type your selection exactly as the options appears)", "daily");
+      // minutely option currently ommitted since events css does not support such specificity and you can input non-integral hours
+      if (frequency) {
+        switch (frequency.toString()) {
+          case "minutely":
+            frequency = "minute";
+            break;
+          case "hourly":
+            frequency = "hour";
+            break;
+          case "daily":
+            frequency = "day";
+            break;
+          case "weekly":
+            frequency = "week";
+            break;
+          case "monthly":
+            frequency = "month"
+            break;
+          case "annually":
+            frequency = "year"
+            break;
+          default:
+        }
+      }
+      var gap = 1; var timesRepeating = 1;
+      if (!frequency) window.alert("Please select from the available units of time for repeated events")
+
+      else {
+        const every = !window.confirm("Every " + frequency +"? \n (Select cancel to add " + frequency + "s between each repeated event)");
+        if (every) gap = window.prompt("How many " + frequency + "s in between each repeat?", "2");
+        if (gap === '') window.prompt("For how many " + frequency + "s?", "10");
+        else {
+          (gap > 1) ? timesRepeating = window.prompt("Once every " + gap.toString() + " " + frequency.toString() + "s, how many times?", "10")
+          : timesRepeating = window.prompt("Once every " + frequency +  ", how many times?", "10");
+        }
+      }
+      this.addRecurringEvents(start, end, title, desc, frequency, gap, timesRepeating);
     }
 
     if (title && !repeat) {
-      this.setState({ events: this.state.events.concat({startDate: start, endDate: end, title: title, desc:desc}) });
+      this.setState({ events: this.state.events.concat({start: start, end: end, title: title, desc:desc}) });
     }
   }
 
@@ -120,6 +204,9 @@ class Calendar extends Component {
         EventAgenda = {this.EventAgenda}
         events = {this.state.events}
         localizer = {localizer}
+        addRecurringEvents = {this.addRecurringEvents}
+        onEventResize = {this.resizeEvent}
+        onEventDrop = {this.moveEvent}
         />
     )
   }
diff --git a/src/test_resources/testutils.js b/src/test_resources/testutils.js
index ce1fa322..1df21493 100644
--- a/src/test_resources/testutils.js
+++ b/src/test_resources/testutils.js
@@ -35,11 +35,8 @@ export function getNewTestTask() {
         }]
     };
 }
-<<<<<<< HEAD
-=======
-
 /*
- * Returns a mock event for manipulating forms. 
+ * Returns a mock event for manipulating forms.
  */
 export function getMockEvent(initialValue) {
     return {
@@ -52,4 +49,3 @@ export function getMockEvent(initialValue) {
         }
     }
 }
->>>>>>> 817f2fa32a52139491b7855e4b7fed4cc0fc200c

From a4d144dfb2d65662da8be3ebe07e2982643e74d4 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Mon, 12 Nov 2018 20:04:48 -0500
Subject: [PATCH 21/25] fixing todo list

---
 src/components/tabs/Calendar/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index 51abc2c0..ca86ef68 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -21,9 +21,7 @@ var events = [
 class Calendar extends Component {
   /*
   TODO: Things to fix
-  - be able to store event start and end times into localizer
-  = be able to add reoccuring events
-  https://www.reddit.com/r/reactjs/comments/8ig9q3/using_reactbigcalendar_is_there_an_easy_way_to/
+  - be able to store event start and end times into model via registerFinalStateFunc
   */
 
   constructor(props)

From 53800a95157bd97b101ca41e47da0a09f8ff09fc Mon Sep 17 00:00:00 2001
From: Emily Hamlin <Emily@Es-MacBook.local>
Date: Tue, 13 Nov 2018 11:56:27 -0500
Subject: [PATCH 22/25] displays a graph; can't add data yet.

---
 package-lock.json                      | 613 ++++++++++++++++++++++---
 package.json                           |   7 +-
 src/components/Analytics/Analytics.css |   3 +
 src/components/Analytics/View.js       |  25 +-
 src/components/Analytics/index.js      |  53 +++
 src/components/Frame/Frame.css         |   2 +-
 src/components/TabDisplay/View.js      |  10 +-
 src/components/TaskDisplay/View.js     |  14 +-
 8 files changed, 645 insertions(+), 82 deletions(-)
 create mode 100644 src/components/Analytics/Analytics.css
 create mode 100644 src/components/Analytics/index.js

diff --git a/package-lock.json b/package-lock.json
index 3abc46c4..e22d2986 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -853,8 +853,7 @@
     "@types/node": {
       "version": "8.10.36",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.36.tgz",
-      "integrity": "sha512-SL6KhfM7PTqiFmbCW3eVNwVBZ+88Mrzbuvn9olPsfv43mbiWaFY+nRcz/TGGku0/lc2FepdMbImdMY1JrQ+zbw==",
-      "dev": true
+      "integrity": "sha512-SL6KhfM7PTqiFmbCW3eVNwVBZ+88Mrzbuvn9olPsfv43mbiWaFY+nRcz/TGGku0/lc2FepdMbImdMY1JrQ+zbw=="
     },
     "@types/tapable": {
       "version": "1.0.2",
@@ -1479,8 +1478,7 @@
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
     },
     "array-flatten": {
       "version": "2.1.1",
@@ -2478,7 +2476,6 @@
       "version": "2.1.0",
       "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-      "dev": true,
       "requires": {
         "camelcase": "^2.0.0",
         "map-obj": "^1.0.0"
@@ -2487,8 +2484,7 @@
         "camelcase": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-          "dev": true
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
         }
       }
     },
@@ -2557,6 +2553,39 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
+    "chart.js": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz",
+      "integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
+      "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
+      "requires": {
+        "chartjs-color-string": "^0.5.0",
+        "color-convert": "^0.5.3"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+        }
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
+      "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-types": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
@@ -3554,7 +3583,6 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
       "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
-      "dev": true,
       "requires": {
         "array-find-index": "^1.0.1"
       }
@@ -3564,6 +3592,89 @@
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
       "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA="
     },
+    "d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.3.tgz",
+      "integrity": "sha512-x37qq3ChOTLd26hnps36lexMRhNXEtVxZ4B25rL0DVdDsGQIJGB18S7y9XDwlDD6MD/ZBzITCf4JjGMM10TZkw=="
+    },
+    "d3-ease": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.5.tgz",
+      "integrity": "sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ=="
+    },
+    "d3-format": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.2.tgz",
+      "integrity": "sha512-Z18Dprj96ExragQ0DeGi+SYPQ7pPfRMtUXtsg/ChVIKNBCzjO8XYJvRTC1usblx52lqge56V5ect+frYTQc8WQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
+      "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.7.tgz",
+      "integrity": "sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA=="
+    },
+    "d3-scale": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+      "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "d3-shape": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.2.tgz",
+      "integrity": "sha512-hUGEozlKecFZ2bOSNt7ENex+4Tk9uc/m0TtTEHBvitCBxUNjhzm5hS2GrrVRD/ae4IylSmxGeqX5tWC2rASMlQ==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.10.tgz",
+      "integrity": "sha512-hF+NTLCaJHF/JqHN5hE8HVGAXPStEq6/omumPE/SxyHVrR7/qQxusFDo0t0c/44+sCGHthC7yNGFZIEgju0P8g=="
+    },
+    "d3-time-format": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.3.tgz",
+      "integrity": "sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.9.tgz",
+      "integrity": "sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg=="
+    },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz",
@@ -3623,8 +3734,7 @@
     "deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "dev": true
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
     },
     "deep-is": {
       "version": "0.1.3",
@@ -3998,6 +4108,98 @@
         "extract-zip": "^1.0.3"
       }
     },
+    "electron-chartjs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/electron-chartjs/-/electron-chartjs-1.0.0.tgz",
+      "integrity": "sha512-Sk05ZhsbipKVirq4iN0RWKjsq2ZetxL5uhZCM9lieBhu4aZiHhVLb+llwG0fphWoZLAGV3xpe0DUtcW14cW/VA==",
+      "requires": {
+        "chart.js": "^2.7.1",
+        "electron": "^1.7.9"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "electron": {
+          "version": "1.8.8",
+          "resolved": "https://registry.npmjs.org/electron/-/electron-1.8.8.tgz",
+          "integrity": "sha512-1f9zJehcTTGjrkb06o6ds+gsRq6SYhZJyxOk6zIWjRH8hVy03y/RzUDELzNas71f5vcvXmfGVvyjeEsadDI8tg==",
+          "requires": {
+            "@types/node": "^8.0.24",
+            "electron-download": "^3.0.1",
+            "extract-zip": "^1.0.3"
+          }
+        },
+        "electron-download": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/electron-download/-/electron-download-3.3.0.tgz",
+          "integrity": "sha1-LP1U1pZsAZxNSa1l++Zcyc3vaMg=",
+          "requires": {
+            "debug": "^2.2.0",
+            "fs-extra": "^0.30.0",
+            "home-path": "^1.0.1",
+            "minimist": "^1.2.0",
+            "nugget": "^2.0.0",
+            "path-exists": "^2.1.0",
+            "rc": "^1.1.2",
+            "semver": "^5.3.0",
+            "sumchecker": "^1.2.0"
+          }
+        },
+        "fs-extra": {
+          "version": "0.30.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
+          "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^2.1.0",
+            "klaw": "^1.0.0",
+            "path-is-absolute": "^1.0.0",
+            "rimraf": "^2.2.8"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "http://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "sumchecker": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-1.3.1.tgz",
+          "integrity": "sha1-ebs7RFbdBPGOvbwNcDodHa7FEF0=",
+          "requires": {
+            "debug": "^2.2.0",
+            "es6-promise": "^4.0.5"
+          }
+        }
+      }
+    },
     "electron-download": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/electron-download/-/electron-download-4.1.1.tgz",
@@ -4208,8 +4410,7 @@
     "es6-promise": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.5.tgz",
-      "integrity": "sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==",
-      "dev": true
+      "integrity": "sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -4827,7 +5028,6 @@
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
       "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
-      "dev": true,
       "requires": {
         "concat-stream": "1.6.2",
         "debug": "2.6.9",
@@ -4839,7 +5039,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -4847,8 +5046,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -4926,7 +5124,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
       "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
-      "dev": true,
       "requires": {
         "pend": "~1.2.0"
       }
@@ -5740,8 +5937,7 @@
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
     },
     "get-stream": {
       "version": "3.0.0",
@@ -6116,8 +6312,7 @@
     "home-path": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/home-path/-/home-path-1.0.6.tgz",
-      "integrity": "sha512-wo+yjrdAtoXt43Vy92a+0IPCYViiyLAHyp0QVS4xL/tfvVz5sXIW1ubLZk3nhVkD92fQpUMKX+fzMjr5F489vw==",
-      "dev": true
+      "integrity": "sha512-wo+yjrdAtoXt43Vy92a+0IPCYViiyLAHyp0QVS4xL/tfvVz5sXIW1ubLZk3nhVkD92fQpUMKX+fzMjr5F489vw=="
     },
     "homedir-polyfill": {
       "version": "1.0.1",
@@ -6680,7 +6875,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
       "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-      "dev": true,
       "requires": {
         "repeating": "^2.0.0"
       }
@@ -7956,7 +8150,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
       "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.9"
       }
@@ -8215,7 +8408,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
       "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "dev": true,
       "requires": {
         "currently-unhandled": "^0.4.1",
         "signal-exit": "^3.0.0"
@@ -8285,8 +8477,7 @@
     "map-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
     },
     "map-visit": {
       "version": "1.0.0",
@@ -8411,7 +8602,6 @@
       "version": "3.7.0",
       "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-      "dev": true,
       "requires": {
         "camelcase-keys": "^2.0.0",
         "decamelize": "^1.1.2",
@@ -8428,8 +8618,7 @@
         "minimist": {
           "version": "1.2.0",
           "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
     },
@@ -8940,7 +9129,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/nugget/-/nugget-2.0.1.tgz",
       "integrity": "sha1-IBCVpIfhrTYIGzQy+jytpPjQcbA=",
-      "dev": true,
       "requires": {
         "debug": "^2.1.3",
         "minimist": "^1.1.0",
@@ -8955,7 +9143,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -8963,20 +9150,17 @@
         "minimist": {
           "version": "1.2.0",
           "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         },
         "pretty-bytes": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz",
           "integrity": "sha1-CiLoIQYJrTVUL4yNXSFZr/B1HIQ=",
-          "dev": true,
           "requires": {
             "get-stdin": "^4.0.1",
             "meow": "^3.1.0"
@@ -9459,8 +9643,7 @@
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-      "dev": true
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
     },
     "performance-now": {
       "version": "2.1.0",
@@ -9501,6 +9684,14 @@
         "find-up": "^2.1.0"
       }
     },
+    "plotly": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/plotly/-/plotly-1.0.6.tgz",
+      "integrity": "sha1-smcsPfiDM2Jb32hJgtDj9lIdeqo=",
+      "requires": {
+        "mkdirp": "~0.5.0"
+      }
+    },
     "pluralize": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
@@ -11313,7 +11504,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/progress-stream/-/progress-stream-1.2.0.tgz",
       "integrity": "sha1-LNPP6jO6OonJwSHsM0er6asSX3c=",
-      "dev": true,
       "requires": {
         "speedometer": "~0.1.2",
         "through2": "~0.2.3"
@@ -11322,20 +11512,17 @@
         "isarray": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-          "dev": true
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
         },
         "object-keys": {
           "version": "0.4.0",
           "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
-          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=",
-          "dev": true
+          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY="
         },
         "readable-stream": {
           "version": "1.1.14",
           "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
           "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-          "dev": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.1",
@@ -11347,7 +11534,6 @@
           "version": "0.2.3",
           "resolved": "https://registry.npmjs.org/through2/-/through2-0.2.3.tgz",
           "integrity": "sha1-6zKE2k6jEbbMis42U3SKUqvyWj8=",
-          "dev": true,
           "requires": {
             "readable-stream": "~1.1.9",
             "xtend": "~2.1.1"
@@ -11357,7 +11543,6 @@
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
           "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
-          "dev": true,
           "requires": {
             "object-keys": "~0.4.0"
           }
@@ -11604,7 +11789,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
       "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "dev": true,
       "requires": {
         "deep-extend": "^0.6.0",
         "ini": "~1.3.0",
@@ -11615,8 +11799,7 @@
         "minimist": {
           "version": "1.2.0",
           "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
     },
@@ -11732,6 +11915,15 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "react-chartjs-2": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.7.4.tgz",
+      "integrity": "sha512-lXTpBaDlk9rIMjRONjZd76dIUhEm3vOp2jOrJrsFG/UpFI5VqX8Xw83apVHTnUGJ968f8i/i/syLddls4NHy2g==",
+      "requires": {
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-6.0.5.tgz",
@@ -12010,6 +12202,11 @@
         }
       }
     },
+    "react-fast-compare": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.2.tgz",
+      "integrity": "sha512-EdPU5vXIzvNvQFNuej3oQ1PZ6YmDunTPZJ3V5EmwRqOhEmW0PNxzUdbYhXnZKZFtrrjGiu9718f6iQRdj0l2JA=="
+    },
     "react-is": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.0.tgz",
@@ -12515,7 +12712,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
       "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-      "dev": true,
       "requires": {
         "indent-string": "^2.1.0",
         "strip-indent": "^1.0.1"
@@ -13533,7 +13729,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz",
       "integrity": "sha1-wvg/Jzo+GhbtsJlWYdoO1e8DM2Q=",
-      "dev": true,
       "requires": {
         "string-width": "^1.0.1"
       },
@@ -13542,7 +13737,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -13551,7 +13745,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -13875,8 +14068,7 @@
     "speedometer": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/speedometer/-/speedometer-0.1.4.tgz",
-      "integrity": "sha1-mHbb0qFp0xFUAtSObqYynIgWpQ0=",
-      "dev": true
+      "integrity": "sha1-mHbb0qFp0xFUAtSObqYynIgWpQ0="
     },
     "split-string": {
       "version": "3.1.0",
@@ -14145,7 +14337,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
       "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-      "dev": true,
       "requires": {
         "get-stdin": "^4.0.1"
       }
@@ -14482,8 +14673,7 @@
     "throttleit": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-0.0.2.tgz",
-      "integrity": "sha1-z+34jmDADdlpe2H90qg0OptoDq8=",
-      "dev": true
+      "integrity": "sha1-z+34jmDADdlpe2H90qg0OptoDq8="
     },
     "through": {
       "version": "2.3.8",
@@ -14643,8 +14833,7 @@
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
-      "dev": true
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
     },
     "trim-right": {
       "version": "1.0.1",
@@ -15176,6 +15365,309 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "victory": {
+      "version": "30.6.0",
+      "resolved": "https://registry.npmjs.org/victory/-/victory-30.6.0.tgz",
+      "integrity": "sha512-YQonLDOw+qY/jnW1eKjil60CQ5u5l3HAKHuoQgy/r4i/ddUvCsTLChhIJbgQuWhWuq6WZ9le05GYop8OiRFiCg==",
+      "requires": {
+        "victory-area": "^30.3.1",
+        "victory-axis": "^30.3.1",
+        "victory-bar": "^30.6.0",
+        "victory-box-plot": "^30.3.1",
+        "victory-brush-container": "^30.5.0",
+        "victory-brush-line": "^30.3.1",
+        "victory-candlestick": "^30.3.1",
+        "victory-chart": "^30.3.1",
+        "victory-core": "^30.3.1",
+        "victory-create-container": "^30.5.1",
+        "victory-cursor-container": "^30.5.1",
+        "victory-errorbar": "^30.3.1",
+        "victory-group": "^30.3.1",
+        "victory-legend": "^30.3.1",
+        "victory-line": "^30.5.0",
+        "victory-pie": "^30.5.1",
+        "victory-polar-axis": "^30.3.1",
+        "victory-scatter": "^30.3.1",
+        "victory-selection-container": "^30.3.1",
+        "victory-shared-events": "^30.3.1",
+        "victory-stack": "^30.3.1",
+        "victory-tooltip": "^30.3.1",
+        "victory-voronoi": "^30.3.1",
+        "victory-voronoi-container": "^30.3.1",
+        "victory-zoom-container": "^30.3.1"
+      }
+    },
+    "victory-area": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-area/-/victory-area-30.3.1.tgz",
+      "integrity": "sha512-qZiCQQ6eGsvnkI9/2ZlYlbhSFlkM7/kc/WKOChOUDqr9EpJpi89Y1LSUkzC7g/Ejgb4xxWczkCBO0EVFGyn+PA==",
+      "requires": {
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-axis": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-axis/-/victory-axis-30.3.1.tgz",
+      "integrity": "sha512-vAZIkIyHKBRseLm3PgW8wgMDgNwzNLD30tF6uXfQkmLpGABNzxETmU9CnQE0HfLJvRTydDpkNi4C5mee/h1qmg==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-bar": {
+      "version": "30.6.0",
+      "resolved": "https://registry.npmjs.org/victory-bar/-/victory-bar-30.6.0.tgz",
+      "integrity": "sha512-5ovYT8Bv5ixAJ6C1cGcR+D7652rbt98KoyXCU2GJiD6R110YJBNCxHnUfcr9k+LijDYlyRY2EyE6U3KxD27MPA==",
+      "requires": {
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-box-plot": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-box-plot/-/victory-box-plot-30.3.1.tgz",
+      "integrity": "sha512-DzUyu+Un5rqAhdBrROPMSGJgF5bdsLWZkzg9Ppxcjkl9IxgFe8+Xfp6C3pU/J4s0Rt2FnnSsARjfTgXNzXkWSA==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-brush-container": {
+      "version": "30.5.0",
+      "resolved": "https://registry.npmjs.org/victory-brush-container/-/victory-brush-container-30.5.0.tgz",
+      "integrity": "sha512-xYFmQq/l6sYIwT/TnhqOftUmCuWZ2n6aVabBkF8EBuVYCEP+pulepOReZxsoKrqWCQPz3xxOIgvFSri/p3hLCQ==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-brush-line": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-brush-line/-/victory-brush-line-30.3.1.tgz",
+      "integrity": "sha512-L67X+DyF832Gp83sjclRNFwyIkP7hkpHqGoWAQnIMjNlcd+Qq47c4Z89YxL0AiHfNN2eSKETB0SXJXlPB/s6NQ==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-candlestick": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-candlestick/-/victory-candlestick-30.3.1.tgz",
+      "integrity": "sha512-bqsQNit8H7xTdWSZHnhogJN7LlE/e5mOmWxxI5wbt8K31qIkrEqIEElQoaGcw95kleQkHA6XDxHbDE6kW7Nf5A==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-chart": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-chart/-/victory-chart-30.3.1.tgz",
+      "integrity": "sha512-yT06xMnYx2r+tmW11rGoK2vLT6huP9ff6tDwgtIlifqzA71KlU8rERwWJCTktLkPU10iiqypYD9fwaP6jx6KGQ==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "react-fast-compare": "^2.0.0",
+        "victory-axis": "^30.3.1",
+        "victory-core": "^30.3.1",
+        "victory-polar-axis": "^30.3.1",
+        "victory-shared-events": "^30.3.1"
+      }
+    },
+    "victory-core": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-core/-/victory-core-30.3.1.tgz",
+      "integrity": "sha512-c2BTwWI+txAOjt2786Ftcov0Eqaqt9EhRf8BkeK1APszVb7I5UV48I2JyZOl9l0v2/JWVKHY11JegFZ95Y64fQ==",
+      "requires": {
+        "d3-ease": "^1.0.0",
+        "d3-interpolate": "^1.1.1",
+        "d3-scale": "^1.0.0",
+        "d3-shape": "^1.2.0",
+        "d3-timer": "^1.0.0",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "react-fast-compare": "^2.0.0"
+      }
+    },
+    "victory-create-container": {
+      "version": "30.5.1",
+      "resolved": "https://registry.npmjs.org/victory-create-container/-/victory-create-container-30.5.1.tgz",
+      "integrity": "sha512-NqziZkyx0i+L5jMKsydZJrCu6L/rVRCucbLVlQkbv5Yan2u0NXBB4aZAbn3XhW3aXjLuJGXrBrumMM7ygtnq/w==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "victory-brush-container": "^30.5.0",
+        "victory-core": "^30.3.1",
+        "victory-cursor-container": "^30.5.1",
+        "victory-selection-container": "^30.3.1",
+        "victory-voronoi-container": "^30.3.1",
+        "victory-zoom-container": "^30.3.1"
+      }
+    },
+    "victory-cursor-container": {
+      "version": "30.5.1",
+      "resolved": "https://registry.npmjs.org/victory-cursor-container/-/victory-cursor-container-30.5.1.tgz",
+      "integrity": "sha512-gwhJvEbPyxFkqTwGRotxyun55kxE0e00BwzQ3djRz1jzZj2Ae372XyikI+har30vMkmzI1Mqy7W1kzmvyVcrSw==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-errorbar": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-errorbar/-/victory-errorbar-30.3.1.tgz",
+      "integrity": "sha512-vvWg46piCu9uMJX2OXPF04Ma0zwoj+17CG2mRADy9eAaa6GIZLFaoi1IAKXFNX0g4kjPyUo+rgh/zslhkzZxNQ==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-group": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-group/-/victory-group-30.3.1.tgz",
+      "integrity": "sha512-wP5xqhiXPfVmqfzcy5wyIR6hYrqGNMFXq33c88LdLN5bQ0YvZg3IM9MgBohN7SLxcoBbGVE3XzTP9Yc72pS7xQ==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-legend": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-legend/-/victory-legend-30.3.1.tgz",
+      "integrity": "sha512-9y0ZwRBkdDUD4x3J3TM38U7lEfyUpfdDYGsED5sYrkGgBj0xXrrvjiWyNSyRn70ac33K15M5VCmmI7Dnvn2rtg==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-line": {
+      "version": "30.5.0",
+      "resolved": "https://registry.npmjs.org/victory-line/-/victory-line-30.5.0.tgz",
+      "integrity": "sha512-5tWhemybJ9vd1LyJmwpUW11YZLa5ngmNTUt6w/dMwIuXOMHk1Kjr8lR5yvjSIvPy8pTLEZ0+Bah9XA65rAtjXQ==",
+      "requires": {
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-pie": {
+      "version": "30.5.1",
+      "resolved": "https://registry.npmjs.org/victory-pie/-/victory-pie-30.5.1.tgz",
+      "integrity": "sha512-Cx4qDt3FyI4VoP0fe3Ubbpz7Sj6d6A5PUWKEuFuMjccb2h1jZgX6uJyBx+uPDBtbxCylrU2GORdLPQDnAXKssQ==",
+      "requires": {
+        "d3-shape": "^1.0.0",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-polar-axis": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-polar-axis/-/victory-polar-axis-30.3.1.tgz",
+      "integrity": "sha512-UyupwAGp9IEnEG0zMyffuUFLD3DRBnteNLCq7siszweBdlT/AAlH7SDlNJU5ahAcv4h+TgjD/bGObiMli3AcXw==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-scatter": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-scatter/-/victory-scatter-30.3.1.tgz",
+      "integrity": "sha512-JLseknw+SMMIfhYxSu8GQ1qAJVy8fDQ8vze4gFOwvMHhdK8BbQiCLxPCmdlAhxoQixMbcwhAsHp/1RlpgK6IyA==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-selection-container": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-selection-container/-/victory-selection-container-30.3.1.tgz",
+      "integrity": "sha512-UheHWWEx1PUmNobhmLbovErhOV1vLDUdJ+8/qoS9TJJZ9QRoG0S1Gw97q9knyyGuheKljckQnfPWZlVdFjswkQ==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-shared-events": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-shared-events/-/victory-shared-events-30.3.1.tgz",
+      "integrity": "sha512-MFEx9YPXh+lrVJVvNQonup7Fxwgdt0IALLi4qfr5LzCO0vEmkIPvCdU1HeYk+8BDmpWeKz0MnJZx5SKEXrnK+g==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-stack": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-stack/-/victory-stack-30.3.1.tgz",
+      "integrity": "sha512-mbo0tcZz/WuYl3HWVkxqm7P0FbzR9Wgpo8YwUqeHdlGdc9pyd/laGuFwiJ8W6wc6yoV4rWNdLWuQGwAqaVmfpw==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-tooltip": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-tooltip/-/victory-tooltip-30.3.1.tgz",
+      "integrity": "sha512-F0IPgucHRzVpiw45QHfqne1qXKFx6ibJBtw5iCvnnD991ctu28Wlo84SMhWvJPzDYk6zv7b4pcfkVqHrS1nmGg==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-voronoi": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-voronoi/-/victory-voronoi-30.3.1.tgz",
+      "integrity": "sha512-8OJVyJEEJt5fHFR52iyyfwJ2HBh5KKlAM0XZV6dS46w5rkS7HMRJkQLbYMIGYcv4K2b8+Cx3PvXyf+nOOCeeiA==",
+      "requires": {
+        "d3-voronoi": "^1.1.2",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
+    "victory-voronoi-container": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-voronoi-container/-/victory-voronoi-container-30.3.1.tgz",
+      "integrity": "sha512-Yj2g/v9oD065tSkcQbXyCqoYqDkuxvSxBe83jnaQrqd7rXiCCRsEEUjVqnZtEASvm3kkQxt/H5CRELo42o4s1A==",
+      "requires": {
+        "d3-voronoi": "^1.1.2",
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1",
+        "victory-tooltip": "^30.3.1"
+      }
+    },
+    "victory-zoom-container": {
+      "version": "30.3.1",
+      "resolved": "https://registry.npmjs.org/victory-zoom-container/-/victory-zoom-container-30.3.1.tgz",
+      "integrity": "sha512-Jf37RNnf0SQwkn5IoZuQD1QFhZLRNXS4fPUe9QZJivNCulo3Y/ziOjfjjnJjZ210LQqFIQocTdnweDHvygUWmw==",
+      "requires": {
+        "lodash": "^4.17.5",
+        "prop-types": "^15.5.8",
+        "victory-core": "^30.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
@@ -16205,7 +16697,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
       "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
-      "dev": true,
       "requires": {
         "fd-slicer": "~1.0.1"
       }
diff --git a/package.json b/package.json
index dcc2a6cc..52a49f49 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "chart.js": "^2.7.3",
+    "electron-chartjs": "^1.0.0",
     "moment": "^2.22.2",
+    "plotly": "^1.0.6",
     "react": "^16.6.0",
     "react-big-calendar": "^0.20.1",
     "react-big-calendar-like-google": "0.0.3",
     "react-calendar": "^2.17.5",
+    "react-chartjs-2": "^2.7.4",
     "react-dom": "^16.6.0",
-    "react-scripts": "2.0.5"
+    "react-scripts": "2.0.5",
+    "victory": "^30.6.0"
   },
   "homepage": "./",
   "main": "src/scripts/electron-start.js",
diff --git a/src/components/Analytics/Analytics.css b/src/components/Analytics/Analytics.css
new file mode 100644
index 00000000..1fef6cca
--- /dev/null
+++ b/src/components/Analytics/Analytics.css
@@ -0,0 +1,3 @@
+#displayContainer {
+    
+}
\ No newline at end of file
diff --git a/src/components/Analytics/View.js b/src/components/Analytics/View.js
index ea150fbd..574024e6 100644
--- a/src/components/Analytics/View.js
+++ b/src/components/Analytics/View.js
@@ -1,11 +1,26 @@
 import React from 'react';
+import {Line} from 'react-chartjs-2';
 
-// This begins as an empty container, but we will have a function that fills it
-// on tab clicks.
-const View = ({}) => (
-    <div className="displayContainer">
+/*<button onClick={this.addData}>Change data!</button>*/
+/*{this.addData()}*/
+/*<Line data={this.data} />*/
+const View = ({dataValue, labelValue, chartData, handleChange, handleSubmit}) => (
+<div id="displayContainer" className="displayContainer">
+<div id="chartContainer">
+
+<Line data={chartData} />
+
+<form onSubmit={handleSubmit}>
+  <label>
+    Data for today:
+    <input type="number" value={dataValue} onChange={handleChange} />
+    <input type="text" value={labelValue} onChange={handleChange} />
+  </label>
+  <input type="submit" value="Submit" />
+</form>
+</div>
+</div>
 
-    </div>
 );
 
 export default View;
diff --git a/src/components/Analytics/index.js b/src/components/Analytics/index.js
new file mode 100644
index 00000000..efb54c77
--- /dev/null
+++ b/src/components/Analytics/index.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import View from './View';
+import {Line} from 'react-chartjs-2';
+
+class Analytics extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataValue: 0,
+      labelValue: 'enter label',
+      chartData : {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: 'My data!',
+            data: [65, 59, 80, 81, 56, 55, 40],
+            fill: false,
+            lineTension: 0.1
+          }
+        ]
+      }
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  };
+
+  handleChange(event) {
+    this.setState({dataValue: event.target.dataValue});
+    this.setState({labelValue: event.target.labelValue});
+  }
+
+  handleSubmit(event) {
+    const dataToAdd = this.state.labelValue;
+    const labelToAdd = this.state.labelValue;
+    const data = this.state.chartData.datasets.data;
+    const labels = this.state.chartData.labels;
+    this.setState({
+      dataValue: 'data entered.',
+      labelValue: 'label entered.',
+      data: data.concat(dataToAdd),
+      labels: labels.concat(labelToAdd)
+    })
+
+  }
+
+  render() {
+        return <View dataValue={this.state.dataValue} labelValue={this.state.labelValue} chartData={this.state.chartData} handleSubmit={this.handleSubmit} handleChange = {this.handleChange}/>;
+
+  }
+}
+
+export default Analytics;
diff --git a/src/components/Frame/Frame.css b/src/components/Frame/Frame.css
index d9ff8f1b..c64f5385 100644
--- a/src/components/Frame/Frame.css
+++ b/src/components/Frame/Frame.css
@@ -6,4 +6,4 @@
     flex-direction: row;
 
     border: var(--pinkborder);
-}
\ No newline at end of file
+}
diff --git a/src/components/TabDisplay/View.js b/src/components/TabDisplay/View.js
index 7e5b33d6..c54ecfeb 100644
--- a/src/components/TabDisplay/View.js
+++ b/src/components/TabDisplay/View.js
@@ -1,11 +1,11 @@
 import React from 'react';
-
-// This begins as an empty container, but we will have a function that fills it 
-// on tab clicks.  
+import Analytics from '../Analytics'
+// This begins as an empty container, but we will have a function that fills it
+// on tab clicks.
 const View = ({}) => (
     <div className="displayContainer">
-        
+      <Analytics />
     </div>
 );
 
-export default View;
\ No newline at end of file
+export default View;
diff --git a/src/components/TaskDisplay/View.js b/src/components/TaskDisplay/View.js
index 565aefa3..916f147d 100644
--- a/src/components/TaskDisplay/View.js
+++ b/src/components/TaskDisplay/View.js
@@ -4,6 +4,11 @@ import TabDisplay from '../TabDisplay';
 import './TaskDisplay.css';
 import BigCalendar from 'react-big-calendar-like-google';
 import 'react-big-calendar/lib/css/react-big-calendar.css'
+
+/* emily's additions */
+import Analytics from '../Analytics';
+/* end emily's additions */
+
 // https://github.com/intljusticemission/react-big-calendar/issues/234
 /* The current version of big calendar implemented here is the most basic, the package also allows:
 - event creation
@@ -38,15 +43,6 @@ const View = props => {
     <div id="taskdisplay">
     <TabList />
       <TabDisplay />
-        <div className="rbc-calendar">
-        <BigCalendar
-        events={myEventsList}
-        views={allViews}
-        startAccessor='startDate'
-        endAccessor='endDate'
-        localizer='localizer'
-        />
-        </div>
     </div>)}
 
 export default View;

From c3af7eac3c99de7798d4a8ecaf46b7efae9e63d5 Mon Sep 17 00:00:00 2001
From: Jane Hsieh <jhsieh@oberlin.edu>
Date: Tue, 13 Nov 2018 11:58:48 -0500
Subject: [PATCH 23/25] Update README.md

---
 README.md | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/README.md b/README.md
index 5f7658e4..2aa7213d 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,4 @@
-<<<<<<< HEAD
-Git tips: to push your local branch to a remote branch that it's not tracking (say currentState for instance), use 
-=======
-
 Git tips: to push your local branch to a remote branch that it's not tracking (say this currentState for instance), use 
->>>>>>> 817f2fa32a52139491b7855e4b7fed4cc0fc200c
 git push origin your_updated_branch_name:currentState
 
 /--------------------------------- THE TREE -----------------------------------/

From 4ef710934ed17323000bb31fdc55f48f67045f56 Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Tue, 13 Nov 2018 12:01:49 -0500
Subject: [PATCH 24/25] adding switch to render different tabs in tab display

---
 src/components/Journal/index.js              |  5 ++--
 src/components/structure/TabDisplay/View.js  | 24 ++++++++++++++++--
 src/components/structure/TabDisplay/index.js | 26 +++-----------------
 src/components/tabs/Calendar/View.js         |  2 --
 src/components/tabs/Calendar/index.js        |  4 +--
 5 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js
index d2ab2337..5eceaeba 100644
--- a/src/components/Journal/index.js
+++ b/src/components/Journal/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom'
+// import ReactDOM from 'react-dom'
 import View from './View';
 
 export default class Journal extends Component {
@@ -21,7 +21,7 @@ export default class Journal extends Component {
         this.setState({value: event.target.value});
     }
 
-    handleSubmit(event) { 
+    handleSubmit(event) {
         const itemToAdd = this.state.value;
         const entries = this.state.entries;
         this.setState({
@@ -45,4 +45,3 @@ export default class Journal extends Component {
     }
 
 }
-
diff --git a/src/components/structure/TabDisplay/View.js b/src/components/structure/TabDisplay/View.js
index dacc1882..648035b4 100644
--- a/src/components/structure/TabDisplay/View.js
+++ b/src/components/structure/TabDisplay/View.js
@@ -1,6 +1,8 @@
 import React from 'react';
-// import ExTab from '../../tabs/ExTab';
+import ExTab from '../../tabs/ExTab';
 import Calendar from '../../tabs/Calendar';
+// import Analytics from '../../../Analytics';
+import Journal from '../../Journal';
 /* IMPORTANT: as I am committing, I have just been commenting out the line where we've been putting
  *
  * our code to debug/render it :)
@@ -20,10 +22,28 @@ import Calendar from '../../tabs/Calendar';
 
 const View = props => {
   // console.log("Props for TabDisplay",props); // testing what props look like as passed from tabdisplay
+  var ret;
+  switch (props.tabType) {
+    case "analytics":
+      ret = <ExTab/>;
+      break;
+    case "calendar":
+      ret = <Calendar/>;
+      break;
+    case "journal":
+      ret = <Journal/>;
+      break;
+    case "menu":
+      ret = <ExTab/>;
+      break;
+    default:
+
+  }
   return (
     <div className="displayContainer">
         {/* <ExTab /> */}
-        <Calendar />
+        {/* <Calendar /> */}
+        {ret}
     </div>
 )
 }
diff --git a/src/components/structure/TabDisplay/index.js b/src/components/structure/TabDisplay/index.js
index 0c992854..cf157144 100644
--- a/src/components/structure/TabDisplay/index.js
+++ b/src/components/structure/TabDisplay/index.js
@@ -25,31 +25,11 @@ class TabDisplay extends Component {
     }
 
     render() {
-        // TODO -> parse tabinfo to decide what to render...
-        switch(this.tabToDisplay) {
-            case "analytics":
-                console.log("display analytics");
-                break;
-            case "calendar":
-                console.log("display calendar");
-                break;
-            case "journal":
-                console.log("display journal");
-                break;
-            case "menu":
-                console.log("display menu");
-                break;
-            case "welcome tab":
-                console.log("display welcome tab");
-                break;
-            default:
-                console.log(`TabDisplay parser didn't recognize ${this.tabToDisplay}`);
-                break;
-        }
         return <View
-          registerFinalState={this.registerFinalStateFunc}/>;
+          registerFinalState={this.registerFinalStateFunc}
+          tabToDisplay={this.tabToDisplay} 
+          />;
     }
-
 }
 
 export default TabDisplay;
diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
index 1bc06d18..6a2a433f 100644
--- a/src/components/tabs/Calendar/View.js
+++ b/src/components/tabs/Calendar/View.js
@@ -2,7 +2,6 @@ import React from 'react'; // This begins as an empty container, but we will hav
 import BigCalendar from 'react-big-calendar';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
-
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'
 
 const DragAndDropCalendar = withDragAndDrop(BigCalendar)
@@ -41,7 +40,6 @@ const View = props => {
       onSelectSlot={event => props.handleSelectSlot(event)}
       resourceIdAccessor="resourceId"
       resourceTitleAccessor="resourceTitle"
-      defaultView="day"
       resizable
       onEventResize={props.onEventResize}
       showMultiDayTimes
diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index ca86ef68..e4aca032 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import View from './View';
 import BigCalendar from 'react-big-calendar';
 import moment from 'moment'
-import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+// import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
 
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'
 
-const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+// const DragAndDropCalendar = withDragAndDrop(BigCalendar)
 
 const localizer = BigCalendar.momentLocalizer(moment)
 var events = [

From 6be83d892aadf9093849cf1154ac7a8122c3adca Mon Sep 17 00:00:00 2001
From: janeon <jhsieh@oberlin.edu>
Date: Tue, 13 Nov 2018 14:28:50 -0500
Subject: [PATCH 25/25] can now click to show the different tabs. TODO: be able
 to add tabs to a task and persist all information associated to a task using
 registerFinalStateFunc

---
 src/components/Analytics/index.js            |  3 +-
 src/components/Journal/index.js              | 50 +++++++++-----------
 src/components/structure/TabDisplay/View.js  | 23 +++------
 src/components/structure/TabDisplay/index.js | 22 +++++----
 src/components/tabs/Calendar/index.js        |  2 +-
 5 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/src/components/Analytics/index.js b/src/components/Analytics/index.js
index efb54c77..c7debf39 100644
--- a/src/components/Analytics/index.js
+++ b/src/components/Analytics/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import View from './View';
-import {Line} from 'react-chartjs-2';
+// import {Line} from 'react-chartjs-2';
 
 class Analytics extends Component {
   constructor(props) {
@@ -41,7 +41,6 @@ class Analytics extends Component {
       data: data.concat(dataToAdd),
       labels: labels.concat(labelToAdd)
     })
-
   }
 
   render() {
diff --git a/src/components/Journal/index.js b/src/components/Journal/index.js
index 5eceaeba..e8d0d662 100644
--- a/src/components/Journal/index.js
+++ b/src/components/Journal/index.js
@@ -6,42 +6,38 @@ export default class Journal extends Component {
 
 	constructor(props) {
         super(props);
-
         this.state = {
             value: 'enter ur entry',
             entries: ["this is my first entry", "this is a second entry", "i also wrote this lol"]
         };
-
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
-
-    }
-
-    handleChange(event) {
-        this.setState({value: event.target.value});
     }
 
-    handleSubmit(event) {
-        const itemToAdd = this.state.value;
-        const entries = this.state.entries;
-        this.setState({
-            value: "enter ur entryyyy",
-            entries: entries.concat(itemToAdd)
-        });
-        console.log(entries.concat(itemToAdd));
-
-      }
-
-    componentWillUnmount() {
-        // this is where you record your final state to the model
-        this.recordFinalState("Journal", this.state);
-        // this is commented out because I'm not passing in the register function yet :)
+  handleChange(event) {
+      this.setState({value: event.target.value});
+  }
+
+  handleSubmit(event) {
+      const itemToAdd = this.state.value;
+      const entries = this.state.entries;
+      this.setState({
+          value: "enter ur entryyyy",
+          entries: entries.concat(itemToAdd)
+      });
+      console.log(entries.concat(itemToAdd));
     }
 
-    render() {
-        console.log("rendering");
-        console.log(this.state);
-        return <View value={this.state.value} entries={this.state.entries} handleSubmit={this.handleSubmit} handleChange = {this.handleChange}/>;
-    }
+  componentWillUnmount() {
+      // this is where you record your final state to the model
+      // this.recordFinalState("Journal", this.state); // temporarily commented out to make sure journal can display
+      // this is commented out because I'm not passing in the register function yet :)
+  }
+
+  render() {
+      console.log("rendering");
+      console.log(this.state);
+      return <View value={this.state.value} entries={this.state.entries} handleSubmit={this.handleSubmit} handleChange = {this.handleChange}/>;
+  }
 
 }
diff --git a/src/components/structure/TabDisplay/View.js b/src/components/structure/TabDisplay/View.js
index 648035b4..8e7ce9ac 100644
--- a/src/components/structure/TabDisplay/View.js
+++ b/src/components/structure/TabDisplay/View.js
@@ -1,31 +1,25 @@
 import React from 'react';
 import ExTab from '../../tabs/ExTab';
 import Calendar from '../../tabs/Calendar';
-// import Analytics from '../../../Analytics';
+import Analytics from '../../Analytics';
 import Journal from '../../Journal';
 /* IMPORTANT: as I am committing, I have just been commenting out the line where we've been putting
  *
  * our code to debug/render it :)
  */
-
 /*
  * TAB IMPORTS:
- *  import ExTab from '../ExTab/';
- *  import Calendar from '../../tabs/Calendar';
- */
-
-
 /*
  * This begins as an empty container, but we will have a function that fills it
  * on tab clicks.
  */
 
-const View = props => {
-  // console.log("Props for TabDisplay",props); // testing what props look like as passed from tabdisplay
+var View = props => {
+  // console.log("Tabtype",props.tabToDisplay); // testing what props look like as passed from tabdisplay
   var ret;
-  switch (props.tabType) {
+  switch (props.tabToDisplay) {
     case "analytics":
-      ret = <ExTab/>;
+      ret = <Analytics/>;
       break;
     case "calendar":
       ret = <Calendar/>;
@@ -33,16 +27,11 @@ const View = props => {
     case "journal":
       ret = <Journal/>;
       break;
-    case "menu":
-      ret = <ExTab/>;
-      break;
     default:
-
+      ret = <ExTab/>;
   }
   return (
     <div className="displayContainer">
-        {/* <ExTab /> */}
-        {/* <Calendar /> */}
         {ret}
     </div>
 )
diff --git a/src/components/structure/TabDisplay/index.js b/src/components/structure/TabDisplay/index.js
index cf157144..e3c77560 100644
--- a/src/components/structure/TabDisplay/index.js
+++ b/src/components/structure/TabDisplay/index.js
@@ -7,27 +7,33 @@ class TabDisplay extends Component {
     constructor(props) {
         super(props);
 
-        this.tabInfo = props.tabInfo;
-        this.tabToDisplay = props.tabToDisplay;
-        this.registerFinalStateFunc = props.registerFinalStateFunc;
+        // this.tabInfo = props.tabInfo;
+        // this.tabToDisplay = props.tabToDisplay;
+        // this.registerFinalStateFunc = props.registerFinalStateFunc;
         // console.log("TabDisplay's prop function", props.registerFinalState); // testing funtion in tabdisplay
         // this is being passed the registerFinalState function, it just isn't passing it yet.
+
+        this.state = { tabToDisplay : props.tabToDisplay , tabInfo: props.tabInfo, registerFinalStateFunc: props.registerFinalStateFunc};
     }
 
     /*
      * See TabList for explanation of this method
      */
     componentWillReceiveProps(newProps) {
-        this.tabInfo = newProps.tabInfo;
-        this.tabToDisplay = newProps.tabToDisplay;
-        this.registerFinalStateFunc = newProps.registerFinalStateFunc;
+        // this.tabInfo = newProps.tabInfo;
+        this.setState({ tabInfo: newProps.tabToDisplay });
+        this.setState({ tabToDisplay: newProps.tabToDisplay });
+        this.setState({ registerFinalStateFunc: newProps.registerFinalStateFunc });
+        // this.tabToDisplay = newProps.tabToDisplay;
+        // this.registerFinalStateFunc = newProps.registerFinalStateFunc;
 
     }
 
     render() {
+      // console.log("tabToDisplay", this.state.tabToDisplay);
         return <View
-          registerFinalState={this.registerFinalStateFunc}
-          tabToDisplay={this.tabToDisplay} 
+          registerFinalState={this.state.registerFinalStateFunc}
+          tabToDisplay={this.state.tabToDisplay}
           />;
     }
 }
diff --git a/src/components/tabs/Calendar/index.js b/src/components/tabs/Calendar/index.js
index e4aca032..3c3e732e 100644
--- a/src/components/tabs/Calendar/index.js
+++ b/src/components/tabs/Calendar/index.js
@@ -14,7 +14,7 @@ var events = [
       end: new Date('November 11, 2018 20:00:00'),
       start: new Date('November 11, 2018 06:00:00'),
       title: 'Happy 11/11',
-      desc: 'Big conference for important people'
+      desc: 'Make a wish!'
     }
 ];