diff --git a/.eslintrc b/.eslintrc
index b67f919..623659e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,4 +1,12 @@
{
+ "parserOptions": {
+ "ecmaVersion": 7,
+ "sourceType": "module",
+ "ecmaFeatures": {
+ "jsx": true,
+ "experimentalObjectRestSpread": true
+ }
+ },
"extends" : [
"airbnb"
],
diff --git a/package.json b/package.json
index 22687ed..f9be395 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/views/collectionItems/collectionItems/CollectionItemRoute.js b/src/views/collectionItems/collectionItems/CollectionItemRoute.js
index a9efad4..2243fa0 100644
--- a/src/views/collectionItems/collectionItems/CollectionItemRoute.js
+++ b/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 (
+
)
}
diff --git a/src/views/collectionItems/collectionItems/CollectionItemsAPI.js b/src/views/collectionItems/collectionItems/CollectionItemsAPI.js
new file mode 100644
index 0000000..677283c
--- /dev/null
+++ b/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
diff --git a/src/views/collectionItems/collectionItems/CollectionItemsReducer.js b/src/views/collectionItems/collectionItems/CollectionItemsReducer.js
index aff2f20..17d2493 100644
--- a/src/views/collectionItems/collectionItems/CollectionItemsReducer.js
+++ b/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
}
diff --git a/src/views/collectionItems/collectionItems/GetCollectionItemsButton/GetCollectionItemsButton.js b/src/views/collectionItems/collectionItems/GetCollectionItemsButton/GetCollectionItemsButton.js
new file mode 100644
index 0000000..afe5c4d
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+GetCollectionItemsButton.propTypes = {
+ dispatchFetchCollectionItems: React.PropTypes.func,
+}
+
+// Container
+const mapDispatchToProps = (dispatch) => ({
+ dispatchFetchCollectionItems: () => dispatch(fetchCollectionItems()),
+})
+
+export default connect(undefined, mapDispatchToProps)(GetCollectionItemsButton)
diff --git a/src/views/collectionItems/collectionItems/index.js b/src/views/collectionItems/collectionItems/index.js
index 9381a31..948dc67 100644
--- a/src/views/collectionItems/collectionItems/index.js
+++ b/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,
}
diff --git a/src/views/configureStore.js b/src/views/configureStore.js
index e3b47a9..56342e7 100644
--- a/src/views/configureStore.js
+++ b/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
}
diff --git a/webpack.dev.js b/webpack.dev.js
index 8de4448..56b82d7 100644
--- a/webpack.dev.js
+++ b/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',
],