From 296b186321fb897ad9098f41079e50b2c83f4ac9 Mon Sep 17 00:00:00 2001 From: Stepan Usatiuk Date: Sat, 25 Aug 2018 18:54:18 +0300 Subject: [PATCH] reorganize files --- react/src/components/App.js | 4 +- .../AppContainer.js | 2 +- react/src/components/Header.js | 6 +- react/src/components/MainView.js | 21 ------- react/src/components/Todos.js | 35 ----------- .../filters}/FilterLink.js | 2 +- react/src/components/{ => filters}/Filters.js | 4 +- .../src/components/{ => lists}/ListActions.js | 0 .../lists}/ListActionsContainer.js | 4 +- react/src/components/{ => lists}/Lists.js | 16 ++++- react/src/components/{ => lists}/Selector.css | 0 react/src/components/{ => lists}/Selector.js | 0 .../todolist}/SelectorContainer.js | 4 +- react/src/components/{ => todolist}/Todo.js | 0 .../src/components/{ => todolist}/TodoList.js | 0 .../todolist}/TodoListContainer.js | 4 +- react/src/components/todolist/TodosView.js | 59 +++++++++++++++++++ .../todolist}/getVisibleTodos.js | 2 +- react/src/components/{ => todos}/Input.js | 18 +++++- .../user}/FetchButton.js | 2 +- .../user}/LogoutLink.js | 2 +- .../{containers => components/user}/Status.js | 0 react/src/components/{ => user}/UserHeader.js | 6 +- react/src/containers/InputContainer.js | 19 ------ react/src/containers/ListsContainer.js | 11 ---- react/src/containers/MainViewContainer.js | 12 ---- react/src/containers/TodosContainer.js | 11 ---- react/src/index.js | 2 +- 28 files changed, 111 insertions(+), 135 deletions(-) rename react/src/{containers => components}/AppContainer.js (90%) delete mode 100644 react/src/components/MainView.js delete mode 100644 react/src/components/Todos.js rename react/src/{containers => components/filters}/FilterLink.js (94%) rename react/src/components/{ => filters}/Filters.js (79%) rename react/src/components/{ => lists}/ListActions.js (100%) rename react/src/{containers => components/lists}/ListActionsContainer.js (89%) rename react/src/components/{ => lists}/Lists.js (59%) rename react/src/components/{ => lists}/Selector.css (100%) rename react/src/components/{ => lists}/Selector.js (100%) rename react/src/{containers => components/todolist}/SelectorContainer.js (81%) rename react/src/components/{ => todolist}/Todo.js (100%) rename react/src/components/{ => todolist}/TodoList.js (100%) rename react/src/{containers => components/todolist}/TodoListContainer.js (86%) create mode 100644 react/src/components/todolist/TodosView.js rename react/src/{containers => components/todolist}/getVisibleTodos.js (88%) rename react/src/components/{ => todos}/Input.js (71%) rename react/src/{containers => components/user}/FetchButton.js (93%) rename react/src/{containers => components/user}/LogoutLink.js (94%) rename react/src/{containers => components/user}/Status.js (100%) rename react/src/components/{ => user}/UserHeader.js (59%) delete mode 100644 react/src/containers/InputContainer.js delete mode 100644 react/src/containers/ListsContainer.js delete mode 100644 react/src/containers/MainViewContainer.js delete mode 100644 react/src/containers/TodosContainer.js diff --git a/react/src/components/App.js b/react/src/components/App.js index d2dc93a..15d58b9 100644 --- a/react/src/components/App.js +++ b/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 {
- +
diff --git a/react/src/containers/AppContainer.js b/react/src/components/AppContainer.js similarity index 90% rename from react/src/containers/AppContainer.js rename to react/src/components/AppContainer.js index 1b0781f..e141dbe 100644 --- a/react/src/containers/AppContainer.js +++ b/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'; diff --git a/react/src/components/Header.js b/react/src/components/Header.js index ce40ec2..dfc3dba 100644 --- a/react/src/components/Header.js +++ b/react/src/components/Header.js @@ -1,12 +1,12 @@ import React from 'react'; -import UserHeader from './UserHeader'; -import ListsContainer from '../containers/ListsContainer'; +import UserHeader from './user/UserHeader'; +import Lists from './lists/Lists'; export default function Header() { return ( ); } diff --git a/react/src/components/MainView.js b/react/src/components/MainView.js deleted file mode 100644 index cc4aa13..0000000 --- a/react/src/components/MainView.js +++ /dev/null @@ -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 ; - } -} - -MainView.propTypes = { - user: PropTypes.any.isRequired, - history: PropTypes.any.isRequired, -}; diff --git a/react/src/components/Todos.js b/react/src/components/Todos.js deleted file mode 100644 index 39ee967..0000000 --- a/react/src/components/Todos.js +++ /dev/null @@ -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 ( -
-
- - {list && (styles => )} - - - - {list && Filters} - -
- ); -} - -Todos.propTypes = { - list: PropTypes.bool.isRequired, -}; diff --git a/react/src/containers/FilterLink.js b/react/src/components/filters/FilterLink.js similarity index 94% rename from react/src/containers/FilterLink.js rename to react/src/components/filters/FilterLink.js index 0c570eb..f45a874 100644 --- a/react/src/containers/FilterLink.js +++ b/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']; diff --git a/react/src/components/Filters.js b/react/src/components/filters/Filters.js similarity index 79% rename from react/src/components/Filters.js rename to react/src/components/filters/Filters.js index 062068c..78b6fa5 100644 --- a/react/src/components/Filters.js +++ b/react/src/components/filters/Filters.js @@ -1,6 +1,6 @@ import React from 'react'; -import FilterLink from '../containers/FilterLink'; -import { VisibilityFilters } from '../actions/defs'; +import FilterLink from './FilterLink'; +import { VisibilityFilters } from '../../actions/defs'; function Filters(styles) { return ( diff --git a/react/src/components/ListActions.js b/react/src/components/lists/ListActions.js similarity index 100% rename from react/src/components/ListActions.js rename to react/src/components/lists/ListActions.js diff --git a/react/src/containers/ListActionsContainer.js b/react/src/components/lists/ListActionsContainer.js similarity index 89% rename from react/src/containers/ListActionsContainer.js rename to react/src/components/lists/ListActionsContainer.js index 321af3a..3b1364b 100644 --- a/react/src/containers/ListActionsContainer.js +++ b/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 { diff --git a/react/src/components/Lists.js b/react/src/components/lists/Lists.js similarity index 59% rename from react/src/components/Lists.js rename to react/src/components/lists/Lists.js index de1df95..19649a4 100644 --- a/react/src/components/Lists.js +++ b/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 SelectorContainer from '../containers/SelectorContainer'; +import ListActionsContainer from './ListActionsContainer'; +import SelectorContainer from '../todolist/SelectorContainer'; -export default function Lists({ userLoaded, listsLoaded }) { +function Lists({ userLoaded, listsLoaded }) { return (
{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); diff --git a/react/src/components/Selector.css b/react/src/components/lists/Selector.css similarity index 100% rename from react/src/components/Selector.css rename to react/src/components/lists/Selector.css diff --git a/react/src/components/Selector.js b/react/src/components/lists/Selector.js similarity index 100% rename from react/src/components/Selector.js rename to react/src/components/lists/Selector.js diff --git a/react/src/containers/SelectorContainer.js b/react/src/components/todolist/SelectorContainer.js similarity index 81% rename from react/src/containers/SelectorContainer.js rename to react/src/components/todolist/SelectorContainer.js index 7e06047..7335350 100644 --- a/react/src/containers/SelectorContainer.js +++ b/react/src/components/todolist/SelectorContainer.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; -import Selector from '../components/Selector'; -import { changeList, addList, editList } from '../actions/lists'; +import Selector from '../lists/Selector'; +import { changeList, addList, editList } from '../../actions/lists'; function mapStateToProps(state) { return { diff --git a/react/src/components/Todo.js b/react/src/components/todolist/Todo.js similarity index 100% rename from react/src/components/Todo.js rename to react/src/components/todolist/Todo.js diff --git a/react/src/components/TodoList.js b/react/src/components/todolist/TodoList.js similarity index 100% rename from react/src/components/TodoList.js rename to react/src/components/todolist/TodoList.js diff --git a/react/src/containers/TodoListContainer.js b/react/src/components/todolist/TodoListContainer.js similarity index 86% rename from react/src/containers/TodoListContainer.js rename to react/src/components/todolist/TodoListContainer.js index ec09c99..6f53881 100644 --- a/react/src/containers/TodoListContainer.js +++ b/react/src/components/todolist/TodoListContainer.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; -import TodoList from '../components/TodoList'; -import { toggleTodo, removeTodo, editTodo } from '../actions/todos'; +import TodoList from './TodoList'; +import { toggleTodo, removeTodo, editTodo } from '../../actions/todos'; import getVisibleTodos from './getVisibleTodos'; diff --git a/react/src/components/todolist/TodosView.js b/react/src/components/todolist/TodosView.js new file mode 100644 index 0000000..da77575 --- /dev/null +++ b/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 ( +
+
+ + {list && (styles => )} + + + + {list && Filters} + +
+ ); + } +} + +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)); diff --git a/react/src/containers/getVisibleTodos.js b/react/src/components/todolist/getVisibleTodos.js similarity index 88% rename from react/src/containers/getVisibleTodos.js rename to react/src/components/todolist/getVisibleTodos.js index 64c8f8e..751d4ef 100644 --- a/react/src/containers/getVisibleTodos.js +++ b/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) { diff --git a/react/src/components/Input.js b/react/src/components/todos/Input.js similarity index 71% rename from react/src/components/Input.js rename to react/src/components/todos/Input.js index aca5493..25f05ac 100644 --- a/react/src/components/Input.js +++ b/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); diff --git a/react/src/containers/FetchButton.js b/react/src/components/user/FetchButton.js similarity index 93% rename from react/src/containers/FetchButton.js rename to react/src/components/user/FetchButton.js index 87d9e2b..5b11136 100644 --- a/react/src/containers/FetchButton.js +++ b/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 ( diff --git a/react/src/containers/LogoutLink.js b/react/src/components/user/LogoutLink.js similarity index 94% rename from react/src/containers/LogoutLink.js rename to react/src/components/user/LogoutLink.js index 63ee862..1a8fb5f 100644 --- a/react/src/containers/LogoutLink.js +++ b/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 ( diff --git a/react/src/containers/Status.js b/react/src/components/user/Status.js similarity index 100% rename from react/src/containers/Status.js rename to react/src/components/user/Status.js diff --git a/react/src/components/UserHeader.js b/react/src/components/user/UserHeader.js similarity index 59% rename from react/src/components/UserHeader.js rename to react/src/components/user/UserHeader.js index eb9cbab..6ad914d 100644 --- a/react/src/components/UserHeader.js +++ b/react/src/components/user/UserHeader.js @@ -1,8 +1,8 @@ import React from 'react'; -import LogoutLink from '../containers/LogoutLink'; -import FetchButton from '../containers/FetchButton'; -import Status from '../containers/Status'; +import LogoutLink from './LogoutLink'; +import FetchButton from './FetchButton'; +import Status from './Status'; export default function UserHeader() { return ( diff --git a/react/src/containers/InputContainer.js b/react/src/containers/InputContainer.js deleted file mode 100644 index d260ddc..0000000 --- a/react/src/containers/InputContainer.js +++ /dev/null @@ -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); diff --git a/react/src/containers/ListsContainer.js b/react/src/containers/ListsContainer.js deleted file mode 100644 index 845a213..0000000 --- a/react/src/containers/ListsContainer.js +++ /dev/null @@ -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); diff --git a/react/src/containers/MainViewContainer.js b/react/src/containers/MainViewContainer.js deleted file mode 100644 index aca8084..0000000 --- a/react/src/containers/MainViewContainer.js +++ /dev/null @@ -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)); diff --git a/react/src/containers/TodosContainer.js b/react/src/containers/TodosContainer.js deleted file mode 100644 index c083770..0000000 --- a/react/src/containers/TodosContainer.js +++ /dev/null @@ -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); diff --git a/react/src/index.js b/react/src/index.js index 0db2e97..290c761 100644 --- a/react/src/index.js +++ b/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';