import { FC, useMemo, useState } from "react"; import { observer } from "mobx-react-lite"; import { History, LucideIcon, MessageCircle, ListRestart } from "lucide-react"; // hooks import { useIssueDetail, useProject } from "hooks/store"; import useToast from "hooks/use-toast"; // components import { IssueActivityCommentRoot, IssueActivityRoot, IssueCommentRoot, IssueCommentCreate } from "./"; // types import { TIssueComment } from "@plane/types"; type TIssueActivity = { workspaceSlug: string; projectId: string; issueId: string; }; type TActivityTabs = "all" | "activity" | "comments"; const activityTabs: { key: TActivityTabs; title: string; icon: LucideIcon }[] = [ { key: "all", title: "All Activity", icon: History, }, { key: "activity", title: "Updates", icon: ListRestart, }, { key: "comments", title: "Comments", icon: MessageCircle, }, ]; export type TActivityOperations = { createComment: (data: Partial) => Promise; updateComment: (commentId: string, data: Partial) => Promise; removeComment: (commentId: string) => Promise; }; export const IssueActivity: FC = observer((props) => { const { workspaceSlug, projectId, issueId } = props; // hooks const { createComment, updateComment, removeComment } = useIssueDetail(); const { setToastAlert } = useToast(); const { getProjectById } = useProject(); // state const [activityTab, setActivityTab] = useState("all"); const activityOperations: TActivityOperations = useMemo( () => ({ createComment: async (data: Partial) => { try { if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields"); await createComment(workspaceSlug, projectId, issueId, data); setToastAlert({ title: "Comment created successfully.", type: "success", message: "Comment created successfully.", }); } catch (error) { setToastAlert({ title: "Comment creation failed.", type: "error", message: "Comment creation failed. Please try again later.", }); } }, updateComment: async (commentId: string, data: Partial) => { try { if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields"); await updateComment(workspaceSlug, projectId, issueId, commentId, data); setToastAlert({ title: "Comment updated successfully.", type: "success", message: "Comment updated successfully.", }); } catch (error) { setToastAlert({ title: "Comment update failed.", type: "error", message: "Comment update failed. Please try again later.", }); } }, removeComment: async (commentId: string) => { try { if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields"); await removeComment(workspaceSlug, projectId, issueId, commentId); setToastAlert({ title: "Comment removed successfully.", type: "success", message: "Comment removed successfully.", }); } catch (error) { setToastAlert({ title: "Comment remove failed.", type: "error", message: "Comment remove failed. Please try again later.", }); } }, }), [workspaceSlug, projectId, issueId, createComment, updateComment, removeComment, setToastAlert] ); const project = getProjectById(projectId); if (!project) return <>; return (
{/* header */}
Activity
{/* rendering activity */}
{activityTabs.map((tab) => (
setActivityTab(tab.key)} >
{tab.title}
))}
{activityTab === "all" ? (
) : activityTab === "activity" ? ( ) : (
)}
); });