{"version":3,"sources":["App.tsx","serviceWorker.ts","index.tsx"],"names":["storageKey","App","props","_this","Object","classCallCheck","this","possibleConstructorReturn","getPrototypeOf","call","onTodoItemStateChange","event","setState","completedState","objectSpread","state","defineProperty","id","completed","getFilteredTodoItems","todoItems","filter","todoItem","isChecked","activeFilter","renderTodoItems","map","react_default","a","createElement","App_TodoItem","onStateToggle","key","onHeaderCurrentTextChange","currentText","target","value","onHeaderTextAccepted","newTodoItem","String","Math","floor","random","text","selected","newTodoItemArray","concat","toConsumableArray","renderItems","length","className","onFilterClicked","renderFooter","App_TodoFooterSection","filterSelection","todoCount","persistedState","localStorage","getItem","JSON","parse","nextProps","nextState","setItem","stringify","App_TodoHeaderSection","onEnterPressed","onChange","Component","TodoHeaderSection","_this2","inputRef","handleKeypress","e","React","createRef","current","focus","htmlFor","name","ref","placeholder","onKeyPress","TodoItem","onCheckboxChange","_this3","checked","type","TodoFooterSection","calculateClassName","labelFor","_this4","_this5","onClick","Boolean","window","location","hostname","match","ReactDOM","render","src_App_0","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister"],"mappings":"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","file":"static/js/main.566d4318.chunk.js","sourcesContent":["import React, {\n  Component,\n  ChangeEvent,\n  KeyboardEvent,\n  Ref,\n  RefObject\n} from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./App.css\";\n\nfunction generateId() {\n  return String(Math.floor(Math.random() * 10000000));\n}\n\nconst storageKey = \"todoAppKey\";\n\ntype TodoFilter = \"all\" | \"active\" | \"completed\";\n\ninterface TodoItemData {\n  id: string;\n\n  text: string;\n\n  selected: boolean;\n}\n\ninterface TodoList {\n  currentText: string;\n  activeFilter: TodoFilter;\n  todoItems: TodoItemData[];\n  completedState: Record<string, boolean | undefined>;\n}\n\ninterface AppProps {}\n\nclass App extends Component<AppProps, TodoList> {\n  constructor(props: AppProps) {\n    super(props);\n\n    const persistedState = localStorage.getItem(storageKey);\n\n    if (persistedState === null) {\n      this.state = {\n        currentText: \"\",\n        todoItems: [],\n        activeFilter: \"all\",\n        completedState: {}\n      };\n    } else {\n      this.state = JSON.parse(persistedState)\n    }\n  }\n\n  shouldComponentUpdate(nextProps: AppProps, nextState: TodoList) {\n    localStorage.setItem(storageKey, JSON.stringify(this.state));\n    return true;\n  }\n\n  onTodoItemStateChange = (event: TodoItemChangeEvent) => {\n    this.setState({\n      completedState: {\n        ...this.state.completedState,\n        [event.id]: event.completed\n      }\n    });\n  };\n\n  getFilteredTodoItems = () => {\n    return this.state.todoItems.filter(todoItem => {\n      const isChecked = this.state.completedState[todoItem.id];\n      if (this.state.activeFilter === \"active\") {\n        if (isChecked === true) {\n          return false;\n        } else {\n          return true;\n        }\n      } else if (this.state.activeFilter === \"completed\") {\n        if (isChecked === true) {\n          return true;\n        } else {\n          return false;\n        }\n      }\n\n      return true;\n    });\n  };\n\n  renderTodoItems = () => {\n    return this.getFilteredTodoItems().map(todoItem => {\n      return (\n        <TodoItem\n          completed={!!this.state.completedState[todoItem.id]}\n          onStateToggle={this.onTodoItemStateChange}\n          key={todoItem.id}\n          todoItem={todoItem}\n        />\n      );\n    });\n  };\n\n  onHeaderCurrentTextChange = (event: ChangeEvent<HTMLInputElement>) => {\n    this.setState({ currentText: event.target.value });\n  };\n\n  onHeaderTextAccepted = () => {\n    const newTodoItem: TodoItemData = {\n      id: generateId(),\n      text: this.state.currentText,\n      selected: false\n    };\n\n    const newTodoItemArray = [...this.state.todoItems, newTodoItem];\n\n    this.setState({ todoItems: newTodoItemArray, currentText: \"\" });\n  };\n\n  renderItems = () => {\n    if (this.state.todoItems.length === 0) {\n      return null;\n    }\n\n    return (\n      <div className=\"todo-item-section todo-section\">\n        {this.renderTodoItems()}\n      </div>\n    );\n  };\n\n  onFilterClicked = (activeFilter: TodoFilter) => {\n    this.setState({ activeFilter });\n  };\n\n  renderFooter = () => {\n    if (this.state.todoItems.length === 0) {\n      return null;\n    }\n\n    return (\n      <TodoFooterSection\n        onFilterClicked={this.onFilterClicked}\n        filterSelection={this.state.activeFilter}\n        todoCount={this.getFilteredTodoItems().length}\n      />\n    );\n  };\n\n  render() {\n    return (\n      <div className=\"todo-list\">\n        <div className=\"todo-list-container\">\n          <TodoHeaderSection\n            currentText={this.state.currentText}\n            onEnterPressed={this.onHeaderTextAccepted}\n            onChange={this.onHeaderCurrentTextChange}\n          />\n\n          {this.renderItems()}\n          {this.renderFooter()}\n        </div>\n      </div>\n    );\n  }\n}\n\ninterface TodoHeaderSectionProps {\n  currentText: string;\n  onChange(event: ChangeEvent<HTMLInputElement>): void;\n  onEnterPressed(): void;\n}\n\nclass TodoHeaderSection extends Component<TodoHeaderSectionProps> {\n  inputRef: RefObject<HTMLInputElement>;\n\n  constructor(props: TodoHeaderSectionProps) {\n    super(props);\n    this.inputRef = React.createRef();\n  }\n\n  handleKeypress = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      this.props.onEnterPressed();\n    }\n  };\n\n  componentDidMount() {\n    this.inputRef.current && this.inputRef.current.focus();\n  }\n\n  render() {\n    return (\n      <div className=\"todo-header-section todo-section\">\n        <label className=\"toggle-all-label\" htmlFor=\"todo-input\">\n          ❯\n        </label>\n        <input\n          className=\"todo-input\"\n          name=\"todo-input\"\n          ref={this.inputRef}\n          onChange={this.props.onChange}\n          placeholder=\"What needs to be done?\"\n          value={this.props.currentText}\n          onKeyPress={this.handleKeypress}\n        />\n      </div>\n    );\n  }\n}\n\ninterface TodoItemChangeEvent {\n  completed: boolean;\n  id: string;\n}\n\ninterface TodoItemProps {\n  todoItem: TodoItemData;\n  completed: boolean;\n  onStateToggle(event: TodoItemChangeEvent): void;\n}\n\nclass TodoItem extends Component<TodoItemProps> {\n  onCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {\n    this.props.onStateToggle({\n      id: this.props.todoItem.id,\n      completed: event.target.checked\n    });\n  };\n\n  render() {\n    return (\n      <span className=\"todo-item\">\n        <input\n          checked={this.props.completed}\n          onChange={this.onCheckboxChange}\n          type=\"checkbox\"\n        />\n        <span> {this.props.todoItem.text} </span>\n      </span>\n    );\n  }\n}\n\ninterface TodoFooterSectionProps {\n  todoCount: number;\n\n  filterSelection: TodoFilter;\n\n  onFilterClicked(filter: TodoFilter): void;\n}\n\nclass TodoFooterSection extends Component<TodoFooterSectionProps> {\n  calculateClassName = (labelFor: TodoFilter) => {\n    return `todo-filter-selection ${\n      labelFor === this.props.filterSelection ? \"active\" : \"\"\n    }`;\n  };\n\n  render() {\n    return (\n      <div className=\"todo-footer-section todo-section\">\n        <span className=\"todo-item-count\">{this.props.todoCount} items</span>\n\n        <span className=\"todo-filter-selection\">\n          <span\n            className={this.calculateClassName(\"all\")}\n            onClick={() => this.props.onFilterClicked(\"all\")}\n          >\n            All\n          </span>\n          <span\n            className={this.calculateClassName(\"active\")}\n            onClick={() => this.props.onFilterClicked(\"active\")}\n          >\n            Active\n          </span>\n          <span\n            className={this.calculateClassName(\"completed\")}\n            onClick={() => this.props.onFilterClicked(\"completed\")}\n          >\n            Completed\n          </span>\n        </span>\n      </div>\n    );\n  }\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read http://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.1/8 is considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\ntype Config = {\n  onSuccess?: (registration: ServiceWorkerRegistration) => void;\n  onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(\n      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,\n      window.location.href\n    );\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit http://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl)\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready.then(registration => {\n      registration.unregister();\n    });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(<App />, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: http://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}