design changes

src/actions/lists.js

@@ -123,7 +123,13 @@ export function fetchLists() {
     const lists = json.data;
     const listsObj = lists.reduce((obj, list) => {
       const newObj = { ...obj };
-      newObj[list.id] = list;
+      newObj[list.id] = {
+        dirty: true,
+        fetching: false,
+        todos: null,
+        editing: false,
+        ...list,
+      };
       return newObj;
     }, {});
 

src/components/ListActions.js

@@ -7,6 +7,7 @@ export default function ListActions({
   startCreateList,
   removeList,
   startEditList,
+  creating,
   list,
 }) {
   const editRemoveButtons = list
@@ -24,6 +25,7 @@ export default function ListActions({
       <button onClick={() => startCreateList()}>
         <FontAwesomeIcon icon={faPlus} />
       </button>
+      {!list && !creating ? 'add list' : null}
       {editRemoveButtons}
     </div>
   );
@@ -37,5 +39,6 @@ ListActions.propTypes = {
   startCreateList: PropTypes.func.isRequired,
   removeList: PropTypes.func.isRequired,
   startEditList: PropTypes.func.isRequired,
+  creating: PropTypes.bool.isRequired,
   list: PropTypes.string,
 };

src/components/Selector.js

@@ -58,13 +58,16 @@ export default function Selector({
       {elem.name}
     </option>
   ));
-  return (
-    <div id="listselector">
-      <select value={list} onChange={e => onChange(e.target.value)}>
-        {listElements}
-      </select>
-    </div>
-  );
+  if (list) {
+    return (
+      <div id="listselector">
+        <select value={list} onChange={e => onChange(e.target.value)}>
+          {listElements}
+        </select>
+      </div>
+    );
+  }
+  return null;
 }
 
 Selector.defaultProps = {
@@ -78,6 +81,6 @@ Selector.propTypes = {
   onChange: PropTypes.func.isRequired,
   editList: PropTypes.func.isRequired,
   addList: PropTypes.func.isRequired,
-  lists: PropTypes.func.isRequired,
+  lists: PropTypes.object.isRequired,
   dirty: PropTypes.bool.isRequired,
 };

src/components/Todos.js

@@ -6,12 +6,9 @@ import TodoListContainer from '../containers/TodoListContainer';
 import Header from './Header';
 
 export default function Todos({ user, loadLists, history }) {
-  if (user.dirty) {
-    return <div>loading</div>;
-  }
   if (user.user) {
     loadLists();
-  } else {
+  } else if (!user.dirty) {
     history.push('/login');
   }
   return (

src/containers/ListActionsContainer.js

@@ -5,6 +5,7 @@ import { startCreateList, startEditList, removeList } from '../actions/lists';
 function mapStateToProps(state) {
   return {
     list: state.lists.list,
+    creating: state.lists.creating,
   };
 }
 function mapDispatchToProps(dispatch) {