{"version":3,"sources":["components/Navbar.tsx","components/TodoForm.tsx","components/TodoList.tsx","pages/TodosPage.tsx","pages/AboutPage.tsx","App.tsx","reportWebVitals.ts","index.tsx"],"names":["Navbar","className","href","to","TodoForm","props","useState","title","setTitle","ref","useRef","type","id","value","onChange","event","target","onKeyPress","key","onAdd","current","preventDefault","htmlFor","TodoList","todos","onToggle","onRemove","length","map","todo","classes","completed","push","join","checked","bind","onClick","e","handleRemove","TodoPage","setTodos","useEffect","saved","JSON","parse","localStorage","getItem","setItem","stringify","newTodo","Date","now","prev","item","confirm","filter","AboutPage","history","useHistory","App","component","path","exact","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.5abc9670.chunk.js","sourcesContent":["import React from 'react';\nimport {NavLink} from 'react-router-dom'\n\nexport const Navbar: React.FC = () =>\n    <nav>\n        <div className=\"nav-wrapper orange lighten-1\">\n            <div className=\"container\">\n                <a href=\"/\" className=\"brand-logo\">React + Typescript</a>\n                <ul className=\"right hide-on-med-and-down\">\n                    <li><NavLink to=\"/\">Список дел</NavLink></li>\n                    <li><NavLink to=\"/about\">Информация</NavLink></li>\n                </ul>\n            </div>\n        </div>\n    </nav>;\n","import React, {useState, useRef} from 'react';\n\ninterface TodoFormProps {\n    onAdd(title: string): void\n}\n\nexport const TodoForm: React.FC<TodoFormProps> = props => {\n    const [title, setTitle] = useState<string>(\"\");\n\n    const ref = useRef<HTMLInputElement>(null);\n\n    const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {\n        setTitle(event.target.value)\n    };\n\n    const keyHandler = (event: React.KeyboardEvent) => {\n        if (event.key === \"Enter\") {\n            props.onAdd(ref.current!.value);//для примера используем ref\n            setTitle(\"\");\n            event.preventDefault();\n        }\n    };\n\n    return (\n        <>\n            <div className=\"input-field\">\n                <input ref={ref} type=\"text\" id=\"title\" value={title} onChange={changeHandler} onKeyPress={keyHandler}/>\n                <label htmlFor=\"title\">Введите название дела</label>\n            </div>\n        </>\n    )\n};\n\n","import React from 'react';\nimport {ITodo} from \"../interfaces\";\n\ntype TodoListProps = {\n    todos: ITodo[]\n    onToggle(id: number): void\n    onRemove: (id: number) => void // можно через лямбда функцию\n}\n\nexport const TodoList: React.FC<TodoListProps> = ({todos, onToggle, onRemove}) => {\n    if (!todos.length) {\n        return <p>Добавьте первое дело</p>;\n    }\n\n    const handleRemove = (e: React.MouseEvent, id: number) => {\n        e.preventDefault();\n        onRemove(id);\n    };\n\n    return (\n        <>\n            <ul>\n                {todos.map(todo => {\n                        const classes = ['todo'];\n                        if (todo.completed) classes.push('completed');\n\n                        return (\n                            <li className={classes.join(' ')} key={todo.id}>\n                                <label>\n                                    <input type=\"checkbox\" checked={todo.completed}\n                                           onChange={onToggle.bind(null, todo.id)}/>\n                                    <span>{todo.title}</span>\n                                    <i className=\"material-icons red-text\"\n                                       onClick={e => handleRemove(e, todo.id)}>delete</i>\n                                </label>\n                            </li>\n                        )\n                    }\n                )}\n            </ul>\n        </>\n    )\n};\n","import React, {useEffect, useState} from \"react\";\nimport {TodoForm} from \"../components/TodoForm\";\nimport {TodoList} from \"../components/TodoList\";\nimport {ITodo} from \"../interfaces\";\n\ndeclare var confirm: (question: string) => boolean; // Чтобы typescript не ругался на глобальный метод\n\nexport const TodoPage: React.FC = () => {\n    const [todos, setTodos] = useState<ITodo[]>([]);\n\n    useEffect(() => {\n        const saved = JSON.parse(localStorage.getItem('todos') || '[]') as ITodo[];\n        setTodos(saved);\n    }, []);\n\n    useEffect(() => {\n        localStorage.setItem('todos', JSON.stringify(todos));\n    }, [todos]);\n\n    const addHandler = (title: string) => {\n        const newTodo: ITodo = {\n            title,\n            id: Date.now(),\n            completed: false\n        };\n\n        // setTodos([newTodo, ...todos]); перетирает предыдущий стейт\n\n        setTodos(prev => [newTodo, ...prev]) // точно уверены что добавляем новый item в пред. стейт\n    };\n\n    const toggleHandler = (id: number) => {\n        setTodos(prev =>\n            prev.map(item => {\n                if (item.id === id) {\n                    return {\n                        ...item,\n                        completed: !item.completed\n                    }\n                }\n                return item;\n            }))\n    };\n\n    const removeHandler = (id: number) => {\n        const shouldRemove = confirm('Вы уверены, что хотите удалить элемент?');\n        if (shouldRemove) setTodos(prev => prev.filter(item => item.id !== id))\n    };\n\n    return (\n        <>\n            <TodoForm onAdd={addHandler}/>\n            <TodoList todos={todos} onToggle={toggleHandler} onRemove={removeHandler}/>\n        </>\n    )\n};\n","import {useHistory} from 'react-router-dom';\n\nexport const AboutPage: React.FC = () => {\n    const history = useHistory();\n    return (\n        <>\n            <h1>About</h1>\n            <button className=\"btn\" onClick={() => history.push('/')}>Обратно к списку дел</button>\n        </>\n    )\n};\n","import React from 'react';\nimport {BrowserRouter, Switch, Route} from 'react-router-dom';\nimport {Navbar} from \"./components/Navbar\";\nimport {TodoPage} from \"./pages/TodosPage\";\nimport {AboutPage} from \"./pages/AboutPage\";\n\n\nconst App: React.FC = () => {\n\n    return (\n        <BrowserRouter>\n            <Navbar/>\n            <div className=\"container\">\n                <Switch>\n                    <Route component={TodoPage} path=\"/\" exact/>\n                    <Route component={AboutPage} path=\"/about\"/>\n                </Switch>\n            </div>\n        </BrowserRouter>\n    )\n};\n\n\nexport default App;\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\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 './index.css';\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":""}