Update settings-modal.tsx

src/components/settings-modal/settings-modal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './settings-modal.module.css';
@@ -10,6 +10,14 @@ import MediaHostingSettings from './media-hosting-settings';
 import AdvancedSettings from './advanced-settings';
 import SubscriptionsSetting from './subscriptions-setting';
 
+const allSectionIds = ['interface-settings', 'media-hosting-settings', 'account-settings', 'subscriptions-settings', 'advanced-settings'];
+
+const hashToSection = (hash: string): string | null => {
+  if (hash === 'crypto-address-settings' || hash === 'crypto-wallet-settings') return 'account-settings';
+  if (allSectionIds.includes(hash)) return hash;
+  return null;
+};
+
 const SettingsModal = () => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -34,58 +42,57 @@ const SettingsModal = () => {
     };
   }, [closeModal]);
 
-  const [expandAll, setExpandAll] = useState(false);
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(() => {
+    const section = hashToSection(hash);
+    return section ? new Set([section]) : new Set();
+  });
 
-  const expandAccount = hash === 'account-settings' || hash === 'crypto-address-settings' || hash === 'crypto-wallet-settings';
+  const showInterfaceSettings = expandedSections.has('interface-settings');
-  const showInterfaceSettings = expandAll || hash === 'interface-settings';
+  const showMediaHostingSettings = expandedSections.has('media-hosting-settings');
-  const showMediaHostingSettings = expandAll || hash === 'media-hosting-settings';
+  const showAccountSettings = expandedSections.has('account-settings');
-  const showAccountSettings = expandAll || expandAccount;
+  const showSubscriptionsSettings = expandedSections.has('subscriptions-settings');
-  const showSubscriptionsSettings = expandAll || hash === 'subscriptions-settings';
+  const showAdvancedSettings = expandedSections.has('advanced-settings');
-  const showAdvancedSettings = expandAll || hash === 'advanced-settings';
 
-  const getExpandedCount = () => {
+  const allExpanded = useMemo(() => allSectionIds.every((id) => expandedSections.has(id)), [expandedSections]);
-    return (
-      Number(showInterfaceSettings) + Number(showMediaHostingSettings) + Number(showAccountSettings) + Number(showSubscriptionsSettings) + Number(showAdvancedSettings)
-    );
-  };
 
-  const getExpandedCategoryId = (excludeCategoryId?: string) => {
+  const basePath = location.pathname;
-    if (showInterfaceSettings && 'interface-settings' !== excludeCategoryId) return 'interface-settings';
-    if (showMediaHostingSettings && 'media-hosting-settings' !== excludeCategoryId) return 'media-hosting-settings';
-    if (showAccountSettings && 'account-settings' !== excludeCategoryId) return 'account-settings';
-    if (showSubscriptionsSettings && 'subscriptions-settings' !== excludeCategoryId) return 'subscriptions-settings';
-    if (showAdvancedSettings && 'advanced-settings' !== excludeCategoryId) return 'advanced-settings';
-    return null;
-  };
 
-  const handleCategoryClick = (categoryId: string, isShowing: boolean) => {
+  useEffect(() => {
-    const newState = !isShowing;
+    const section = hashToSection(hash);
-    const currentPath = location.pathname;
+    if (section && !expandedSections.has(section)) {
-    const baseSettingsPath = currentPath.split('#')[0];
+      setExpandedSections((prev) => new Set(prev).add(section));
-    const currentExpandedCount = getExpandedCount();
-
-    if (newState) {
-      if (currentExpandedCount === 0) {
-        navigate(`${baseSettingsPath}#${categoryId}`, { replace: true });
-      } else {
-        navigate(baseSettingsPath, { replace: true });
-      }
-    } else {
-      if (currentExpandedCount === 1) {
-        navigate(baseSettingsPath, { replace: true });
-      } else if (currentExpandedCount === 2) {
-        const remainingCategory = getExpandedCategoryId(categoryId);
-        if (remainingCategory) {
-          navigate(`${baseSettingsPath}#${remainingCategory}`, { replace: true });
-        }
-      }
     }
+  }, [hash]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleCategoryClick = (categoryId: string) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      const isOpening = !next.has(categoryId);
+      if (isOpening) {
+        next.add(categoryId);
+      } else {
+        next.delete(categoryId);
+      }
+      if (isOpening) {
+        navigate(`${basePath}#${categoryId}`, { replace: true });
+      } else if (next.size === 1) {
+        const remaining = next.values().next().value;
+        navigate(`${basePath}#${remaining}`, { replace: true });
+      } else {
+        navigate(basePath, { replace: true });
+      }
+      return next;
+    });
   };
 
   const handleExpandAll = () => {
-    setExpandAll((prev) => !prev);
+    if (allExpanded) {
-    const baseSettingsPath = location.pathname.split('#')[0];
+      setExpandedSections(new Set());
-    navigate(baseSettingsPath, { replace: true });
+      navigate(basePath, { replace: true });
+    } else {
+      setExpandedSections(new Set(allSectionIds));
+      navigate(basePath, { replace: true });
+    }
   };
 
   const handleKeyDown = (handler: () => void) => (e: React.KeyboardEvent) => {
@@ -106,26 +113,26 @@ const SettingsModal = () => {
         <div className={styles.expandAllSettings}>
           [
           <span role='button' tabIndex={0} onClick={handleExpandAll} onKeyDown={handleKeyDown(handleExpandAll)}>
-            {expandAll ? t('collapse_all_settings') : t('expand_all_settings')}
+            {allExpanded ? t('collapse_all_settings') : t('expand_all_settings')}
           </span>
           ]
         </div>
         <div id='interface-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('interface-settings', showInterfaceSettings)}>
+          <label onClick={() => handleCategoryClick('interface-settings')}>
             <span className={showInterfaceSettings ? styles.hideButton : styles.showButton} />
             {t('interface')}
           </label>
         </div>
         {showInterfaceSettings && <InterfaceSettings />}
         <div id='media-hosting-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('media-hosting-settings', showMediaHostingSettings)}>
+          <label onClick={() => handleCategoryClick('media-hosting-settings')}>
             <span className={showMediaHostingSettings ? styles.hideButton : styles.showButton} />
             {t('media_hosting')}
           </label>
         </div>
         {showMediaHostingSettings && <MediaHostingSettings />}
         <div id='account-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('account-settings', showAccountSettings)}>
+          <label onClick={() => handleCategoryClick('account-settings')}>
             <span className={showAccountSettings ? styles.hideButton : styles.showButton} />
             {t('bitsocial_account')}
           </label>
@@ -140,14 +147,14 @@ const SettingsModal = () => {
           </>
         )}
         <div id='subscriptions-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('subscriptions-settings', showSubscriptionsSettings)}>
+          <label onClick={() => handleCategoryClick('subscriptions-settings')}>
             <span className={showSubscriptionsSettings ? styles.hideButton : styles.showButton} />
             {t('board_subscriptions')}
           </label>
         </div>
         {showSubscriptionsSettings && <SubscriptionsSetting />}
         <div id='advanced-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('advanced-settings', showAdvancedSettings)}>
+          <label onClick={() => handleCategoryClick('advanced-settings')}>
             <span className={showAdvancedSettings ? styles.hideButton : styles.showButton} />
             {t('advanced_settings')}
           </label>