Merge pull request #4601 from google/825-persist-UI-state

Story Editor: Preset Panel Height & Collapse Persistence
GoogleForCreators · Sep 22, 2020 · 765c6c8 · 765c6c8
2 parents 42211a4 + 1f587a3
commit 765c6c8
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 8 deletions.
diff --git a/assets/src/edit-story/components/panels/panel/panel.js b/assets/src/edit-story/components/panels/panel/panel.js
@@ -25,6 +25,7 @@ import { useState, useCallback, useEffect, useMemo } from 'react';
 /**
  * Internal dependencies
  */
+import { LOCAL_STORAGE_PREFIX } from '../../../constants';
 import panelContext from './context';
 
 export const PANEL_COLLAPSED_THRESHOLD = 10;
@@ -44,9 +45,25 @@ function Panel({
   ariaLabel = null,
   ariaHidden = false,
 }) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [expandToHeight, setExpandToHeight] = useState(initialHeight);
-  const [height, setHeight] = useState(initialHeight);
+  const persisted = useMemo(() => {
+    let parsed = null;
+    try {
+      const stored = localStorage.getItem(
+        `${LOCAL_STORAGE_PREFIX.PANEL}:${name}`
+      );
+      parsed = JSON.parse(stored);
+    } catch (e) {
+      // @TODO Add some error handling.
+    }
+    return parsed;
+  }, [name]);
+  const [isCollapsed, setIsCollapsed] = useState(
+    Boolean(persisted?.isCollapsed)
+  );
+  const [expandToHeight, setExpandToHeight] = useState(
+    persisted?.expandToHeight || initialHeight
+  );
+  const [height, setHeight] = useState(persisted?.height || initialHeight);
   const [hasTitle, setHasTitle] = useState(false);
   const [manuallyChanged, setManuallyChanged] = useState(false);
 
@@ -57,10 +74,12 @@ function Panel({
       return;
     }
     setIsCollapsed(true);
+    setManuallyChanged(true);
     if (resizeable) {
       setHeight(0);
     }
   }, [resizeable, canCollapse]);
+
   const expand = useCallback(
     (restoreHeight = true) => {
       setIsCollapsed(false);
@@ -71,10 +90,13 @@ function Panel({
     [resizeable, expandToHeight]
   );
 
+  // Expand panel on first mount if collapse not persisted
   useEffect(() => {
-    setIsCollapsed(!canCollapse);
+    if (persisted?.isCollapsed) {
+      return;
+    }
     expand(true);
-  }, [canCollapse, expand]);
+  }, [canCollapse, expand, persisted]);
 
   useEffect(() => {
     if (resizeable && height <= PANEL_COLLAPSED_THRESHOLD && !isCollapsed) {
@@ -83,12 +105,29 @@ function Panel({
   }, [collapse, height, resizeable, isCollapsed]);
 
   useEffect(() => {
-    if (manuallyChanged || !resizeable) {
+    if (manuallyChanged || persisted || !resizeable) {
       return;
     }
     setHeight(initialHeight);
     setExpandToHeight(initialHeight);
-  }, [manuallyChanged, initialHeight, resizeable]);
+  }, [manuallyChanged, initialHeight, resizeable, persisted]);
+
+  // Persist when user collapses
+  useEffect(() => {
+    if (!manuallyChanged) {
+      return;
+    }
+
+    // Persist only when after user interacts
+    localStorage.setItem(
+      `${LOCAL_STORAGE_PREFIX.PANEL}:${name}`,
+      JSON.stringify({
+        height,
+        isCollapsed,
+        expandToHeight,
+      })
+    );
+  }, [name, isCollapsed, height, expandToHeight, manuallyChanged]);
 
   const manuallySetHeight = useCallback(
     (h) => {
@@ -160,6 +199,7 @@ Panel.propTypes = {
   canCollapse: PropTypes.bool,
   ariaLabel: PropTypes.string,
   ariaHidden: PropTypes.bool,
+  isPersisted: PropTypes.bool,
 };
 
 export default Panel;
diff --git a/assets/src/edit-story/components/panels/preset/karma/stylePresets.karma.js b/assets/src/edit-story/components/panels/preset/karma/stylePresets.karma.js
@@ -35,6 +35,7 @@ describe('Panel: Style Presets', () => {
   };
 
   beforeEach(async () => {
+    localStorage.clear();
     fixture = new Fixture();
     await fixture.render();
   });

diff --git a/assets/src/edit-story/components/panels/preset/presetPanel.js b/assets/src/edit-story/components/panels/preset/presetPanel.js
@@ -132,7 +132,7 @@ function PresetPanel({
 
   return (
     <Panel
-      name="stylepreset"
+      name={`stylepreset-${presetType}`}
       initialHeight={Math.min(initialHeight, window.innerHeight / 3)}
       resizeable={resizeable}
       canCollapse={canCollapse}

diff --git a/assets/src/edit-story/constants.js b/assets/src/edit-story/constants.js
@@ -81,3 +81,7 @@ export const FONT_WEIGHT = {
   NORMAL: 400,
   BOLD: 700,
 };
+
+export const LOCAL_STORAGE_PREFIX = {
+  PANEL: 'web_stories_ui_panel_settings',
+};