about summary refs log tree commit diff stats
path: root/src/index.js
blob: 3bdc43bf98fa09bc02cbbcf4dd1f45435ff2bb01 (plain) (blame)
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
124
125
126
127
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>

        );
    }

    componentDidMount() {
        document.title = "facere cito";
    }

    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')
);