Facebook
From Chartreuse Horse, 3 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 50
  1. import React, { useState, useEffect } from 'react';
  2.  
  3. import './App.css';
  4. import AddTodoForm from './AddTodoForm';
  5. import Todo from './Todos';
  6. import TodoFilterManager from './TodoFilterManager';
  7. import store from './Store'
  8.  
  9. function App() {
  10.   const [todosy, setTodosy] = useState([])
  11.   const [filterDesc, setFilterDesc] = useState('')
  12.   const [filterStatus, setFilterStatus] = useState('')
  13.  
  14.   useEffect(() => {
  15.     store.subscribe(() => setTodosy(store.getState().todos))
  16.     store.subscribe(() => setFilterStatus(store.getState().filterStatus))
  17.     store.subscribe(() => setFilterDesc(store.getState().filterDesc))
  18.   }, [])
  19.   const filter = (list) => {
  20.  
  21.     if (filterStatus) {
  22.  
  23.       return list.filter(n => n.status === filterStatus && n.description.includes(filterDesc))
  24.     } else {
  25.       return list.filter(n => n.description.includes(filterDesc))
  26.     }
  27.  
  28.   }
  29.  
  30.   const displayTodos = filter(todosy).map((todo, i) => (<Todo
  31.     key={todo.id}
  32.     todo={todo}
  33.     setTodosy={setTodosy}
  34.     lp={i + 1} />))
  35.  
  36.  
  37.   return (
  38.     <div className="App">
  39.       <h1>Todo List</h1>
  40.       <TodoFilterManager setFilterDesc={setFilterDesc}
  41.         setFilterStatus={setFilterStatus}
  42.       />
  43.       <div className='main'>
  44.         <AddTodoForm
  45.           setTodosy={setTodosy} />
  46.  
  47.         <div className='todoContainer'>
  48.           {displayTodos}
  49.         </div>
  50.       </div>
  51.     </div>
  52.   );
  53. }
  54.  
  55. export default App;
  56.