Fix and Update a bunch of things

README.md

@@ -27,20 +27,21 @@ Feel free to browse the code and ask questions by [creating issues](https://gith
 ### Awesome Features
 #### Keyboard Shortcuts
 The following shortcuts are available: 
-- Use the left and right arrow keys to navigate between the tasks panel and the lists panel
-- Use the up and down arrow keys to navigate between tasks/lists (depends on the selected panel)
-- Press `Enter` when selecting a task to mark it as completed
+- Use up/down arrows to navigate between tasks/lists
+- Use `CTRL + left/right` arrows to navigate between the tasks and the lists panel
 - Press Enter when selecting a list to navigate into it
-- Use `CTRL + N` to create new tasks or lists (depends on the selected panel)
-- Use `CTRL + E` to edit a task or a list (depends on the selected panel)
-- Use `CTRL + D` to delete a task or a list (depends on the selected panel)
+- Press Enter when selecting a task to create a new task
+- Use `CTRL + Enter` when selecting a task to mark it as completed
+- Use `CTRL + N` to create new tasks or lists
+- Use `CTRL + Q` to edit a task or a list
+- Use `CTRL + D` to delete a task or a list
 - Use `CTRL + A` to navigate to All Tasks view
 
-Feel free to suggest more shortcuts or changes to existing shortcutes. :) 
+Feel free to suggest more shortcuts or changes to existing shortcuts. :) 
 
 
 ### Contributions
