From aa3495158bfde1bbbc53cc4e09a0979ba98d724c Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Tue, 21 Nov 2023 14:12:19 +0000
Subject: [PATCH] Merge pull request #15815 from
overleaf/td-persist-unsaved-comment
Persist unsaved comment in the front end after not submitting
GitOrigin-RevId: a7ffee6f5fbfb7151a2ef7233ba4412d0db33e19
---
.../hooks/use-review-panel-state.ts | 5 +++
.../review-panel/current-file-container.tsx | 2 +-
.../entries/add-comment-entry.tsx | 45 ++++++++++++-------
.../hooks/use-angular-review-panel-state.ts | 5 +++
.../review-panel/types/review-panel-state.ts | 4 ++
5 files changed, 44 insertions(+), 17 deletions(-)
diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
index 1022036dd9..8f3dd79c17 100644
--- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
+++ b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
@@ -509,6 +509,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
const [navHeight, setNavHeight] = useState(0)
const [toolbarHeight, setToolbarHeight] = useState(0)
const [layoutSuspended, setLayoutSuspended] = useState(false)
+ const [unsavedComment, setUnsavedComment] = useState('')
// listen for events from the CodeMirror 6 track changes extension
useEffect(() => {
@@ -573,6 +574,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
trackChangesForGuestsAvailable,
formattedProjectMembers,
layoutSuspended,
+ unsavedComment,
}),
[
collapsed,
@@ -599,6 +601,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
trackChangesForGuestsAvailable,
formattedProjectMembers,
layoutSuspended,
+ unsavedComment,
]
)
@@ -630,6 +633,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
setNavHeight,
setToolbarHeight,
setLayoutSuspended,
+ setUnsavedComment,
}),
[
handleSetSubview,
@@ -657,6 +661,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
setNavHeight,
setToolbarHeight,
setLayoutSuspended,
+ setUnsavedComment,
]
)
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx
index 446b0dc83f..5153db39c6 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/current-file-container.tsx
@@ -130,7 +130,7 @@ function CurrentFileContainer() {
}
if (entry.type === 'add-comment' && permissions.comment) {
- return
+ return
}
if (entry.type === 'bulk-actions') {
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx
index a8458c3963..a5ee70df6f 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx
@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import EntryContainer from './entry-container'
import EntryCallout from './entry-callout'
import EntryActions from './entry-actions'
@@ -11,20 +11,19 @@ import {
useReviewPanelValueContext,
} from '../../../context/review-panel/review-panel-context'
import classnames from 'classnames'
-import { ReviewPanelAddCommentEntry } from '../../../../../../../types/review-panel/entry'
-type AddCommentEntryProps = {
- entryId: ReviewPanelAddCommentEntry['type']
-}
-
-function AddCommentEntry({ entryId }: AddCommentEntryProps) {
+function AddCommentEntry() {
const { t } = useTranslation()
- const { isAddingComment } = useReviewPanelValueContext()
- const { setIsAddingComment, submitNewComment, handleLayoutChange } =
- useReviewPanelUpdaterFnsContext()
+ const { isAddingComment, unsavedComment } = useReviewPanelValueContext()
+ const {
+ setIsAddingComment,
+ submitNewComment,
+ handleLayoutChange,
+ setUnsavedComment,
+ } = useReviewPanelUpdaterFnsContext()
- const [content, setContent] = useState('')
- const [isSubmitting, setIsSubmiting] = useState(false)
+ const [content, setContent] = useState(unsavedComment)
+ const [isSubmitting, setIsSubmitting] = useState(false)
const handleStartNewComment = () => {
setIsAddingComment(true)
@@ -32,14 +31,14 @@ function AddCommentEntry({ entryId }: AddCommentEntryProps) {
}
const handleSubmitNewComment = async () => {
- setIsSubmiting(true)
+ setIsSubmitting(true)
try {
await submitNewComment(content)
- setIsSubmiting(false)
+ setIsSubmitting(false)
setIsAddingComment(false)
setContent('')
} catch (err) {
- setIsSubmiting(false)
+ setIsSubmitting(false)
}
handleLayoutChange({ async: true })
}
@@ -56,6 +55,20 @@ function AddCommentEntry({ entryId }: AddCommentEntryProps) {
}
}, [setIsAddingComment])
+ const unsavedCommentRef = useRef(unsavedComment)
+
+ // Keep unsaved comment ref up to date for use when the component unmounts
+ useEffect(() => {
+ unsavedCommentRef.current = content
+ }, [content])
+
+ // Store the unsaved comment in the context on unmount
+ useEffect(() => {
+ return () => {
+ setUnsavedComment(unsavedCommentRef.current)
+ }
+ }, [setUnsavedComment])
+
const handleCommentKeyPress = (
e: React.KeyboardEvent
) => {
@@ -76,7 +89,7 @@ function AddCommentEntry({ entryId }: AddCommentEntryProps) {
}
return (
-
+