reorganize files

react/src/components/App.js

@@ -6,7 +6,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import './Container.css';
 import './App.css';
 
-import MainViewContainer from '../containers/MainViewContainer';
+import TodosView from './todolist/TodosView';
 import LoginForm from './user/LoginForm';
 import SignupForm from './user/SignupForm';
 
@@ -22,7 +22,7 @@ export default class App extends React.PureComponent {
         <CssBaseline />
         <Router>
           <div id="container">
-            <Route exact path="/" component={MainViewContainer} />
+            <Route exact path="/" component={TodosView} />
             <Route path="/login" component={LoginForm} />
             <Route path="/signup" component={SignupForm} />
           </div>

react/src/components/AppContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import App from '../components/App';
+import App from './App';
 
 import { loadUser } from '../actions/user';
 

react/src/components/Header.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import UserHeader from './UserHeader';
+import UserHeader from './user/UserHeader';
-import ListsContainer from '../containers/ListsContainer';
+import Lists from './lists/Lists';
 
 export default function Header() {
   return (
     <div id="header">
       <UserHeader />
-      <ListsContainer />
+      <Lists />
     </div>
   );
 }

react/src/components/MainView.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import TodosContainer from '../containers/TodosContainer';
-
-export default class MainView extends React.PureComponent {
-  componentDidUpdate() {
-    const { user, history } = this.props;
-    if (!user.user && !user.dirty) {
-      history.replace('/login');
-    }
-  }
-
-  render() {
-    return <TodosContainer />;
-  }
-}
-
-MainView.propTypes = {
-  user: PropTypes.any.isRequired,
-  history: PropTypes.any.isRequired,
-};

react/src/components/Todos.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Transition } from 'react-spring';
-
-import InputContainer from '../containers/InputContainer';
-import TodoListContainer from '../containers/TodoListContainer';
-import Header from './Header';
-import Filters from './Filters';
-
-export default function Todos({ list }) {
-  return (
-    <div id="todos">
-      <Header />
-      <Transition
-        from={{ opacity: 0, maxHeight: 0 }}
-        enter={{ opacity: 1, maxHeight: 38 }}
-        leave={{ opacity: 0, maxHeight: 0 }}
-      >
-        {list && (styles => <InputContainer styles={styles} />)}
-      </Transition>
-      <TodoListContainer />
-      <Transition
-        from={{ opacity: 0, maxHeight: 0 }}
-        enter={{ opacity: 1, maxHeight: 32 }}
-        leave={{ opacity: 0, maxHeight: 0 }}
-      >
-        {list && Filters}
-      </Transition>
-    </div>
-  );
-}
-
-Todos.propTypes = {
-  list: PropTypes.bool.isRequired,
-};

