{
input = node;
@@ -36,6 +36,7 @@ function Input(props) {
}
Input.propTypes = {
+ styles: PropTypes.any.isRequired,
onClick: PropTypes.func.isRequired,
};
diff --git a/react/src/components/MainView.js b/react/src/components/MainView.js
new file mode 100644
index 0000000..cc4aa13
--- /dev/null
+++ b/react/src/components/MainView.js
@@ -0,0 +1,21 @@
+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/Selector.js b/react/src/components/Selector.js
index 5a9f621..3d725a4 100644
--- a/react/src/components/Selector.js
+++ b/react/src/components/Selector.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Select, MenuItem } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import CheckIcon from '@material-ui/icons/Check';
-import { Spring, animated } from 'react-spring';
+import { Transition, animated } from 'react-spring';
import './Selector.css';
@@ -28,65 +28,83 @@ export default function Selector({
if (creating) {
let input = null;
return (
-
+
+ )}
+
);
}
if (editing) {
let input = null;
return (
-
+
+ )}
+
);
}
if (list) {
return (
-
+
);
}
return null;
diff --git a/react/src/components/Todos.js b/react/src/components/Todos.js
index d454bab..39ee967 100644
--- a/react/src/components/Todos.js
+++ b/react/src/components/Todos.js
@@ -1,32 +1,35 @@
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 class Todos extends React.PureComponent {
- componentDidUpdate() {
- const { user, history } = this.props;
- if (!user.user && !user.dirty) {
- history.replace('/login');
- }
- }
-
- render() {
- return (
-
-
-
-
-
-
- );
- }
+export default function Todos({ list }) {
+ return (
+
+
+
+ {list && (styles => )}
+
+
+
+ {list && Filters}
+
+
+ );
}
Todos.propTypes = {
- history: PropTypes.object.isRequired,
- user: PropTypes.object.isRequired,
+ list: PropTypes.bool.isRequired,
};
diff --git a/react/src/containers/InputContainer.js b/react/src/containers/InputContainer.js
index da97978..d260ddc 100644
--- a/react/src/containers/InputContainer.js
+++ b/react/src/containers/InputContainer.js
@@ -3,6 +3,10 @@ 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)),
@@ -10,6 +14,6 @@ function mapDispatchToProps(dispatch) {
}
export default connect(
- null,
+ mapStateToProps,
mapDispatchToProps,
)(Input);
diff --git a/react/src/containers/MainViewContainer.js b/react/src/containers/MainViewContainer.js
new file mode 100644
index 0000000..aca8084
--- /dev/null
+++ b/react/src/containers/MainViewContainer.js
@@ -0,0 +1,12 @@
+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
index ab1563f..c083770 100644
--- a/react/src/containers/TodosContainer.js
+++ b/react/src/containers/TodosContainer.js
@@ -1,12 +1,11 @@
import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
import Todos from '../components/Todos';
function mapStateToProps(state) {
return {
- user: state.user,
+ list: Boolean(state.lists.list),
};
}
-export default withRouter(connect(mapStateToProps)(Todos));
+export default connect(mapStateToProps)(Todos);