Function App

frontend/src/App.js:5–110

()

import APIHelper from "./APIHelper.js";

function App() {
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState("");
  const [command, setCommand] = useState("");
  const [commandOutput, setCommandOutput] = useState("No command output")

  useEffect(() => {
    const fetchTodoAndSetTodos = async () => {
      const todos = await APIHelper.getAllTodos();
      setTodos(todos);
    };
    fetchTodoAndSetTodos();
  }, []);

  const runCommand = async e => {
    e.preventDefault();
    if (!command) {
      alert("please enter something");
      return;
    }
    setCommandOutput("Command in progress");
    setCommandOutput(await APIHelper.runCommand(command));
    const todoList = await APIHelper.getAllTodos();
    setTodos([...todoList]);
  }

  const createTodo = async e => {
    e.preventDefault();
    if (!todo) {
      alert("please enter something");
      return;
    }
    if (todos.some(({ task }) => task === todo)) {
      alert(`Task: ${todo} already exists`);
      return;
    }
    setCommandOutput("Command in progress");
    setCommandOutput(await APIHelper.createTodo(todo));
    const todoList = await APIHelper.getAllTodos();
    setTodos([...todoList]);
  };

  const deleteTodo = async (e, id) => {
    try {
      e.stopPropagation();
      setCommandOutput("Command in progress");
      setCommandOutput(await APIHelper.deleteTodo(todos[id].title));
      const todoList = await APIHelper.getAllTodos();
      setTodos([...todoList]);
    } catch (err) { }
  };

  const updateTodo = async (e, id) => {
    e.stopPropagation();
    setCommandOutput("Command in progress");
    if (todos[id].completed === true) {
      setCommandOutput(await APIHelper.markIncomplete(todos[id].title));
    }