{"version":3,"sources":["components/ListItem.js","static/js/api.js","components/TodoList.js","App.js","reportWebVitals.js","index.js"],"names":["ListItem","isCompleted","this","props","item","completed","isError","error","Buttons","completeButton","closeButton","className","onClick","complete","bind","id","delete","number","text","React","Component","createNewItem","Math","random","Promise","resolve","setTimeout","status","TodoList","state","items","itemsCompleted","itemsCurrent","inputText","handleChange","handleKeyDown","addItem","deleteItem","completeItem","then","data","setState","filter","el","ListCurrent","length","map","idx","Listcompleted","placeholder","onKeyDown","onChange","value","e","prevId","forEach","preventDefault","trim","newListItem","res","concat","find","key","target","App","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.1aa43a8c.chunk.js","sourcesContent":["import React from \"react\";\n\nexport default class ListItem extends React.Component {\n    render() {\n        let isCompleted = this.props.item.completed;\n        let isError = this.props.item.error;\n\n        const Buttons = ({ completeButton = true, closeButton = true }) => {\n            return (\n                <>\n                    {completeButton ? (\n                        <span className=\"complete\" onClick={this.complete.bind(this, this.props.item.id)}>\n                            ✔\n                        </span>\n                    ) : null}\n\n                    {closeButton ? (\n                        <span className=\"close\" onClick={this.delete.bind(this, this.props.item.id)}>\n                            ✕\n                        </span>\n                    ) : null}\n                </>\n            );\n        };\n\n        return (\n            <>\n                <li className={\"todo-item \" + (isCompleted ? \"complete \" : \"\") + (isError ? \"error \" : \"\")}>\n                    <span className=\"todo-item-number\">{this.props.number}</span>\n                    <span className=\"todo-item-text\">{this.props.item.text}</span>\n                    {isCompleted ? null : <Buttons completeButton={!isError} />}\n                </li>\n            </>\n        );\n    }\n\n    delete(id) {\n        this.props.delete(id);\n    }\n\n    complete(id) {\n        this.props.complete(id);\n    }\n}\n","export const getTodoList = () => {\n    let url = \"https://example.com/\";\n\n    //Try to mimic fetch with promise\n    return new Promise((resolve) =>\n        setTimeout(\n            resolve([\n                { text: \"test1\", id: 1, completed: false },\n                { text: \"test2\", id: 2, completed: true },\n                { text: \"test3\", id: 3, completed: false },\n                { text: \"test4\", id: 5, completed: true },\n            ]),\n            Math.random() * 1000\n        )\n    );\n};\n\nexport const createNewItem = () => {\n    let url = \"https://example.com/\";\n\n    //Try to mimic fetch with promise\n    if (Math.random() > 0.1) {\n        return new Promise((resolve) => setTimeout(resolve({ status: true }), Math.random() * 1000));\n    } else {\n        return new Promise((resolve) =>\n            setTimeout(resolve({ status: false, error: \"some error\" }), Math.random() * 1000)\n        );\n    }\n};\n\nexport const updateItem = (data) => {\n    let url = \"https://example.com/\";\n\n    //Try to mimic fetch with promise\n    if (Math.random() > 0.1) {\n        return new Promise((resolve) => setTimeout(resolve({ status: true }), Math.random() * 1000));\n    } else {\n        return new Promise((resolve) =>\n            setTimeout(resolve({ status: false, error: \"some error\" }), Math.random() * 1000)\n        );\n    }\n};\n\nexport const deleteItem = (id) => {\n    let url = \"https://example.com/\";\n\n    //Try to mimic fetch with promise\n    return new Promise((resolve) => setTimeout(resolve({ status: true }), Math.random() * 1000));\n};\n","import React from \"react\";\nimport ListItem from \"./ListItem\";\nimport { getTodoList, createNewItem, updateItem, deleteItem } from \"../static/js/api\";\n\nexport default class TodoList extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { items: [], itemsCompleted: [], itemsCurrent: [], inputText: \"\" };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.addItem = this.addItem.bind(this);\n        this.deleteItem = this.deleteItem.bind(this);\n        this.completeItem = this.completeItem.bind(this);\n    }\n    componentDidMount() {\n        getTodoList().then((data) => {\n            this.setState({\n                items: data,\n            });\n        });\n    }\n\n    render() {\n        const itemsCurrent = this.state.items.filter((el) => el.completed === false);\n        const itemsCompleted = this.state.items.filter((el) => el.completed === true);\n\n        const ListCurrent = ({ items }) => {\n            if (items.length === 0) {\n                return null;\n            }\n\n            return (\n                <>\n                    <ul className=\"todo-list\">\n                        <span className=\"todo-list-headline\">Current</span>\n                        {items.map((item, idx) => (\n                            <ListItem\n                                key={item.id}\n                                item={item}\n                                delete={this.deleteItem}\n                                complete={this.completeItem}\n                                number={idx + 1}\n                            />\n                        ))}\n                    </ul>\n                </>\n            );\n        };\n\n        const Listcompleted = ({ items }) => {\n            if (items.length === 0) {\n                return null;\n            }\n\n            return (\n                <>\n                    <ul className=\"todo-list complete\">\n                        <span className=\"todo-list-headline\">Completed</span>\n                        {items?.map((item, idx) => (\n                            <ListItem\n                                key={item.id}\n                                item={item}\n                                delete={this.deleteItem}\n                                complete={this.completeItem}\n                                number={idx + 1}\n                            />\n                        ))}\n                    </ul>\n                </>\n            );\n        };\n\n        return (\n            <div className=\"todo-wrapper\">\n                <div className=\"todo-input-area\">\n                    <input\n                        className=\"todo-input\"\n                        placeholder=\"Enter your text\"\n                        onKeyDown={this.handleKeyDown}\n                        onChange={this.handleChange}\n                        value={this.state.inputText}\n                    />\n                    <button className=\"todo-btn\" onClick={this.addItem}>\n                        Add\n                    </button>\n                </div>\n\n                <ListCurrent items={itemsCurrent} />\n                <Listcompleted items={itemsCompleted} />\n            </div>\n        );\n    }\n    addItem(e) {\n        let prevId = 0;\n        if (this.state.items.length > 0) {\n            this.state.items.forEach((el) => {\n                if (el.id > prevId) {\n                    prevId = el.id;\n                }\n            });\n        }\n\n        e.preventDefault();\n        if (this.state.inputText.trim() === \"\") {\n            return;\n        }\n        const newListItem = {\n            text: this.state.inputText,\n            id: prevId + 1,\n            completed: false,\n            error: false,\n        };\n\n        createNewItem(newListItem).then((res) => {\n            let status = res.status;\n            if (status) {\n                this.setState((state) => ({\n                    items: state.items.concat(newListItem),\n                    inputText: \"\",\n                }));\n            } else {\n                newListItem.text = res.error;\n                newListItem.error = true;\n                this.setState((state) => ({\n                    items: state.items.concat(newListItem),\n                    inputText: \"\",\n                }));\n            }\n        });\n    }\n\n    deleteItem(id) {\n        createNewItem(id).then((res) => {\n            this.setState((state) => ({\n                items: state.items.filter((el) => el.id !== id),\n            }));\n        });\n    }\n\n    completeItem(id) {\n        this.state.items.find((el) => el.id === id).completed = true;\n\n        this.setState((state) => ({\n            items: state.items,\n        }));\n    }\n\n    handleKeyDown(e) {\n\n        if (e.key === \"Enter\") {\n            this.addItem(e);\n        }\n    }\n\n    handleChange(e) {\n        this.setState({\n            inputText: e.target.value,\n        });\n    }\n}\n","import \"./static/css/App.css\";\nimport \"./components/TodoList\";\nimport TodoList from \"./components/TodoList\";\n\nfunction App() {\n    return (\n        <div className=\"App\">\n            <TodoList />\n        </div>\n    );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./static/css/styles.scss\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nReactDOM.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>,\n    document.getElementById(\"root\")\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}