plane/apps/app/components/issues/peek-overview/issue-activity.tsx
Aaryan Khandelwal 2b168edd99
feat: peek overview for spreadsheet issues (#1979)
* feat: peak overview for issues

* fix: peek spelling

* chore: truncate issue property labels

* style: full screen view designed

* chore: add comment section

* chore: copy link and delete options added

* chore: update icons

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
2023-08-25 17:41:23 +05:30

91 lines
2.5 KiB
TypeScript

import useSWR, { mutate } from "swr";
// services
import issuesService from "services/issues.service";
// hooks
import useUser from "hooks/use-user";
import useToast from "hooks/use-toast";
// components
import { AddComment, IssueActivitySection } from "components/issues";
// types
import { IIssue, IIssueComment } from "types";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
type Props = {
workspaceSlug: string;
issue: IIssue;
readOnly: boolean;
};
export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
const { setToastAlert } = useToast();
const { user } = useUser();
const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
workspaceSlug && issue
? () => issuesService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
: null
);
const handleCommentUpdate = async (comment: IIssueComment) => {
if (!workspaceSlug || !issue) return;
await issuesService
.patchIssueComment(
workspaceSlug as string,
issue.project,
issue.id,
comment.id,
comment,
user
)
.then(() => mutateIssueActivity());
};
const handleCommentDelete = async (commentId: string) => {
if (!workspaceSlug || !issue) return;
mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
await issuesService
.deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
.then(() => mutateIssueActivity());
};
const handleAddComment = async (formData: IIssueComment) => {
if (!workspaceSlug || !issue) return;
await issuesService
.createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
.then(() => {
mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Comment could not be posted. Please try again.",
})
);
};
return (
<div>
<h4 className="font-medium">Activity</h4>
<div className="mt-4">
<IssueActivitySection
activity={issueActivity}
handleCommentUpdate={handleCommentUpdate}
handleCommentDelete={handleCommentDelete}
/>
<div className="mt-4">
<AddComment onSubmit={handleAddComment} />
</div>
</div>
</div>
);
};