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>
This commit is contained in:
Aaryan Khandelwal 2023-08-25 17:41:23 +05:30 committed by GitHub
parent 93fa093a79
commit 2b168edd99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 1410 additions and 605 deletions

View file

@ -2,20 +2,13 @@ import React from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// react-hook-form
import { useForm, Controller } from "react-hook-form";
// services
import issuesServices from "services/issues.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { SecondaryButton } from "components/ui";
// types
import type { ICurrentUserResponse, IIssueComment } from "types";
import type { IIssueComment } from "types";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
@ -30,63 +23,37 @@ const defaultValues: Partial<IIssueComment> = {
};
type Props = {
issueId: string;
user: ICurrentUserResponse | undefined;
disabled?: boolean;
onSubmit: (data: IIssueComment) => Promise<void>;
};
export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false }) => {
export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
const {
handleSubmit,
control,
formState: { isSubmitting },
handleSubmit,
reset,
setValue,
watch,
formState: { isSubmitting },
reset,
} = useForm<IIssueComment>({ defaultValues });
const editorRef = React.useRef<any>(null);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
const { setToastAlert } = useToast();
const handleAddComment = async (formData: IIssueComment) => {
if (!formData.comment_html || !formData.comment_json || isSubmitting) return;
const onSubmit = async (formData: IIssueComment) => {
if (
!workspaceSlug ||
!projectId ||
!issueId ||
isSubmitting ||
!formData.comment_html ||
!formData.comment_json
)
return;
await issuesServices
.createIssueComment(
workspaceSlug as string,
projectId as string,
issueId as string,
formData,
user
)
.then(() => {
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
reset(defaultValues);
editorRef.current?.clearEditor();
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Comment could not be posted. Please try again.",
})
);
await onSubmit(formData).then(() => {
reset(defaultValues);
editorRef.current?.clearEditor();
});
};
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(handleAddComment)}>
<div className="issue-comments-section">
<Controller
name="comment_html"
@ -97,8 +64,8 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
ref={editorRef}
value={
!value ||
value === "" ||
(typeof value === "object" && Object.keys(value).length === 0)
value === "" ||
(typeof value === "object" && Object.keys(value).length === 0)
? watch("comment_html")
: value
}