Breaking News: Grepper is joining You.com. Read the official announcement!

todo app structure

Thankful Tuatara answered on June 19, 2023 Popularity 9/10 Helpfulness 1/10

answer todo app structure

todo app structure

Comment

import { useRef, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import "./App.css";
import {
  COMPLETED,
  getTodos,
  PENDING,
  useTodoQueryClient,
} from "./helper.js";
import AddToDoButton from "./components/AddToDoButton.jsx";
import AddToDoTaskForm from "./components/AddTodoTaskForm.jsx";
import ToDoCard from "./components/ToDoCard.jsx";

function App() {
  const [isModalOpen, setIsModalOpen] = useState({ open: false, todo: null });
  const { deleteTodo, postTodo, updateTodo } = useTodoQueryClient();
  const formRef = useRef(null);

  const handleResetForm = () => {
    if (formRef.current) {
      formRef.current.reset();
    }
  };

  const handleDeleteTodo = (todo) => {
    deleteTodo.mutate(todo?._id);
  };

  const handleEditTodo = (todo) => {
    setIsModalOpen({ todo, open: true });
    handleResetForm({
      todoTitle: todo.title || "",
      todoDescription: todo.description || "",
    });
  };

  const onSubmit = async (data) => {
    try {
      if (isModalOpen.todo?._id) {
        await updateTodo.mutateAsync({
          _id: isModalOpen.todo?._id,
          title: data?.todoTitle,
          description: data?.todoDescription,
          status: isModalOpen.todo?.status,
        });
      } else {
        await postTodo.mutateAsync({
          title: data?.todoTitle,
          description: data?.todoDescription,
          status: PENDING,
        });
      }
      closeModal();
      handleResetForm();
    } catch (error) {
      console.log(error);
    }
  };

  const todosData = useQuery({ queryKey: ["todos"], queryFn: getTodos });
  const todos = todosData?.data?.payload;

  const handleCheckboxChange = async (event, todo) => {
    const { checked } = event.target;
    const updatedTodo = { ...todo, status: checked ? COMPLETED : PENDING };
    await updateTodo.mutateAsync(updatedTodo);
  };

  function openModal() {
    handleResetForm();
    setIsModalOpen({ todo: null, open: true });
  }

  function closeModal() {
    setIsModalOpen({ todo: null, open: false });
    handleResetForm();
  }

  if (todosData.isLoading) {
    return (
      <div className="fixed top-0 left-0 right-0 flex justify-center mt-10">
        <div className="text-2xl font-bold">Loading...</div>
      </div>
    );
  }

  if (todosData.isError) {
    return (
      <div className="bg-red-500 text-white p-4 text-center">
        Error: {todosData.error.message}
      </div>
    );
  }
  return (
    <>
      <AddToDoButton openModal={openModal} />
      {isModalOpen.open && (
        <AddToDoTaskForm
          handleResetForm={handleResetForm}
          formRef={formRef}
          isModalOpen={isModalOpen}
          onSubmit={onSubmit}
          closeModal={closeModal}
          setIsModalOpen={setIsModalOpen}
        />
      )}
      <div className="m-10">
        {todos?.length > 0 ? (
          todos.map((todo) => (
            <ToDoCard
              key={todo?._id}
              todo={todo}
              handleEditTodo={handleEditTodo}
              handleDeleteTodo={handleDeleteTodo}
              handleCheckboxChange={handleCheckboxChange}
            />
          ))
        ) : (
          <div className="text-center text-gray-500">No todos found.</div>
        )}
      </div>
    </>
  );
}

export default App;

Popularity 9/10 Helpfulness 1/10 Language css

Source: chat.openai.com

Tags: css structure todo

Link to this answer
Share Copy Link

Contributed on Jun 19 2023

Thankful Tuatara

0 Answers Avg Quality 2/10

todo app structure

Contents

More Related Answers

todo app structure

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.