From 6b3e56a4cfbfb856aca37659b99cc4a11c86b8e0 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Wed, 18 May 2016 01:13:52 -0700 Subject: [PATCH] Better data management for atlases --- package.json | 1 + src/actions/AtlasActions.js | 13 ++++-- src/components/AtlasPreview/AtlasPreview.js | 6 ++- src/reducers/atlases.js | 29 ++++++++++++- src/scenes/Atlas/Atlas.js | 46 +++++++++------------ src/scenes/Dashboard/Dashboard.js | 2 +- 6 files changed, 63 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 0af9d0251..6e94b2045 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "node-sass": "^3.4.2", "nodemon": "^1.9.1", "normalize.css": "^3.0.3", + "normalizr": "^2.0.1", "react": "^0.14.7", "react-codemirror": "^0.2.5", "react-dropzone": "^3.3.2", diff --git a/src/actions/AtlasActions.js b/src/actions/AtlasActions.js index 346decbf5..f7c84badb 100644 --- a/src/actions/AtlasActions.js +++ b/src/actions/AtlasActions.js @@ -1,12 +1,15 @@ import makeActionCreator from '../utils/actions'; import { client } from 'utils/ApiClient'; +import { normalize, Schema, arrayOf } from 'normalizr'; + +const atlas = new Schema('atlases'); export const FETCH_ATLASES_PENDING = 'FETCH_ATLASES_PENDING'; export const FETCH_ATLASES_SUCCESS = 'FETCH_ATLASES_SUCCESS'; export const FETCH_ATLASES_FAILURE = 'FETCH_ATLASES_FAILURE'; const fetchAtlasesPending = makeActionCreator(FETCH_ATLASES_PENDING); -const fetchAtlasesSuccess = makeActionCreator(FETCH_ATLASES_SUCCESS, 'items', 'pagination'); +const fetchAtlasesSuccess = makeActionCreator(FETCH_ATLASES_SUCCESS, 'data', 'pagination'); const fetchAtlasesFailure = makeActionCreator(FETCH_ATLASES_FAILURE, 'error'); export function fetchAtlasesAsync(teamId) { @@ -17,7 +20,9 @@ export function fetchAtlasesAsync(teamId) { teamId: teamId, }) .then(data => { - dispatch(fetchAtlasesSuccess(data.data, data.pagination)); + const response = normalize(data.data, arrayOf(atlas)); + + dispatch(fetchAtlasesSuccess(response, data.pagination)); }) .catch((err) => { dispatch(fetchAtlasesFailure(err)); @@ -43,7 +48,9 @@ export function fetchAtlasAsync(atlasId) { id: atlasId, }) .then(data => { - dispatch(fetchAtlasSuccess(data.data,)); + const response = normalize(data.data, atlas); + + dispatch(fetchAtlasSuccess(response)); }) .catch((err) => { dispatch(fetchAtlasFailure(err)); diff --git a/src/components/AtlasPreview/AtlasPreview.js b/src/components/AtlasPreview/AtlasPreview.js index 1ebaa966a..5f23b4d3b 100644 --- a/src/components/AtlasPreview/AtlasPreview.js +++ b/src/components/AtlasPreview/AtlasPreview.js @@ -11,10 +11,12 @@ class AtlasPreview extends React.Component { } render() { + const data = this.props.data; + return (
-

{ this.props.data.name }

-
No documents. Why not create one?
+

{ data.name }

+
No documents. Why not create one?
); } diff --git a/src/reducers/atlases.js b/src/reducers/atlases.js index c46317ee8..8c4aa4755 100644 --- a/src/reducers/atlases.js +++ b/src/reducers/atlases.js @@ -2,10 +2,13 @@ import { FETCH_ATLASES_PENDING, FETCH_ATLASES_SUCCESS, FETCH_ATLASES_FAILURE, + + FETCH_ATLAS_PENDING, + FETCH_ATLAS_SUCCESS, + FETCH_ATLAS_FAILURE, } from 'actions/AtlasActions'; const initialState = { - items: [], pagination: null, isLoading: false, } @@ -21,7 +24,7 @@ const atlases = (state = initialState, action) => { case FETCH_ATLASES_SUCCESS: { return { ...state, - items: action.items, + ...action.data, pagination: action.pagination, isLoading: false, }; @@ -33,6 +36,28 @@ const atlases = (state = initialState, action) => { error: action.error, }; } + + case FETCH_ATLAS_PENDING: { + return { + ...state, + isLoading: true, + }; + } + case FETCH_ATLAS_SUCCESS: { + return { + ...state, + ...action.data, + isLoading: false, + }; + } + case FETCH_ATLAS_FAILURE: { + return { + ...state, + isLoading: false, + error: action.error, + }; + } + default: return state; } diff --git a/src/scenes/Atlas/Atlas.js b/src/scenes/Atlas/Atlas.js index 64503619e..be67142d2 100644 --- a/src/scenes/Atlas/Atlas.js +++ b/src/scenes/Atlas/Atlas.js @@ -16,50 +16,41 @@ import styles from './Atlas.scss'; class Atlas extends React.Component { static propTypes = { + isLoading: React.PropTypes.bool, atlas: React.PropTypes.object, } - state = { - isLoading: true, - data: null, - } - componentDidMount = () => { const { id } = this.props.params; - // this.props.fetchAtlasAsync(id); - - // Temp before breaking out redux store - client.post('/atlases.info', { - id: id, - }) - .then(data => { - this.setState({ - isLoading: false, - data: data.data - }); - }) + this.props.fetchAtlasAsync(id); } render() { - const data = this.state.data; + const atlas = this.props.atlas; + + let actions; + let title; + + if (this.props.isLoading === false) { + actions = New document; + title = { atlas.name }; + } return ( New document - )} - title={ { data.name } } + actions={ actions } + title={ title } > - { this.state.isLoading ? ( + { this.props.isLoading ? ( ) : (
-

{ data.name }

+

{ atlas.name }

- { data.description } + { atlas.description }
@@ -72,9 +63,12 @@ class Atlas extends React.Component { } } -const mapStateToProps = (state) => { +const mapStateToProps = (state, currentProps) => { + const id = currentProps.params.id; + return { isLoading: state.atlases.isLoading, + atlas: state.atlases.entities ? state.atlases.entities.atlases[id] : null, // reselect } }; diff --git a/src/scenes/Dashboard/Dashboard.js b/src/scenes/Dashboard/Dashboard.js index a6c9ade3a..7793b6b85 100644 --- a/src/scenes/Dashboard/Dashboard.js +++ b/src/scenes/Dashboard/Dashboard.js @@ -37,7 +37,7 @@ const mapStateToProps = (state) => { return { teamId: state.team ? state.team.id : null, isLoading: state.atlases.isLoading, - items: state.atlases.items, + items: Array.isArray(state.atlases.result) ? state.atlases.result.map((id) => state.atlases.entities.atlases[id]) : [], // reselect } };