| 1 |
- {"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":""}
|
