You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
4.8 KiB
105 lines
4.8 KiB
import React, { useState } from 'react';
|
|
import {
|
|
Box,
|
|
Checkbox, CircularProgress,
|
|
Divider, Grid, IconButton,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Paper, Stack,
|
|
TextField,
|
|
Typography
|
|
} from "@mui/material";
|
|
import { useForm } from "react-hook-form";
|
|
import { useAddTaskMutation, useChangeDoneMutation, useDeleteTaskMutation, useGetTasksQuery } from "../graphql/tscode";
|
|
import { LoadingButton } from "@mui/lab";
|
|
import { Delete } from "@mui/icons-material";
|
|
import SetTitle from "../components/SetTitle";
|
|
|
|
type TasksPageProps = {}
|
|
|
|
type Inputs = {
|
|
title: string,
|
|
description: string,
|
|
}
|
|
|
|
const TasksPage = ({}: TasksPageProps) => {
|
|
const { reset: resetForm, register, handleSubmit, formState: { errors } } = useForm<Inputs>()
|
|
|
|
const { loading: tasksLoading, error: tasksError, data: tasksData, refetch } = useGetTasksQuery({ onCompleted: (result) => console.log(result) })
|
|
|
|
const [ addTaskFunction, { data: addTaskData, loading: addTaskLoading, error: addTaskError } ] = useAddTaskMutation({ onCompleted: result => {console.log(result); refetch()} })
|
|
|
|
const [ changeDoneFunction, { data: changeDoneData, loading: changeDoneLoading, error: changeDoneError } ] = useChangeDoneMutation({ onCompleted: result => refetch() })
|
|
|
|
const [ deleteTaskFunction, { data: deleteTaskData, loading: deleteTaskLoading, error: deleteTaskError } ] = useDeleteTaskMutation({ onCompleted: result => refetch() })
|
|
|
|
const [ idChange, setIdChange ] = useState<string>();
|
|
|
|
const [ idDelete, setIdDelete ] = useState<string>();
|
|
|
|
const onSubmit = async (data: Inputs) => {
|
|
try {
|
|
await addTaskFunction({ variables: data })
|
|
resetForm()
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', margin: '6px', padding: '6px' }}>
|
|
<SetTitle>Your Tasks</SetTitle>
|
|
<Grid container spacing={1}>
|
|
<Grid item xs={12} md={4}>
|
|
<Paper component='form' onSubmit={handleSubmit(onSubmit)} elevation={2} sx={{ padding: 2, display: 'flex', flexDirection: 'column' }}>
|
|
<TextField variant='standard' label='Task Title' {...register('title', { required: 'Title is required' })} sx={{ mb: 1 }}/>
|
|
<TextField variant='standard' label='Task Description' {...register('description')} sx={{ mb: 1 }}/>
|
|
<LoadingButton loading={addTaskLoading} variant='outlined' type='submit'>Add Task</LoadingButton>
|
|
</Paper>
|
|
</Grid>
|
|
<Grid item xs={12} md={8}>
|
|
<Paper>
|
|
{tasksLoading && typeof tasksData == 'undefined' ?
|
|
<Stack alignItems="center">
|
|
<CircularProgress sx={{ m: 2 }} size={600} />
|
|
</Stack> :
|
|
!tasksLoading && tasksData!.getTasks.length == 0 ?
|
|
<Typography variant='h6' sx={{ textAlign: 'center', py: 3 }}>There's no Tasks</Typography> :
|
|
<List>
|
|
{tasksData!.getTasks.map(task => (
|
|
<ListItem
|
|
key={task.id}
|
|
secondaryAction={
|
|
deleteTaskLoading && idDelete == task.id ?
|
|
<CircularProgress size={25} /> :
|
|
<IconButton edge='end' onClick={() => deleteTaskFunction({ variables: { id: task.id } })}>
|
|
<Delete color='error' />
|
|
</IconButton>
|
|
}
|
|
>
|
|
<ListItemIcon sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
{changeDoneLoading && idChange == task.id ?
|
|
<CircularProgress size={25}/> :
|
|
<Checkbox onClick={() => {
|
|
setIdChange(task.id);
|
|
changeDoneFunction({ variables: { id: task.id } })
|
|
}} checked={task.isDone}/>
|
|
}
|
|
</ListItemIcon>
|
|
<ListItemText primary={task.title} secondary={task.description}/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
}
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
)
|
|
};
|
|
|
|
export default TasksPage;
|