refactor lists

src/components/Lists.js

@@ -1,61 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import Selector from './Selector';
-import ListActions from './ListActions';
+import ListActionsContainer from '../containers/ListActionsContainer';
+import SelectorContainer from '../containers/SelectorContainer';
 
-export default function Lists({
-  list,
-  lists,
-  onChange,
-  addList,
-  creating,
-  editing,
-  removeList,
-  startCreateList,
-  startEditList,
-  editList,
-  listObjs,
-}) {
-  const selectorProps = {
-    list,
-    lists,
-    creating,
-    editing,
-    onChange,
-    editList,
-    addList,
-    listObjs,
-  };
-  const actionsProps = {
-    startCreateList,
-    removeList,
-    startEditList,
-    list,
-  };
+export default function Lists() {
   return (
     <div id="lists">
-      <ListActions {...actionsProps} />
-      <Selector {...selectorProps} />
+      <ListActionsContainer />
+      <SelectorContainer />
     </div>
   );
 }
-
-Lists.defaultProps = {
-  list: '',
-};
-
-Lists.propTypes = {
-  lists: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-  })).isRequired,
-  list: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  addList: PropTypes.func.isRequired,
-  removeList: PropTypes.func.isRequired,
-  editList: PropTypes.func.isRequired,
-  startCreateList: PropTypes.func.isRequired,
-  startEditList: PropTypes.func.isRequired,
-  creating: PropTypes.bool.isRequired,
-  editing: PropTypes.bool.isRequired,
-  listObjs: PropTypes.any.isRequired,
-};

src/containers/ListActionsContainer.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import ListActions from '../components/ListActions';
+import { startCreateList, startEditList, removeList } from '../actions/lists';
+
+function mapStateToProps(state) {
+  return {
+    list: state.lists.list,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    startCreateList: () => dispatch(startCreateList()),
+    startEditList: () => dispatch(startEditList()),
+    removeList: () => dispatch(removeList()),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ListActions);

src/containers/SelectorContainer.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+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;
+  return {
+    lists: Object.values(state.lists.lists),
+    listObjs: state.lists,
+    list: state.lists.list,
+    editing,
+    creating: state.lists.creating,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    onChange: list => dispatch(changeList(list)),
+    addList: name => dispatch(addList(name)),
+    editList: (id, name) => dispatch(editList(id, name)),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Selector);