-Plesae feel free to ask for features by [creating issues](https://github.com/bluzi/awesome-google-tasks/issues), or to implement features by [creating pull requests](https://github.com/bluzi/awesome-google-tasks/pulls).
+Please feel free to ask for features by [creating issues](https://github.com/bluzi/awesome-google-tasks/issues), or to implement features by [creating pull requests](https://github.com/bluzi/awesome-google-tasks/pulls).
 I'll do my best to review things as fast as I can, as I always try to do.
 
 If you find any errors or strange behaviors, please report them by [creating an issue](https://github.com/bluzi/awesome-google-tasks/issues).

package.json

@@ -3,6 +3,7 @@
   "description": "Google Tasks for humans: Alternative Web UI for Google Tasks made with React",
   "author": "Eliran Pe'er <eliran013@gmail.com> (https://github.com/bluzi)",
   "version": "0.1.0",
+  "homepage": ".",
   "dependencies": {
     "@material-ui/core": "^1.2.0",
     "@material-ui/icons": "^1.1.0",
@@ -13,14 +14,9 @@
     "is-mobile": "^1.0.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
-    "react-scripts": "^2.0.0-next.66cc7a90"
+    "react-scripts": "^2.1.3"
   },
   "devDependencies": {
-    "eslint": "^5.6.1",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1",
     "hostile": "^1.3.2"
   },
   "scripts": {

src/components/about-dialog.component.js

@@ -31,6 +31,26 @@ class AboutDialog extends React.Component {
                         <br />
                         <br />
                         If you have any questions, feel free to reach out on <a href="https://github.com/bluzi" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://twitter.com/eliranpeer" target="_blank" rel="noopener noreferrer">Twitter</a> or <a href="mailto:info@awesomegoogletasks.com" target="_blank" rel="noopener noreferrer">via email</a>.
+                        <br />
+                        <br />
+                        Use CTRL + left/right arrows to navigate between the tasks and the lists panel
+                        <br />
+                        Use up/down arrows to navigate between tasks/lists
+                        <br />
+                        Press Enter when selecting a list to navigate into it
+                        <br />
+                        Press Enter when selecting a task to create a new task
+                        <br />
+                        Use CTRL + Enter when selecting a task to mark it as completed
+                        <br />
+                        Use CTRL + N to create new tasks or lists
+                        <br />
+                        Use CTRL + Q to edit a task or a list
+                        <br />
+                        Use CTRL + D to delete a task or a list
+                        <br />
+                        Use CTRL + A to navigate to All Tasks view
+                        <br />
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>

src/components/app.component.js

@@ -73,6 +73,7 @@ class App extends Component {
           this.setState({ appState: 'ready', lists, selectedList, });
         }
       });
+      setTimeout(() => this.refreshList(), 5*60*1000);
     } else {
       this.setState({ appState: 'auth' });
     }
@@ -143,7 +144,8 @@ class App extends Component {
           <div className={classes.appFrame}>
 
             <Header
-              onNewTaskList={this.handleNewTaskList.bind(this)} />
+              onNewTaskList={this.handleNewTaskList.bind(this)}
+              refreshList={this.refreshList.bind(this)} />
 
             <TaskLists
               lists={this.state.lists}
@@ -194,7 +196,7 @@ class App extends Component {
                 open={true}
                 message={this.state.notification.message}
                 action={this.state.notification.undoHandler &&
-                  <Button onClick={this.state.notification.undoHandler.bind(this)} color="secondary" size="small">Undo</Button>
+                  <Button onClick={this.state.notification.undoHandler.bind(this)} color="primary" size="small">Undo</Button>
                 } />
             }
           </div>
@@ -220,9 +222,9 @@ class App extends Component {
     const rightArrowKey = 39;
     const allTasksKey = 65;
 
-    if (event.keyCode === leftArrowKey) {
+    if (event.ctrlKey && event.keyCode === leftArrowKey) {
       this.setState({ selectedItem: 'taskLists' });
-    } else if (event.keyCode === rightArrowKey) {
+    } else if (event.ctrlKey && event.keyCode === rightArrowKey) {
       this.setState({ selectedItem: 'tasks' });
     } else if (event.ctrlKey && event.keyCode === allTasksKey) {
       this.handleSelectedListChange('all');
@@ -264,6 +266,21 @@ class App extends Component {
 
   setTasks(tasks) {
     tasks = tasks.sort((a, b) => a.position > b.position ? 1 : b.position > a.position ? -1 : 0);
+    for (let i=0;i<tasks.length;i++)
+    {
+      if (tasks[i].hasOwnProperty('parent'))
+      {
+        let temp = tasks[i];
+        let parentId = tasks[i].parent;
+        tasks.splice(i,1);
+        let parent = tasks.findIndex((el) => el.id === parentId);
+        while (tasks[parent+1].hasOwnProperty('parent'))
+          {
+            parent++;
+          }
+        tasks.splice(parent+1,0,temp);
+      }
+    }
     this.setState({ tasks })
   }
 
@@ -283,6 +300,7 @@ class App extends Component {
       notes: changedTask.notes,
       due: Date.parse(changedTask.due) ? changedTask.due : undefined,
     });
+    this.showNotification('All changes saved');
   }
 
   async handleDeleteTask(deletedTask) {
@@ -353,7 +371,7 @@ class App extends Component {
       await googleTasksApi.updateTask({ taskListId: this.state.selectedList.id, taskId: changedTask.id, title: newTitle });
       this.taskUpdateTimer = undefined;
       this.showNotification('All changes saved');
-    }, 50);
+    }, 1000);
   }
 
   async handleTaskCheck(changedTask) {
@@ -379,7 +397,8 @@ class App extends Component {
       tasks = (await googleTasksApi.listTasks(list.id)) || [];
     }
 
-    this.setState({ selectedList: list, tasks, isLoading: false, })
+    this.setTasks(tasks);
+    this.setState({ selectedList: list, isLoading: false, })
   }
 
   async listAllTasks() {
@@ -394,6 +413,26 @@ class App extends Component {
 
     return tasks;
   }
+
+  async refreshList() {
+
+    this.setState({ isLoading: true, });
+    let tasks = [];
+
+    if (this.state.selectedList === 'all') {
+      tasks = await this.listAllTasks();
+    } else if (this.state.selectedList === 'completed') {
+      tasks = (await this.listAllTasks()).filter(task => task.status === 'completed');
+    } else if (this.state.selectedList === 'incomplete') {
+      tasks = (await this.listAllTasks()).filter(task => task.status !== 'completed');
+    } else {
+      tasks = (await googleTasksApi.listTasks(this.state.selectedList.id)) || [];
+    }
+
+    this.setTasks(tasks);
+    this.setState({ isLoading: false, })
+    setTimeout(() => this.refreshList(), 5*60*1000);
+  }
 }
 
 export default withStyles(styles)(App);

src/components/create-task-dialog.component.js

@@ -69,7 +69,7 @@ class CreateTaskDialog extends React.Component {
                         type="text"
                         label="Details"
                         multiline
-                        rows="5"
+                        rows="20"
                         defaultValue={this.state.task.notes}
                         onChange={event => this.setState({ task: { ...this.state.task, notes: event.target.value } })}
                     />

src/components/header.component.js

@@ -37,6 +37,13 @@ class Header extends Component {
               Awesome Google Tasks
             </Typography>
 
+            <Tooltip title="Refresh">
+              <div>
+                <IconButton color="inherit" onClick={this.props.refreshList}>
+                  <Icon>refresh</Icon>
+                </IconButton>
+              </div>
+            </Tooltip>
             <Tooltip title="Add List">
               <div>
                 <IconButton color="inherit" onClick={this.props.onNewTaskList}>

src/components/task.component.js

@@ -25,10 +25,15 @@ class Task extends Component {
                 completed: this.props.task.status === 'completed',
                 selected: this.props.isSelected,
             })} onMouseOver={this.props.onMouseOver}>
-                <Tooltip title={this.beautifyDate(this.props.task.updated)}>
+                {this.props.task.parent &&
+                    <div className="child-space"/>
+                }
+                <Tooltip title={dateformat(new Date(this.props.task.updated), 'dd/mm/yyyy')}>
                     <Checkbox readOnly={this.props.isReadOnly} checked={this.props.task.status === 'completed'} onChange={this.props.onCheck} />
                 </Tooltip>
 
+                <div className="task-container">
+
                 <input
                     type="text"
                     ref={(titleInput) => this.titleInput = titleInput}
@@ -39,6 +44,10 @@ class Task extends Component {
                     onChange={event => this.props.onTaskUpdate(event.target.value)}
                     onKeyUp={this.handleKeyUp.bind(this)}
                     onKeyDown={this.handleKeyDown.bind(this)} />
+
+                <p className="task-description">{this.props.task.notes}</p>
+
+                </div>
 
                 {this.props.task.notes &&
                     <div className="chip-container">
@@ -50,11 +59,11 @@ class Task extends Component {
 
                 {this.props.task.due &&
                     <div className="chip-container">
-                        <Chip label={dateformat(new Date(this.props.task.due), 'dd/mm/yyyy')} />
+                        <Chip label={dateformat(new Date(this.props.task.due), 'dd/mm/yyyy', true)} />
                     </div>
                 }
 
-                <Tooltip title="Edit Task (Ctrl + E)">
+                <Tooltip title="Edit Task (Ctrl + Q)">
                     <div>
                         <IconButton disabled={this.props.isReadOnly} onClick={this.props.onEdit}>
                             <Icon>edit</Icon>
@@ -73,11 +82,6 @@ class Task extends Component {
         );
     }
 
-    beautifyDate(dateString) {
-        const dateTime = new Date(dateString);
-        return `${dateTime.getDate()}/${dateTime.getMonth()}/${dateTime.getFullYear()}`;
-    }
-
     handleKeyUp(event) {
         const enterKey = 13;
 

src/components/tasks.component.js

@@ -75,7 +75,7 @@ class Tasks extends Component {
 
                 {this.props.selectedList.id &&
                     <Tooltip title="Add Task (Enter)">
-                        <Button variant="fab" color="secondary" className={classes.fab} onClick={this.props.onNewTask}>
+                        <Button variant="fab" color="primary" className={classes.fab} onClick={this.props.onNewTask}>
                             <Icon>add</Icon>
                         </Button>
                     </Tooltip>}
@@ -89,7 +89,7 @@ class Tasks extends Component {
         const upArrowKey = 38;
         const downArrowKey = 40;
         const enterKey = 13;
-        const editKey = 69;
+        const editKey = 81;
         const deleteKey = 68;
 
         if (event.keyCode === upArrowKey) {

src/index.css

@@ -1,9 +1,14 @@
 body {
   margin: 0;
   padding: 0;
+  min-height: 100vh;
   font-family: sans-serif;
 }
 
+.App-appFrame-1 {
+  min-height: 100vh;
+}
+
 .tasks-card {
   margin: 20px;
   padding: 0;
@@ -24,18 +29,42 @@ body {
   border-bottom: 1px solid #f1f1f1;
 }
 
+.task-container {
+  flex: 1;
+  outline: none;
+  border: 0;
+  width:10px;
+  padding-top:10px;
+  padding-bottom:10px;
+}
+
+.task-description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  margin-top:2px;
+  margin-bottom: 0px;
+}
+
 .tasks-card .task .task-title {
   flex: 1;
   outline: none;
   border: 0;
-  font-size: 14px;
+  font-size: 16px;
+  width: 100%;
 }
 
 .tasks-card .task.completed .task-title {
   opacity: 0.3;
   text-decoration: line-through;
 }
 
+.tasks-card .task.completed .task-description {
+  opacity: 0.3;
+  text-decoration: line-through;
+}
+
 .tasks-card .task.selected, .tasks-card .task.selected input {
   background-color: #f1f1f1;
 }
@@ -44,4 +73,8 @@ body {
   display: flex; 
   align-items: center;
   margin-right: 10px;
+}
+
+.child-space {
+  margin-right: 30px;
 }