plane/apps/app/components/inbox/inbox-main-content.tsx
M. Palanikannan d470adf262
fix: Image resize, Link selector in Modals, Delete/ sync images and so much more (#1896)
* added image-resizing support

* link form removed

* updated image upload logic and 35% default width on upload

* removed shadow, added alert if not saved and ts errors

* prevent enter key on Link selector to trigger modal submit

* added workspace slug to all tiptap instances

* added delete plugin with loading indicator

* added better syncing of "Saved" state of editor and Image uploads

* removed redundant description_html check
2023-08-19 18:58:54 +05:30

351 lines
11 KiB
TypeScript

import { useCallback, useEffect } from "react";
import Router, { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// react hook form
import { useForm } from "react-hook-form";
// contexts
import { useProjectMyMembership } from "contexts/project-member.context";
// services
import inboxServices from "services/inbox.service";
// hooks
import useInboxView from "hooks/use-inbox-view";
import useUserAuth from "hooks/use-user-auth";
// components
import {
AddComment,
IssueActivitySection,
IssueDescriptionForm,
IssueDetailsSidebar,
IssueReaction,
} from "components/issues";
// ui
import { Loader } from "components/ui";
// icons
import {
ArrowTopRightOnSquareIcon,
CheckCircleIcon,
ClockIcon,
DocumentDuplicateIcon,
ExclamationTriangleIcon,
InboxIcon,
XCircleIcon,
} from "@heroicons/react/24/outline";
// helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types
import type { IInboxIssue, IIssue } from "types";
// fetch-keys
import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
const defaultValues = {
name: "",
description: "",
description_html: "",
estimate_point: null,
assignees_list: [],
priority: "low",
target_date: new Date().toString(),
labels_list: [],
};
export const InboxMainContent: React.FC = () => {
const router = useRouter();
const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
const { user } = useUserAuth();
const { memberRole } = useProjectMyMembership();
const { params, issues: inboxIssues } = useInboxView();
const { reset, control, watch } = useForm<IIssue>({
defaultValues,
});
const { data: issueDetails, mutate: mutateIssueDetails } = useSWR(
workspaceSlug && projectId && inboxId && inboxIssueId
? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString())
: null,
workspaceSlug && projectId && inboxId && inboxIssueId
? () =>
inboxServices.getInboxIssueById(
workspaceSlug.toString(),
projectId.toString(),
inboxId.toString(),
inboxIssueId.toString()
)
: null
);
const submitChanges = useCallback(
async (formData: Partial<IInboxIssue>) => {
if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return;
mutateIssueDetails((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
...formData,
};
}, false);
mutate<IInboxIssue[]>(
INBOX_ISSUES(inboxId.toString(), params),
(prevData) =>
(prevData ?? []).map((i) => {
if (i.bridge_id === inboxIssueId) {
return {
...i,
...formData,
};
}
return i;
}),
false
);
const payload = { issue: { ...formData } };
await inboxServices
.patchInboxIssue(
workspaceSlug.toString(),
projectId.toString(),
inboxId.toString(),
issueDetails.issue_inbox[0].id,
payload,
user
)
.then(() => {
mutateIssueDetails();
mutate(INBOX_ISSUES(inboxId.toString(), params));
mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
});
},
[
workspaceSlug,
inboxIssueId,
projectId,
mutateIssueDetails,
inboxId,
user,
issueDetails,
params,
]
);
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (!inboxIssues || !inboxIssueId) return;
const currentIssueIndex = inboxIssues.findIndex((issue) => issue.bridge_id === inboxIssueId);
switch (e.key) {
case "ArrowUp":
Router.push({
pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
query: {
inboxIssueId:
currentIssueIndex === 0
? inboxIssues[inboxIssues.length - 1].bridge_id
: inboxIssues[currentIssueIndex - 1].bridge_id,
},
});
break;
case "ArrowDown":
Router.push({
pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
query: {
inboxIssueId:
currentIssueIndex === inboxIssues.length - 1
? inboxIssues[0].bridge_id
: inboxIssues[currentIssueIndex + 1].bridge_id,
},
});
break;
default:
break;
}
},
[workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues]
);
useEffect(() => {
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("keydown", onKeyDown);
};
}, [onKeyDown]);
useEffect(() => {
if (!issueDetails || !inboxIssueId) return;
reset({
...issueDetails,
assignees_list:
issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
labels_list: issueDetails.labels_list ?? issueDetails.labels,
});
}, [issueDetails, reset, inboxIssueId]);
const issueStatus = issueDetails?.issue_inbox[0].status;
if (!inboxIssueId)
return (
<div className="h-full p-4 grid place-items-center text-custom-text-200">
<div className="grid h-full place-items-center">
<div className="my-5 flex flex-col items-center gap-4">
<InboxIcon height={60} width={60} />
{inboxIssues && inboxIssues.length > 0 ? (
<span className="text-custom-text-200">
{inboxIssues?.length} issues found. Select an issue from the sidebar to view its
details.
</span>
) : (
<span className="text-custom-text-200">
No issues found. Use{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
to create a new issue
</span>
)}
</div>
</div>
</div>
);
return (
<>
{issueDetails ? (
<div className="flex h-full overflow-auto divide-x">
<div className="basis-2/3 h-full overflow-auto p-5 space-y-3">
<div
className={`flex items-center gap-2 p-3 text-sm border rounded-md ${
issueStatus === -2
? "text-yellow-500 border-yellow-500 bg-yellow-500/10"
: issueStatus === -1
? "text-red-500 border-red-500 bg-red-500/10"
: issueStatus === 0
? new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date()
? "text-red-500 border-red-500 bg-red-500/10"
: "text-custom-text-200 border-gray-500 bg-gray-500/10"
: issueStatus === 1
? "text-green-500 border-green-500 bg-green-500/10"
: issueStatus === 2
? "text-custom-text-200 border-gray-500 bg-gray-500/10"
: ""
}`}
>
{issueStatus === -2 ? (
<>
<ExclamationTriangleIcon className="h-5 w-5" />
<p>This issue is still pending.</p>
</>
) : issueStatus === -1 ? (
<>
<XCircleIcon className="h-5 w-5" />
<p>This issue has been declined.</p>
</>
) : issueStatus === 0 ? (
<>
<ClockIcon className="h-5 w-5" />
{new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
<p>
This issue was snoozed till{" "}
{renderShortDateWithYearFormat(
issueDetails.issue_inbox[0].snoozed_till ?? ""
)}
.
</p>
) : (
<p>
This issue has been snoozed till{" "}
{renderShortDateWithYearFormat(
issueDetails.issue_inbox[0].snoozed_till ?? ""
)}
.
</p>
)}
</>
) : issueStatus === 1 ? (
<>
<CheckCircleIcon className="h-5 w-5" />
<p>This issue has been accepted.</p>
</>
) : issueStatus === 2 ? (
<>
<DocumentDuplicateIcon className="h-5 w-5" />
<p className="flex items-center gap-1">
This issue has been marked as a duplicate of
<a
href={`/${workspaceSlug}/projects/${projectId}/issues/${issueDetails.issue_inbox[0].duplicate_to}`}
target="_blank"
rel="noreferrer"
className="underline flex items-center gap-2"
>
this issue <ArrowTopRightOnSquareIcon className="h-3 w-3" />
</a>
.
</p>
</>
) : null}
</div>
<div>
<IssueDescriptionForm
workspaceSlug={workspaceSlug as string}
issue={{
name: issueDetails.name,
description: issueDetails.description,
description_html: issueDetails.description_html,
}}
handleFormSubmit={submitChanges}
isAllowed={
memberRole.isMember || memberRole.isOwner || user?.id === issueDetails.created_by
}
/>
</div>
<IssueReaction
projectId={projectId}
workspaceSlug={workspaceSlug}
issueId={issueDetails.id}
/>
<div className="space-y-5">
<h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
<IssueActivitySection issueId={issueDetails.id} user={user} />
<AddComment issueId={issueDetails.id} user={user} />
</div>
</div>
<div className="basis-1/3 space-y-5 border-custom-border-200 p-5">
<IssueDetailsSidebar
control={control}
issueDetail={issueDetails}
submitChanges={submitChanges}
watch={watch}
fieldsToShow={["assignee", "priority", "estimate", "dueDate", "label", "state"]}
/>
</div>
</div>
) : (
<Loader className="flex h-full gap-5 p-5">
<div className="basis-2/3 space-y-2">
<Loader.Item height="30px" width="40%" />
<Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="40%" />
</div>
<div className="basis-1/3 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</div>
</Loader>
)}
</>
);
};