From 3977a897c45902a6753a6ff2755c8c4b94fdebe5 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 7 Jun 2020 15:15:51 +0800
Subject: feat(front): Fix #77 .

---
 Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx')

diff --git a/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx
index 2b76b03b..16ce445a 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx
@@ -83,6 +83,7 @@ export interface TimelinePostEditProps {
   className?: string;
   onPost: TimelinePostSendCallback;
   onHeightChange?: (height: number) => void;
+  timelineName: string;
 }
 
 const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
@@ -95,6 +96,12 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   const [text, setText] = React.useState<string>('');
   const [imageBlob, setImageBlob] = React.useState<Blob | null>(null);
 
+  const draftLocalStorageKey = `timeline.${props.timelineName}.postDraft`;
+
+  React.useEffect(() => {
+    setText(window.localStorage.getItem(draftLocalStorageKey) ?? '');
+  }, [draftLocalStorageKey]);
+
   const canSend = kind === 'text' || (kind === 'image' && imageBlob != null);
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -149,6 +156,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
       (_) => {
         if (kind === 'text') {
           setText('');
+          window.localStorage.removeItem(draftLocalStorageKey);
         }
         setState('input');
         setKind('text');
@@ -161,7 +169,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
         setState('input');
       }
     );
-  }, [onPost, kind, text, imageBlob, t]);
+  }, [onPost, kind, text, imageBlob, t, draftLocalStorageKey]);
 
   const onImageSelect = React.useCallback((blob: Blob | null) => {
     setImageBlob(blob);
@@ -177,7 +185,9 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
               value={text}
               disabled={state === 'process'}
               onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
-                setText(event.currentTarget.value);
+                const value = event.currentTarget.value;
+                setText(value);
+                window.localStorage.setItem(draftLocalStorageKey, value);
               }}
             />
           ) : (
-- 
cgit v1.2.3

