Refactor app using hooks

client/components/molecules/AddTodo/AddTodo.js

@@ -1,8 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Button from '_atoms/Button';
 
-export default function AddTodo({ text, updateText, addTodo }) {
+import useKeypress from '_hooks/useKeypress';
+
+export default function AddTodo({ addTodo }) {
+  const [text, setText] = useState('');
+
+  const onAddTodo = () => {
+    if (text) {
+      addTodo(text);
+      setText('');
+    }
+  };
+
+  useKeypress('Enter', onAddTodo);
+
+  const updateText = e => setText(e.target.value);
+
+
   return (
     <div className="add-todo columns is-gapless">
       <div className="column is-10">
@@ -11,7 +27,7 @@ export default function AddTodo({ text, updateText, addTodo }) {
       <div className="column is-2">
         <Button
           style={{ width: '100%' }}
-          onClick={addTodo}
+          onClick={onAddTodo}
           label="Add"
           type="success"
         />
@@ -21,7 +37,5 @@ export default function AddTodo({ text, updateText, addTodo }) {
 }
 
 AddTodo.propTypes = {
-  text: PropTypes.string.isRequired,
-  updateText: PropTypes.func.isRequired,
   addTodo: PropTypes.func.isRequired,
 };

client/components/molecules/AddTodo/index.js

@@ -1,12 +1,12 @@
 import * as R from 'ramda';
 import { connect } from 'react-redux';
 import { attemptAddTodo } from '_thunks/todos';
-import AddTodoContainer from './AddTodoContainer';
+import AddTodo from './AddTodo';
 
 const mapStateToProps = R.pick([]);
 
 const mapDispatchToProps = dispatch => ({
   addTodo: text => dispatch(attemptAddTodo(text)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(AddTodoContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(AddTodo);

client/components/organisms/SettingsMenu/SettingsMenu.js

@@ -2,9 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
+import R from '_utils/ramda';
 
-export default function SettingsMenu(props) {
-  const { pathname, logout } = props;
+export default function SettingsMenu({ pathname, attemptLogout }) {
+  const logout = () =>
+    attemptLogout()
+      .catch(R.identity);
 
   const profileClasses = classNames({
     'is-active': pathname.includes('profile') || pathname === '/settings' || pathname === '/settings/',
@@ -45,5 +48,5 @@ export default function SettingsMenu(props) {
 
 SettingsMenu.propTypes = {
   pathname: PropTypes.string.isRequired,
-  logout: PropTypes.func.isRequired,
+  attemptLogout: PropTypes.func.isRequired,
 };

client/components/organisms/SettingsMenu/index.js

@@ -1,12 +1,12 @@
 import R from '_utils/ramda';
 import { connect } from 'react-redux';
 import { attemptLogout } from '_thunks/auth';
-import SettingsMenuContainer from './SettingsMenuContainer';
+import SettingsMenu from './SettingsMenu';
 
 const mapStateToProps = R.pick([]);
 
 const mapDispatchToProps = dispatch => ({
   attemptLogout: () => dispatch(attemptLogout()),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(SettingsMenuContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(SettingsMenu);

client/components/pages/HomePage/HomePage.js

@@ -1,6 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import R from '_utils/ramda';
+
+export default function HomePage({ user, pushToLogin }) {
+  useEffect(() => {
+    if (R.isEmpty(user)) {
+      pushToLogin();
+    }
+  }, []);
 
-export default function HomePage() {
   return (
     <div className="home-page page">
       <div className="section">
@@ -13,3 +21,8 @@ export default function HomePage() {
     </div>
   );
 }
+
+HomePage.propTypes = {
+  user: PropTypes.shape({}).isRequired,
+  pushToLogin: PropTypes.func.isRequired,
+};

client/components/pages/HomePage/index.js

@@ -1,12 +1,12 @@
 import R from '_utils/ramda';
 import { connect } from 'react-redux';
 import { push } from 'connected-react-router';
-import HomePageContainer from './HomePageContainer';
+import HomePage from './HomePage';
 
 const mapStateToProps = R.pick(['user']);
 
 const mapDispatchToProps = dispatch => ({
   pushToLogin: () => dispatch(push('/login')),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(HomePageContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

client/components/pages/LoginPage/LoginPage.js

@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import R from '_utils/ramda';
 import LoginSection from '_templates/LoginSection';
 
-export default function LoginPage() {
+export default function LoginPage({ user, pushToHome }) {
+  useEffect(() => {
+    if (!R.isEmpty(user)) {
+      pushToHome();
+    }
+  }, []);
+
   return (
     <div className="login-page page">
       <LoginSection />
     </div>
   );
 }
+
+LoginPage.propTypes = {
+  user: PropTypes.shape({}).isRequired,
+  pushToHome: PropTypes.func.isRequired,
+};

client/components/pages/LoginPage/index.js

@@ -1,12 +1,12 @@
 import R from '_utils/ramda';
 import { connect } from 'react-redux';
 import { push } from 'connected-react-router';
-import LoginPageContainer from './LoginPageContainer';
+import LoginPage from './LoginPage';
 
 const mapStateToProps = R.pick(['user']);
 
 const mapDispatchToProps = dispatch => ({
   pushToHome: () => dispatch(push('/home')),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(LoginPageContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);

client/components/pages/RegisterPage/RegisterPage.js

@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import R from '_utils/ramda';
 import Register from '_templates/RegisterSection';
 
-export default function RegisterPage() {
+export default function RegisterPage({ user, pushToHome }) {
+  useEffect(() => {
+    if (!R.isEmpty(user)) {
+      pushToHome();
+    }
+  }, []);
+
   return (
     <div className="register-page page">
       <Register />
     </div>
   );
 }
+
+RegisterPage.propTypes = {
+  user: PropTypes.shape({}).isRequired,
+  pushToHome: PropTypes.func.isRequired,
+};

client/components/pages/RegisterPage/index.js

@@ -1,12 +1,12 @@
 import R from '_utils/ramda';
 import { connect } from 'react-redux';
 import { push } from 'connected-react-router';
-import RegisterPageContainer from './RegisterPageContainer';
+import RegisterPage from './RegisterPage';
 
 const mapStateToProps = R.pick(['user']);
 
 const mapDispatchToProps = dispatch => ({
   pushToHome: () => dispatch(push('/home')),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(RegisterPageContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(RegisterPage);