From aba2aefe9f86f3fbaf602a6762d5d48413b03679 Mon Sep 17 00:00:00 2001 From: Andrew Fryer Date: Thu, 13 Feb 2020 16:39:23 -0500 Subject: [PATCH 01/17] comment on css to change --- src/components/todoOverview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/todoOverview.js b/src/components/todoOverview.js index 6ce19f6..3f285ea 100644 --- a/src/components/todoOverview.js +++ b/src/components/todoOverview.js @@ -13,7 +13,7 @@ export default class TodoOverview extends React.Component { return null; return
Date: Thu, 13 Feb 2020 17:26:32 -0500 Subject: [PATCH 02/17] log todos serverside --- src/server.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/server.js b/src/server.js index 9b846f1..b324127 100755 --- a/src/server.js +++ b/src/server.js @@ -73,6 +73,7 @@ app.post('/api/todos', function(req, res) { todos = req.body.todos; if (Array.isArray(todos)) { console.log(`Updated todos (${todos.length})`); + console.log(JSON.stringify(todos)); res.status(201).send(JSON.stringify({ success: true })); } else { res.status(200).send(JSON.stringify({ success: false, error: "expected `todos` to be array" })); From 78b9809d7f3ffa9a8560ad19f993c12cc6309e62 Mon Sep 17 00:00:00 2001 From: Andrew Fryer Date: Thu, 13 Feb 2020 17:27:24 -0500 Subject: [PATCH 03/17] add important field to todo model --- src/models/TodoModel.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/models/TodoModel.js b/src/models/TodoModel.js index 04a329b..1863167 100644 --- a/src/models/TodoModel.js +++ b/src/models/TodoModel.js @@ -5,18 +5,24 @@ export default class TodoModel { id; @observable title; @observable completed; + @observable important; - constructor(store, id, title, completed) { + constructor(store, id, title, completed, important) { this.store = store; this.id = id; this.title = title; this.completed = completed; + this.important = important; } toggle() { this.completed = !this.completed; } + toggleImportant() { + this.important = !this.important; + } + destroy() { this.store.todos.remove(this); } @@ -29,11 +35,12 @@ export default class TodoModel { return { id: this.id, title: this.title, - completed: this.completed + completed: this.completed, + important: this.important, }; } static fromJS(store, object) { - return new TodoModel(store, object.id, object.title, object.completed); + return new TodoModel(store, object.id, object.title, object.completed, object.important); } } From 50bb31f25e954892d4d926be74b9aa96167d4d7f Mon Sep 17 00:00:00 2001 From: Andrew Fryer Date: Thu, 13 Feb 2020 17:28:14 -0500 Subject: [PATCH 04/17] WIP display important visual --- src/components/todoItem.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/todoItem.js b/src/components/todoItem.js index 50dff42..9f042eb 100644 --- a/src/components/todoItem.js +++ b/src/components/todoItem.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import {observer} from 'mobx-react'; import {observable, action, computed} from 'mobx'; - const ESCAPE_KEY = 27; const ENTER_KEY = 13; @@ -12,6 +11,12 @@ export default class TodoItem extends React.Component { render() { const {todo} = this.props; + + const importantStyle = + todo.important ? + { color: "red" } + : + { color: "blue" }; return (
  • {todo.title} + {' '}
    • ) } diff --git a/src/components/todoOverview.js b/src/components/todoOverview.js index 9984488..7f3d6a6 100644 --- a/src/components/todoOverview.js +++ b/src/components/todoOverview.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {observer} from 'mobx-react'; -import { ACTIVE_TODOS, COMPLETED_TODOS, IMPORTANT_TODOS } from '../constants'; +import { ACTIVE_TODOS, COMPLETED_TODOS, IMPORTANT_TODOS, ALL_TODOS } from '../constants'; import TodoItem from './todoItem'; @@ -34,16 +34,28 @@ export default class TodoOverview extends React.Component { getVisibleTodos() { return this.props.todoStore.todos.filter(todo => { - switch (this.props.viewStore.todoFilter) { - case ACTIVE_TODOS: - return !todo.completed; - case COMPLETED_TODOS: - return todo.completed; - case IMPORTANT_TODOS: - return todo.important; - default: + for(let i = 0; i < this.props.viewStore.todoFilters.length; i++) { + const filter = this.props.viewStore.todoFilters[i]; + let res = null; + switch (filter) { + case ALL_TODOS: + res = true; + break; + case ACTIVE_TODOS: + res = !todo.completed; + break; + case COMPLETED_TODOS: + res = todo.completed; + break; + case IMPORTANT_TODOS: + res = todo.important; + break; + } + if(res) { return true; + } } + return false; }); } diff --git a/src/stores/ViewStore.js b/src/stores/ViewStore.js index fb2c5d6..0a3cdf4 100644 --- a/src/stores/ViewStore.js +++ b/src/stores/ViewStore.js @@ -3,5 +3,13 @@ import { ALL_TODOS } from '../constants'; export default class ViewStore { @observable todoBeingEdited = null; - @observable todoFilter= ALL_TODOS; + @observable todoFilters = [ALL_TODOS]; + + toggleView(filter) { + if(this.todoFilters.includes(filter)) { + this.todoFilters = this.todoFilters.filter(f => f !== filter); + } else { + this.todoFilters.push(filter); + } + } } \ No newline at end of file From 822e49cd8cc5f9543720907bc5dc7d65eb437c69 Mon Sep 17 00:00:00 2001 From: Andrew Fryer Date: Thu, 13 Feb 2020 19:37:53 -0500 Subject: [PATCH 08/17] use constants as captions; I might want to change this back, but I think it will make id conflicts simpler once the user can add their own tags --- src/components/todoFooter.js | 12 ++++++------ src/constants.js | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/todoFooter.js b/src/components/todoFooter.js index f058278..1181494 100644 --- a/src/components/todoFooter.js +++ b/src/components/todoFooter.js @@ -20,10 +20,10 @@ export default class TodoFooter extends React.Component { {todoStore.activeTodoCount} {activeTodoWord} left
      - {this.renderFilterLink(ALL_TODOS, "All")} - {this.renderFilterLink(ACTIVE_TODOS, "Active")} - {this.renderFilterLink(COMPLETED_TODOS, "Completed")} - {this.renderFilterLink(IMPORTANT_TODOS, "Important")} + {this.renderFilterLink(ALL_TODOS)} + {this.renderFilterLink(ACTIVE_TODOS)} + {this.renderFilterLink(COMPLETED_TODOS)} + {this.renderFilterLink(IMPORTANT_TODOS)}
    { todoStore.completedCount === 0 ? null @@ -37,11 +37,11 @@ export default class TodoFooter extends React.Component { ); } - renderFilterLink(filterName, caption) { + renderFilterLink(filterName) { return (
  • {' '}
    • ) diff --git a/src/constants.js b/src/constants.js index 31e5c10..89ea094 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,4 +1,4 @@ -export const ALL_TODOS = 'all'; -export const ACTIVE_TODOS = 'active'; -export const COMPLETED_TODOS = 'completed'; -export const IMPORTANT_TODOS = 'important'; +export const ALL_TODOS = 'All'; +export const ACTIVE_TODOS = 'Active'; +export const COMPLETED_TODOS = 'Completed'; +export const IMPORTANT_TODOS = 'Important'; From dfdf6d5bf69d06ec384ed82aad914d73f05e9a1d Mon Sep 17 00:00:00 2001 From: Andrew Fryer Date: Thu, 13 Feb 2020 20:48:36 -0500 Subject: [PATCH 09/17] add computed value to get range of tags and --- src/components/todoFooter.js | 8 +++----- src/stores/TodoStore.js | 13 ++++++++++++- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/todoFooter.js b/src/components/todoFooter.js index 1181494..6e9e5f8 100644 --- a/src/components/todoFooter.js +++ b/src/components/todoFooter.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import {observer} from 'mobx-react'; import {action} from 'mobx'; import {pluralize} from '../utils'; -import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS, IMPORTANT_TODOS } from '../constants'; @observer export default class TodoFooter extends React.Component { @@ -14,16 +13,15 @@ export default class TodoFooter extends React.Component { const activeTodoWord = pluralize(todoStore.activeTodoCount, 'item'); + const filters = this.props.todoStore.rangeOfTags; + return (