From 1e544ec9917df3450c286fa0ea92a7c6f83feaff Mon Sep 17 00:00:00 2001 From: Huiqing Li Date: Fri, 26 May 2023 13:20:55 -0700 Subject: [PATCH 1/4] autosaving comments via commandId --- .../Explore/components/Comment/CommentBox.tsx | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx index d6f87d6f..d2bb9dee 100644 --- a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx +++ b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx @@ -173,7 +173,7 @@ export const CommentBox = observer( const state = createState({ editMode: newComment || false, - text: annotation?.text || '', + text: annotation?.text || window.localStorage.getItem('savedComments') || '', manualLinkName: '', displayName: '', destinationBeacon: undefined as BeaconModel | undefined, @@ -249,6 +249,14 @@ export const CommentBox = observer( }, handleTextChange(e: ChangeEvent) { this.text = e.target.value; + if (!this.commandGroupId && !!this.editMode) { + const currStoredComments = JSON.parse(window.localStorage.getItem('savedComments') || '{}'); + delete currStoredComments[this.commandIds[0]]; + window.localStorage.setItem( + 'savedComments', + JSON.stringify({ ...currStoredComments, [this.commandIds[0]]: e.target.value }) + ); + } }, handleManualLinkNameChange(e: ChangeEvent) { this.manualLinkName = e.target.value; @@ -267,6 +275,11 @@ export const CommentBox = observer( } }, cancelAnnotationEdit() { + if (!state.commandGroupId && !!state.editMode && state.text[0] === '{') { + const currStoredComments = JSON.parse(window.localStorage.getItem('savedComments') || '{}'); + delete currStoredComments[this.commandIds[0]]; + window.localStorage.setItem('savedComments', JSON.stringify(currStoredComments)); + } this.text = annotation?.text || ''; this.tags.replace(this.defaultTags); this.editMode = false; @@ -287,10 +300,14 @@ export const CommentBox = observer( campaignId, commandIds: this.commandIds, favorite: this.favorite, - text: this.text, + text: JSON.parse(window.localStorage.getItem('savedComments') || '{}')[this.commandIds[0]], tags: this.tags, user: store.auth.userName!, }); + // window.localStorage.removeItem('savedComments'); + const currStoredComments = JSON.parse(window.localStorage.getItem('savedComments') || '{}'); + delete currStoredComments[this.commandIds[0]]; + window.localStorage.setItem('savedComments', JSON.stringify(currStoredComments)); } else if ((this.editMode || update) && annotation) { yield store.graphqlStore.mutateUpdateAnnotation({ campaignId, @@ -446,7 +463,11 @@ export const CommentBox = observer( growVertically fill onChange={state.handleTextChange} - value={state.text} + value={ + !state.commandGroupId && !!state.editMode && state.text[0] === '{' + ? JSON.parse(state.text || '{}')[state.commandIds[0]] + : state.text + } placeholder="..." autoFocus /> From 0ead5c0fc5fbfea30af47f139dfa0593ce2cdfde Mon Sep 17 00:00:00 2001 From: Huiqing Li Date: Fri, 26 May 2023 13:20:55 -0700 Subject: [PATCH 2/4] cleanup and rename --- .../Explore/components/Comment/CommentBox.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx index d2bb9dee..d5814491 100644 --- a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx +++ b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx @@ -173,7 +173,7 @@ export const CommentBox = observer( const state = createState({ editMode: newComment || false, - text: annotation?.text || window.localStorage.getItem('savedComments') || '', + text: annotation?.text || window.localStorage.getItem('pendingComments') || '', manualLinkName: '', displayName: '', destinationBeacon: undefined as BeaconModel | undefined, @@ -250,11 +250,11 @@ export const CommentBox = observer( handleTextChange(e: ChangeEvent) { this.text = e.target.value; if (!this.commandGroupId && !!this.editMode) { - const currStoredComments = JSON.parse(window.localStorage.getItem('savedComments') || '{}'); - delete currStoredComments[this.commandIds[0]]; + const pendingComments = JSON.parse(window.localStorage.getItem('pendingComments') || '{}'); + delete pendingComments[this.commandIds[0]]; window.localStorage.setItem( - 'savedComments', - JSON.stringify({ ...currStoredComments, [this.commandIds[0]]: e.target.value }) + 'pendingComments', + JSON.stringify({ ...pendingComments, [this.commandIds[0]]: e.target.value }) ); } }, @@ -276,9 +276,9 @@ export const CommentBox = observer( }, cancelAnnotationEdit() { if (!state.commandGroupId && !!state.editMode && state.text[0] === '{') { - const currStoredComments = JSON.parse(window.localStorage.getItem('savedComments') || '{}'); - delete currStoredComments[this.commandIds[0]]; - window.localStorage.setItem('savedComments', JSON.stringify(currStoredComments)); + const pendingComments = JSON.parse(window.localStorage.getItem('pendingComments') || '{}'); + delete pendingComments[this.commandIds[0]]; + window.localStorage.setItem('pendingComments', JSON.stringify(pendingComments)); } this.text = annotation?.text || ''; this.tags.replace(this.defaultTags); @@ -300,14 +300,13 @@ export const CommentBox = observer( campaignId, commandIds: this.commandIds, favorite: this.favorite, - text: JSON.parse(window.localStorage.getItem('savedComments') || '{}')[this.commandIds[0]], + text: JSON.parse(window.localStorage.getItem('pendingComments') || '{}')[this.commandIds[0]], tags: this.tags, user: store.auth.userName!, }); - // window.localStorage.removeItem('savedComments'); - const currStoredComments = JSON.parse(window.localStorage.getItem('savedComments') || '{}'); - delete currStoredComments[this.commandIds[0]]; - window.localStorage.setItem('savedComments', JSON.stringify(currStoredComments)); + const pendingComments = JSON.parse(window.localStorage.getItem('pendingComments') || '{}'); + delete pendingComments[this.commandIds[0]]; + window.localStorage.setItem('pendingComments', JSON.stringify(pendingComments)); } else if ((this.editMode || update) && annotation) { yield store.graphqlStore.mutateUpdateAnnotation({ campaignId, @@ -464,7 +463,7 @@ export const CommentBox = observer( fill onChange={state.handleTextChange} value={ - !state.commandGroupId && !!state.editMode && state.text[0] === '{' + !!state.editMode && state.text[0] === '{' ? JSON.parse(state.text || '{}')[state.commandIds[0]] : state.text } From 9944f6e4e950c599fd5ed4ecd5dc064dc7e85ca6 Mon Sep 17 00:00:00 2001 From: Huiqing Li Date: Fri, 26 May 2023 13:20:55 -0700 Subject: [PATCH 3/4] clear savedComments when logout and diff user login --- applications/client/src/components/Forms/LoginForm.tsx | 3 +++ applications/client/src/store/auth.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/applications/client/src/components/Forms/LoginForm.tsx b/applications/client/src/components/Forms/LoginForm.tsx index b025fd46..1d98078c 100644 --- a/applications/client/src/components/Forms/LoginForm.tsx +++ b/applications/client/src/components/Forms/LoginForm.tsx @@ -53,6 +53,9 @@ export const LoginForm = observer(({ onSubmit, submitText = 'Log else if (loginResponse.status !== 200) this.errorMessage = 'Error logging in'; else { this.errorMessage = ''; + if (this.username !== store.auth.userName) { + window.localStorage.removeItem('pendingComments'); + } store.auth.setUser(this.username); store.router.updateRoute({ path: routes[Views.CAMPAIGNS_LIST], params: { id: 'all' } }); if (onSubmit) onSubmit(event); diff --git a/applications/client/src/store/auth.ts b/applications/client/src/store/auth.ts index 5dcfdd68..6b1c72d6 100644 --- a/applications/client/src/store/auth.ts +++ b/applications/client/src/store/auth.ts @@ -40,6 +40,7 @@ export class Auth extends ExtendedModel(RedEyeModel, { credentials: 'include', }); this.appStore?.router.updateRoute({ path: RedEyeRoutes.LOGIN }); + window.localStorage.removeItem('pendingComments'); } catch (e) { this.appStore?.router.updateRoute({ path: RedEyeRoutes.LOGIN }); window.console.debug(e); From 38856a1108e7f17767ee902178ce36f72bc7372c Mon Sep 17 00:00:00 2001 From: Huiqing Li Date: Fri, 26 May 2023 13:20:55 -0700 Subject: [PATCH 4/4] fix disable submitComment btn with pending comments --- .../Campaign/Explore/components/Comment/CommentBox.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx index d5814491..623e9d33 100644 --- a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx +++ b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx @@ -594,7 +594,12 @@ export const CommentBox = observer( intent={Intent.PRIMARY} alignText={Alignment.LEFT} loading={state.loading} - disabled={state.loading || !state.text} + disabled={ + state.loading || + !(!!state.editMode && state.text[0] === '{' + ? JSON.parse(state.text || '{}')[state.commandIds[0]] + : state.text) + } // where the added beacon link is created onClick={() => state.submitAnnotation()} rightIcon={}