small fixes

src/actions/util.js

@@ -1,4 +1,4 @@
-export const API_ROOT = 'http://localhost:4000';
+export const API_ROOT = 'http://localhost:4000/api';
 
 export function getToken() {
   return localStorage.getItem('jwt');

src/components/App.js

@@ -11,7 +11,7 @@ import LoginForm from '../components/user/LoginForm';
 import SignupForm from '../components/user/SignupForm';
 
 export default class App extends React.Component {
-  componentWillMount() {
+  componentDidMount() {
     this.props.loadUser();
   }
 

src/components/Header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import FilterLink from '../containers/FilterLink';
 import LogoutLink from '../containers/LogoutLink';
 import { VisibilityFilters } from '../actions/todos';
-import ListsContainer from '../containers/ListsContainer';
+import Lists from '../components/Lists';
 
 export default function Header() {
   return (
@@ -11,7 +11,7 @@ export default function Header() {
         <LogoutLink>logout</LogoutLink>
       </div>
       <div id="lists-header">
-        <ListsContainer />
+        <Lists />
         <div id="filters">
           <FilterLink filter={VisibilityFilters.SHOW_ALL}>all</FilterLink>
           <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>active</FilterLink>

src/components/Input.js

@@ -5,7 +5,9 @@ function Input(props) {
   let input;
 
   function submit() {
-    props.onClick(input.value);
+    if (input.value.trim() !== '') {
+      props.onClick(input.value);
+    }
     input.value = '';
   }
 

src/components/Selector.js

@@ -13,13 +13,8 @@ export default function Selector({
   creating,
   addList,
   editList,
-  listObjs,
+  dirty,
 }) {
-  const listElements = lists.map(elem => (
-    <option key={elem.id} value={elem.id}>
-      {elem.name}
-    </option>
-  ));
   if (creating) {
     let input = null;
     return (
@@ -45,7 +40,7 @@ export default function Selector({
           ref={(node) => {
             input = node;
           }}
-          defaultValue={listObjs.lists[list].name}
+          defaultValue={lists.lists[list].name}
           id="input"
           type="text"
         />
@@ -55,6 +50,14 @@ export default function Selector({
       </div>
     );
   }
+  if (list === null && dirty) {
+    return <div id="listselector">loading</div>;
+  }
+  const listElements = Object.values(lists.lists).map(elem => (
+    <option key={elem.id} value={elem.id}>
+      {elem.name}
+    </option>
+  ));
   return (
     <div id="listselector">
       <select value={list} onChange={e => onChange(e.target.value)}>
@@ -69,14 +72,12 @@ Selector.defaultProps = {
 };
 
 Selector.propTypes = {
-  lists: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-  })).isRequired,
   list: PropTypes.string,
   editing: PropTypes.bool.isRequired,
   creating: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   editList: PropTypes.func.isRequired,
   addList: PropTypes.func.isRequired,
-  listObjs: PropTypes.func.isRequired,
+  lists: PropTypes.func.isRequired,
+  dirty: PropTypes.bool.isRequired,
 };

src/containers/ListsContainer.js

@@ -1,37 +0,0 @@
-import { connect } from 'react-redux';
-import Lists from '../components/Lists';
-import {
-  changeList,
-  removeList,
-  addList,
-  editList,
-  startCreateList,
-  startEditList,
-} from '../actions/lists';
-
-function mapStateToProps(state) {
-  const editing = state.lists.lists[state.lists.list]
-    ? state.lists.lists[state.lists.list].editing
-    : false;
-  return {
-    lists: Object.values(state.lists.lists),
-    listObjs: state.lists,
-    list: state.lists.list,
-    editing,
-    creating: state.lists.creating,
-    dirty: state.lists.dirty,
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    onChange: list => dispatch(changeList(list)),
-    addList: name => dispatch(addList(name)),
-    removeList: id => dispatch(removeList(id)),
-    editList: (id, name) => dispatch(editList(id, name)),
-    startCreateList: () => dispatch(startCreateList()),
-    startEditList: () => dispatch(startEditList()),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Lists);

src/containers/SelectorContainer.js

@@ -3,15 +3,16 @@ import Selector from '../components/Selector';
 import { changeList, addList, editList } from '../actions/lists';
 
 function mapStateToProps(state) {
-  const editing = state.lists.lists[state.lists.list]
-    ? state.lists.lists[state.lists.list].editing
-    : false;
+  const editing =
+    state.lists.list && !state.lists.dirty
+      ? state.lists.lists[state.lists.list].editing
+      : false;
   return {
-    lists: Object.values(state.lists.lists),
-    listObjs: state.lists,
+    lists: state.lists,
     list: state.lists.list,
     editing,
     creating: state.lists.creating,
+    dirty: state.lists.dirty,
   };
 }
 

src/reducers/list.js

@@ -13,7 +13,7 @@ export default function todos(
   state = {
     dirty: true,
     fetching: false,
-    todos: [],
+    todos: null,
     editing: false,
   },
   action,

src/reducers/lists.js

@@ -26,9 +26,9 @@ export default function lists(
   state = {
     dirty: true,
     fetching: false,
-    lists: {},
+    lists: null,
     creating: false,
-    list: '',
+    list: null,
   },
   action,
 ) {