Adds Redux. Adds working API backend.

package.json

@@ -6,15 +6,18 @@
     "autolinker": "^1.4.4",
     "chrono-node": "^1.3.5",
     "classnames": "^2.2.5",
-    "jquery": "^3.2.1",
+    "cuid": "^1.3.8",
+    "es6-promise": "^4.1.1",
+    "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.6",
     "react-scripts": "1.0.10",
     "react-transition-group": "^1.2.0",
-    "redux": "^3.7.2"
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
   },
   "scripts": {
     "start": "port=3000 react-scripts start",

src/App.js

@@ -1,13 +1,11 @@
 // Todo
 // – drag / drop between sections + date issues
-// - Read only - fetch list + items from API
-// - Spike redux
 
 import React from 'react';
 import './css/app.css';
 import './css/todo-icon-font.css';
-import List from './containers/list/list.js';
-import Nav from './components/nav/nav.js';
+import List from './containers/listContainer/listContainer.js';
+import Nav from './containers/navContainer/navContainer.js';
 
 // const TodoListDebugOptions = ({showDebug, updateDataStruct, resetData}) => {
 //   if (showDebug) {

src/actionCreators/addItem.js

@@ -0,0 +1,73 @@
+import Moment from 'moment';
+import cuid from 'cuid';
+import * as Api from '../helpers/api.js';
+import {
+  ADD_ITEM,
+  ADD_ITEM_INDEX,
+  EDIT_ITEM,
+  REMOVE_TODO
+} from '../actionTypes/actionTypes.js';
+
+const add = (id, title, createdAt, dueAt, isEvent, listId) => {
+  return {
+    type: ADD_ITEM,
+    completed: false,
+    id,
+    title,
+    createdAt,
+    dueAt,
+    isEvent,
+    listId
+  }
+}
+
+const addIndex = (id, listId) => {
+  return {
+    type: ADD_ITEM_INDEX,
+    id,
+    listId
+  }
+}
+
+const edit = (item, id) => {
+  return {
+    type: EDIT_ITEM,
+    id,
+    item: {
+      id: item.id,
+      idx: item.idx
+    }
+  }
+}
+
+export const addItem = (title, createdAt, dueAt, isEvent, listId) => {
+  // Generate temp id to be used until API returns new item id
+  let tempId = cuid();
+
+  // Create API fetch / promise
+  let item = Api.postListItem({
+    'temp_id': tempId,
+    'idx_position': 'last',
+    'title': title,
+    'due_at': dueAt,
+    'is_event': isEvent,
+    'list_id': listId
+  })
+
+  return (dispatch) => {
+    // Immediately add item to client collection and the sort index
+    dispatch(add(tempId, title, createdAt, dueAt, isEvent, listId));
+    dispatch(addIndex(tempId, listId));
+
+    // Await API call response
+    item.then(response => {
+      response.json().then(response => {
+        let item = response.item
+        let meta = response.meta
+
+        // Update client collection with real item data returned from API
+        dispatch(edit(item, meta.temp_id))
+      })
+    })
+  };
+}

src/actionCreators/editItem.js

@@ -0,0 +1,29 @@
+import * as Api from '../helpers/api.js';
+import { EDIT_ITEM } from '../actionTypes/actionTypes.js';
+
+const edit = (title, id) => {
+  return {
+    type: EDIT_ITEM,
+    id,
+    item: {
+      title
+    }
+  }
+}
+
+export const editItem = (title, id) => {
+  // Create API fetch / promise
+  let item = Api.updateListItem({id, title})
+
+  return (dispatch) => {
+    // Immediately edit item in client collection
+    dispatch(edit(title, id));
+
+    // Await API call response
+    item.then(response => {
+      response.json().then(response => {
+        // @todo handle errors
+      })
+    })
+  };
+}

src/actionCreators/getListItems.js

@@ -0,0 +1,15 @@
+import fetch from 'isomorphic-fetch';
+import * as Api from '../helpers/api.js';
+import {receiveListItems} from './receiveListItems.js';
+
+export const getListItems = listId => {
+  let items = Api.getListItems(listId)
+
+  return (dispatch) => {
+    items.then(response => {
+      response.json().then(response => {
+        dispatch(receiveListItems(listId, response.list.items, response.meta.sort_order))
+      })
+    })
+  };
+}

src/actionCreators/getLists.js

@@ -0,0 +1,15 @@
+import fetch from 'isomorphic-fetch';
+import * as Api from '../helpers/api.js';
+import {receiveLists} from './receiveLists.js';
+
+export const getLists = () => {
+  let lists = Api.getLists()
+
+  return (dispatch) => {
+    lists.then(response => {
+      response.json().then(response => {
+        dispatch(receiveLists(response.lists))
+      })
+    })
+  };
+}

src/actionCreators/receiveListItems.js

@@ -0,0 +1,10 @@
+import { RECEIVE_LIST_ITEMS } from '../actionTypes/actionTypes.js';
+
+export const receiveListItems = (listId, items, sortOrder) => {
+  return {
+    type: RECEIVE_LIST_ITEMS,
+    listId,
+    items,
+    sortOrder
+  }
+}

src/actionCreators/receiveLists.js

@@ -0,0 +1,8 @@
+import { RECEIVE_LISTS } from '../actionTypes/actionTypes.js';
+
+export const receiveLists = lists => {
+  return {
+    type: RECEIVE_LISTS,
+    lists: lists
+  }
+}

src/actionCreators/removeItem.js

@@ -0,0 +1,38 @@
+import fetch from 'isomorphic-fetch';
+import * as Api from '../helpers/api.js';
+import {
+  REMOVE_ITEM,
+  REMOVE_ITEM_INDEX
+} from '../actionTypes/actionTypes.js';
+
+const remove = (id) => {
+  return {
+    type: REMOVE_ITEM,
+    id
+  }
+}
+
+const removeIndex = (id, listId) => {
+  return {
+    type: REMOVE_ITEM_INDEX,
+    id,
+    listId
+  }
+}
+
+export const removeItem = (id, listId) => {
+  let item = Api.deleteListItem(id)
+
+  return (dispatch) => {
+    // Immediately remove item from client collection and sort index
+    dispatch(remove(id))
+    dispatch(removeIndex(id, listId))
+
+    // Dispatch API call to delete item and await response
+    item.then(response => {
+      response.json().then(response => {
+        // @todo handle error
+      })
+    })
+  };
+}

src/actionCreators/reorderItem.js

@@ -0,0 +1,31 @@
+import * as Api from '../helpers/api.js';
+import {
+  REORDER_ITEM,
+  REORDER_ITEM_INDEX
+ } from '../actionTypes/actionTypes.js';
+
+const reorder = (from, to, listId) => {
+   return {
+     type: REORDER_ITEM_INDEX,
+     from,
+     to,
+     listId
+   }
+ }
+
+export const reorderItem = (id, from, to, listId) => {
+  // Create API fetch / promise
+  let item = Api.updateListItem({id, idx_position: to})
+
+  return (dispatch) => {
+    // Immediately update sort collection
+    dispatch(reorder(from, to, listId));
+
+    // Await API call response
+    item.then(response => {
+      response.json().then(response => {
+        // @todo handle errors
+      })
+    })
+  };
+}

src/actionCreators/setActiveList.js

@@ -0,0 +1,8 @@
+import { SET_ACITVE_LIST } from '../actionTypes/actionTypes.js';
+
+export const setActiveList = id => {
+  return {
+    type: SET_ACITVE_LIST,
+    id
+  }
+}

src/actionCreators/toggleItem.js

@@ -0,0 +1,28 @@
+import * as Api from '../helpers/api.js';
+import { TOGGLE_ITEM } from '../actionTypes/actionTypes.js';
+import Moment from 'moment';
+
+const toggle = id => {
+  return {
+    type: TOGGLE_ITEM,
+    id,
+    completed_at: Moment().valueOf()
+  }
+}
+
+export const toggleItem = (id, completed) => {
+  // Create API fetch / promise
+  let item = Api.updateListItem({id, completed})
+
+  return (dispatch) => {
+    // Immediately toggle item in client collection
+    dispatch(toggle(id, completed));
+
+    // Await API call response
+    item.then(response => {
+      response.json().then(response => {
+        // @todo handle errors
+      })
+    })
+  };
+}

src/actionTypes/actionTypes.js

@@ -1,12 +1,29 @@
+// API
+// Lists
+export const GET_LISTS = 'GET_LISTS'
+export const RECEIVE_LISTS = 'RECEIVE_LISTS'
+
+// Item collections
+export const GET_LIST_ITEMS = 'GET_LIST_ITEMS'
+export const RECEIVE_LIST_ITEMS = 'RECEIVE_ITEMS'
+
 // Items
-export const ADD_TODO = 'ADD_TODO'
-export const EDIT_TODO = 'EDIT_TODO'
-export const MOVE_TODO = 'MOVE_TODO'
-export const REMOVE_TODO = 'REMOVE_TODO'
-export const TOGGLE_TODO = 'TOGGLE_TODO'
+export const ADD_ITEM = 'ADD_ITEM'
+export const EDIT_ITEM = 'EDIT_ITEM'
+export const REORDER_ITEM = 'REORDER_ITEM'
+export const REMOVE_ITEM = 'REMOVE_ITEM'
+export const TOGGLE_ITEM = 'TOGGLE_ITEM'
 
 // State
 export const SET_NOW_EDITING = 'SET_NOW_EDITING'
 export const SET_NOW_DRAGGING = 'SET_NOW_DRAGGING'
 export const SET_NOW_DRAGGING_FROM = 'SET_NOW_DRAGGING_FROM'
 export const SET_NOW_DRAGGING_TO = 'SET_NOW_DRAGGING_TO'
+export const SET_NOW_LOADING = 'SET_NOW_LOADING'
+export const SET_ACITVE_LIST = 'SET_ACITVE_LIST'
+
+// Sort index
+export const ADD_ITEM_INDEX = 'ADD_ITEM_INDEX'
+export const EDIT_ITEM_INDEX = 'EDIT_ITEM_INDEX'
+export const REORDER_ITEM_INDEX = 'REORDER_ITEM_INDEX'
+export const REMOVE_ITEM_INDEX = 'REMOVE_ITEM_INDEX'