react/src/components/filters/FilterLink.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonBase } from '@material-ui/core';
-import setVisibilityFilter from '../actions/visibilityFilter';
+import setVisibilityFilter from '../../actions/visibilityFilter';
 
 function Link({ active, onClick, children }) {
   const classes = ['filter'];

react/src/components/filters/Filters.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import FilterLink from '../containers/FilterLink';
+import FilterLink from './FilterLink';
-import { VisibilityFilters } from '../actions/defs';
+import { VisibilityFilters } from '../../actions/defs';
 
 function Filters(styles) {
   return (

react/src/components/lists/ListActionsContainer.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
-import ListActions from '../components/ListActions';
+import ListActions from './ListActions';
 import {
   startCreateList,
   startEditList,
   removeList,
   stopCreateList,
   stopEditList,
-} from '../actions/lists';
+} from '../../actions/lists';
 
 function mapStateToProps(state) {
   return {

react/src/components/lists/Lists.js

@@ -1,10 +1,11 @@
+import { connect } from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import ListActionsContainer from '../containers/ListActionsContainer';
+import ListActionsContainer from './ListActionsContainer';
-import SelectorContainer from '../containers/SelectorContainer';
+import SelectorContainer from '../todolist/SelectorContainer';
 
-export default function Lists({ userLoaded, listsLoaded }) {
+function Lists({ userLoaded, listsLoaded }) {
   return (
     <div id="lists-header">
       {userLoaded &&
@@ -24,3 +25,12 @@ Lists.propTypes = {
   userLoaded: PropTypes.bool.isRequired,
   listsLoaded: PropTypes.bool.isRequired,
 };
+
+function mapStateToProps(state) {
+  return {
+    userLoaded: state.user.loaded,
+    listsLoaded: state.lists.loaded,
+  };
+}
+
+export default connect(mapStateToProps)(Lists);

react/src/components/todolist/SelectorContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
-import Selector from '../components/Selector';
+import Selector from '../lists/Selector';
-import { changeList, addList, editList } from '../actions/lists';
+import { changeList, addList, editList } from '../../actions/lists';
 
 function mapStateToProps(state) {
   return {

react/src/components/todolist/TodoListContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
-import TodoList from '../components/TodoList';
+import TodoList from './TodoList';
-import { toggleTodo, removeTodo, editTodo } from '../actions/todos';
+import { toggleTodo, removeTodo, editTodo } from '../../actions/todos';
 
 import getVisibleTodos from './getVisibleTodos';
 

react/src/components/todolist/TodosView.js

@@ -0,0 +1,59 @@
+import { connect } from 'react-redux';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Transition } from 'react-spring';
+
+import withRouter from 'react-router-dom/withRouter';
+import Input from '../todos/Input';
+import TodoListContainer from './TodoListContainer';
+import Header from '../Header';
+import Filters from '../filters/Filters';
+
+class Todos extends React.PureComponent {
+  componentDidUpdate() {
+    const { user, history } = this.props;
+    if (!user.user && !user.dirty) {
+      history.replace('/login');
+    }
+  }
+
+  render() {
+    const { list } = this.props;
+    return (
+      <div id="todos">
+        <Header />
+        <Transition
+          from={{ opacity: 0, maxHeight: 0 }}
+          enter={{ opacity: 1, maxHeight: 38 }}
+          leave={{ opacity: 0, maxHeight: 0 }}
+        >
+          {list && (styles => <Input styles={styles} />)}
+        </Transition>
+        <TodoListContainer />
+        <Transition
+          from={{ opacity: 0, maxHeight: 0 }}
+          enter={{ opacity: 1, maxHeight: 32 }}
+          leave={{ opacity: 0, maxHeight: 0 }}
+        >
+          {list && Filters}
+        </Transition>
+      </div>
+    );
+  }
+}
+
+Todos.propTypes = {
+  list: PropTypes.bool.isRequired,
+  user: PropTypes.any.isRequired,
+  history: PropTypes.any.isRequired,
+};
+
+function mapStateToProps(state) {
+  return {
+    list: Boolean(state.lists.list),
+    user: state.user,
+  };
+}
+
+export default withRouter(connect(mapStateToProps)(Todos));

react/src/components/todolist/getVisibleTodos.js

@@ -1,4 +1,4 @@
-import { VisibilityFilters } from '../actions/defs';
+import { VisibilityFilters } from '../../actions/defs';
 
 export default function getVisibleTodos(todos, filter) {
   switch (filter) {

react/src/components/todos/Input.js

@@ -1,7 +1,10 @@
+import { connect } from 'react-redux';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
+import { addTodo } from '../../actions/todos';
 
 function Input({ onClick, styles }) {
   let input;
@@ -40,4 +43,17 @@ Input.propTypes = {
   onClick: PropTypes.func.isRequired,
 };
 
-export default Input;
+function mapStateToProps(state, ownProps) {
+  return { ...ownProps };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    onClick: text => dispatch(addTodo(text)),
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Input);

react/src/components/user/FetchButton.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { ButtonBase } from '@material-ui/core';
 
-import { fetchLists } from '../actions/lists';
+import { fetchLists } from '../../actions/lists';
 
 function FetchButton({ onClick, children }) {
   return (

react/src/components/user/LogoutLink.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { ButtonBase } from '@material-ui/core';
 
-import { logout } from '../actions/user';
+import { logout } from '../../actions/user';
 
 function Link({ onClick, children }) {
   return (

react/src/components/user/UserHeader.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import LogoutLink from '../containers/LogoutLink';
+import LogoutLink from './LogoutLink';
-import FetchButton from '../containers/FetchButton';
+import FetchButton from './FetchButton';
-import Status from '../containers/Status';
+import Status from './Status';
 
 export default function UserHeader() {
   return (

react/src/containers/InputContainer.js

@@ -1,19 +0,0 @@
-import { connect } from 'react-redux';
-
-import Input from '../components/Input';
-import { addTodo } from '../actions/todos';
-
-function mapStateToProps(state, ownProps) {
-  return { ...ownProps };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    onClick: text => dispatch(addTodo(text)),
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Input);

react/src/containers/ListsContainer.js

@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-import Lists from '../components/Lists';
-
-function mapStateToProps(state) {
-  return {
-    userLoaded: state.user.loaded,
-    listsLoaded: state.lists.loaded,
-  };
-}
-
-export default connect(mapStateToProps)(Lists);

react/src/containers/MainViewContainer.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import MainView from '../components/MainView';
-
-function mapStateToProps(state) {
-  return {
-    user: state.user,
-  };
-}
-
-export default withRouter(connect(mapStateToProps)(MainView));

react/src/containers/TodosContainer.js

@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-
-import Todos from '../components/Todos';
-
-function mapStateToProps(state) {
-  return {
-    list: Boolean(state.lists.list),
-  };
-}
-
-export default connect(mapStateToProps)(Todos);

react/src/index.js

@@ -6,7 +6,7 @@ import { applyMiddleware, createStore, compose } from 'redux';
 import { offline } from '@redux-offline/redux-offline';
 import offlineConfig from '@redux-offline/redux-offline/lib/defaults';
 
-import AppContainer from './containers/AppContainer';
+import AppContainer from './components/AppContainer';
 import registerServiceWorker from './registerServiceWorker';
 import todoApp from './reducers';
 import { setToken } from './actions/util';