twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-18 09:02:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix bug autofill title (#573)

Browse Source 
* Fix bug autofill title

* Remove useless loading
This commit is contained in:
Charles Bochet 2023-07-10 15:20:57 -07:00 committed by GitHub
parent 25eeada92c
commit 5d071187f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx
View File

@ -1,4 +1,4 @@
import { useMemo } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { getOperationName } from '@apollo/client/utilities'; import { getOperationName } from '@apollo/client/utilities';
import { BlockNoteEditor } from '@blocknote/core'; import { BlockNoteEditor } from '@blocknote/core';
import { useBlockNote } from '@blocknote/react'; import { useBlockNote } from '@blocknote/react';
@ -25,9 +25,17 @@ export function CommentThreadBodyEditor({ commentThread, onChange }: OwnProps) {
const [updateCommentThreadBodyMutation] = const [updateCommentThreadBodyMutation] =
useUpdateCommentThreadBodyMutation(); useUpdateCommentThreadBodyMutation();
const [body, setBody] = useState<string | null>(null);
useEffect(() => {
if (body) {
onChange?.(body);
}
}, [body, onChange]);
const debounceOnChange = useMemo(() => { const debounceOnChange = useMemo(() => {
function onInternalChange(commentThreadBody: string) { function onInternalChange(commentThreadBody: string) {
onChange?.(commentThreadBody); setBody(commentThreadBody);
updateCommentThreadBodyMutation({ updateCommentThreadBodyMutation({
variables: { variables: {
commentThreadId: commentThread.id, commentThreadId: commentThread.id,
@ -40,7 +48,7 @@ export function CommentThreadBodyEditor({ commentThread, onChange }: OwnProps) {
} }
return debounce(onInternalChange, 200); return debounce(onInternalChange, 200);
}, [commentThread, updateCommentThreadBodyMutation, onChange]); }, [commentThread, updateCommentThreadBodyMutation, setBody]);
const editor: BlockNoteEditor | null = useBlockNote({ const editor: BlockNoteEditor | null = useBlockNote({
initialContent: commentThread.body initialContent: commentThread.body

19
front/src/modules/comments/components/right-drawer/CommentThread.tsx
View File

@ -85,11 +85,13 @@ const StyledTopActionsContainer = styled.div`
type OwnProps = { type OwnProps = {
commentThreadId: string; commentThreadId: string;
showComment?: boolean; showComment?: boolean;
autoFillTitle?: boolean;
}; };
export function CommentThread({ export function CommentThread({
commentThreadId, commentThreadId,
showComment = true, showComment = true,
autoFillTitle = false,
}: OwnProps) { }: OwnProps) {
const { data } = useGetCommentThreadQuery({ const { data } = useGetCommentThreadQuery({
variables: { variables: {
@ -100,7 +102,8 @@ export function CommentThread({
const commentThread = data?.findManyCommentThreads[0]; const commentThread = data?.findManyCommentThreads[0];
const [title, setTitle] = useState<string | null | undefined>(undefined); const [title, setTitle] = useState<string | null | undefined>(undefined);
const [isLoading, setIsLoading] = useState(true); const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
useState<boolean>(false);
const [updateCommentThreadTitleMutation] = const [updateCommentThreadTitleMutation] =
useUpdateCommentThreadTitleMutation(); useUpdateCommentThreadTitleMutation();
@ -121,21 +124,18 @@ export function CommentThread({
}, [commentThreadId, updateCommentThreadTitleMutation]); }, [commentThreadId, updateCommentThreadTitleMutation]);
function updateTitleFromBody(body: string) { function updateTitleFromBody(body: string) {
const title = JSON.parse(body)[0]?.content[0]?.text; const parsedTitle = JSON.parse(body)[0]?.content[0]?.text;
if (!commentThread?.title || commentThread?.title === '') { if (!hasUserManuallySetTitle && autoFillTitle) {
setTitle(title); setTitle(parsedTitle);
debounceUpdateTitle(title); debounceUpdateTitle(parsedTitle);
} }
} }
useEffect(() => { useEffect(() => {
if (commentThread) { if (commentThread) {
setIsLoading(false);
}
if (isLoading) {
setTitle(commentThread?.title ?? ''); setTitle(commentThread?.title ?? '');
} }
}, [commentThread, isLoading]); }, [commentThread]);
if (!commentThread) { if (!commentThread) {
return <></>; return <></>;
@ -152,6 +152,7 @@ export function CommentThread({
<StyledEditableTitleInput <StyledEditableTitleInput
placeholder="Note title (optional)" placeholder="Note title (optional)"
onChange={(event) => { onChange={(event) => {
setHasUserManuallySetTitle(true);
setTitle(event.target.value); setTitle(event.target.value);
debounceUpdateTitle(event.target.value); debounceUpdateTitle(event.target.value);
}} }}

1
front/src/modules/comments/components/right-drawer/create/RightDrawerCreateCommentThread.tsx
View File

@ -30,6 +30,7 @@ export function RightDrawerCreateCommentThread() {
<CommentThread <CommentThread
commentThreadId={commentThreadId} commentThreadId={commentThreadId}
showComment={false} showComment={false}
autoFillTitle={true}
/> />
)} )}
</RightDrawerBody> </RightDrawerBody>