Add firebase backend and redux saga

.eslintrc

@@ -1,4 +1,12 @@
 {
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
   "extends" : [
     "airbnb"
   ],

package.json

@@ -28,6 +28,7 @@
     "babel-preset-es2016": "^6.11.3",
     "babel-preset-modern-browsers": "^5.1.0",
     "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-2": "^6.13.0",
     "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
     "eslint": "^3.3.1",
@@ -47,6 +48,8 @@
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
+    "es6-promise": "^3.2.1",
+    "isomorphic-fetch": "^2.2.1",
     "lodash": "^4.15.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0",
@@ -55,7 +58,7 @@
     "react-router": "^2.6.1",
     "redux": "^3.5.2",
     "redux-logger": "^2.6.1",
-    "redux-saga": "^0.11.0",
+    "redux-saga": "^0.11.1",
     "reselect": "^2.5.3"
   }
 }

src/views/collectionItems/collectionItems/CollectionItemRoute.js

@@ -1,11 +1,12 @@
 import React from 'react'
 
-import { CollectionItemsListContainer } from './index'
+import { CollectionItemsListContainer, GetCollectionItemsButton } from './index'
 
 const CollectionItemsRoute = (props) => {
   return (
     <div>
       <CollectionItemsListContainer orderBy={props.location.query.orderBy} />
+      <GetCollectionItemsButton />
     </div>
   )
 }

src/views/collectionItems/collectionItems/CollectionItemsAPI.js

@@ -0,0 +1,16 @@
+import fetch from 'isomorphic-fetch'
+// fetch URL: https://indepth-d9a77.firebaseio.com/collection/4.json?print=pretty
+const api = {}
+
+api.fetchCollectionItems = () => {
+  return fetch('https://indepth-d9a77.firebaseio.com/collection.json').then((response) => {
+    return response.json().then((json) => {
+      console.log(json)
+      return json
+    }).catch((err) => {
+      console.log(err)
+    })
+  })
+}
+
+export default api

src/views/collectionItems/collectionItems/CollectionItemsReducer.js

@@ -1,41 +1,51 @@
 import { createSelector } from 'reselect'
+import { put } from 'redux-saga/effects'
 import _sortBy from 'lodash/sortBy'
 
-const collectionItemState = {
-  collectionItems: {
-    1: {
-      id: '1',
-      title: 'Rowan\'s Mohawk',
-      mainImage: {
-        url: 'https://avatars3.githubusercontent.com/u/9244507?s=250',
-        title: 'Rowan with his mohawk in the 70s',
-      },
-      date: '1974',
-    },
-    2: {
-      id: '2',
-      title: 'Nick the professional',
-      mainImage: {
-        url: 'https://avatars0.githubusercontent.com/u/15827526?s=250',
-        title: 'Nick with his professional Mahuki photo',
-      },
-      date: '2016',
-    },
-    3: {
-      id: '3',
-      title: 'Craig the rebel',
+import api from './CollectionItemsAPI'
+
+// ACTIONS
+export const FETCH_COLLECTION_ITEMS_REQUEST = '@@IND-COLLECTION_ITEMS/FETCH_COLLECTION_ITEMS_REQUEST'
+export const FETCH_COLLECTION_ITEMS_SUCCESS = '@@IND-COLLECTION_ITEMS/FETCH_COLLECTION_ITEMS_SUCCESS'
+export const FETCH_COLLECTION_ITEMS_FAILURE = '@@IND-COLLECTION_ITEMS/FETCH_COLLECTION_ITEMS_FAILURE'
+
+export const fetchCollectionItems = () => {
+  console.log('fetch items')
+  return {
+    type: FETCH_COLLECTION_ITEMS_REQUEST,
+    payload: {
+      id: '4',
+      title: 'Action Fired!',
       mainImage: {
-        url: 'https://avatars0.githubusercontent.com/u/6902746?s=250',
-        title: 'Craig in the style of cubism',
+        url: 'https://avatars0.githubusercontent.com/u/4032175?s=250',
+        title: 'Balh',
       },
-      date: '2014',
+      date: '2222',
     },
-  },
-  defaultOrder: ['2', '3', '1'],
+  }
+}
+
+// SAGAS
+export function* sagaLoadCollectionItems() {
+  const items = yield api.fetchCollectionItems()
+  yield put({ type: FETCH_COLLECTION_ITEMS_REQUEST, payload: items })
+  // const items = yield fetchImages();
+  console.log('saga - ', items)
+}
+
+const collectionItemState = {
+  collectionItems: {},
+  defaultOrder: [],
 }
 
 export const CollectionItemsReducer = (state = collectionItemState, action) => {
   switch (action.type) {
+    case FETCH_COLLECTION_ITEMS_REQUEST:
+      const order = Object.keys(action.payload)
+      return {
+        collectionItems: action.payload,
+        defaultOrder: order,
+      }
     default:
       return state
   }

src/views/collectionItems/collectionItems/GetCollectionItemsButton/GetCollectionItemsButton.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { fetchCollectionItems } from '../CollectionItemsReducer'
+
+const GetCollectionItemsButton = (props) => {
+  return (
+    <button onClick={props.dispatchFetchCollectionItems}>
+      Get Items
+    </button>
+  )
+}
+
+GetCollectionItemsButton.propTypes = {
+  dispatchFetchCollectionItems: React.PropTypes.func,
+}
+
+// Container
+const mapDispatchToProps = (dispatch) => ({
+  dispatchFetchCollectionItems: () => dispatch(fetchCollectionItems()),
+})
+
+export default connect(undefined, mapDispatchToProps)(GetCollectionItemsButton)

src/views/collectionItems/collectionItems/index.js

@@ -1,9 +1,11 @@
 import CollectionItemsRoute from './CollectionItemRoute'
 import CollectionItemsList from './CollectionItemsList/CollectionItemsList'
 import CollectionItemsListContainer from './CollectionItemsList/CollectionItemsListContainer'
+import GetCollectionItemsButton from './GetCollectionItemsButton/GetCollectionItemsButton'
 
 export {
   CollectionItemsRoute,
   CollectionItemsList,
   CollectionItemsListContainer,
+  GetCollectionItemsButton,
 }

src/views/configureStore.js

@@ -1,20 +1,28 @@
 import { createStore, applyMiddleware } from 'redux'
+import createSagaMiddleware from 'redux-saga'
+
 import createLogger from 'redux-logger'
 
 import rootReducer from './rootReducer'
+import { sagaLoadCollectionItems } from './collectionItems/collectionItems/CollectionItemsReducer'
 
 const configureStore = () => {
   const loggerMiddleware = createLogger({
     collapsed: true,
   })
 
+  const sagaMiddleware = createSagaMiddleware()
+
   const store = createStore(
     rootReducer,
     applyMiddleware(
+      sagaMiddleware,
       loggerMiddleware
     )
   )
 
+  sagaMiddleware.run(sagaLoadCollectionItems)
+
   return store
 }
 

webpack.dev.js

@@ -40,7 +40,7 @@ const webpackconfig = {
         loader: 'babel',
         query: {
           cacheDirectory: true,
-          presets: ['modern-browsers', 'react'],
+          presets: ['modern-browsers', 'stage-2', 'react'],
           plugins: [
             'react-hot-loader/babel',
           ],