feat(front): Fix #77 .

2 files changed, 21 insertions, 4 deletions

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);

               }}

             />

           ) : (