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); 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..623e9d33 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('pendingComments') || '', 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 pendingComments = JSON.parse(window.localStorage.getItem('pendingComments') || '{}'); + delete pendingComments[this.commandIds[0]]; + window.localStorage.setItem( + 'pendingComments', + JSON.stringify({ ...pendingComments, [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 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); this.editMode = false; @@ -287,10 +300,13 @@ export const CommentBox = observer( campaignId, commandIds: this.commandIds, favorite: this.favorite, - text: this.text, + text: JSON.parse(window.localStorage.getItem('pendingComments') || '{}')[this.commandIds[0]], tags: this.tags, user: store.auth.userName!, }); + 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, @@ -446,7 +462,11 @@ export const CommentBox = observer( growVertically fill onChange={state.handleTextChange} - value={state.text} + value={ + !!state.editMode && state.text[0] === '{' + ? JSON.parse(state.text || '{}')[state.commandIds[0]] + : state.text + } placeholder="..." autoFocus /> @@ -574,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={}