import React, { useState } from 'react' import { Link } from 'react-router-dom' import { useQuery } from '@wasp/queries' import { useAction } from '@wasp/actions' import getTasks from '@wasp/queries/getTasks.js' import createTask from '@wasp/actions/createTask.js' import updateTaskIsDone from '@wasp/actions/updateTaskIsDone.js' import deleteCompletedTasks from '@wasp/actions/deleteCompletedTasks.js' import toggleAllTasks from '@wasp/actions/toggleAllTasks.js' const Todo = (props) => { const { data: tasks, isError, error: tasksError } = useQuery(getTasks) const isThereAnyTask = () => tasks?.length > 0 const TasksError = (props) => { return 'Error during fetching tasks: ' + (tasksError?.message || '') } return (

Todos

{isError && } {isThereAnyTask() && ( <>
) } const Footer = (props) => { const numCompletedTasks = props.tasks.filter(t => t.isDone).length const numUncompletedTasks = props.tasks.filter(t => !t.isDone).length const handleDeleteCompletedTasks = async () => { try { await deleteCompletedTasks() } catch (err) { console.log(err) } } return (
{numUncompletedTasks} items left
) } const Tasks = (props) => { return (
{props.tasks.map((task, idx) => )}
) } const Task = (props) => { const updateTaskIsDoneOptimistically = useAction(updateTaskIsDone, { optimisticUpdates: [{ getQuerySpecifier: () => [getTasks], updateQuery: (updatedTask, oldTasks) => { if (oldTasks === undefined) { // cache is empty return [updatedTask]; } else { return oldTasks.map(task => task.id === updatedTask.id ? { ...task, ...updatedTask } : task) } } }] }); const handleTaskIsDoneChange = async (event) => { const id = parseInt(event.target.id) const isDone = event.target.checked try { await updateTaskIsDoneOptimistically({ id, isDone }) } catch (err) { console.log(err) } } return ( {props.task.description} ) } const NewTaskForm = (props) => { const defaultDescription = '' const [description, setDescription] = useState(defaultDescription) const createNewTask = async (description) => { const task = { isDone: false, description } await createTask(task) } const handleNewTaskSubmit = async (event) => { event.preventDefault() try { await createNewTask(description) setDescription(defaultDescription) } catch (err) { console.log(err) } } return (
setDescription(e.target.value)} />
) } const ToggleAllTasksButton = (props) => { const handleToggleAllTasks = async () => { try { await toggleAllTasks() } catch (err) { console.log(err) } } return ( ) } export default Todo