-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #25 from it-goats/feature/ITG-58-ITG-62
[ITG-24] Create, view and delete subtasks.
- Loading branch information
Showing
13 changed files
with
339 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { ITaskRelation, ITasksRelated } from "../types/taskRelation"; | ||
|
||
import axios from "axios"; | ||
|
||
export const getSubtasks = { | ||
cacheKey: (id: string) => ["task-relations", id, "SUBTASK"], | ||
run: (id: string) => | ||
axios.get<ITasksRelated[]>(`/task-relations/${id}/SUBTASK`), | ||
}; | ||
|
||
export const createRelation = (data: Omit<ITaskRelation, "id">) => | ||
axios.post<ITaskRelation>("/task-relations", data); | ||
|
||
export const deleteRelation = (id: string) => | ||
axios.delete<ITaskRelation>(`/task-relations/${id}`); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import tw, { styled } from "twin.macro"; | ||
|
||
const AddDependenceButton = styled.button( | ||
tw`rounded-lg flex flex-row items-start h-5 py-1 px-4 w-16 bg-tertiary font-bold text-lg color[#787DAB]` | ||
); | ||
|
||
export default AddDependenceButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import "twin.macro"; | ||
|
||
import NavigationButton from "./NavigationButton"; | ||
import { TrashIcon } from "@heroicons/react/solid"; | ||
|
||
interface Props { | ||
title: string; | ||
taskId: string; | ||
onClickDelete: (taskId: string) => void; | ||
} | ||
|
||
export default function MiniTaskDelete({ | ||
title, | ||
onClickDelete, | ||
taskId, | ||
}: Props) { | ||
return ( | ||
<div tw="rounded-xl w-full bg-white shadow-2xl text-blue-800 p-1.5"> | ||
<p tw="flex items-center text-sm"> | ||
{title} | ||
<NavigationButton | ||
tw="text-stone-50 bg-red-500 flex ml-auto" | ||
onClick={() => onClickDelete(taskId)} | ||
> | ||
<TrashIcon height={10} width={10} /> | ||
</NavigationButton> | ||
</p> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import { getTask, getTasks, updateTask } from "../../api/tasks"; | ||
import tw, { styled } from "twin.macro"; | ||
import { useMutation, useQuery, useQueryClient } from "react-query"; | ||
|
||
import Checkbox from "./CheckBox"; | ||
import { ITask } from "../../types/task"; | ||
import { getSubtasks } from "../../api/taskRelations"; | ||
import { useState } from "react"; | ||
|
||
interface Props { | ||
subtask: ITask; | ||
parentId: string; | ||
} | ||
|
||
interface PropsList { | ||
parentId: string; | ||
} | ||
|
||
const Container = styled.div(tw`grid grid-cols-4 gap-3`); | ||
|
||
const Subtask = ({ subtask, parentId }: Props) => { | ||
const [errorMessage, setErrorMessage] = useState(""); | ||
const client = useQueryClient(); | ||
const editTask = useMutation((task: ITask) => updateTask(task.id, task), { | ||
onSuccess: () => { | ||
client.invalidateQueries(getTasks.cacheKey); | ||
client.invalidateQueries(getTask.cacheKey(parentId)); | ||
client.invalidateQueries(getSubtasks.cacheKey(parentId)); | ||
}, | ||
}); | ||
const handleIsDoneChange = async () => { | ||
try { | ||
const updatedTask = { | ||
...subtask, | ||
isDone: !subtask.isDone, | ||
}; | ||
await editTask.mutateAsync(updatedTask); | ||
} catch (error) { | ||
setErrorMessage( | ||
"Something went wrong :C, It's not possible to uncheck the task." | ||
); | ||
} | ||
}; | ||
|
||
return ( | ||
<div tw="rounded-xl bg-tertiary text-secondary p-1.5 grid"> | ||
<p tw="font-medium text-xs">{subtask.title}</p> | ||
<p tw="place-self-end"> | ||
<Checkbox checked={subtask.isDone} onChange={handleIsDoneChange} /> | ||
</p> | ||
{errorMessage && ( | ||
<p tw="flex items-center text-orange-500 pt-1"> {errorMessage}</p> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default function SubtasksList({ parentId }: PropsList) { | ||
const { data, isLoading, error } = useQuery( | ||
getSubtasks.cacheKey(parentId), | ||
() => getSubtasks.run(parentId) | ||
); | ||
|
||
if (isLoading) return <Container>Loading</Container>; | ||
if (error) return <Container>Oops</Container>; | ||
if (!data?.data) return <Container />; | ||
|
||
const subtasks = data.data.slice().reverse(); | ||
|
||
if (subtasks.length == 0) { | ||
return <Container>{"<No tasks>"}</Container>; | ||
} | ||
|
||
return ( | ||
<Container> | ||
{subtasks.map((relation) => ( | ||
<Subtask | ||
key={relation.id} | ||
subtask={relation.task} | ||
parentId={parentId} | ||
/> | ||
))} | ||
</Container> | ||
); | ||
} |
Oops, something went wrong.