mirror of
https://github.com/hex248/sprint.git
synced 2026-02-07 18:23:03 +00:00
switched issue and timer flows to mutations
This commit is contained in:
Oliver Bryan
@@ -1,9 +1,11 @@
|
||||
import type { IssueResponse, ProjectResponse, SprintRecord, UserRecord } from "@sprint/shared";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { MultiAssigneeSelect } from "@/components/multi-assignee-select";
|
||||
import { useSelection } from "@/components/selection-provider";
|
||||
import { useSession } from "@/components/session-provider";
|
||||
import SmallSprintDisplay from "@/components/small-sprint-display";
|
||||
import SmallUserDisplay from "@/components/small-user-display";
|
||||
import { SprintSelect } from "@/components/sprint-select";
|
||||
import { StatusSelect } from "@/components/status-select";
|
||||
import StatusTag from "@/components/status-tag";
|
||||
import { TimerDisplay } from "@/components/timer-display";
|
||||
@@ -11,16 +13,23 @@ import { TimerModal } from "@/components/timer-modal";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
|
||||
import Icon from "@/components/ui/icon";
|
||||
import { IconButton } from "@/components/ui/icon-button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { SelectTrigger } from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { issue } from "@/lib/server";
|
||||
import {
|
||||
useDeleteIssue,
|
||||
useOrganisationMembers,
|
||||
useSelectedIssue,
|
||||
useSelectedOrganisation,
|
||||
useSelectedProject,
|
||||
useSprints,
|
||||
useUpdateIssue,
|
||||
} from "@/lib/query/hooks";
|
||||
import { parseError } from "@/lib/server";
|
||||
import { cn, issueID } from "@/lib/utils";
|
||||
import SmallSprintDisplay from "./small-sprint-display";
|
||||
import { SprintSelect } from "./sprint-select";
|
||||
import { IconButton } from "./ui/icon-button";
|
||||
|
||||
function assigneesToStringArray(assignees: UserRecord[]): string[] {
|
||||
function assigneesToStringArray(assignees: { id: number }[]): string[] {
|
||||
if (assignees.length === 0) return ["unassigned"];
|
||||
return assignees.map((a) => a.id.toString());
|
||||
}
|
||||
@@ -29,44 +38,39 @@ function stringArrayToAssigneeIds(assigneeIds: string[]): number[] {
|
||||
return assigneeIds.filter((id) => id !== "unassigned").map((id) => Number(id));
|
||||
}
|
||||
|
||||
export function IssueDetailPane({
|
||||
project,
|
||||
sprints,
|
||||
issueData,
|
||||
members,
|
||||
statuses,
|
||||
close,
|
||||
onIssueUpdate,
|
||||
onIssueDelete,
|
||||
}: {
|
||||
project: ProjectResponse;
|
||||
sprints: SprintRecord[];
|
||||
issueData: IssueResponse;
|
||||
members: UserRecord[];
|
||||
statuses: Record<string, string>;
|
||||
close: () => void;
|
||||
onIssueUpdate?: () => void;
|
||||
onIssueDelete?: (issueId: number) => void | Promise<void>;
|
||||
}) {
|
||||
export function IssueDetailPane() {
|
||||
const { user } = useSession();
|
||||
const [assigneeIds, setAssigneeIds] = useState<string[]>(assigneesToStringArray(issueData.Assignees));
|
||||
const [sprintId, setSprintId] = useState<string>(issueData.Issue.sprintId?.toString() ?? "unassigned");
|
||||
const [status, setStatus] = useState<string>(issueData.Issue.status);
|
||||
const { selectIssue } = useSelection();
|
||||
const selectedOrganisation = useSelectedOrganisation();
|
||||
const selectedProject = useSelectedProject();
|
||||
const issueData = useSelectedIssue();
|
||||
const { data: sprints = [] } = useSprints(selectedProject?.Project.id);
|
||||
const { data: membersData = [] } = useOrganisationMembers(selectedOrganisation?.Organisation.id);
|
||||
const updateIssue = useUpdateIssue();
|
||||
const deleteIssue = useDeleteIssue();
|
||||
|
||||
const members = useMemo(() => membersData.map((member) => member.User), [membersData]);
|
||||
const statuses = selectedOrganisation?.Organisation.statuses ?? {};
|
||||
|
||||
const [assigneeIds, setAssigneeIds] = useState<string[]>([]);
|
||||
const [sprintId, setSprintId] = useState<string>("unassigned");
|
||||
const [status, setStatus] = useState<string>("");
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [linkCopied, setLinkCopied] = useState(false);
|
||||
const copyTimeoutRef = useRef<number | null>(null);
|
||||
|
||||
const [title, setTitle] = useState(issueData.Issue.title);
|
||||
const [originalTitle, setOriginalTitle] = useState(issueData.Issue.title);
|
||||
const [title, setTitle] = useState("");
|
||||
const [originalTitle, setOriginalTitle] = useState("");
|
||||
const [isSavingTitle, setIsSavingTitle] = useState(false);
|
||||
|
||||
const [description, setDescription] = useState(issueData.Issue.description);
|
||||
const [originalDescription, setOriginalDescription] = useState(issueData.Issue.description);
|
||||
const [description, setDescription] = useState("");
|
||||
const [originalDescription, setOriginalDescription] = useState("");
|
||||
const [isEditingDescription, setIsEditingDescription] = useState(false);
|
||||
const [isSavingDescription, setIsSavingDescription] = useState(false);
|
||||
const descriptionRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!issueData) return;
|
||||
setSprintId(issueData.Issue.sprintId?.toString() ?? "unassigned");
|
||||
setAssigneeIds(assigneesToStringArray(issueData.Assignees));
|
||||
setStatus(issueData.Issue.status);
|
||||
@@ -85,16 +89,19 @@ export function IssueDetailPane({
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!issueData || !selectedProject || !selectedOrganisation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleSprintChange = async (value: string) => {
|
||||
setSprintId(value);
|
||||
const newSprintId = value === "unassigned" ? null : Number(value);
|
||||
|
||||
await issue.update({
|
||||
issueId: issueData.Issue.id,
|
||||
try {
|
||||
await updateIssue.mutateAsync({
|
||||
id: issueData.Issue.id,
|
||||
sprintId: newSprintId,
|
||||
onSuccess: () => {
|
||||
onIssueUpdate?.();
|
||||
|
||||
});
|
||||
toast.success(
|
||||
<>
|
||||
Successfully updated sprint to{" "}
|
||||
@@ -103,17 +110,15 @@ export function IssueDetailPane({
|
||||
) : (
|
||||
<SmallSprintDisplay sprint={sprints.find((s) => s.id === newSprintId)} />
|
||||
)}{" "}
|
||||
for {issueID(project.Project.key, issueData.Issue.number)}
|
||||
for {issueID(selectedProject.Project.key, issueData.Issue.number)}
|
||||
</>,
|
||||
{
|
||||
dismissible: false,
|
||||
},
|
||||
);
|
||||
},
|
||||
onError: (error) => {
|
||||
} catch (error) {
|
||||
console.error("error updating sprint:", error);
|
||||
setSprintId(issueData.Issue.sprintId?.toString() ?? "unassigned");
|
||||
|
||||
toast.error(
|
||||
<>
|
||||
Error updating sprint to{" "}
|
||||
@@ -122,14 +127,13 @@ export function IssueDetailPane({
|
||||
) : (
|
||||
<SmallSprintDisplay sprint={sprints.find((s) => s.id === newSprintId)} />
|
||||
)}{" "}
|
||||
for {issueID(project.Project.key, issueData.Issue.number)}
|
||||
for {issueID(selectedProject.Project.key, issueData.Issue.number)}
|
||||
</>,
|
||||
{
|
||||
dismissible: false,
|
||||
},
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleAssigneeChange = async (newAssigneeIds: string[]) => {
|
||||
@@ -147,11 +151,12 @@ export function IssueDetailPane({
|
||||
return;
|
||||
}
|
||||
|
||||
await issue.update({
|
||||
issueId: issueData.Issue.id,
|
||||
try {
|
||||
await updateIssue.mutateAsync({
|
||||
id: issueData.Issue.id,
|
||||
assigneeIds: newAssigneeIdNumbers,
|
||||
onSuccess: () => {
|
||||
const assignedUsers = members.filter((m) => newAssigneeIdNumbers.includes(m.id));
|
||||
});
|
||||
const assignedUsers = members.filter((member) => newAssigneeIdNumbers.includes(member.id));
|
||||
const displayText =
|
||||
assignedUsers.length === 0
|
||||
? "Unassigned"
|
||||
@@ -161,50 +166,43 @@ export function IssueDetailPane({
|
||||
toast.success(
|
||||
<div className={"flex items-center gap-2"}>
|
||||
Updated assignees to {displayText} for{" "}
|
||||
{issueID(project.Project.key, issueData.Issue.number)}
|
||||
{issueID(selectedProject.Project.key, issueData.Issue.number)}
|
||||
</div>,
|
||||
{
|
||||
dismissible: false,
|
||||
},
|
||||
);
|
||||
onIssueUpdate?.();
|
||||
},
|
||||
onError: (error) => {
|
||||
} catch (error) {
|
||||
console.error("error updating assignees:", error);
|
||||
setAssigneeIds(previousAssigneeIds);
|
||||
|
||||
toast.error(`Error updating assignees: ${error}`, {
|
||||
toast.error(`Error updating assignees: ${parseError(error as Error)}`, {
|
||||
dismissible: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = async (value: string) => {
|
||||
setStatus(value);
|
||||
|
||||
await issue.update({
|
||||
issueId: issueData.Issue.id,
|
||||
try {
|
||||
await updateIssue.mutateAsync({
|
||||
id: issueData.Issue.id,
|
||||
status: value,
|
||||
onSuccess: () => {
|
||||
});
|
||||
toast.success(
|
||||
<>
|
||||
{issueID(project.Project.key, issueData.Issue.number)}'s status updated to{" "}
|
||||
{issueID(selectedProject.Project.key, issueData.Issue.number)}'s status updated to{" "}
|
||||
<StatusTag status={value} colour={statuses[value]} />
|
||||
</>,
|
||||
{ dismissible: false },
|
||||
);
|
||||
onIssueUpdate?.();
|
||||
},
|
||||
onError: (error) => {
|
||||
} catch (error) {
|
||||
console.error("error updating status:", error);
|
||||
setStatus(issueData.Issue.status);
|
||||
|
||||
toast.error(`Error updating status: ${error}`, {
|
||||
toast.error(`Error updating status: ${parseError(error as Error)}`, {
|
||||
dismissible: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
@@ -235,21 +233,19 @@ export function IssueDetailPane({
|
||||
}
|
||||
|
||||
setIsSavingTitle(true);
|
||||
await issue.update({
|
||||
issueId: issueData.Issue.id,
|
||||
try {
|
||||
await updateIssue.mutateAsync({
|
||||
id: issueData.Issue.id,
|
||||
title: trimmedTitle,
|
||||
onSuccess: () => {
|
||||
});
|
||||
setOriginalTitle(trimmedTitle);
|
||||
toast.success(`${issueID(project.Project.key, issueData.Issue.number)} Title updated`);
|
||||
onIssueUpdate?.();
|
||||
setIsSavingTitle(false);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.success(`${issueID(selectedProject.Project.key, issueData.Issue.number)} Title updated`);
|
||||
} catch (error) {
|
||||
console.error("error updating title:", error);
|
||||
setTitle(originalTitle);
|
||||
} finally {
|
||||
setIsSavingTitle(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDescriptionSave = async () => {
|
||||
@@ -262,52 +258,50 @@ export function IssueDetailPane({
|
||||
}
|
||||
|
||||
setIsSavingDescription(true);
|
||||
await issue.update({
|
||||
issueId: issueData.Issue.id,
|
||||
try {
|
||||
await updateIssue.mutateAsync({
|
||||
id: issueData.Issue.id,
|
||||
description: trimmedDescription,
|
||||
onSuccess: () => {
|
||||
});
|
||||
setOriginalDescription(trimmedDescription);
|
||||
setDescription(trimmedDescription);
|
||||
toast.success(`${issueID(project.Project.key, issueData.Issue.number)} Description updated`);
|
||||
onIssueUpdate?.();
|
||||
setIsSavingDescription(false);
|
||||
toast.success(
|
||||
`${issueID(selectedProject.Project.key, issueData.Issue.number)} Description updated`,
|
||||
);
|
||||
if (trimmedDescription === "") {
|
||||
setIsEditingDescription(false);
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
} catch (error) {
|
||||
console.error("error updating description:", error);
|
||||
setDescription(originalDescription);
|
||||
} finally {
|
||||
setIsSavingDescription(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
await issue.delete({
|
||||
issueId: issueData.Issue.id,
|
||||
onSuccess: async () => {
|
||||
await onIssueDelete?.(issueData.Issue.id);
|
||||
|
||||
toast.success(`Deleted issue ${issueID(project.Project.key, issueData.Issue.number)}`, {
|
||||
try {
|
||||
await deleteIssue.mutateAsync(issueData.Issue.id);
|
||||
selectIssue(null);
|
||||
toast.success(`Deleted issue ${issueID(selectedProject.Project.key, issueData.Issue.number)}`, {
|
||||
dismissible: false,
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`error deleting issue ${issueID(project.Project.key, issueData.Issue.number)}`,
|
||||
`error deleting issue ${issueID(selectedProject.Project.key, issueData.Issue.number)}`,
|
||||
error,
|
||||
);
|
||||
|
||||
toast.error(
|
||||
`Error deleting issue ${issueID(project.Project.key, issueData.Issue.number)}: ${error}`,
|
||||
`Error deleting issue ${issueID(selectedProject.Project.key, issueData.Issue.number)}: ${parseError(
|
||||
error as Error,
|
||||
)}`,
|
||||
{
|
||||
dismissible: false,
|
||||
},
|
||||
);
|
||||
},
|
||||
});
|
||||
} finally {
|
||||
setDeleteOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -315,7 +309,7 @@ export function IssueDetailPane({
|
||||
<div className="flex flex-row items-center justify-end border-b h-[25px]">
|
||||
<span className="w-full">
|
||||
<p className="text-sm w-fit px-1 font-700">
|
||||
{issueID(project.Project.key, issueData.Issue.number)}
|
||||
{issueID(selectedProject.Project.key, issueData.Issue.number)}
|
||||
</p>
|
||||
</span>
|
||||
<div className="flex items-center">
|
||||
@@ -325,7 +319,7 @@ export function IssueDetailPane({
|
||||
<IconButton variant="destructive" onClick={handleDelete} title={"Delete issue"}>
|
||||
<Icon icon="trash" />
|
||||
</IconButton>
|
||||
<IconButton onClick={close} title={"Close"}>
|
||||
<IconButton onClick={() => selectIssue(null)} title={"Close"}>
|
||||
<Icon icon="x" />
|
||||
</IconButton>
|
||||
</div>
|
||||
@@ -355,14 +349,14 @@ export function IssueDetailPane({
|
||||
<div className="flex w-full items-center min-w-0">
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
onBlur={handleTitleSave}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.currentTarget.blur();
|
||||
} else if (e.key === "Escape") {
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.currentTarget.blur();
|
||||
} else if (event.key === "Escape") {
|
||||
setTitle(originalTitle);
|
||||
e.currentTarget.blur();
|
||||
event.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
disabled={isSavingTitle}
|
||||
@@ -378,15 +372,15 @@ export function IssueDetailPane({
|
||||
<Textarea
|
||||
ref={descriptionRef}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
onBlur={handleDescriptionSave}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape" || (e.ctrlKey && e.key === "Enter")) {
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Escape" || (event.ctrlKey && event.key === "Enter")) {
|
||||
setDescription(originalDescription);
|
||||
if (originalDescription === "") {
|
||||
setIsEditingDescription(false);
|
||||
}
|
||||
e.currentTarget.blur();
|
||||
event.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
placeholder="Add a description..."
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
import {
|
||||
ISSUE_DESCRIPTION_MAX_LENGTH,
|
||||
ISSUE_TITLE_MAX_LENGTH,
|
||||
type SprintRecord,
|
||||
type UserRecord,
|
||||
} from "@sprint/shared";
|
||||
import { ISSUE_DESCRIPTION_MAX_LENGTH, ISSUE_TITLE_MAX_LENGTH } from "@sprint/shared";
|
||||
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { type FormEvent, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { MultiAssigneeSelect } from "@/components/multi-assignee-select";
|
||||
import { useAuthenticatedSession } from "@/components/session-provider";
|
||||
import { SprintSelect } from "@/components/sprint-select";
|
||||
import { StatusSelect } from "@/components/status-select";
|
||||
import StatusTag from "@/components/status-tag";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -23,35 +19,35 @@ import {
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { SelectTrigger } from "@/components/ui/select";
|
||||
import { issue, parseError } from "@/lib/server";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { SprintSelect } from "./sprint-select";
|
||||
import {
|
||||
useCreateIssue,
|
||||
useOrganisationMembers,
|
||||
useSelectedOrganisation,
|
||||
useSelectedProject,
|
||||
useSprints,
|
||||
} from "@/lib/query/hooks";
|
||||
import { parseError } from "@/lib/server";
|
||||
import { cn, issueID } from "@/lib/utils";
|
||||
|
||||
export function IssueModal({
|
||||
projectId,
|
||||
sprints,
|
||||
members,
|
||||
statuses,
|
||||
trigger,
|
||||
completeAction,
|
||||
errorAction,
|
||||
}: {
|
||||
projectId?: number;
|
||||
sprints?: SprintRecord[];
|
||||
members?: UserRecord[];
|
||||
statuses: Record<string, string>;
|
||||
trigger?: React.ReactNode;
|
||||
completeAction?: (issueNumber: number) => void | Promise<void>;
|
||||
errorAction?: (errorMessage: string) => void | Promise<void>;
|
||||
}) {
|
||||
export function IssueModal({ trigger }: { trigger?: React.ReactNode }) {
|
||||
const { user } = useAuthenticatedSession();
|
||||
const selectedOrganisation = useSelectedOrganisation();
|
||||
const selectedProject = useSelectedProject();
|
||||
const { data: sprints = [] } = useSprints(selectedProject?.Project.id);
|
||||
const { data: membersData = [] } = useOrganisationMembers(selectedOrganisation?.Organisation.id);
|
||||
const createIssue = useCreateIssue();
|
||||
|
||||
const members = useMemo(() => membersData.map((member) => member.User), [membersData]);
|
||||
const statuses = selectedOrganisation?.Organisation.statuses ?? {};
|
||||
const statusOptions = useMemo(() => Object.keys(statuses), [statuses]);
|
||||
const defaultStatus = statusOptions[0] ?? "";
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [sprintId, setSprintId] = useState<string>("unassigned");
|
||||
const [assigneeIds, setAssigneeIds] = useState<string[]>(["unassigned"]);
|
||||
const [status, setStatus] = useState<string>(Object.keys(statuses)[0] ?? "");
|
||||
const [status, setStatus] = useState<string>(defaultStatus);
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -61,7 +57,7 @@ export function IssueModal({
|
||||
setDescription("");
|
||||
setSprintId("unassigned");
|
||||
setAssigneeIds(["unassigned"]);
|
||||
setStatus(statuses?.[0] ?? "");
|
||||
setStatus(defaultStatus);
|
||||
setSubmitAttempted(false);
|
||||
setSubmitting(false);
|
||||
setError(null);
|
||||
@@ -74,8 +70,8 @@ export function IssueModal({
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
const handleSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setSubmitAttempted(true);
|
||||
|
||||
@@ -92,7 +88,7 @@ export function IssueModal({
|
||||
return;
|
||||
}
|
||||
|
||||
if (!projectId) {
|
||||
if (!selectedProject) {
|
||||
setError("select a project first");
|
||||
return;
|
||||
}
|
||||
@@ -100,42 +96,26 @@ export function IssueModal({
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
await issue.create({
|
||||
projectId,
|
||||
const data = await createIssue.mutateAsync({
|
||||
projectId: selectedProject.Project.id,
|
||||
title,
|
||||
description,
|
||||
sprintId: sprintId === "unassigned" ? null : Number(sprintId),
|
||||
assigneeIds: assigneeIds.filter((id) => id !== "unassigned").map((id) => Number(id)),
|
||||
status: status.trim() === "" ? undefined : status,
|
||||
onSuccess: async (data) => {
|
||||
});
|
||||
setOpen(false);
|
||||
reset();
|
||||
try {
|
||||
await completeAction?.(data.number);
|
||||
} catch (actionErr) {
|
||||
console.error(actionErr);
|
||||
}
|
||||
},
|
||||
onError: async (err) => {
|
||||
const message = parseError(err);
|
||||
toast.success(`Created ${issueID(selectedProject.Project.key, data.number)}`, {
|
||||
dismissible: false,
|
||||
});
|
||||
} catch (err) {
|
||||
const message = parseError(err as Error);
|
||||
setError(message);
|
||||
setSubmitting(false);
|
||||
|
||||
toast.error(`Error creating issue: ${message}`, {
|
||||
dismissible: false,
|
||||
});
|
||||
|
||||
try {
|
||||
await errorAction?.(message);
|
||||
} catch (actionErr) {
|
||||
console.error(actionErr);
|
||||
}
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("failed to create issue");
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -143,7 +123,7 @@ export function IssueModal({
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
{trigger || (
|
||||
<Button variant="outline" disabled={!projectId}>
|
||||
<Button variant="outline" disabled={!selectedProject}>
|
||||
Create Issue
|
||||
</Button>
|
||||
)}
|
||||
@@ -156,15 +136,14 @@ export function IssueModal({
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid">
|
||||
{statuses && Object.keys(statuses).length > 0 && (
|
||||
{statusOptions.length > 0 && (
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Label>Status</Label>
|
||||
<StatusSelect
|
||||
statuses={statuses}
|
||||
value={status}
|
||||
onChange={(newValue) => {
|
||||
if (newValue.trim() === "") return; // TODO: handle this better
|
||||
// unsure why an empty value is being sent, but preventing it this way for now
|
||||
if (newValue.trim() === "") return;
|
||||
setStatus(newValue);
|
||||
}}
|
||||
trigger={({ isOpen, value }) => (
|
||||
@@ -188,11 +167,11 @@ export function IssueModal({
|
||||
<Field
|
||||
label="Title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
validate={(v) =>
|
||||
v.trim() === ""
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
validate={(value) =>
|
||||
value.trim() === ""
|
||||
? "Cannot be empty"
|
||||
: v.trim().length > ISSUE_TITLE_MAX_LENGTH
|
||||
: value.trim().length > ISSUE_TITLE_MAX_LENGTH
|
||||
? `Too long (${ISSUE_TITLE_MAX_LENGTH} character limit)`
|
||||
: undefined
|
||||
}
|
||||
@@ -203,9 +182,9 @@ export function IssueModal({
|
||||
<Field
|
||||
label="Description (optional)"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
validate={(v) =>
|
||||
v.trim().length > ISSUE_DESCRIPTION_MAX_LENGTH
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
validate={(value) =>
|
||||
value.trim().length > ISSUE_DESCRIPTION_MAX_LENGTH
|
||||
? `Too long (${ISSUE_DESCRIPTION_MAX_LENGTH} character limit)`
|
||||
: undefined
|
||||
}
|
||||
@@ -214,14 +193,14 @@ export function IssueModal({
|
||||
maxLength={ISSUE_DESCRIPTION_MAX_LENGTH}
|
||||
/>
|
||||
|
||||
{sprints && sprints.length > 0 && (
|
||||
{sprints.length > 0 && (
|
||||
<div className="flex items-center gap-2 mt-0">
|
||||
<Label className="text-sm">Sprint</Label>
|
||||
<SprintSelect sprints={sprints} value={sprintId} onChange={setSprintId} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{members && members.length > 0 && (
|
||||
{members.length > 0 && (
|
||||
<div className="flex items-start gap-2 mt-4">
|
||||
<Label className="text-sm pt-2">Assignees</Label>
|
||||
<MultiAssigneeSelect
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
import type { TimerState } from "@sprint/shared";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { parseError, timer } from "@/lib/server";
|
||||
import { useEndTimer, useTimerState, useToggleTimer } from "@/lib/query/hooks";
|
||||
import { parseError } from "@/lib/server";
|
||||
import { cn, formatTime } from "@/lib/utils";
|
||||
|
||||
export function IssueTimer({ issueId, onEnd }: { issueId: number; onEnd?: (data: TimerState) => void }) {
|
||||
const [timerState, setTimerState] = useState<TimerState>(null);
|
||||
const { data: timerState, error } = useTimerState(issueId);
|
||||
const toggleTimer = useToggleTimer();
|
||||
const endTimer = useEndTimer();
|
||||
const [displayTime, setDisplayTime] = useState(0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
// fetch current timer state on mount
|
||||
useEffect(() => {
|
||||
timer.get({
|
||||
issueId,
|
||||
onSuccess: (data) => {
|
||||
setTimerState(data);
|
||||
if (data) {
|
||||
setDisplayTime(data.workTimeMs);
|
||||
if (timerState) {
|
||||
setDisplayTime(timerState.workTimeMs);
|
||||
}
|
||||
},
|
||||
onError: (err) => setError(parseError(err)),
|
||||
});
|
||||
}, [issueId]);
|
||||
}, [timerState]);
|
||||
|
||||
// update display time every second when running
|
||||
useEffect(() => {
|
||||
if (!timerState?.isRunning) return;
|
||||
|
||||
@@ -37,33 +31,34 @@ export function IssueTimer({ issueId, onEnd }: { issueId: number; onEnd?: (data:
|
||||
return () => clearInterval(interval);
|
||||
}, [timerState?.isRunning, timerState?.workTimeMs]);
|
||||
|
||||
const handleToggle = () => {
|
||||
timer.toggle({
|
||||
issueId,
|
||||
onSuccess: (data) => {
|
||||
useEffect(() => {
|
||||
if (!error) return;
|
||||
setErrorMessage(parseError(error as Error));
|
||||
}, [error]);
|
||||
|
||||
const handleToggle = async () => {
|
||||
try {
|
||||
const data = await toggleTimer.mutateAsync({ issueId });
|
||||
if (data) {
|
||||
setTimerState(data);
|
||||
setDisplayTime(data.workTimeMs);
|
||||
}
|
||||
setError(null);
|
||||
},
|
||||
onError: (err) => setError(parseError(err)),
|
||||
});
|
||||
setErrorMessage(null);
|
||||
} catch (err) {
|
||||
setErrorMessage(parseError(err as Error));
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnd = () => {
|
||||
timer.end({
|
||||
issueId,
|
||||
onSuccess: (data) => {
|
||||
const handleEnd = async () => {
|
||||
try {
|
||||
const data = await endTimer.mutateAsync({ issueId });
|
||||
if (data) {
|
||||
setTimerState(data);
|
||||
setDisplayTime(data.workTimeMs);
|
||||
onEnd?.(data);
|
||||
}
|
||||
setError(null);
|
||||
},
|
||||
onError: (err) => setError(parseError(err)),
|
||||
});
|
||||
setErrorMessage(null);
|
||||
} catch (err) {
|
||||
setErrorMessage(parseError(err as Error));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -72,7 +67,7 @@ export function IssueTimer({ issueId, onEnd }: { issueId: number; onEnd?: (data:
|
||||
{formatTime(displayTime)}
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-500 text-sm">{error}</p>}
|
||||
{errorMessage && <p className="text-red-500 text-sm">{errorMessage}</p>}
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button onClick={handleToggle}>
|
||||
|
||||
@@ -1,72 +1,37 @@
|
||||
import type { TimerState } from "@sprint/shared";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { parseError, timer } from "@/lib/server";
|
||||
import { useInactiveTimers, useTimerState } from "@/lib/query/hooks";
|
||||
import { parseError } from "@/lib/server";
|
||||
import { formatTime } from "@/lib/utils";
|
||||
|
||||
const FALLBACK_TIME = "--:--:--";
|
||||
const REFRESH_INTERVAL_MS = 10000;
|
||||
|
||||
export function TimerDisplay({ issueId }: { issueId: number }) {
|
||||
const [timerState, setTimerState] = useState<TimerState>(null);
|
||||
const { data: timerState, error: timerError } = useTimerState(issueId, {
|
||||
refetchInterval: REFRESH_INTERVAL_MS,
|
||||
});
|
||||
const { data: inactiveTimers = [], error: inactiveError } = useInactiveTimers(issueId, {
|
||||
refetchInterval: REFRESH_INTERVAL_MS,
|
||||
});
|
||||
|
||||
const [workTimeMs, setWorkTimeMs] = useState(0);
|
||||
const [inactiveWorkTimeMs, setInactiveWorkTimeMs] = useState(0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const combinedError = timerError ?? inactiveError;
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const fetchTimer = () => {
|
||||
timer.get({
|
||||
issueId,
|
||||
onSuccess: (data) => {
|
||||
if (!isMounted) return;
|
||||
setTimerState(data);
|
||||
setWorkTimeMs(data?.workTimeMs ?? 0);
|
||||
setError(null);
|
||||
},
|
||||
onError: (err) => {
|
||||
if (!isMounted) return;
|
||||
const message = parseError(err);
|
||||
if (combinedError) {
|
||||
const message = parseError(combinedError as Error);
|
||||
setError(message);
|
||||
|
||||
toast.error(`Error fetching timer data: ${message}`, {
|
||||
dismissible: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
timer.getInactive({
|
||||
issueId,
|
||||
onSuccess: (data) => {
|
||||
if (!isMounted) return;
|
||||
const totalWorkTime = data.reduce(
|
||||
(total, session) => total + (session?.workTimeMs ?? 0),
|
||||
0,
|
||||
);
|
||||
setInactiveWorkTimeMs(totalWorkTime);
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
},
|
||||
onError: (err) => {
|
||||
if (!isMounted) return;
|
||||
const message = parseError(err);
|
||||
setError(message);
|
||||
|
||||
toast.error(`Error fetching timer data: ${message}`, {
|
||||
dismissible: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
fetchTimer();
|
||||
const refreshInterval = window.setInterval(fetchTimer, REFRESH_INTERVAL_MS);
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
window.clearInterval(refreshInterval);
|
||||
};
|
||||
}, [issueId]);
|
||||
setWorkTimeMs(timerState?.workTimeMs ?? 0);
|
||||
}, [combinedError, timerState]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!timerState?.isRunning) return;
|
||||
@@ -80,6 +45,11 @@ export function TimerDisplay({ issueId }: { issueId: number }) {
|
||||
return () => window.clearInterval(interval);
|
||||
}, [timerState?.isRunning, timerState?.workTimeMs]);
|
||||
|
||||
const inactiveWorkTimeMs = useMemo(
|
||||
() => inactiveTimers.reduce((total, session) => total + (session?.workTimeMs ?? 0), 0),
|
||||
[inactiveTimers],
|
||||
);
|
||||
|
||||
const totalWorkTimeMs = inactiveWorkTimeMs + workTimeMs;
|
||||
const displayWorkTime = error ? FALLBACK_TIME : formatTime(totalWorkTimeMs);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user