From 94f72f603ec2c57a89f9bb81853039afd5a4a309 Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Mon, 26 Oct 2015 15:03:45 +0100
Subject: [PATCH] Split initial state into two reducers, collections and
fragments.
---
app/components/BlogpostCreator.jsx | 2 +-
app/components/BlogpostList.jsx | 15 ++++---
app/containers/App.jsx | 18 +-------
app/containers/BlogManager.jsx | 2 +-
app/reducers/index.js | 61 ++++++++++++++------------
app/routes.jsx | 2 +-
app/scss/components/_blogpostList.scss | 4 +-
7 files changed, 48 insertions(+), 56 deletions(-)
diff --git a/app/components/BlogpostCreator.jsx b/app/components/BlogpostCreator.jsx
index cdd365a4e..c779ced95 100644
--- a/app/components/BlogpostCreator.jsx
+++ b/app/components/BlogpostCreator.jsx
@@ -24,5 +24,5 @@ export default class BlogpostCreator extends React.Component {
}
BlogpostCreator.propTypes = {
- create: React.PropTypes.function
+ create: React.PropTypes.func
}
diff --git a/app/components/BlogpostList.jsx b/app/components/BlogpostList.jsx
index 3ce505250..680418789 100644
--- a/app/components/BlogpostList.jsx
+++ b/app/components/BlogpostList.jsx
@@ -1,21 +1,22 @@
import React from 'react'
-import Immutable from 'immutable'
import Blogpost from './Blogpost'
import styles from '../scss/components/_blogpostList'
export default class BlogpostList extends React.Component {
render () {
- const blogposts = this.props.manages.toKeyedSeq().map((manage, key) => {
- return (<Blogpost key={manage.get('id')} id={manage.get('id')} title={manage.getIn(['data', 'title'])} status={manage.getIn(['data', 'status'])}/>)
- }).toArray()
+ const blogposts = this.props.blogposts.map((blogpost, key) => {
+ return (<Blogpost key={blogpost.id} id={blogpost.id} title={blogpost.title} status={blogpost.status}/>)
+ })
return (
- <div className={styles['main-section']}>
- <h3 className={styles['main-section__header']}>Blog posts</h3>
+ <div className={styles['list']}>
+ <h3 className={styles['header']}>Blog posts</h3>
{blogposts}
</div>
)
}
}
-BlogpostList.propTypes = { manages: React.PropTypes.instanceOf(Immutable.OrderedMap) }
+BlogpostList.propTypes = {
+ blogposts: React.PropTypes.array
+}
diff --git a/app/containers/App.jsx b/app/containers/App.jsx
index 829800811..5bc711adf 100644
--- a/app/containers/App.jsx
+++ b/app/containers/App.jsx
@@ -7,20 +7,6 @@ import '../scss/main'
class App extends Component {
constructor (props) {
super(props)
- this.handleDismissClick = this.handleDismissClick.bind(this)
- }
-
- renderErrorMessage () {
- const { errorMessage } = this.props
- if (!errorMessage) {
- return null
- }
-
- return (
- <p>
- <b>{errorMessage}</b>
- </p>
- )
}
render () {
@@ -30,7 +16,6 @@ class App extends Component {
<p>{collection.title}</p>
<Navigation />
<hr />
- {this.renderErrorMessage()}
{children}
</div>
)
@@ -42,7 +27,6 @@ App.propTypes = {
collection: PropTypes.object,
// Injected by React Redux
errorMessage: PropTypes.string,
- resetErrorMessage: PropTypes.func.isRequired,
pushState: PropTypes.func.isRequired,
inputValue: PropTypes.string.isRequired,
// Injected by React Router
@@ -51,7 +35,7 @@ App.propTypes = {
function mapStateToProps (state) {
return {
- collection: state.collection[0],
+ collection: state.collections[0],
errorMessage: state.errorMessage,
inputValue: state.router.location.pathname.substring(1)
}
diff --git a/app/containers/BlogManager.jsx b/app/containers/BlogManager.jsx
index 62e8b937b..e31a4d438 100644
--- a/app/containers/BlogManager.jsx
+++ b/app/containers/BlogManager.jsx
@@ -29,7 +29,7 @@ BlogManager.propTypes = {
function mapStateToProps (state) {
return {
- blog: state.collection[0],
+ blog: state.collections[0],
blogposts: state.fragments
}
}
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 7a78b96fb..b91cab3d3 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -2,30 +2,32 @@ import { routerStateReducer as router } from 'redux-router'
import { combineReducers } from 'redux'
import * as ActionTypes from '../actions'
-const initialState = {
- collections: [{
- title: 'Something',
- author: 'Jure',
- fragments: [1, 2, 3]
- }],
- fragments: [
- {
- id: 1,
- title: 'one',
- source: 'hello'
- },
- {
- id: 2,
- title: 'two',
- source: 'hellohi'
- },
- {
- id: 3,
- title: 'three',
- source: 'hellothere'
- }
- ]
-}
+const initialCollections = [{
+ title: 'Something',
+ author: 'Jure',
+ fragments: [1, 2, 3]
+}]
+
+const initialFragments = [
+ {
+ id: 1,
+ title: 'one',
+ source: 'hello',
+ status: 'published'
+ },
+ {
+ id: 2,
+ title: 'two',
+ source: 'hellohi',
+ status: 'unpublished'
+ },
+ {
+ id: 3,
+ title: 'three',
+ source: 'hellothere',
+ status: 'published'
+ }
+]
// Updates error message to notify about the failed fetches.
function errorMessage (state = null, action) {
@@ -40,14 +42,17 @@ function errorMessage (state = null, action) {
return state
}
-function reducer (state = initialState, action) {
- // For now, don’t handle any actions
- // and just return the state given to us.
+function collections (state = initialCollections, action) {
+ return state
+}
+
+function fragments (state = initialFragments, action) {
return state
}
const rootReducer = combineReducers({
- reducer,
+ collections,
+ fragments,
errorMessage,
router
})
diff --git a/app/routes.jsx b/app/routes.jsx
index 791ee9406..39f6e08f1 100644
--- a/app/routes.jsx
+++ b/app/routes.jsx
@@ -14,7 +14,7 @@ import Create from './components/Create'
import Share from './components/Share'
export default (
- <Route path='/' component={App}>
+ <Route component={App}>
<Route path='/' component={Share}/>
<Route path='/admin'>
<Route path='manages' component={Manage} />
diff --git a/app/scss/components/_blogpostList.scss b/app/scss/components/_blogpostList.scss
index 8b1378917..7bf42815a 100644
--- a/app/scss/components/_blogpostList.scss
+++ b/app/scss/components/_blogpostList.scss
@@ -1 +1,3 @@
-
+.list {
+ background: red;
+}
--
GitLab