From 293f939ec7b820aecced93ab917499aa12323105 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Thu, 7 Jun 2018 18:28:09 +0300
Subject: [PATCH] better design, fix crash when register after logout with user
 with todos

---
 react/src/actions/user.js    |  2 ++
 react/src/components/App.css | 17 ++++++++++-------
 react/src/components/Todo.js | 15 +++++++++++----
 react/src/reducers/lists.js  | 11 +++++++++++
 react/src/reducers/todos.js  |  7 +++++++
 5 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/react/src/actions/user.js b/react/src/actions/user.js
index 5e3298e..c52e697 100644
--- a/react/src/actions/user.js
+++ b/react/src/actions/user.js
@@ -103,5 +103,7 @@ export function reset() {
 
 export function logout() {
   localStorage.removeItem('jwt');
+  localStorage.removeItem('lists');
+  localStorage.removeItem('items');
   return { type: LOGOUT };
 }
diff --git a/react/src/components/App.css b/react/src/components/App.css
index 18f087c..e5b4eaf 100644
--- a/react/src/components/App.css
+++ b/react/src/components/App.css
@@ -102,7 +102,7 @@ li button {
   background: none;
   width: 2rem;
   font-size: 1rem;
-  transition: 0.4s ease-in-out;
+  transition: 0.17s ease-in-out;
   overflow: hidden;
   box-shadow: inset -3px 0 6px -3px rgba(0, 0, 0, 0.3);
 }
@@ -137,11 +137,11 @@ li {
   font-weight: 400;
   flex-grow: 2;
   flex-shrink: 1;
-  transition: 0.3s ease-in-out;
+  transition: 0.1s ease-in-out;
 }
 
-.todo--input {
-  background: white;
+textarea.todo--input {
+  background: #fafafa;
   color: black;
   resize: none;
   border: none;
@@ -152,12 +152,15 @@ li {
   width: 100%;
   height: 100%;
   max-height: 100%;
-  transition: 0.3s ease-in-out;
+  font-size: 1rem;
+  transition: 0.1s ease-in-out;
 }
 
 .disabled {
-  width: 0;
-  padding: 0.5rem 0;
+  width: 1rem;
+  opacity: 0;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid #f0f0f0;
 }
 
 .filter {
diff --git a/react/src/components/Todo.js b/react/src/components/Todo.js
index ab239ae..78ebb38 100644
--- a/react/src/components/Todo.js
+++ b/react/src/components/Todo.js
@@ -74,13 +74,13 @@ class Todo extends React.Component {
       <ButtonBase
         style={{
           justifyContent: 'left',
-          paddingLeft: '1.5rem',
+          paddingLeft: '1rem',
           borderTop: '1px solid #f0f0f0',
           textDecoration: this.props.todo.completed ? 'line-through' : 'none',
           color: this.props.todo.completed ? '#888888' : 'black',
         }}
         className="todo"
-        onClick={this.state.hover ? this.props.toggleTodo : null}
+        onClick={this.props.toggleTodo}
       >
         {this.props.todo.text}
       </ButtonBase>
@@ -102,6 +102,10 @@ class Todo extends React.Component {
             style={{ backgroundColor: 'pink' }}
             className={deleteClasses.join(' ')}
             onClick={this.props.removeTodo}
+            onMouseOver={this.onMouseOver}
+            onFocus={this.onMouseOver}
+            onMouseOut={this.onMouseOut}
+            onBlur={this.onMouseOut}
           >
             <DeleteIcon style={icon} />
           </ButtonBase>,
@@ -110,6 +114,10 @@ class Todo extends React.Component {
             style={{ backgroundColor: 'lightcyan' }}
             className={editClasses.join(' ')}
             onClick={this.startEdit}
+            onMouseOver={this.onMouseOver}
+            onFocus={this.onMouseOver}
+            onMouseOut={this.onMouseOut}
+            onBlur={this.onMouseOut}
           >
             <EditIcon style={icon} />
           </ButtonBase>,
@@ -117,9 +125,8 @@ class Todo extends React.Component {
     return (
       <animated.li
         style={this.props.style}
-        onMouseOver={this.onMouseOver}
+        // onFocus and onBlur triggers when long pressing on smartphones
         onFocus={this.onMouseOver}
-        onMouseOut={this.onMouseOut}
         onBlur={this.onMouseOut}
       >
         {ButtonBases}
diff --git a/react/src/reducers/lists.js b/react/src/reducers/lists.js
index 5385c94..205e61d 100644
--- a/react/src/reducers/lists.js
+++ b/react/src/reducers/lists.js
@@ -13,6 +13,7 @@ import {
   STOP_EDIT_LIST,
 } from '../actions/lists';
 import { REMOVE_TODO, ADD_TODO } from '../actions/todos';
+import { LOGOUT } from '../actions/user';
 
 export default function lists(
   state = {
@@ -27,6 +28,16 @@ export default function lists(
   action,
 ) {
   switch (action.type) {
+    case LOGOUT:
+      return {
+        dirty: true,
+        fetching: false,
+        lists: null,
+        loaded: false,
+        creating: false,
+        list: null,
+        editing: false,
+      };
     case CHANGE_LIST:
       return { ...state, list: action.list };
     case RECIEVE_LISTS:
diff --git a/react/src/reducers/todos.js b/react/src/reducers/todos.js
index 3ee4f2a..b9fa82c 100644
--- a/react/src/reducers/todos.js
+++ b/react/src/reducers/todos.js
@@ -9,6 +9,7 @@ import {
   EDIT_TODO,
 } from '../actions/todos';
 import { REMOVE_LIST } from '../actions/lists';
+import { LOGOUT } from '../actions/user';
 
 export default function todos(
   state = {
@@ -19,6 +20,12 @@ export default function todos(
   action,
 ) {
   switch (action.type) {
+    case LOGOUT:
+      return {
+        dirty: true,
+        fetching: false,
+        todos: null,
+      };
     case RECIEVE_TODOS:
       return {
         ...state,