From b4aae221d279738bb9001df8386b46fd640e73ff Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 8 Jun 2020 18:11:35 +0800
Subject: feat(front): Fix #76 .

---
 Timeline/ClientApp/src/common/CollapseButton.tsx   |  8 ++----
 .../src/timeline/TimelinePageTemplateUI.tsx        | 33 +++++++++++++++++-----
 Timeline/ClientApp/src/timeline/timeline-ui.sass   |  2 +-
 3 files changed, 29 insertions(+), 14 deletions(-)

(limited to 'Timeline/ClientApp')

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)
 
-- 
cgit v1.2.3