diff --git a/README.md b/README.md
index 921b78f..a60bc7e 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@ Higher order component to enable loading states between route transitions and fe
[](https://travis-ci.org/kellyrmilligan/react-redux-transition-manager)
[](https://coveralls.io/github/kellyrmilligan/react-redux-transition-manager?branch=master)
+
+
## Why?
There is a lot of boilerplate involved when using react router and fetching the necessary data when transitioning from route to route. This is an attempt to simplify this process with 2 primary features:
@@ -130,10 +132,12 @@ The [reactRouterFetch](https://github.com/kellyrmilligan/react-router-fetch) mod
`ErrorIndicator: PropTypes.element` - This will be rendered instead of `props.children` when an error occurs.
+`SplashScreen: PropTypes.element` - This is the element to be shown for the initial page load. your loading indicator may be enough, so this is optional
+
`fetchInitial: PropTypes.bool` - This is for using this in client side apps only, this will initiate a fetch of the route right away, since the data wasn't loaded from the server.
-`SplashScreen: PropTypes.element` - This is the element to be shown for the initial page load. your loading indicator may be enough, so this is optional
+`showIndicatorOnInitial` - This prop will control whether or not you want to also show your loading indicator on the initial load. Depending on your ui, you may want to have a splash screen with a loading bar at the top of the page or something.
## Still to do:
-- a stand alone version that does not use redux, and just uses `setState`
+- add more tests for the actual component. sorry the coverage badge is so bad, i'm still learning enzyme. all the reducers are 100% covered
- if your API returns an error that you want to handle more specifically, you need to do it in your error Indicator and access your redux store. While this is serviceable, I want to provided a `pass-through`, where if an error happens on a certain route, you will be able to handle the error in the route handler instead if you want to.
diff --git a/package.json b/package.json
index 201ab79..73ca716 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,13 @@
{
"name": "react-redux-transition-manager",
- "version": "1.0.0",
+ "version": "1.2.1",
"description": "Higher order component to enable loading states between route transitions",
+ "keywords": "react, redux, react-router, transition, page, route",
"main": "lib/index.js",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/kellyrmilligan/react-redux-transition-manager"
+ },
"scripts": {
"build": "npm-run-all clean standard babel",
"babel": "babel src -d . -D -s",
@@ -35,10 +40,10 @@
"testRegex": "(/__tests__/.*|\\.(test))\\.js$",
"coverageThreshold": {
"global": {
- "branches": 75,
- "functions": 75,
- "lines": 75,
- "statements": 75
+ "branches": 10,
+ "functions": 10,
+ "lines": 10,
+ "statements": 10
}
},
"coveragePathIgnorePatterns": [
@@ -70,11 +75,13 @@
"babel-runtime": "^6.11.6",
"coveralls": "^2.11.15",
"cross-env": "^3.1.3",
+ "enzyme": "^2.6.0",
"jest": "^17.0.3",
"nodemon": "^1.9.0",
"npm-run-all": "^3.1.2",
"onchange": "^3.0.2",
"react": "^15.3.0",
+ "react-addons-test-utils": "^15.4.1",
"react-dom": "^15.3.0",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
diff --git a/src/lib/__tests__/index-test.js b/src/lib/__tests__/index-test.js
new file mode 100644
index 0000000..64999f5
--- /dev/null
+++ b/src/lib/__tests__/index-test.js
@@ -0,0 +1,38 @@
+/* global describe, it, expect */
+import React from 'react'
+import { shallow } from 'enzyme'
+import TransitionManager from '../index'
+import isAppFetching from '../../redux/is-app-fetching'
+import { Provider } from 'react-redux'
+import { combineReducers, createStore } from 'redux'
+
+const rootReducer = combineReducers({
+ isAppFetching
+})
+
+function configureStore () {
+ return createStore(rootReducer)
+}
+
+describe('react-route-transition-manager', () => {
+ it('be able to be rendered', () => {
+ const wrapper = shallow(
+
+
+
+
+
+ )
+ expect(wrapper.find('.app').length).toBe(1)
+ })
+ it('will render children by default', () => {
+ const wrapper = shallow(
+
+
+
+
+
+ )
+ expect(wrapper.find('.app').length).toBe(1)
+ })
+})
diff --git a/src/lib/index.js b/src/lib/index.js
index d279413..c749501 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -21,6 +21,7 @@ const TransitionManager = class TransitionManager extends Component {
onFetchEnd: PropTypes.func,
onError: PropTypes.func,
fetchInitial: PropTypes.bool,
+ showIndicatorOnInitial: PropTypes.bool,
FetchingIndicator: PropTypes.element,
ErrorIndicator: PropTypes.element,
SplashScreen: PropTypes.element
@@ -30,15 +31,16 @@ const TransitionManager = class TransitionManager extends Component {
isAppFetching: false
}
- constructor (props, context) {
- super(props, context)
- const { fetchInitial } = props
- if (fetchInitial) this.fetchRoutes()
+ componentWillMount () {
+ const { fetchInitial } = this.props
+ if (fetchInitial) this.fetchRoutes(this.props)
}
componentDidMount () {
+ const { fetchInitial, showIndicatorOnInitial } = this.props
this.node = document.createElement('div')
document.body.appendChild(this.node)
+ if (this.state.isAppFetching && fetchInitial && showIndicatorOnInitial) this.renderLoading(true)
}
componentWillReceiveProps (nextProps) {
@@ -122,7 +124,7 @@ const TransitionManager = class TransitionManager extends Component {
)
}
- if (fetchInitial) {
+ if (fetchInitial && isAppFetching && SplashScreen) {
return (
{SplashScreen}