1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import React from 'react';
import ReactDOM from 'react-dom';
import '../src/index.css';
import EditableLabel from 'react-inline-editing';
import { v4 as uuidv4 } from 'uuid';
function TodoItem(props) {
let checkbox = props.enabled ? <input type="checkbox" className="box" onClick={(event) => props.updateBox(event)} checked /> : <input type="checkbox" className="box" onClick={(event) => props.updateBox(event)} />;
return (
<div>
{checkbox}
<div class="contents">
<EditableLabel text={props.contents}
labelClassName={props.className}
inputClassName='todoInput'
inputWidth='1000px'
inputHeight='25px'
inputMaxLength='100'
onFocusOut={props._handleFocusOut}
/>
</div>
</div>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: JSON.parse(localStorage.getItem('todos')),
};
}
render() {
return (
<div>
<h1>facere cito</h1>
<ul>{this.state.todos.sort((t1, t2) => {
if (t1.enabled && !t2.enabled) { return 1; } else if (!t1.enabled && t2.enabled) { return -1; } else { return 0; }
}).map((todo) =>
<TodoItem key={todo.id}
enabled={todo.enabled}
contents={todo.contents}
className={todo.enabled ? "todoLabelDone" : "todoLabel"}
updateBox={(event) => this.updateBox(event, todo.id)}
_handleFocusOut={(text) => this._handleFocusOut(text, todo.id)}
/>
)}
</ul>
<button className="add" onClick={() => this.handleAddClick()}>Add item</button>
<button className="clear" onClick={() => this.handleClearClick()}>Clear all tasks</button>
<button className="reset" onClick={() => this.handleResetClick()}>Reset to default</button>
</div>
);
}
handleClearClick() {
window.localStorage.setItem('todos', JSON.stringify([]));
window.location.reload();
this.forceUpdate();
}
handleResetClick() {
window.localStorage.setItem('todos', JSON.stringify([
{ id: uuidv4(), enabled: false, contents: "👋 Hello! Welcome to facere cito." },
{ id: uuidv4(), enabled: false, contents: "📝 A sleek, minimal, and easy way to keep track of your tasks." },
{ id: uuidv4(), enabled: false, contents: "✍ Click any of these tasks to edit their text. Click outside of the text box to save." },
{ id: uuidv4(), enabled: false, contents: "🙂 Task text can include any Unicode, including emojis." },
{ id: uuidv4(), enabled: false, contents: "❌ Delete tasks by shift-clicking the tick button, or by clearing the text." },
{ id: uuidv4(), enabled: true, contents: "✅ Completed tasks go to the bottom." },
]));
window.location.reload();
this.forceUpdate();
}
handleAddClick() {
window.localStorage.setItem('todos', JSON.stringify(this.state.todos.concat([{ id: uuidv4(), enabled: false, contents: "Hello! Click me to edit!" }])));
window.location.reload();
this.forceUpdate();
}
_handleFocusOut(text, id) {
let newTodos = this.state.todos;
let todoIndex = newTodos.findIndex(function (t) { return t.id === id; });
if (text === "") {
newTodos.splice(todoIndex, 1);
} else {
newTodos[todoIndex].contents = text;
}
window.localStorage.setItem('todos', JSON.stringify(newTodos));
this.forceUpdate();
}
updateBox(event, id) {
let newTodos = this.state.todos;
let todoIndex = newTodos.findIndex(function (t) { return t.id === id; });
if (event.shiftKey) {
newTodos.splice(todoIndex, 1);
} else {
newTodos[todoIndex].enabled = !newTodos[todoIndex].enabled;
}
window.localStorage.setItem('todos', JSON.stringify(newTodos));
this.forceUpdate();
}
}
if (!window.localStorage.getItem('todos')) {
window.localStorage.setItem('todos', JSON.stringify([
{ id: uuidv4(), enabled: false, contents: "👋 Hello! Welcome to facere cito." },
{ id: uuidv4(), enabled: false, contents: "📝 A sleek, minimal, and easy way to keep track of your tasks." },
{ id: uuidv4(), enabled: false, contents: "✍ Click any of these tasks to edit their text. Click outside of the text box to save." },
{ id: uuidv4(), enabled: false, contents: "🙂 Task text can include any Unicode, including emojis." },
{ id: uuidv4(), enabled: false, contents: "❌ Delete tasks by shift-clicking the tick button, or by clearing the text." },
{ id: uuidv4(), enabled: true, contents: "✅ Completed tasks go to the bottom." },
]));
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
|