feat(front): Fix #76 .

3 files changed, 29 insertions, 14 deletions

diff --git a/Timeline/ClientApp/src/common/CollapseButton.tsx b/Timeline/ClientApp/src/common/CollapseButton.tsx
index 03f42e73..28385003 100644
--- a/Timeline/ClientApp/src/common/CollapseButton.tsx
+++ b/Timeline/ClientApp/src/common/CollapseButton.tsx
@@ -2,16 +2,12 @@ import React from 'react';
 

 export interface CollapseButtonProps {

   collapse: boolean;

-  toggle: (visibility: boolean) => void;

+  onClick: () => void;

   className?: string;

 }

 

 const CollapseButton: React.FC<CollapseButtonProps> = (props) => {

-  const { toggle, collapse, className } = props;

-

-  const onClick = React.useCallback(() => {

-    toggle(!collapse);

-  }, [toggle, collapse]);

+  const { onClick, collapse, className } = props;

 

   return (

     <svg

diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index 3aaafd2b..6d834832 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -43,6 +43,8 @@ export default function TimelinePageTemplateUI<
 >(

   props: TimelinePageTemplateUIProps<TTimeline, TEditItems>

 ): React.ReactElement | null {

+  const { timeline } = props;

+

   const { t } = useTranslation();

 

   const bottomSpaceRef = React.useRef<HTMLDivElement | null>(null);

@@ -71,19 +73,29 @@ export default function TimelinePageTemplateUI<
     setCardHeight(height);

   }, []);

 

+  const genCardCollapseLocalStorageKey = (timelineName: string): string =>

+    `timeline.${timelineName}.cardCollapse`;

+

+  const cardCollapseLocalStorageKey =

+    timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;

+

   const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(

     false

   );

-  const toggleInfoCardCollapse = React.useCallback((collapse) => {

-    setInfoCardCollapse(collapse);

-  }, []);

+  React.useEffect(() => {

+    if (cardCollapseLocalStorageKey != null) {

+      const savedCollapse =

+        window.localStorage.getItem(cardCollapseLocalStorageKey) === 'true';

+      setInfoCardCollapse(savedCollapse);

+    }

+  }, [cardCollapseLocalStorageKey]);

 

   let body: React.ReactElement;

 

   if (props.error != null) {

     body = <p className="text-danger">{t(props.error)}</p>;

   } else {

-    if (props.timeline != null) {

+    if (timeline != null) {

       let timelineBody: React.ReactElement;

       if (props.posts != null) {

         if (props.posts === 'forbid') {

@@ -102,7 +114,7 @@ export default function TimelinePageTemplateUI<
                 <TimelinePostEdit

                   onPost={props.onPost}

                   onHeightChange={onPostEditHeightChange}

-                  timelineName={props.timeline.name}

+                  timelineName={timeline.name}

                 />

               </>

             );

@@ -121,11 +133,18 @@ export default function TimelinePageTemplateUI<
           >

             <CollapseButton

               collapse={infoCardCollapse}

-              toggle={toggleInfoCardCollapse}

+              onClick={() => {

+                const newState = !infoCardCollapse;

+                setInfoCardCollapse(newState);

+                window.localStorage.setItem(

+                  genCardCollapseLocalStorageKey(timeline.name),

+                  newState.toString()

+                );

+              }}

               className="float-right m-1 info-card-collapse-button"

             />

             <CardComponent

-              timeline={props.timeline}

+              timeline={timeline}

               onManage={props.onManage}

               onMember={props.onMember}

               onHeight={onCardHeightChange}

diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.sass b/Timeline/ClientApp/src/timeline/timeline-ui.sass
index 8f0da6a4..27aaf072 100644
--- a/Timeline/ClientApp/src/timeline/timeline-ui.sass
+++ b/Timeline/ClientApp/src/timeline/timeline-ui.sass
@@ -9,7 +9,7 @@
     transform-origin: right top

     transition: transform 0.5s

 

-  & [data-collapse='true']

+  &[data-collapse='true']

     .info-card-content

       transform: scale(0)