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', ],