feat(settings): add sub-section handling for settings navigation and deep linking

src/features/misc/sections/Advanced.jsx

@@ -18,9 +18,8 @@ import { Header, Section, Row, Content, Action } from 'components/Layout/Setting
 
 import time_zones from 'features/time/timezones.json';
 
-function AdvancedOptions() {
+function AdvancedOptions({ currentSubSection, onSubSectionChange, sectionName }) {
   const [resetModal, setResetModal] = useState(false);
-  const [data, setData] = useState(false);
   const ADVANCED_SECTION = 'modals.main.settings.sections.advanced';
 
   const Data = () => {
@@ -76,13 +75,15 @@ function AdvancedOptions() {
     );
   };
 
+  const isDataSection = currentSubSection === 'data';
+
   let header;
-  if (data) {
+  if (isDataSection) {
     header = (
       <Header
         title={variables.getMessage(`${ADVANCED_SECTION}.title`)}
         secondaryTitle={variables.getMessage(`${ADVANCED_SECTION}.data`)}
-        goBack={() => setData(false)}
+        goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
       />
     );
@@ -93,7 +94,7 @@ function AdvancedOptions() {
   return (
     <>
       {header}
-      {data ? (
+      {isDataSection ? (
         <>
           <Data />
           <Modal
@@ -112,7 +113,7 @@ function AdvancedOptions() {
           <Section
             title={variables.getMessage(`${ADVANCED_SECTION}.data`)}
             subtitle={variables.getMessage(`${ADVANCED_SECTION}.data_subtitle`)}
-            onClick={() => setData(true)}
+            onClick={() => onSubSectionChange('data', sectionName)}
             icon={<MdDataUsage />}
           />
           <Row>

src/features/misc/sections/Appearance.jsx

@@ -9,8 +9,7 @@ import { MdAccessibility } from 'react-icons/md';
 
 import values from 'utils/data/slider_values.json';
 
-function AppearanceOptions() {
-  const [accessibility, setAccessibility] = useState(false);
+function AppearanceOptions({ currentSubSection, onSubSectionChange, sectionName }) {
 
   const ThemeSelection = () => {
     return (
@@ -239,15 +238,17 @@ function AppearanceOptions() {
     );
   };
 
+  const isAccessibilitySection = currentSubSection === 'accessibility';
+
   let header;
-  if (accessibility) {
+  if (isAccessibilitySection) {
     header = (
       <Header
         title={variables.getMessage('modals.main.settings.sections.appearance.title')}
         secondaryTitle={variables.getMessage(
           'modals.main.settings.sections.appearance.accessibility.title',
         )}
-        goBack={() => setAccessibility(false)}
+        goBack={() => onSubSectionChange(null, sectionName)}
         report={false}
       />
     );
@@ -262,7 +263,7 @@ function AppearanceOptions() {
   return (
     <>
       {header}
-      {accessibility ? (
+      {isAccessibilitySection ? (
         <AccessibilityOptions />
       ) : (
         <>
@@ -274,7 +275,7 @@ function AppearanceOptions() {
               'modals.main.settings.sections.appearance.accessibility.description',
             )}
             icon={<MdAccessibility />}
-            onClick={() => setAccessibility(true)}
+            onClick={() => onSubSectionChange('accessibility', sectionName)}
           />
           <ThemeSelection />
           <FontOptions />

src/features/misc/views/Settings.jsx

@@ -95,13 +95,19 @@ function Settings(props) {
       current="settings"
       currentTab={props.currentTab}
       onSectionChange={props.onSectionChange}
+      onSubSectionChange={props.onSubSectionChange}
+      currentSubSection={props.currentSubSection}
       deepLinkData={props.deepLinkData}
       navigationTrigger={props.navigationTrigger}
       sections={sections}
     >
       {sections.map(({ label, name, component: Component }) => (
         <div key={name} label={variables.getMessage(label)} name={name}>
-          <Component />
+          <Component
+            currentSubSection={props.currentSubSection}
+            onSubSectionChange={props.onSubSectionChange}
+            sectionName={name}
+          />
         </div>
       ))}
     </Tabs>