move user errors to UserErrors,

reformat using Prettier

.eslintrc.json

@@ -1,6 +1,12 @@
 {
-  "extends": ["airbnb", "plugin:jest/recommended"],
-  "plugins": ["jest"],
+  "extends": [
+    "airbnb",
+    "plugin:jest/recommended",
+    "prettier",
+    "prettier/react"
+  ],
+
+  "plugins": ["jest", "prettier"],
   "rules": {
     "react/jsx-filename-extension": [
       1,
@@ -15,8 +21,8 @@
         "allowTernary": true
       }
     ],
-    "max-len": "off",
-    "react/forbid-prop-types": "off"
+    "react/forbid-prop-types": "off",
+    "prettier/prettier": "error"
   },
   "env": {
     "browser": true

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

src/actions/lists.js

@@ -39,7 +39,7 @@ function addListToState(list) {
 }
 
 export function addList(name) {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(invalidateLists());
     const response = await fetch(`${API_ROOT}/lists`, {
       body: JSON.stringify({ name }),
@@ -112,7 +112,7 @@ export function editList(name) {
 }
 
 export function fetchLists() {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(requestLists());
     const response = await fetch(`${API_ROOT}/lists`, {
       headers: {
@@ -142,7 +142,7 @@ export function fetchLists() {
 }
 
 export function loadLists() {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(requestLists());
 
     try {

src/actions/todos.js

@@ -68,7 +68,7 @@ function removeTodoFromList(id) {
 }
 
 export function removeTodo(id) {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(invalidateTodos());
     const response = await fetch(`${API_ROOT}/todos/${id}`, {
       headers: {
@@ -113,7 +113,7 @@ function editTodoInList(id, todo) {
 }
 
 export function editTodo(id, text) {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(invalidateTodos());
     const response = await fetch(`${API_ROOT}/todos/${id}`, {
       body: JSON.stringify({ text }),
@@ -133,7 +133,7 @@ export function editTodo(id, text) {
 }
 
 export function fetchTodos(list) {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(requestTodos(list));
     const response = await fetch(`${API_ROOT}/lists/${list.id}/todos`, {
       headers: {

src/actions/user.js

@@ -27,7 +27,7 @@ function validateUser() {
 }
 
 export function loadUser() {
-  return async (dispatch) => {
+  return async dispatch => {
     if (getToken()) {
       const response = await fetch(`${API_ROOT}/users/user`, {
         headers: {
@@ -50,7 +50,7 @@ export function loadUser() {
 }
 
 export function login(user) {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(startLogin());
     const response = await fetch(`${API_ROOT}/users/login`, {
       body: JSON.stringify(user),
@@ -78,7 +78,7 @@ function signupFail(error) {
 }
 
 export function signup(user) {
-  return async (dispatch) => {
+  return async dispatch => {
     dispatch(startLogin());
     const response = await fetch(`${API_ROOT}/users`, {
       body: JSON.stringify(user),

src/components/Container.css

@@ -1,9 +1,9 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
 
 body {
   background: white;
   color: black;
-  font-family: "Roboto";
+  font-family: 'Roboto';
   user-select: none;
 }
 

src/components/Input.js

@@ -14,7 +14,7 @@ function Input(props) {
   return (
     <div id="inputs">
       <input
-        ref={(node) => {
+        ref={node => {
           input = node;
         }}
         id="input"

src/components/ListActions.js

@@ -12,13 +12,13 @@ export default function ListActions({
 }) {
   const editRemoveButtons = list
     ? [
-      <button onClick={() => removeList()}>
-        <FontAwesomeIcon icon={faTrash} />
-      </button>,
-      <button onClick={() => startEditList()}>
-        <FontAwesomeIcon icon={faEdit} />
-      </button>,
-    ]
+        <button onClick={() => removeList()}>
+          <FontAwesomeIcon icon={faTrash} />
+        </button>,
+        <button onClick={() => startEditList()}>
+          <FontAwesomeIcon icon={faEdit} />
+        </button>,
+      ]
     : null;
   return (
     <div id="listactions">

src/components/Selector.js

@@ -20,7 +20,7 @@ export default function Selector({
     return (
       <div id="listselector">
         <input
-          ref={(node) => {
+          ref={node => {
             input = node;
           }}
           id="input"
@@ -37,7 +37,7 @@ export default function Selector({
     return (
       <div id="listselector">
         <input
-          ref={(node) => {
+          ref={node => {
             input = node;
           }}
           defaultValue={lists.lists[list].name}

src/components/Todo.js

@@ -63,7 +63,7 @@ class Todo extends React.Component {
         <textarea
           className="todo--input"
           defaultValue={this.props.todo.text}
-          ref={(node) => {
+          ref={node => {
             input = node;
           }}
         />
@@ -75,30 +75,30 @@ class Todo extends React.Component {
     );
     const buttons = this.state.editing
       ? [
-        <animated.button
-          key="save"
-          className="save"
-          onClick={() => this.stopEdit(input.value)}
-        >
-          <FontAwesomeIcon icon={faCheck} />
-        </animated.button>,
-      ]
+          <animated.button
+            key="save"
+            className="save"
+            onClick={() => this.stopEdit(input.value)}
+          >
+            <FontAwesomeIcon icon={faCheck} />
+          </animated.button>,
+        ]
       : [
-        <animated.button
-          key="remove"
-          className={deleteClasses.join(' ')}
-          onClick={this.props.removeTodo}
-        >
-          <FontAwesomeIcon icon={faTrash} />
-        </animated.button>,
-        <animated.button
-          key="edit"
-          className={editClasses.join(' ')}
-          onClick={this.startEdit}
-        >
-          <FontAwesomeIcon icon={faEdit} />
-        </animated.button>,
-      ];
+          <animated.button
+            key="remove"
+            className={deleteClasses.join(' ')}
+            onClick={this.props.removeTodo}
+          >
+            <FontAwesomeIcon icon={faTrash} />
+          </animated.button>,
+          <animated.button
+            key="edit"
+            className={editClasses.join(' ')}
+            onClick={this.startEdit}
+          >
+            <FontAwesomeIcon icon={faEdit} />
+          </animated.button>,
+        ];
     return (
       <animated.li
         style={this.props.style}

src/components/TodoList.js

@@ -36,11 +36,13 @@ export default function TodosContainer({
 }
 
 TodosContainer.propTypes = {
-  todos: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-    completed: PropTypes.bool.isRequired,
-  })).isRequired,
+  todos: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      completed: PropTypes.bool.isRequired,
+    }),
+  ).isRequired,
   removeTodo: PropTypes.func.isRequired,
   toggleTodo: PropTypes.func.isRequired,
   editTodo: PropTypes.func.isRequired,

src/components/user/LoginForm.js

@@ -6,22 +6,14 @@ import PropTypes from 'prop-types';
 import InputField from './InputField';
 
 import '../Form.css';
+import UserErrors from './UserErrors';
 
 import { login, reset } from '../../actions/user';
 
-function LoginForm({
-  handleSubmit, onLogin, user, history, resetUser,
-}) {
-  let errors;
-  if (user.errors) {
-    if (user.errors.name === 'AuthenticationError') {
-      errors = <div className="error">Wrong username or password</div>;
-    }
-  }
+function LoginForm({ handleSubmit, onLogin, user, history, resetUser }) {
   if (user.user) {
     history.push('/');
   }
-
   return (
     <div>
       <div id="user-header">
@@ -35,7 +27,7 @@ function LoginForm({
         </button>
       </div>
       <div id="form">
-        {errors}
+        <UserErrors user={user} />
         <form onSubmit={handleSubmit(onLogin)}>
           <Field
             label="username"

src/components/user/SignupForm.js

@@ -5,6 +5,7 @@ import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import InputField from './InputField';
+import UserErrors from './UserErrors';
 
 import '../Form.css';
 
@@ -18,22 +19,7 @@ function validate(values) {
   return errors;
 }
 
-function SignupForm({
-  handleSubmit, onSignup, user, history, resetUser,
-}) {
-  let errors;
-  if (user.errors) {
-    if (user.errors.name === 'AuthenticationError') {
-      errors = <div className="error">Wrong username or password</div>;
-    }
-    if (user.errors.name === 'ValidationError') {
-      if (user.errors.message.split(' ').includes('unique.')) {
-        errors = <div className="error">User already exists</div>;
-      } else {
-        errors = <div className="error">Validation error</div>;
-      }
-    }
-  }
+function SignupForm({ handleSubmit, onSignup, user, history, resetUser }) {
   if (user.user) {
     history.push('/');
   }
@@ -50,7 +36,7 @@ function SignupForm({
         </button>
       </div>
       <div id="form">
-        {errors}
+        <UserErrors user={user} />
         <form onSubmit={handleSubmit(onSignup)}>
           <Field
             label="username"

src/components/user/UserErrors.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+function UserErrors({ user }) {
+  let errors = [];
+  if (user.errors) {
+    if (user.errors.name === 'AuthenticationError') {
+      errors.push(
+        <div key="wrongauth" className="error">
+          Wrong username or password
+        </div>,
+      );
+    }
+    if (user.errors.name === 'ValidationError') {
+      if (user.errors.message.split(' ').includes('unique.')) {
+        errors.push(
+          <div key="exists" className="error">
+            User already exists
+          </div>,
+        );
+      } else {
+        errors.push(
+          <div key="invalid" className="error">
+            Validation error
+          </div>,
+        );
+      }
+    }
+  }
+  return errors || null;
+}
+
+export default UserErrors;

src/containers/FilterLink.js

@@ -11,7 +11,7 @@ function Link({ active, onClick, children }) {
   return (
     <button
       className={classes.join(' ')}
-      onClick={(e) => {
+      onClick={e => {
         e.preventDefault();
         onClick();
       }}

src/containers/LogoutLink.js

@@ -9,7 +9,7 @@ function Link({ onClick, children }) {
   return (
     <button
       className={classes.join(' ')}
-      onClick={(e) => {
+      onClick={e => {
         e.preventDefault();
         onClick();
       }}

src/reducers/list.js

@@ -44,7 +44,9 @@ export default function todos(
     case EDIT_TODO:
       return {
         ...state,
-        todos: state.todos.map(todo => (todo.id === action.id ? action.todo : todo)),
+        todos: state.todos.map(
+          todo => (todo.id === action.id ? action.todo : todo),
+        ),
       };
     case REQUEST_TODOS:
       return {
@@ -59,10 +61,12 @@ export default function todos(
     case TOGGLE_TODO: {
       return {
         ...state,
-        todos: state.todos.map(todo =>
-          (todo.id === action.id
-            ? { ...todo, completed: !todo.completed }
-            : todo)),
+        todos: state.todos.map(
+          todo =>
+            todo.id === action.id
+              ? { ...todo, completed: !todo.completed }
+              : todo,
+        ),
       };
     }
     default: