Frontend ELT

App.jsx

const TodoList = () => {
  // Extract
  const [todos, setTodos] = useState([]); // Todos loaded from backend
  const [status, setStatus] = useState('Done');
  const [keyword, setKeyWord] = useState('');
  const [priority, setPriority] = useState('Important');
  
  // Extract flow 1
  const filteredTodos = useMemo(() => {
    return todos.filter(item => {
      if (status) {
         return item.status === status
      }
      return true;
    }).filter(item => {
      if (keyword) {
         return item.name.includes(item)
      }
      return true;
    });
  }, [todos, state, keyword]);
  
  // Extract flow 2
  const fitlertedTodosWithPriority = useMemo(() => {
    return filteredTodos.filter((item) => {
      if (priority) {
         return item.priority === priority
      }
      return true;
    });
  }, [priority, filteredTodos]):

  return // Render your list here with filteredTodos and fitlertedTodosWithPriority
}