feat: storage tree-panel section state (#7282)

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -224,7 +224,7 @@ class DirColumnView extends React.Component {
               updateCurrentDirent={this.props.updateCurrentDirent}
             />
           )}
-          {currentMode === LIST_MODE &&
+          {currentMode === LIST_MODE && (
             <DirListView
               path={this.props.path}
               repoID={this.props.repoID}
@@ -264,8 +264,8 @@ class DirColumnView extends React.Component {
               getMenuContainerSize={this.getMenuContainerSize}
               eventBus={this.props.eventBus}
             />
-          }
+          )}
-          {currentMode === GRID_MODE &&
+          {currentMode === GRID_MODE && (
             <DirGridView
               path={this.props.path}
               repoID={this.props.repoID}
@@ -301,7 +301,7 @@ class DirColumnView extends React.Component {
               getMenuContainerSize={this.getMenuContainerSize}
               eventBus={this.props.eventBus}
             />
-          }
+          )}
         </div>
       </div>
     );

frontend/src/components/dir-view-mode/dir-files.js

@@ -367,6 +367,8 @@ class DirFiles extends React.Component {
     return (
       <>
         <TreeSection
+          repoID={repoID}
+          stateStorageKey="files"
           title={gettext('Files')}
           renderHeaderOperations={this.renderTreeSectionHeaderOperations}
         >

frontend/src/components/dir-view-mode/dir-tags/index.js

@@ -21,7 +21,7 @@ const DirTags = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   if (!enableMetadata || !enableTags) return null;
 
   return (
-    <TreeSection title={gettext('Tags')}>
+    <TreeSection repoID={repoID} title={gettext('Tags')} stateStorageKey="tags">
       {!isLoading && (<TagsTreeView userPerm={userPerm} repoID={repoID} currentPath={currentPath} />)}
     </TreeSection>
   );

frontend/src/components/dir-view-mode/dir-views/index.js

@@ -51,6 +51,8 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   return (
     <>
       <TreeSection
+        repoID={repoID}
+        stateStorageKey="views"
         title={gettext('Views')}
         renderHeaderOperations={renderTreeSectionHeaderOperations}
       >

frontend/src/components/tree-section/index.js

@@ -1,19 +1,37 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { TREE_PANEL_SECTION_STATE_KEY } from '../../constants';
 
 import './index.css';
 
-const TreeSection = ({ title, children, renderHeaderOperations, className }) => {
+const TreeSection = ({ repoID, stateStorageKey, title, children, renderHeaderOperations, className }) => {
   const [showChildren, setShowChildren] = useState(true);
   const [highlight, setHighlight] = useState(false);
   const [freeze, setFreeze] = useState(false);
 
+  const storageKey = useMemo(() => `${TREE_PANEL_SECTION_STATE_KEY}_${repoID}`, [repoID]);
+
+  useEffect(() => {
+    if (!stateStorageKey) return;
+    const stateString = window.localStorage.getItem(storageKey, '{}');
+    const state = JSON.parse(stateString) || {};
+    const currentValue = state[stateStorageKey] === false ? false : true;
+    setShowChildren(currentValue);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const toggleShowChildren = useCallback((event) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
-    setShowChildren(!showChildren);
+    const newValue = !showChildren;
-  }, [showChildren]);
+    setShowChildren(newValue);
+    if (!stateStorageKey) return;
+    const stateString = window.localStorage.getItem(storageKey, '{}');
+    const stateOldValue = JSON.parse(stateString);
+    const newState = { ...stateOldValue, [stateStorageKey]: newValue };
+    window.localStorage.setItem(storageKey, JSON.stringify(newState));
+  }, [showChildren, storageKey, stateStorageKey]);
 
   const onMouseEnter = useCallback(() => {
     if (freeze) return;
@@ -76,6 +94,8 @@ const TreeSection = ({ title, children, renderHeaderOperations, className }) =>
 };
 
 TreeSection.propTypes = {
+  repoID: PropTypes.string,
+  stateStorageKey: PropTypes.string,
   title: PropTypes.any.isRequired,
   children: PropTypes.any,
   className: PropTypes.string,

frontend/src/constants/index.js

@@ -45,3 +45,7 @@ export const SYSTEM_FOLDERS = [
 ];
 
 export const DIRENT_DETAIL_SHOW_KEY = 'sf_dirent_detail_show';
+
+export const TREE_PANEL_STATE_KEY = 'sf_dir_view_tree_panel_open';
+
+export const TREE_PANEL_SECTION_STATE_KEY = 'sf_dir_view_tree_panel_section_state';

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -21,7 +21,7 @@ import FileUploader from '../../components/file-uploader/file-uploader';
 import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
 import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
 import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
-import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY } from '../../constants';
+import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY, TREE_PANEL_STATE_KEY } from '../../constants';
 import { MetadataStatusProvider } from '../../hooks';
 import { MetadataProvider, CollaboratorsProvider } from '../../metadata/hooks';
 import { TagsProvider } from '../../tag/hooks';
@@ -50,7 +50,7 @@ class LibContentView extends React.Component {
     super(props);
 
     let isTreePanelShown = true;
-    const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
+    const storedTreePanelState = localStorage.getItem(TREE_PANEL_STATE_KEY);
     if (storedTreePanelState != undefined) {
       isTreePanelShown = storedTreePanelState === 'true';
     }
@@ -2140,7 +2140,7 @@ class LibContentView extends React.Component {
       if (this.state.isTreePanelShown) {
         this.loadSidePanel(this.state.path);
       }
-      localStorage.setItem('sf_dir_view_tree_panel_open', String(this.state.isTreePanelShown));
+      localStorage.setItem(TREE_PANEL_STATE_KEY, String(this.state.isTreePanelShown));
     });
   };