daily pastebin goal
0%
SHARE
TWEET

Untitled

a guest Feb 22nd, 2019 52 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react'
  2. // import ReactDOM from 'react-dom'
  3.  
  4. import AppHeader from '../app-header/'
  5. import SearchPanel from '../search-panel/'
  6. import TodoList from '../todo-list/'
  7. import ItemStatusFilter from '../item-status-filter/'
  8. import ItemAddForm from '../item-add-form'
  9. import { apiUrl, apiRoutes } from '../../apiConfig'
  10.  
  11. import './App.css'
  12.  
  13. export default class App extends Component {
  14.  
  15.     maxId = 100;
  16.  
  17.     state = {
  18.         todoData: [
  19.             this.createTodoItem('Drink Coffee'),
  20.             this.createTodoItem('Do the Aliks site'),
  21.             this.createTodoItem('Renkas birthday'),
  22.         ],
  23.         todoList: null,
  24.         term: '',
  25.         filter: 'all' //active, all, done
  26.     }
  27.  
  28.     createTodoItem(label) {
  29.         return {
  30.             label: label,
  31.             important: false,
  32.             done: false,
  33.             id: this.maxId++
  34.         }
  35.     }
  36.  
  37.     componentDidMount() {
  38.         if (!this.state.todoList) {
  39.             console.log(this.loadTodos());
  40.             console.log('list =', this.state.todoList)
  41.         }
  42.     }
  43.  
  44.     loadTodos = () => {
  45.         fetch(apiUrl + apiRoutes.todo)
  46.             .then(res => res.json())
  47.             .then(res => {
  48.                 this.setState({todoList: res})
  49.             })
  50.             .catch(error => {
  51.                 alert('Ошибка при получении списка задач');
  52.                 console.error(error);
  53.             });
  54.         return this.state.todoList
  55.     }
  56.  
  57.     deleteItem = (id) => {
  58.         this.setState(({todoData}) => {
  59.  
  60.             const idx = todoData.findIndex((el) => el.id === id)
  61.  
  62.             const newArray = [
  63.                 ...todoData.slice(0, idx),
  64.                 ...todoData.slice(idx + 1)
  65.             ]
  66.  
  67.             return {
  68.                 todoData: newArray
  69.             }
  70.         })
  71.     }
  72.  
  73.     onAddItem = (text) => {
  74.  
  75.         const newItem = this.createTodoItem(text)
  76.  
  77.         this.setState(({todoData}) => {
  78.  
  79.             const newArray = [
  80.                 ...todoData,
  81.                 newItem
  82.             ]
  83.  
  84.             return {
  85.                 todoData: newArray
  86.             }
  87.  
  88.         })
  89.     }
  90.  
  91.     toggleProperty(arr, id, propName) {
  92.  
  93.         const idx = arr.findIndex((el) => el.id === id)
  94.  
  95.         const oldItem = arr[idx]
  96.         const newItem = { ...oldItem,
  97.             [propName]: !oldItem[propName] }
  98.  
  99.         return [
  100.             ...arr.slice(0, idx),
  101.             newItem,
  102.             ...arr.slice(idx + 1)
  103.         ]
  104.     }
  105.  
  106.     onToggleImportant = (id) => {
  107.         this.setState(({todoData}) => {
  108.             return {
  109.                 todoData: this.toggleProperty(todoData, id, 'important')
  110.             }
  111.         })
  112.     }
  113.  
  114.     onToggleDone = (id) => {
  115.         this.setState(({todoData}) => {
  116.             return {
  117.                 todoData: this.toggleProperty(todoData, id, 'done')
  118.             }
  119.         })
  120.     }
  121.  
  122.     search(items, term) {
  123.  
  124.         if(term.length === '') {
  125.             return items;
  126.         }
  127.  
  128.         return items.filter((item) => {
  129.             return item.label
  130.                 .toLowerCase()
  131.                 .indexOf( term.toLowerCase()) > -1
  132.         })
  133.     }
  134.  
  135.     onSearchChange = (term) => {
  136.         this.setState({ term })
  137.     }
  138.  
  139.     filter(items, filter) {
  140.  
  141.         switch (filter) {
  142.             case 'all':
  143.                 return items;
  144.             case 'active':
  145.                 return items.filter((item) => !item.done);
  146.             case 'done':
  147.                 return items.filter((item) => item.done);
  148.             default: return items;
  149.         }
  150.     }
  151.  
  152.     onFilterChange = (filter) => {
  153.         this.setState({ filter })
  154.     }
  155.  
  156.     render() {
  157.  
  158.         const { todoData, term, filter } = this.state
  159.  
  160.         const visibleItems = this.filter(
  161.             this.search( todoData, term ), filter)
  162.  
  163.         const doneCount = this.state.todoData
  164.             .filter((el) => el.done).length
  165.  
  166.         const todoCount = this.state.todoData.length - doneCount
  167.  
  168.         return (
  169.  
  170.             <div className='todo-app'>
  171.                 <AppHeader toDo={todoCount} done={doneCount}/>
  172.  
  173.                 <div className='top-panel d-flex'>
  174.                     <SearchPanel
  175.                         onSearchChange = {this.onSearchChange}
  176.                     />
  177.                     <ItemStatusFilter
  178.                         filter = {filter}
  179.                         onFilterChange = {this.onFilterChange}
  180.                     />
  181.                 </div>
  182.  
  183.                 <TodoList
  184.                     todos={visibleItems}
  185.                     onDeleted={this.deleteItem}
  186.                     onToggleImportant={this.onToggleImportant}
  187.                     onToggleDone={this.onToggleDone}
  188.                 />
  189.  
  190.                 <ItemAddForm
  191.                     onAddItem={this.onAddItem}
  192.                 />
  193.             </div>
  194.  
  195.         )
  196.     }
  197. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top