move loading todos out of render

react/src/actions/user.js

@@ -1,4 +1,5 @@
 import { API_ROOT, getToken } from './util';
+import { loadLists } from './lists';
 
 export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
 export const LOGIN_FAIL = 'LOGIN_FAIL';
@@ -40,6 +41,7 @@ export function loadUser() {
       if (json.success) {
         localStorage.setItem('jwt', json.data.jwt);
         dispatch(loginSuccess(json.data));
+        dispatch(loadLists());
       } else {
         dispatch(loginFail(json.error));
       }
@@ -63,6 +65,7 @@ export function login(user) {
     if (json.success) {
       localStorage.setItem('jwt', json.data.jwt);
       dispatch(loginSuccess(json.data));
+      dispatch(loadLists());
     } else {
       dispatch(loginFail(json.error));
     }
@@ -91,6 +94,7 @@ export function signup(user) {
     if (json.success) {
       localStorage.setItem('jwt', json.data.jwt);
       dispatch(signupSuccess(json.data));
+      dispatch(loadLists());
     } else {
       dispatch(signupFail(json.error));
     }

react/src/components/Todos.js

@@ -5,23 +5,24 @@ import InputContainer from '../containers/InputContainer';
 import TodoListContainer from '../containers/TodoListContainer';
 import Header from './Header';
 
-export default function Todos({ user, loadLists, history }) {
-  if (user.user) {
-    loadLists();
-  } else if (!user.dirty) {
-    history.push('/login');
+export default class Todos extends React.Component {
+  componentDidUpdate() {
+    if (!this.props.user.user && !this.props.user.dirty) {
+      this.props.history.push('/login');
+    }
+  }
+  render() {
+    return (
+      <div id="todos">
+        <Header />
+        <InputContainer />
+        <TodoListContainer />
+      </div>
+    );
   }
-  return (
-    <div id="todos">
-      <Header />
-      <InputContainer />
-      <TodoListContainer />
-    </div>
-  );
 }
 
 Todos.propTypes = {
-  loadLists: PropTypes.func.isRequired,
   history: PropTypes.object.isRequired,
   user: PropTypes.object.isRequired,
 };

react/src/containers/TodosContainer.js

@@ -3,23 +3,10 @@ import { withRouter } from 'react-router-dom';
 
 import Todos from '../components/Todos';
 
-import { loadLists } from '../actions/lists';
-
 function mapStateToProps(state) {
   return {
     user: state.user,
   };
 }
 
-function mapDispatchToProps(dispatch) {
-  return {
-    loadLists: () => dispatch(loadLists()),
-  };
-}
-
-export default withRouter(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-  )(Todos),
-);
+export default withRouter(connect(mapStateToProps)(Todos));