plane/apps/app/components/issues/activity.tsx
Aaryan Khandelwal 76cc634a46
feat: cycles and modules toggle in settings, refactor: folder structure (#247)
* feat: link option in remirror

* fix: removed link import from remirror toolbar

* refactor: constants folder

* refactor: layouts folder structure

* fix: issue view context

* feat: cycles and modules toggle in settings
2023-02-08 10:13:07 +05:30

262 lines
9.2 KiB
TypeScript

import React from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import { KeyedMutator } from "swr";
// icons
import {
CalendarDaysIcon,
ChartBarIcon,
ChatBubbleBottomCenterTextIcon,
RectangleGroupIcon,
Squares2X2Icon,
UserIcon,
} from "@heroicons/react/24/outline";
// services
import issuesServices from "services/issues.service";
// components
import { CommentCard } from "components/issues/comment";
// ui
import { Loader } from "components/ui";
// icons
import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
// helpers
import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper";
// types
import { IIssueActivity, IIssueComment } from "types";
const activityDetails: {
[key: string]: {
message?: string;
icon: JSX.Element;
};
} = {
assignee: {
message: "removed the assignee",
icon: <UserGroupIcon className="h-4 w-4" />,
},
assignees: {
message: "added a new assignee",
icon: <UserGroupIcon className="h-4 w-4" />,
},
blocks: {
message: "marked this issue being blocked by",
icon: <BlockedIcon height="16" width="16" />,
},
blocking: {
message: "marked this issue is blocking",
icon: <BlockerIcon height="16" width="16" />,
},
cycles: {
message: "set the cycle to",
icon: <CyclesIcon height="16" width="16" />,
},
labels: {
icon: <TagIcon height="16" width="16" />,
},
modules: {
message: "set the module to",
icon: <RectangleGroupIcon className="h-4 w-4" />,
},
state: {
message: "set the state to",
icon: <Squares2X2Icon className="h-4 w-4" />,
},
priority: {
message: "set the priority to",
icon: <ChartBarIcon className="h-4 w-4" />,
},
name: {
message: "set the name to",
icon: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
},
description: {
message: "updated the description.",
icon: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
},
target_date: {
message: "set the due date to",
icon: <CalendarDaysIcon className="h-4 w-4" />,
},
parent: {
message: "set the parent to",
icon: <UserIcon className="h-4 w-4" />,
},
};
type Props = {
issueActivities: IIssueActivity[];
mutate: KeyedMutator<IIssueActivity[]>;
};
export const IssueActivitySection: React.FC<Props> = ({ issueActivities, mutate }) => {
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
const onCommentUpdate = async (comment: IIssueComment) => {
if (!workspaceSlug || !projectId || !issueId) return;
await issuesServices
.patchIssueComment(
workspaceSlug as string,
projectId as string,
issueId as string,
comment.id,
comment
)
.then((res) => {
mutate();
});
};
const onCommentDelete = async (commentId: string) => {
if (!workspaceSlug || !projectId || !issueId) return;
await issuesServices
.deleteIssueComment(
workspaceSlug as string,
projectId as string,
issueId as string,
commentId
)
.then((response) => {
mutate();
console.log(response);
});
};
return (
<>
{issueActivities ? (
<div className="space-y-4">
{issueActivities.map((activity, index) => {
if ("field" in activity && activity.field !== "updated_by") {
return (
<div key={activity.id} className="relative flex w-full items-center gap-x-2">
{issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
<span
className="absolute top-5 left-2.5 h-full w-0.5 bg-gray-200"
aria-hidden="true"
/>
) : null}
{activity.field ? (
<div className="relative z-10 -ml-1 flex-shrink-0">
<div className="grid h-8 w-8 place-items-center bg-white">
{activityDetails[activity.field as keyof typeof activityDetails]?.icon}
</div>
</div>
) : (
<div className="relative z-10 -ml-4 flex-shrink-0 rounded-full border-2 border-white">
<div className="grid h-12 w-12 place-items-center">
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
<Image
src={activity.actor_detail.avatar}
alt={activity.actor_detail.name}
height={30}
width={30}
className="rounded-full"
/>
) : (
<div
className={`grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-gray-700 text-white`}
>
{activity.actor_detail.first_name.charAt(0)}
</div>
)}
</div>
</div>
)}
<div className={`${activity.field ? "ml-1.5" : ""} w-full text-xs`}>
<p>
<span className="font-medium">
{activity.actor_detail.first_name} {activity.actor_detail.last_name}
</span>
<span>
{" "}
{activity.field === "labels"
? activity.new_value !== ""
? "added a new label"
: "removed the label"
: activity.field === "blocking"
? activity.new_value !== ""
? "marked this issue is blocking"
: "removed the issue from blocking"
: activity.field === "blocks"
? activity.new_value !== ""
? "marked this issue being blocked by"
: "removed blocker"
: activity.field === "target_date"
? activity.new_value && activity.new_value !== ""
? "set the due date to"
: "removed the due date"
: activityDetails[activity.field as keyof typeof activityDetails]
?.message}{" "}
</span>
<span className="font-medium">
{activity.verb === "created" &&
activity.field !== "cycles" &&
activity.field !== "modules" ? (
<span className="text-gray-600">created this issue.</span>
) : activity.field === "description" ? null : activity.field === "state" ? (
activity.new_value ? (
addSpaceIfCamelCase(activity.new_value)
) : (
"None"
)
) : activity.field === "labels" ||
activity.field === "blocking" ||
activity.field === "blocks" ? (
activity.new_value !== "" ? (
activity.new_value
) : (
activity.old_value
)
) : activity.field === "assignee" ? (
activity.old_value
) : activity.field === "target_date" ? (
activity.new_value ? (
renderShortNumericDateFormat(activity.new_value as string)
) : null
) : activity.field === "description" ? (
""
) : (
activity.new_value ?? "None"
)}
</span>
<span className="ml-2 text-gray-500">{timeAgo(activity.created_at)}</span>
</p>
</div>
</div>
);
} else if ("comment_json" in activity)
return (
<CommentCard
key={activity.id}
comment={activity as any}
onSubmit={onCommentUpdate}
handleCommentDeletion={onCommentDelete}
/>
);
})}
</div>
) : (
<Loader className="space-y-4">
<div className="space-y-2">
<Loader.Item height="30px" width="40%" />
<Loader.Item height="15px" width="60%" />
</div>
<div className="space-y-2">
<Loader.Item height="30px" width="40%" />
<Loader.Item height="15px" width="60%" />
</div>
<div className="space-y-2">
<Loader.Item height="30px" width="40%" />
<Loader.Item height="15px" width="60%" />
</div>
</Loader>
)}
</>
);
};