chore: took out conditional rendering of settings

digidem · Feb 6, 2023 · 73472a2 · 73472a2
1 parent 7591f07
commit 73472a2
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 62 deletions.
diff --git a/src/renderer/components/Home.js b/src/renderer/components/Home.js
@@ -226,8 +226,6 @@ export default function Home ({ onSelectLanguage }) {
   const [update, setUpdate] = useUpdater()
   const { formatMessage: t } = useIntl()
 
-  const [settingsReset, setSettingsReset] = React.useState(false)
-
   const classes = useStyle()
 
   React.useEffect(() => {
@@ -275,7 +273,6 @@ export default function Home ({ onSelectLanguage }) {
           variant='scrollable'
           value={tabIndex}
           onChange={(e, value) => {
-            if (value === 4) setSettingsReset(true)
             setTabIndex(value)
           }}
         >
@@ -313,13 +310,13 @@ export default function Home ({ onSelectLanguage }) {
           update={update}
           setUpdate={setUpdate}
         />
-        {tabIndex === 4 && (
-          <Settings
-            fadeIn={tabIndex === 4}
-            reset={settingsReset}
-            setReset={setSettingsReset}
-          />
-        )}
+
+        <TabPanel
+          index={4}
+          value={tabIndex}
+          fadeIn={tabIndex === 4}
+          component={Settings}
+        />
       </TabContent>
       <ChangeLanguage
         open={dialog === 'ChangeLanguage'}

diff --git a/src/renderer/components/Settings/index.js b/src/renderer/components/Settings/index.js
@@ -33,30 +33,16 @@ const tabs = /** @typedef {const} */ [
   }
 ]
 
-/**
- *
- * @typedef SettingsProp
- * @prop {boolean} reset
- * @prop {function(boolean):void} setReset
- * @prop {boolean} fadeIn
- */
-
-/** @param {SettingsProp} props */
-export const Settings = ({ reset, setReset, fadeIn }) => {
+export const Settings = () => {
   const [menuVisible, setMenuVisibility] = React.useState(true)
 
   /** @type {import('./SettingsMenu').SettingsTabs['tabId'] | false} */
-  const initialState = /** {const} */ (false)
+  const initialTabState = /** {const} */ (false)
 
-  const [tabValue, setTabValue] = React.useState(initialState)
+  const [tabValue, setTabValue] = React.useState(initialTabState)
 
   const classes = useStyles()
 
-  if (reset) {
-    setReset(false)
-    if (tabValue === 'BackgroundMap') setTabValue(false)
-  }
-
   React.useEffect(() => {
     if (tabValue === 'BackgroundMap') {
       setMenuVisibility(false)
@@ -68,41 +54,39 @@ export const Settings = ({ reset, setReset, fadeIn }) => {
 
   // Controlling most of the fade in animations here
   return (
-    <Fade in={reset || fadeIn} timeout={FADE_DURATION}>
-      <Paper className={classes.container}>
-        {menuVisible && (
-          <Fade in={menuVisible} timeout={FADE_DURATION}>
-            <Paper className={classes.tabs}>
-              <SettingsMenu
-                tabs={tabs}
-                currentTab={tabValue}
-                setCurrentTab={setTabValue}
-              />
-            </Paper>
-          </Fade>
-        )}
-
-        {tabValue === 'BackgroundMap' && (
-          <Fade in={tabValue === 'BackgroundMap'} timeout={FADE_DURATION}>
-            <Paper className={classes.container}>
-              <BackgroundMaps
-                openSettings={() => {
-                  setTabValue(false)
-                }}
-              />
-            </Paper>
-          </Fade>
-        )}
-
-        {tabValue === 'AboutMapeo' && (
-          <Fade in={tabValue === 'AboutMapeo'} timeout={FADE_DURATION}>
-            <Paper className={classes.container}>
-              <AboutMapeo />
-            </Paper>
-          </Fade>
-        )}
-      </Paper>
-    </Fade>
+    <Paper className={classes.container}>
+      {menuVisible && (
+        <Fade in={menuVisible} timeout={FADE_DURATION}>
+          <Paper className={classes.tabs}>
+            <SettingsMenu
+              tabs={tabs}
+              currentTab={tabValue}
+              setCurrentTab={setTabValue}
+            />
+          </Paper>
+        </Fade>
+      )}
+
+      {tabValue === 'BackgroundMap' && (
+        <Fade in={tabValue === 'BackgroundMap'} timeout={FADE_DURATION}>
+          <Paper className={classes.container}>
+            <BackgroundMaps
+              openSettings={() => {
+                setTabValue(false)
+              }}
+            />
+          </Paper>
+        </Fade>
+      )}
+
+      {tabValue === 'AboutMapeo' && (
+        <Fade in={tabValue === 'AboutMapeo'} timeout={FADE_DURATION}>
+          <Paper className={classes.container}>
+            <AboutMapeo />
+          </Paper>
+        </Fade>
+      )}
+    </Paper>
   )
 }