From 10de14f023ed2ac227fc95c0de3c1045f21d23c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 7 Jul 2023 17:51:29 +0200 Subject: [PATCH] Open comment thread edit mode in drawer --- .../components/CommentThreadCreateMode.tsx | 22 ------------------- .../components/CommentThreadEditMode.tsx | 9 ++++---- .../RightDrawerEditCommentThread.tsx | 7 +++++- .../modules/comments/components/Timeline.tsx | 8 +++---- .../hooks/useOpenCommentThreadRightDrawer.ts | 18 +++++++++++++++ ...penCreateCommentDrawerForSelectedRowIds.ts | 6 ----- .../states/createdCommentThreadIdState.ts | 6 ----- .../states/viewableCommentThreadIdState.ts | 6 +++++ 8 files changed, 38 insertions(+), 44 deletions(-) create mode 100644 front/src/modules/comments/hooks/useOpenCommentThreadRightDrawer.ts delete mode 100644 front/src/modules/comments/states/createdCommentThreadIdState.ts create mode 100644 front/src/modules/comments/states/viewableCommentThreadIdState.ts diff --git a/front/src/modules/comments/components/CommentThreadCreateMode.tsx b/front/src/modules/comments/components/CommentThreadCreateMode.tsx index f8292e0724a..c320a329800 100644 --- a/front/src/modules/comments/components/CommentThreadCreateMode.tsx +++ b/front/src/modules/comments/components/CommentThreadCreateMode.tsx @@ -1,35 +1,13 @@ -import { getOperationName } from '@apollo/client/utilities'; import { BlockNoteEditor } from '@blocknote/core'; import { BlockNoteView, useBlockNote } from '@blocknote/react'; import styled from '@emotion/styled'; -import { useRecoilState, useRecoilValue } from 'recoil'; -import { v4 } from 'uuid'; -import { currentUserState } from '@/auth/states/currentUserState'; -import { commentableEntityArrayState } from '@/comments/states/commentableEntityArrayState'; -import { createdCommentThreadIdState } from '@/comments/states/createdCommentThreadIdState'; -import CompanyChip from '@/companies/components/CompanyChip'; -import { GET_COMPANIES } from '@/companies/services'; -import { GET_PEOPLE } from '@/people/services'; -import { DropdownButton } from '@/ui/components/buttons/DropdownButton'; -import { AutosizeTextInput } from '@/ui/components/inputs/AutosizeTextInput'; import { PropertyBox } from '@/ui/components/property-box/PropertyBox'; import { PropertyBoxItem } from '@/ui/components/property-box/PropertyBoxItem'; import { IconArrowUpRight } from '@/ui/icons/index'; -import { useOpenRightDrawer } from '@/ui/layout/right-drawer/hooks/useOpenRightDrawer'; -import { logError } from '@/utils/logs/logError'; -import { isDefined } from '@/utils/type-guards/isDefined'; -import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString'; -import { - useCreateCommentMutation, - useCreateCommentThreadWithCommentMutation, - useGetCommentThreadQuery, -} from '~/generated/graphql'; -import { GET_COMMENT_THREAD } from '../services'; import { CommentableEntity } from '../types/CommentableEntity'; -import { CommentThreadItem } from './CommentThreadItem'; import { CommentThreadRelationPicker } from './CommentThreadRelationPicker'; import { CommentThreadTypeDropdown } from './CommentThreadTypeDropdown'; diff --git a/front/src/modules/comments/components/CommentThreadEditMode.tsx b/front/src/modules/comments/components/CommentThreadEditMode.tsx index 5f897d4c3e9..87993f54ebd 100644 --- a/front/src/modules/comments/components/CommentThreadEditMode.tsx +++ b/front/src/modules/comments/components/CommentThreadEditMode.tsx @@ -71,10 +71,6 @@ export function CommentThreadEditMode({ }: { commentThreadId: string; }) { - const editor: BlockNoteEditor | null = useBlockNote({ - theme: 'light', - }); - const { data } = useGetCommentThreadQuery({ variables: { commentThreadId: commentThreadId ?? '', @@ -82,6 +78,11 @@ export function CommentThreadEditMode({ skip: !commentThreadId, }); + const editor: BlockNoteEditor | null = useBlockNote({ + theme: 'light', + // initialContent: commentThread.body, + }); + if (typeof data?.findManyCommentThreads[0] === 'undefined') { return null; } diff --git a/front/src/modules/comments/components/RightDrawerEditCommentThread.tsx b/front/src/modules/comments/components/RightDrawerEditCommentThread.tsx index faa2a24594c..6f5ae2c6cfe 100644 --- a/front/src/modules/comments/components/RightDrawerEditCommentThread.tsx +++ b/front/src/modules/comments/components/RightDrawerEditCommentThread.tsx @@ -1,16 +1,21 @@ +import { useRecoilValue } from 'recoil'; + import { RightDrawerBody } from '@/ui/layout/right-drawer/components/RightDrawerBody'; import { RightDrawerPage } from '@/ui/layout/right-drawer/components/RightDrawerPage'; import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar'; import { CommentableType } from '~/generated/graphql'; +import { viewableCommentThreadIdState } from '../states/viewableCommentThreadIdState'; + import { CommentThreadEditMode } from './CommentThreadEditMode'; export function RightDrawerEditCommentThread() { + const commentThreadId = useRecoilValue(viewableCommentThreadIdState) ?? ''; return ( - + ); diff --git a/front/src/modules/comments/components/Timeline.tsx b/front/src/modules/comments/components/Timeline.tsx index ee3268b3e05..af9cae6d22d 100644 --- a/front/src/modules/comments/components/Timeline.tsx +++ b/front/src/modules/comments/components/Timeline.tsx @@ -2,7 +2,6 @@ import { Tooltip } from 'react-tooltip'; import styled from '@emotion/styled'; import { IconNotes, IconPlus } from '@/ui/icons/index'; -import { useOpenRightDrawer } from '@/ui/layout/right-drawer/hooks/useOpenRightDrawer'; import { beautifyExactDate, beautifyPastDateRelativeToNow, @@ -13,6 +12,7 @@ import { } from '~/generated/graphql'; import { TableActionBarButtonCreateCommentThreadCompany } from '~/pages/companies/table/TableActionBarButtonCreateCommentThreadCompany'; +import { useOpenCommentThreadRightDrawer } from '../hooks/useOpenCommentThreadRightDrawer'; import { CommentableEntity } from '../types/CommentableEntity'; import { CommentThreadForDrawer } from '../types/CommentThreadForDrawer'; @@ -181,7 +181,7 @@ export function Timeline({ entity }: { entity: CommentableEntity }) { }, }); - const openRightDrawer = useOpenRightDrawer(); + const openRightDrawer = useOpenCommentThreadRightDrawer(); const commentThreads: CommentThreadForDrawer[] = queryResult?.findManyCommentThreads ?? []; @@ -242,9 +242,7 @@ export function Timeline({ entity }: { entity: CommentableEntity }) { - openRightDrawer('edit-comment-thread')} - > + openRightDrawer(commentThread.id)}> {commentThread.title} {commentThread.body} diff --git a/front/src/modules/comments/hooks/useOpenCommentThreadRightDrawer.ts b/front/src/modules/comments/hooks/useOpenCommentThreadRightDrawer.ts new file mode 100644 index 00000000000..e6c7faa5280 --- /dev/null +++ b/front/src/modules/comments/hooks/useOpenCommentThreadRightDrawer.ts @@ -0,0 +1,18 @@ +import { useRecoilState } from 'recoil'; + +import { useOpenRightDrawer } from '../../ui/layout/right-drawer/hooks/useOpenRightDrawer'; +import { commentableEntityArrayState } from '../states/commentableEntityArrayState'; +import { viewableCommentThreadIdState } from '../states/viewableCommentThreadIdState'; +import { CommentableEntity } from '../types/CommentableEntity'; + +export function useOpenCommentThreadRightDrawer() { + const openRightDrawer = useOpenRightDrawer(); + const [, setViewableCommentThreadId] = useRecoilState( + viewableCommentThreadIdState, + ); + + return function openCommentThreadRightDrawer(commentThreadId: string) { + setViewableCommentThreadId(commentThreadId); + openRightDrawer('edit-comment-thread'); + }; +} diff --git a/front/src/modules/comments/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts b/front/src/modules/comments/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts index 099738d34e8..a2aa40ae317 100644 --- a/front/src/modules/comments/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts +++ b/front/src/modules/comments/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts @@ -5,7 +5,6 @@ import { CommentableType } from '~/generated/graphql'; import { useOpenRightDrawer } from '../../ui/layout/right-drawer/hooks/useOpenRightDrawer'; import { commentableEntityArrayState } from '../states/commentableEntityArrayState'; -import { createdCommentThreadIdState } from '../states/createdCommentThreadIdState'; import { CommentableEntity } from '../types/CommentableEntity'; export function useOpenCreateCommentThreadDrawerForSelectedRowIds() { @@ -15,10 +14,6 @@ export function useOpenCreateCommentThreadDrawerForSelectedRowIds() { commentableEntityArrayState, ); - const [, setCreatedCommentThreadId] = useRecoilState( - createdCommentThreadIdState, - ); - const selectedEntityIds = useRecoilValue(selectedRowIdsState); return function openCreateCommentDrawerForSelectedRowIds( @@ -31,7 +26,6 @@ export function useOpenCreateCommentThreadDrawerForSelectedRowIds() { }), ); - setCreatedCommentThreadId(null); setCommentableEntityArray(commentableEntityArray); openRightDrawer('create-comment-thread'); }; diff --git a/front/src/modules/comments/states/createdCommentThreadIdState.ts b/front/src/modules/comments/states/createdCommentThreadIdState.ts deleted file mode 100644 index 47809154ea0..00000000000 --- a/front/src/modules/comments/states/createdCommentThreadIdState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const createdCommentThreadIdState = atom({ - key: 'comments/created-comment-thread-id', - default: null, -}); diff --git a/front/src/modules/comments/states/viewableCommentThreadIdState.ts b/front/src/modules/comments/states/viewableCommentThreadIdState.ts new file mode 100644 index 00000000000..0caff997356 --- /dev/null +++ b/front/src/modules/comments/states/viewableCommentThreadIdState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const viewableCommentThreadIdState = atom({ + key: 'comments/viewable-comment-thread-id', + default: null, +});