+
diff --git a/src/components/structure/TabDisplay/TabDisplay.css b/src/components/structure/TabDisplay/TabDisplay.css
index 1fef6cca..c6d4eda8 100644
--- a/src/components/structure/TabDisplay/TabDisplay.css
+++ b/src/components/structure/TabDisplay/TabDisplay.css
@@ -1,3 +1,6 @@
#displayContainer {
-
-}
\ No newline at end of file
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+}
diff --git a/src/components/structure/TabDisplay/View.js b/src/components/structure/TabDisplay/View.js
index 738d8381..8e7ce9ac 100644
--- a/src/components/structure/TabDisplay/View.js
+++ b/src/components/structure/TabDisplay/View.js
@@ -1,13 +1,40 @@
import React from 'react';
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 :)
+ */
+/*
+ * TAB IMPORTS:
+/*
+ * This begins as an empty container, but we will have a function that fills it
+ * on tab clicks.
+ */
-// This begins as an empty container, but we will have a function that fills it
-// on tab clicks.
-
-const View = ({}) => (
+var View = props => {
+ // console.log("Tabtype",props.tabToDisplay); // testing what props look like as passed from tabdisplay
+ var ret;
+ switch (props.tabToDisplay) {
+ case "analytics":
+ ret =
;
+ break;
+ case "calendar":
+ ret =
;
+ break;
+ case "journal":
+ ret =
;
+ break;
+ default:
+ ret =
;
+ }
+ return (
-
+ {ret}
-);
+)
+}
export default View;
diff --git a/src/components/structure/TabDisplay/index.js b/src/components/structure/TabDisplay/index.js
index 4c2d4716..e3c77560 100644
--- a/src/components/structure/TabDisplay/index.js
+++ b/src/components/structure/TabDisplay/index.js
@@ -1,51 +1,41 @@
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.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() {
- // 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
;
+ // console.log("tabToDisplay", this.state.tabToDisplay);
+ return
;
}
-
}
-export default TabDisplay;
\ No newline at end of file
+export default TabDisplay;
diff --git a/src/components/structure/TabList/TabList.css b/src/components/structure/TabList/TabList.css
index 298e13d8..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;
- background: cornflowerblue;
+ padding: 5px;
+ background: cornflowerblue;
+ margin-bottom: 5px;
border-bottom: var(--pinkborder);
}
@@ -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 123c0c66..8553be61 100644
--- a/src/components/structure/TaskDisplay/TaskDisplay.css
+++ b/src/components/structure/TaskDisplay/TaskDisplay.css
@@ -1,7 +1,35 @@
#taskdisplay {
- width: 100%;
- height: 100%;
+ height: 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: 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-time-content { flex: 1; }
- display: flex;
- flex-direction: column;
+&.rbc-overflowing {
+ border-right: 1px solid @cell-border;
}
diff --git a/src/components/structure/TaskDisplay/View.js b/src/components/structure/TaskDisplay/View.js
index 1be723b9..9c653b12 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, onTabClick, tabToDisplay, tabInfo, registerFinalState}) => {
@@ -14,10 +14,10 @@ const View = ({tabList, onTabClick, tabToDisplay, tabInfo, registerFinalState})
return (
-
+
)}
export default View;
diff --git a/src/components/structure/TaskDisplay/index.js b/src/components/structure/TaskDisplay/index.js
index c26ddddd..b6f9714e 100644
--- a/src/components/structure/TaskDisplay/index.js
+++ b/src/components/structure/TaskDisplay/index.js
@@ -2,15 +2,19 @@ import React, { Component } from 'react';
import View from './View';
import { InitialTask } from '../../../utilities/general_content';
+/*
+ * parses the 'currentTask' into its tablist and tabdisplay.
+ */
+
class TaskDisplay extends Component {
constructor(props) {
super(props);
// This is the farthest down the tree the Model itself needs to go...
this.model = props.model;
-
+
this.state = {
- // what to do here is up in the air, maybe the 'menu' tab?
+ // what to do here is up in the air, maybe the 'menu' tab?
currentTask: new InitialTask(),
currentTabTitle: "welcome tab",
};
@@ -37,10 +41,10 @@ class TaskDisplay extends Component {
});
}
- /*
+ /*
* Clicks to tabList should cause a different tab to be loaded...
- *
- * 'tabClicked' - a string that is the title of the clicked tab.
+ *
+ * 'tabClicked' - a string that is the title of the clicked tab.
*/
onTabClick(tabTitle) {
this.setState((state) => {
@@ -50,7 +54,7 @@ class TaskDisplay extends Component {
}
/*
- * Separates the tabs from the current_task into 'title' 'key' pairs.
+ * Separates the tabs from the current_task into 'title' 'key' pairs.
*/
getTabList(task) {
return task.tabs.map( tab => {
@@ -59,7 +63,7 @@ class TaskDisplay extends Component {
}
/*
- * Strips the info from the current task for the current tab.
+ * Strips the info from the current task for the current tab.
*/
getTabInfo(task, tabTitle) {
return task.tabs.filter( tab => tab.title === tabTitle)[0].info;
@@ -69,16 +73,16 @@ class TaskDisplay extends Component {
const tabList = this.getTabList(this.state.currentTask);
const tabInfo = this.getTabInfo(this.state.currentTask, this.state.currentTabTitle);
-
- return < View
- tabList={tabList}
+
+ return < View
+ tabList={tabList}
// TabList is going to wrap this onClick with the appropriate args.
onTabClick={this.onTabClick}
- tabToDisplay={this.state.currentTabTitle}
- tabInfo={tabInfo}
+ 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/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(
);
+
+ 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();
+
+ 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();
+
+ 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();
+
+ 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 (
+
+
+
+ );
+ }
+
+}
\ No newline at end of file
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/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();
- });
- 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();
+
+ 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}) => (
-
-
-
+
+
{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
this.onClick(key)}
@@ -61,7 +61,7 @@ class TaskList extends Component {
;
});
- return
;
+ return ;
}
}
diff --git a/src/components/tabs/Calendar/View.js b/src/components/tabs/Calendar/View.js
new file mode 100644
index 00000000..6a2a433f
--- /dev/null
+++ b/src/components/tabs/Calendar/View.js
@@ -0,0 +1,84 @@
+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 '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
+- 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
+// https://github.com/intljusticemission/react-big-calendar/issues/234
+*/
+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);
+ return (
+
+
+ props.handleSelectToDelete(event)}
+ onSelectSlot={event => props.handleSelectSlot(event)}
+ resourceIdAccessor="resourceId"
+ resourceTitleAccessor="resourceTitle"
+ resizable
+ onEventResize={props.onEventResize}
+ showMultiDayTimes
+ components={{
+ event: event,
+ agenda: {event: eventAgenda}
+ }}
+ />
+ {/*
+ props.handleSelectToDelete(event)}
+ onSelectSlot={event => props.handleSelectSlot(event)}
+ resizable
+ onEventResize={props.onEventResize}
+ showMultiDayTimes
+ components={{
+ event: event,
+ agenda: {event: eventAgenda}
+ }}
+ />
+ */}
+
+