refactor settings container

Author: AmyrAhmady

src/containers/Settings/index.tsx

@@ -1,6 +1,6 @@
 import { shell } from "@tauri-apps/api";
 import { t } from "i18next";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   StyleSheet,
   TouchableOpacity,
@@ -23,39 +23,63 @@ import Languages from "./Tab/Languages";
 
 const MODAL_WIDTH = 500;
 const MODAL_HEIGHT = 300;
+const TITLEBAR_HEIGHT = 25;
+
+type TabType = "general" | "languages" | "advanced";
 
 const SettingsModal = () => {
   const { height, width } = useWindowDimensions();
   const { nativeAppVersion, version } = useAppState();
   const { theme } = useTheme();
   const { hide, visible } = useSettingsModal();
-  const [selectedTab, setSelectedTab] = useState("general");
+  const [selectedTab, setSelectedTab] = useState<TabType>("general");
   const { language } = useGenericPersistentState();
 
-  const tabs = [
-    { label: t("settings_general_tab_title"), type: "general" },
-    { label: t("settings_lang_tab_title"), type: "languages" },
-    { label: t("settings_advanced_tab_title"), type: "advanced" },
-  ];
+  const tabs = useMemo(
+    () => [
+      { label: t("settings_general_tab_title"), type: "general" },
+      { label: t("settings_lang_tab_title"), type: "languages" },
+      { label: t("settings_advanced_tab_title"), type: "advanced" },
+    ],
+    []
+  );
+
+  const tabComponents = useMemo(
+    () => ({
+      general: <General />,
+      languages: <Languages />,
+      advanced: <Advanced />,
+    }),
+    []
+  );
+
+  const handleTabChange = useCallback((type: TabType) => {
+    setSelectedTab(type);
+  }, []);
 
-  const renderTab = () => {
-    if (selectedTab === "general") return <General />;
-    else if (selectedTab === "languages") return <Languages />;
-    else if (selectedTab === "advanced") return <Advanced />;
-    else return null;
-  };
+  const handleDismiss = useCallback(() => {
+    hide();
+  }, [hide]);
+
+  const handleOpenMpPress = useCallback(() => {
+    shell.open("https://open.mp/");
+  }, []);
+
+  const handleGithubPress = useCallback(() => {
+    shell.open("https://github.com/openmultiplayer/launcher/");
+  }, []);
 
   if (!visible) {
     return null;
   }
 
   return (
-    <StaticModal onDismiss={() => hide()} key={"settings-" + language}>
+    <StaticModal onDismiss={handleDismiss} key={"settings-" + language}>
       <View
         style={[
           styles.container,
           {
-            top: height / 2 - MODAL_HEIGHT / 2 - 25, // titlebar height is 25
+            top: height / 2 - MODAL_HEIGHT / 2 - TITLEBAR_HEIGHT,
             left: width / 2 - MODAL_WIDTH / 2,
             height: MODAL_HEIGHT,
             width: MODAL_WIDTH,
@@ -65,48 +89,25 @@ const SettingsModal = () => {
       >
         <TabBar
           list={tabs}
-          onChange={(type) => setSelectedTab(type)}
+          onChange={(type) => handleTabChange(type as TabType)}
           selected={selectedTab}
-          style={{
-            height: sc(30),
-            paddingHorizontal: sc(15),
-            marginTop: sc(15),
-          }}
+          style={styles.tabBar}
         />
-        {renderTab()}
+        {tabComponents[selectedTab]}
         <View style={styles.appInfoContainer}>
           <Text size={2} color={theme.textPrimary}>
             {t("settings_credits_made_by")}{" "}
-            <Text
-              size={2}
-              onPress={() => shell.open("https://open.mp/")}
-              color={theme.primary}
-            >
+            <Text size={2} onPress={handleOpenMpPress} color={theme.primary}>
               open.mp
             </Text>{" "}
             |{" "}
-            <Text
-              size={2}
-              onPress={() =>
-                shell.open("https://github.com/openmultiplayer/launcher/")
-              }
-              color={theme.primary}
-            >
+            <Text size={2} onPress={handleGithubPress} color={theme.primary}>
               {t("settings_credits_view_source_on_github")}
             </Text>{" "}
             | v{nativeAppVersion} Build {version}
           </Text>
         </View>
-        <TouchableOpacity
-          style={{
-            position: "absolute",
-            top: sc(15),
-            right: sc(15),
-            height: sc(20),
-            width: sc(20),
-          }}
-          onPress={() => hide()}
-        >
+        <TouchableOpacity style={styles.closeButton} onPress={handleDismiss}>
           <Icon
             image={images.icons.close}
             size={sc(20)}
@@ -130,12 +131,24 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.9,
     shadowRadius: 10,
   },
+  tabBar: {
+    height: sc(30),
+    paddingHorizontal: sc(15),
+    marginTop: sc(15),
+  },
   appInfoContainer: {
     height: 30,
     justifyContent: "center",
     width: "100%",
     alignItems: "center",
   },
+  closeButton: {
+    position: "absolute",
+    top: sc(15),
+    right: sc(15),
+    height: sc(20),
+    width: sc(20),
+  },
 });
 
 export default SettingsModal;