From 6f93b4b7c4878789ae78e7a879240ae21c0a05e2 Mon Sep 17 00:00:00 2001 From: Ro Savage Date: Mon, 5 Sep 2016 23:42:20 +1200 Subject: [PATCH 1/2] Added action to add new collection item --- .eslintrc | 8 ++++++ package.json | 3 ++- .../collectionItems/CollectionItemRoute.js | 3 ++- .../collectionItems/CollectionItemsReducer.js | 27 +++++++++++++++++++ .../GetCollectionItemsButton.js | 22 +++++++++++++++ .../collectionItems/collectionItems/index.js | 2 ++ webpack.dev.js | 2 +- 7 files changed, 64 insertions(+), 3 deletions(-) create mode 100644 src/views/collectionItems/collectionItems/GetCollectionItemsButton/GetCollectionItemsButton.js 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..857a270 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", @@ -55,7 +56,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/CollectionItemsReducer.js b/src/views/collectionItems/collectionItems/CollectionItemsReducer.js index aff2f20..cdcd4c7 100644 --- a/src/views/collectionItems/collectionItems/CollectionItemsReducer.js +++ b/src/views/collectionItems/collectionItems/CollectionItemsReducer.js @@ -1,6 +1,25 @@ import { createSelector } from 'reselect' import _sortBy from 'lodash/sortBy' +// ACTIONS +export const FETCH_COLLECTION_ITEMS_REQUEST = '@@IND-COLLECTION_ITEMS/FETCH_COLLECTION_ITEMS_REQUEST' + +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/4032175?s=250', + title: 'Balh', + }, + date: '2222', + }, + } +} + const collectionItemState = { collectionItems: { 1: { @@ -36,6 +55,14 @@ const collectionItemState = { export const CollectionItemsReducer = (state = collectionItemState, action) => { switch (action.type) { + case FETCH_COLLECTION_ITEMS_REQUEST: + return { + collectionItems: { + ...state.collectionItems, + [action.payload.id]: action.payload, + }, + defaultOrder: [...state.defaultOrder, action.payload.id], + } 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/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', ], From b6b95b493bfb8c5e52a748d0729b1f1388564b7f Mon Sep 17 00:00:00 2001 From: Ro Savage Date: Tue, 6 Sep 2016 00:44:00 +1200 Subject: [PATCH 2/2] Added first test saga --- package.json | 2 + .../collectionItems/CollectionItemsAPI.js | 16 ++++++ .../collectionItems/CollectionItemsReducer.js | 53 +++++++------------ src/views/configureStore.js | 8 +++ 4 files changed, 44 insertions(+), 35 deletions(-) create mode 100644 src/views/collectionItems/collectionItems/CollectionItemsAPI.js diff --git a/package.json b/package.json index 857a270..f9be395 100644 --- a/package.json +++ b/package.json @@ -48,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", 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 cdcd4c7..17d2493 100644 --- a/src/views/collectionItems/collectionItems/CollectionItemsReducer.js +++ b/src/views/collectionItems/collectionItems/CollectionItemsReducer.js @@ -1,8 +1,13 @@ import { createSelector } from 'reselect' +import { put } from 'redux-saga/effects' import _sortBy from 'lodash/sortBy' +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') @@ -20,48 +25,26 @@ export const fetchCollectionItems = () => { } } +// 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: { - 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', - mainImage: { - url: 'https://avatars0.githubusercontent.com/u/6902746?s=250', - title: 'Craig in the style of cubism', - }, - date: '2014', - }, - }, - defaultOrder: ['2', '3', '1'], + collectionItems: {}, + defaultOrder: [], } export const CollectionItemsReducer = (state = collectionItemState, action) => { switch (action.type) { case FETCH_COLLECTION_ITEMS_REQUEST: + const order = Object.keys(action.payload) return { - collectionItems: { - ...state.collectionItems, - [action.payload.id]: action.payload, - }, - defaultOrder: [...state.defaultOrder, action.payload.id], + collectionItems: action.payload, + defaultOrder: order, } default: return state 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 }