From e7950fcb22cca618f90db0db2218741f3847acab Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Fri, 12 Mar 2021 00:41:36 +0300
Subject: [PATCH] Fix saving comment to LS

* save comment after image upload
* do not affect error messages by save to LS mechanism
* check if data in LS in empty
---
 frontend/app/common/local-storage.ts          |  6 ++--
 .../components/comment-form/comment-form.tsx  | 35 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/app/common/local-storage.ts b/frontend/app/common/local-storage.ts
index cf4a3313..d481b048 100644
--- a/frontend/app/common/local-storage.ts
+++ b/frontend/app/common/local-storage.ts
@@ -46,9 +46,9 @@ export function setJsonItem<T = unknown>(key: string, data: T) {
   }
 }
 
-export function updateJsonItem<T extends {}>(key: string, value: (data: T) => T): void;
-export function updateJsonItem<T extends {}>(key: string, value: T): void;
-export function updateJsonItem<T extends unknown[]>(key: string, value: T): void;
+export function updateJsonItem<T = Record<string, unknown>>(key: string, value: (data: T) => T): void;
+export function updateJsonItem<T = Record<string, unknown>>(key: string, value: T): void;
+export function updateJsonItem<T = unknown[]>(key: string, value: T): void;
 export function updateJsonItem<T>(key: string, value: T) {
   const savedData = getJsonItem<T>(key);
 
diff --git a/frontend/app/components/comment-form/comment-form.tsx b/frontend/app/components/comment-form/comment-form.tsx
index a8e396a9..64416d61 100644
--- a/frontend/app/components/comment-form/comment-form.tsx
+++ b/frontend/app/components/comment-form/comment-form.tsx
@@ -213,20 +213,22 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
     this.setState({ isDisabled: true, isErrorShown: false, text });
     try {
       await this.props.onSubmit(text, pageTitle || document.title);
-      updateJsonItem<Record<string, string>>(LS_SAVED_COMMENT_VALUE, (data) => {
-        delete data[this.props.id];
-
-        return data;
-      });
-      this.setState({ preview: null, text: '' });
     } catch (e) {
       this.setState({
         isErrorShown: true,
         errorMessage: extractErrorMessageFromResponse(e, this.props.intl),
       });
+      return;
     }
 
-    this.setState({ isDisabled: false });
+    updateJsonItem<Record<string, string> | null>(LS_SAVED_COMMENT_VALUE, (data) => {
+      if (data === null) {
+        return null;
+      }
+      delete data[this.props.id];
+      return data;
+    });
+    this.setState({ isDisabled: false, preview: null, text: '' });
   };
 
   getPreview() {
@@ -381,8 +383,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
         continue;
       }
 
-      this.setState({
-        text: replaceSelection(this.state.text, selection, uploadPlaceholder),
+      this.setState({ text: replaceSelection(this.state.text, selection, uploadPlaceholder) }, () => {
+        updateJsonItem(LS_SAVED_COMMENT_VALUE, { [this.props.id]: this.state.text });
       });
 
       !isFirst && (await sleep(uploadDelay));
@@ -396,9 +398,18 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
       }
 
       const markdownString = `${placeholderStart}![${result.name}](${result.url})`;
-      this.setState({
-        text: replaceSelection(this.state.text, [selection[0], selection[0] + uploadPlaceholderLength], markdownString),
-      });
+      this.setState(
+        {
+          text: replaceSelection(
+            this.state.text,
+            [selection[0], selection[0] + uploadPlaceholderLength],
+            markdownString
+          ),
+        },
+        () => {
+          updateJsonItem(LS_SAVED_COMMENT_VALUE, { [this.props.id]: this.state.text });
+        }
+      );
       /** sleeping awhile so textarea catch state change and its selection */
       await sleep(100);
       const selectionPointer = selection[0] + markdownString.length;