diff --git a/apps/space/components/issues/board-views/list/block.tsx b/apps/space/components/issues/board-views/list/block.tsx index 63e8eaedd..a4b1ad2b8 100644 --- a/apps/space/components/issues/board-views/list/block.tsx +++ b/apps/space/components/issues/board-views/list/block.tsx @@ -56,15 +56,18 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
- {/* upvotes */} -
- -
- - {/* downotes */} -
- -
+ {projectStore.deploySettings?.votes && ( + <> + {/* upvotes */} +
+ +
+ {/* downotes */} +
+ +
+ + )} {/* priority */} {issue?.priority && ( diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx index 684d20451..90c82b9d5 100644 --- a/apps/space/components/issues/navbar/index.tsx +++ b/apps/space/components/issues/navbar/index.tsx @@ -1,16 +1,16 @@ +import { useEffect } from "react"; import Image from "next/image"; +import { observer } from "mobx-react-lite"; +import { useRouter } from "next/router"; // components import { NavbarSearch } from "./search"; import { NavbarIssueBoardView } from "./issue-board-view"; import { NavbarIssueFilter } from "./issue-filter"; import { NavbarTheme } from "./theme"; -// mobx react lite -import { observer } from "mobx-react-lite"; -// mobx +// lib import { useMobxStore } from "lib/mobx/store-provider"; +// store import { RootStore } from "store/root"; -import { useEffect } from "react"; -import { useRouter } from "next/router"; const renderEmoji = (emoji: string | { name: string; color: string }) => { if (!emoji) return; @@ -39,7 +39,6 @@ const IssueNavbar = observer(() => { useEffect(() => { if (workspace_slug && projectStore) { if (board) { - console.log("setting"); projectStore.setActiveBoard(board.toString()); } else { router.push(`/${workspace_slug}/${project_slug}?board=list`); diff --git a/apps/space/components/issues/peek-overview/comment-detail-card.tsx b/apps/space/components/issues/peek-overview/comment-detail-card.tsx index 4187485e1..c3899dd77 100644 --- a/apps/space/components/issues/peek-overview/comment-detail-card.tsx +++ b/apps/space/components/issues/peek-overview/comment-detail-card.tsx @@ -1,22 +1,16 @@ import React, { useEffect, useState, useRef } from "react"; - -// react-hook-form -import { useForm } from "react-hook-form"; - -// mobx +import { useForm, Controller } from "react-hook-form"; import { observer } from "mobx-react-lite"; -import { useMobxStore } from "lib/mobx/store-provider"; - -// headless ui import { Menu, Transition } from "@headlessui/react"; - +// lib +import { useMobxStore } from "lib/mobx/store-provider"; // icons import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline"; - // helpers import { timeAgo } from "helpers/date-time.helper"; // types import { Comment } from "types"; +// components import { TipTapEditor } from "components/tiptap"; type Props = { @@ -26,51 +20,37 @@ type Props = { export const CommentCard: React.FC = observer((props) => { const { comment, workspaceSlug } = props; - - const { user: userStore, issue: issueStore } = useMobxStore(); - - const editorRef = useRef(null); - const showEditorRef = useRef(null); - + // store + const { user: userStore, issue: issueStore, issueDetails: issueDetailStore } = useMobxStore(); + // states const [isEditing, setIsEditing] = useState(false); const { formState: { isSubmitting }, handleSubmit, setFocus, - watch, - setValue, - } = useForm({ - defaultValues: comment, + control, + } = useForm({ + defaultValues: { comment_html: comment.comment_html }, }); const handleDelete = async () => { - if (!workspaceSlug || !issueStore.activePeekOverviewIssueId) return; + if (!workspaceSlug || !issueDetailStore.peekId) return; - await issueStore.deleteIssueCommentAsync( - workspaceSlug, - comment.project, - issueStore.activePeekOverviewIssueId, - comment.id - ); + await issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id); }; const handleCommentUpdate = async (formData: Comment) => { - if (!workspaceSlug || !issueStore.activePeekOverviewIssueId) return; + if (!workspaceSlug || !issueDetailStore.peekId) return; - const response = await issueStore.updateIssueCommentAsync( + console.log("formData", formData); + const response = await issueDetailStore.updateIssueComment( workspaceSlug, comment.project, - issueStore.activePeekOverviewIssueId, + issueDetailStore.peekId, comment.id, formData ); - - if (response) { - editorRef.current?.setEditorValue(response.comment_html); - showEditorRef.current?.setEditorValue(response.comment_html); - } - setIsEditing(false); }; @@ -82,6 +62,7 @@ export const CommentCard: React.FC = observer((props) => {
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? ( + // eslint-disable-next-line @next/next/no-img-element { = observer((props) => { className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`} >
- { - setValue("comment_json", comment_json); - setValue("comment_html", comment_html); - }} + ( + { + onChange(comment_html); + }} + /> + )} />
@@ -149,8 +134,7 @@ export const CommentCard: React.FC = observer((props) => {
= observer((props) => { const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || []; + console.log("comments", comments); + return (

Activity

diff --git a/apps/space/components/issues/peek-overview/layout.tsx b/apps/space/components/issues/peek-overview/layout.tsx index c6787d7ed..57de2e55f 100644 --- a/apps/space/components/issues/peek-overview/layout.tsx +++ b/apps/space/components/issues/peek-overview/layout.tsx @@ -19,7 +19,7 @@ export const IssuePeekOverview: React.FC = observer((props) => { // router const router = useRouter(); - const { workspace_slug, project_slug, peekId } = router.query; + const { workspace_slug, project_slug, peekId, board } = router.query; // store const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore(); @@ -34,14 +34,13 @@ export const IssuePeekOverview: React.FC = observer((props) => { }, [workspace_slug, project_slug, issueDetailStore, issueDetails, peekId, issueStore.issues]); const handleClose = () => { - const { query } = router; - delete query.peekId; - issueDetailStore.setPeekId(null); router.replace( { pathname: `/${workspace_slug?.toString()}/${project_slug}`, - query, + query: { + board, + }, }, undefined, { shallow: true } diff --git a/apps/space/components/issues/peek-overview/side-peek-view.tsx b/apps/space/components/issues/peek-overview/side-peek-view.tsx index d7afc3808..067d78c20 100644 --- a/apps/space/components/issues/peek-overview/side-peek-view.tsx +++ b/apps/space/components/issues/peek-overview/side-peek-view.tsx @@ -30,7 +30,7 @@ export const SidePeekView: React.FC = observer((props) => {
{/* issue properties */} -
+
{/* divider */} diff --git a/apps/space/pages/index.tsx b/apps/space/pages/index.tsx index 3a8838b1d..26949d76b 100644 --- a/apps/space/pages/index.tsx +++ b/apps/space/pages/index.tsx @@ -38,7 +38,6 @@ const HomePage = () => { router.push(`/onboarding?next_path=${next_path}`); return; } - console.log("hello"); router.push(next_path.toString()); }; diff --git a/apps/space/postcss.config.js b/apps/space/postcss.config.js index 12a703d90..cbfea5ea2 100644 --- a/apps/space/postcss.config.js +++ b/apps/space/postcss.config.js @@ -1,5 +1,6 @@ module.exports = { plugins: { + "tailwindcss/nesting": {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/apps/space/store/issue_details.ts b/apps/space/store/issue_details.ts index 8185ce2f2..7c0f66413 100644 --- a/apps/space/store/issue_details.ts +++ b/apps/space/store/issue_details.ts @@ -23,7 +23,14 @@ export interface IIssueDetailStore { fetchIssueDetails: (workspaceId: string, projectId: string, issueId: string) => void; // issue comments addIssueComment: (workspaceId: string, projectId: string, issueId: string, data: any) => Promise; - deleteIssueComment: (workspaceId: string, projectId: string, issueId: string) => void; + updateIssueComment: ( + workspaceId: string, + projectId: string, + issueId: string, + comment_id: string, + data: any + ) => Promise; + deleteIssueComment: (workspaceId: string, projectId: string, issueId: string, comment_id: string) => void; // issue reactions addIssueReaction: (workspaceId: string, projectId: string, issueId: string, data: any) => void; removeIssueReaction: (workspaceId: string, projectId: string, issueId: string, data: any) => void; @@ -40,7 +47,7 @@ class IssueDetailStore implements IssueDetailStore { details: { [key: string]: IIssue; } = {}; - issueService: any; + issueService; rootStore: RootStore; constructor(_rootStore: RootStore) { @@ -97,7 +104,6 @@ class IssueDetailStore implements IssueDetailStore { try { const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueId); const issueCommentResponse = await this.issueService.createIssueComment(workspaceSlug, projectId, issueId, data); - console.log("issueCommentResponse", issueCommentResponse); if (issueDetails) { runInAction(() => { this.details = { @@ -116,36 +122,58 @@ class IssueDetailStore implements IssueDetailStore { } }; - updateIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => { + updateIssueComment = async ( + workspaceSlug: string, + projectId: string, + issueId: string, + commentId: string, + data: any + ) => { try { - const issueVoteResponse = await this.issueService.updateIssueComment(workspaceSlug, projectId, issueId, data); - if (issueVoteResponse) { + const issueCommentUpdateResponse = await this.issueService.updateIssueComment( + workspaceSlug, + projectId, + issueId, + commentId, + data + ); + // const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId); + + if (issueCommentUpdateResponse) { runInAction(() => { + const remainingComments = this.details[issueId].comments.filter((com) => com.id === commentId); this.details = { ...this.details, [issueId]: { - ...issueDetails, - comments: commentsResponse, + ...this.details[issueId], + comments: [...remainingComments, issueCommentUpdateResponse], }, }; }); } + return issueCommentUpdateResponse; } catch (error) { console.log("Failed to add issue comment"); } }; - deleteIssueComment = async () => { + deleteIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, comment_id: string) => { try { - const issueVoteResponse = await this.issueService.deleteIssueComment(workspaceSlug, projectId, issueId, data); - // const issueDetails = await this.issueService.fetchIssueDetails(workspaceSlug, projectId, issueId); + const issueVoteResponse = await this.issueService.deleteIssueComment( + workspaceSlug, + projectId, + issueId, + comment_id + ); + const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId); if (issueVoteResponse) { runInAction(() => { this.details = { ...this.details, [issueId]: { - ...issueDetails, + ...this.details[issueId], + comments: issueComments, }, }; });