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/TimelinePageTemplateUI.tsx | 11 +++++++++--
 Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx       | 14 ++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

(limited to 'Timeline/ClientApp')

diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index 22fb1987..3aaafd2b 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -20,7 +20,10 @@ export interface TimelineCardComponentProps<TTimeline, TManageItems> {
   onHeight?: (height: number) => void;
 }
 
-export interface TimelinePageTemplateUIProps<TTimeline, TManageItems> {
+export interface TimelinePageTemplateUIProps<
+  TTimeline extends { name: string },
+  TManageItems
+> {
   avatarKey?: string | number;
   timeline?: TTimeline;
   posts?: TimelinePostInfoEx[] | 'forbid';
@@ -34,7 +37,10 @@ export interface TimelinePageTemplateUIProps<TTimeline, TManageItems> {
   error?: string;
 }
 
-export default function TimelinePageTemplateUI<TTimeline, TEditItems>(
+export default function TimelinePageTemplateUI<
+  TTimeline extends { name: string },
+  TEditItems
+>(
   props: TimelinePageTemplateUIProps<TTimeline, TEditItems>
 ): React.ReactElement | null {
   const { t } = useTranslation();
@@ -96,6 +102,7 @@ export default function TimelinePageTemplateUI<TTimeline, TEditItems>(
                 <TimelinePostEdit
                   onPost={props.onPost}
                   onHeightChange={onPostEditHeightChange}
+                  timelineName={props.timeline.name}
                 />
               </>
             );
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