73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { observer } from "mobx-react";
|
|
import { Link } from "react-router";
|
|
import { usePathname } from "next/navigation";
|
|
import { Lock } from "lucide-react";
|
|
// plane imports
|
|
import { Button } from "@plane/propel/button";
|
|
// components
|
|
import { AddComment } from "@/components/issues/peek-overview/comment/add-comment";
|
|
import { CommentCard } from "@/components/issues/peek-overview/comment/comment-detail-card";
|
|
// hooks
|
|
import { usePublish } from "@/hooks/store/publish";
|
|
import { useIssueDetails } from "@/hooks/store/use-issue-details";
|
|
import { useUser } from "@/hooks/store/use-user";
|
|
import useIsInIframe from "@/hooks/use-is-in-iframe";
|
|
// types
|
|
import type { IIssue } from "@/types/issue";
|
|
|
|
type Props = {
|
|
anchor: string;
|
|
issueDetails: IIssue;
|
|
};
|
|
|
|
export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActivity(props: Props) {
|
|
const { anchor } = props;
|
|
// router
|
|
const pathname = usePathname();
|
|
// store hooks
|
|
const { details, peekId } = useIssueDetails();
|
|
const { data: currentUser } = useUser();
|
|
const { canComment } = usePublish(anchor);
|
|
// derived values
|
|
const comments = details[peekId || ""]?.comments || [];
|
|
const isInIframe = useIsInIframe();
|
|
|
|
return (
|
|
<div className="pb-10">
|
|
<h4 className="font-medium">Comments</h4>
|
|
<div className="mt-4">
|
|
<div className="space-y-4">
|
|
{comments.map((comment) => (
|
|
<CommentCard key={comment.id} anchor={anchor} comment={comment} />
|
|
))}
|
|
</div>
|
|
{!isInIframe &&
|
|
(currentUser ? (
|
|
<>
|
|
{canComment && (
|
|
<div className="mt-4">
|
|
<AddComment anchor={anchor} disabled={!currentUser} />
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
|
|
<p className="flex items-center gap-2 overflow-hidden text-13 break-words text-secondary">
|
|
<Lock className="size-3 shrink-0" />
|
|
Sign in to add your comment
|
|
</p>
|
|
<Link to={`/?next_path=${pathname}`}>
|
|
<Button variant="primary">Sign in</Button>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|