refactor code

.eslintrc.json

@@ -8,6 +8,8 @@
   "parser": "babel-eslint",
   "rules": {
     "import/no-unresolved": "off",
+    "global-require": 0,
+    "react/jsx-no-bind":0,
     "react/jsx-filename-extension": [
       1,
       {
@@ -18,8 +20,7 @@
       "error",
       {
         "trailingComma": "es5",
-        "singleQuote": true,
-        "printWidth": 100
+        "printWidth":100
       }
     ]
   },

.vscode/settings.json

@@ -5,4 +5,5 @@
     "editor.formatOnPaste": true,
     "prettier.semi": true,
     "javascript.format.semicolons": "insert",
+    "prettier.printWidth": 100,
 }

screens/About.js

@@ -8,170 +8,178 @@ import {
   ScrollView,
   TouchableHighlight,
   StatusBar,
-  Platform
+  Platform,
 } from "react-native";
+import PropTypes from "prop-types";
 import { Header } from "react-native-elements";
 import Icon from "react-native-vector-icons/MaterialIcons";
-import GLOBAL from "../utils/globals";
 import { connect } from "react-redux";
 import VersionNumber from "react-native-version-number";
 import AnalyticsManager from "../utils/analytics";
 import Strings from "../utils/localization";
+import GLOBAL from "../utils/globals";
+import constant from "../utils/constant";
 
 class Home extends React.Component {
   componentDidMount() {
-    AnalyticsManager.getInstance().trackScreenView(
-      "About",
-      this.constructor.name
-    );
+    AnalyticsManager.getInstance().trackScreenView(constant.ABOUT, this.constructor.name);
   }
 
   render() {
+    const styles = StyleSheet.create({
+      container: {
+        flex: 1,
+        padding: 8,
+        backgroundColor: GLOBAL.COLOR.WHITE_COLOR,
+      },
+      nightMode: {
+        backgroundColor: GLOBAL.COLOR.NIGHT_BLACK,
+        color: GLOBAL.COLOR.WHITE_COLOR,
+      },
+      singleLine: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+      },
+      title: {
+        fontSize: 20,
+        fontWeight: "bold",
+      },
+      small: {
+        fontSize: 11,
+      },
+    });
+    const { navigation, nightMode } = this.props;
     return (
       <View
         style={{
-          flex: 1
+          flex: 1,
         }}
       >
-        <StatusBar
-          backgroundColor={GLOBAL.COLOR.TOOLBAR_COLOR_ALT2}
-          barStyle={"light-content"}
-        />
+        <StatusBar backgroundColor={GLOBAL.COLOR.TOOLBAR_COLOR_ALT2} barStyle="light-content" />
         <Header
           backgroundColor={GLOBAL.COLOR.TOOLBAR_COLOR_ALT2}
-          containerStyle={[Platform.OS === "android" && { height: 56, paddingTop: 0 }]}
+          containerStyle={[Platform.OS === constant.ANDROID && { height: 56, paddingTop: 0 }]}
           leftComponent={
             <Icon
               name="arrow-back"
               color={GLOBAL.COLOR.TOOLBAR_TINT}
               size={30}
-              onPress={() => this.props.navigation.goBack()}
+              onPress={() => navigation.goBack()}
             />
           }
           centerComponent={{
             text: Strings.about,
-            style: { color: GLOBAL.COLOR.TOOLBAR_TINT, fontSize: 18 }
+            style: { color: GLOBAL.COLOR.TOOLBAR_TINT, fontSize: 18 },
           }}
         />
         <ScrollView
-          style={[
-            styles.container,
-            this.props.nightMode && { backgroundColor: "#000" }
-          ]}
+          style={[styles.container, nightMode && { backgroundColor: GLOBAL.COLOR.NIGHT_BLACK }]}
         >
-          <Text
-            style={[styles.title, this.props.nightMode && styles.nightMode]}
-          >
-            {Strings.sundar_gutka}
-          </Text>
-          <Text
-            style={[styles.small, this.props.nightMode && styles.nightMode]}
-          >
-            {"\n"}{Strings.created_by}:
+          <Text style={[styles.title, nightMode && styles.nightMode]}>{Strings.sundar_gutka}</Text>
+          <Text style={[styles.small, nightMode && styles.nightMode]}>
+            {"\n"}
+            {Strings.created_by}:
           </Text>
           <TouchableHighlight
-            underlayColor={"#009bff"}
-            onPress={() => Linking.openURL("https://khalisfoundation.org")}
+            underlayColor={GLOBAL.COLOR.UNDERLAY_COLOR}
+            onPress={() => Linking.openURL(constant.KHALIS_FOUNDATION_URL)}
           >
             <Image
               source={
-                this.props.nightMode
+                nightMode
                   ? require("../images/khalislogo150white.png")
                   : require("../images/khalislogo150.png")
               }
             />
           </TouchableHighlight>
-          <Text style={this.props.nightMode && styles.nightMode}>
+          <Text style={nightMode && styles.nightMode}>
             <Text>
-              {"\n"}{Strings.about_1}
+              {"\n"}
+              {Strings.about_1}
               {"\n"}
               {"\n"}
-              {Strings.about_2}{"\n"}
+              {Strings.about_2}
+              {"\n"}
             </Text>
             <Text>
               <Text
-                style={{ color: "#009bff" }}
-                onPress={() => Linking.openURL("https://khalisfoundation.org")}
+                style={{ color: GLOBAL.COLOR.UNDERLAY_COLOR }}
+                onPress={() => Linking.openURL(constant.KHALIS_FOUNDATION_URL)}
               >
-                http://www.KhalisFoundation.org
+                constant.KHALIS_FOUNDATION_URL
               </Text>
               <Text>!</Text>
             </Text>
           </Text>
-          <Text style={this.props.nightMode && styles.nightMode}>
-            {"\n"}{Strings.about_3}
+          <Text style={nightMode && styles.nightMode}>
+            {"\n"}
+            {Strings.about_3}
             {"\n"}
             {"\n"}
             {Strings.about_4}{" "}
             <Text
-              style={{ color: "#009bff" }}
-              onPress={() => Linking.openURL("https://www.banidb.com/")}
+              style={{ color: GLOBAL.COLOR.UNDERLAY_COLOR }}
+              onPress={() => Linking.openURL(constant.BANI_DB_URL)}
             >
               {Strings.baniDB}
             </Text>{" "}
             {Strings.about_5}
             {"\n"}
           </Text>
           <TouchableHighlight
-            underlayColor={"#009bff"}
-            onPress={() => Linking.openURL("https://www.banidb.com/")}
+            underlayColor={GLOBAL.COLOR.UNDERLAY_COLOR}
+            onPress={() => Linking.openURL(constant.BANI_DB_URL)}
           >
             <Image source={require("../images/banidblogo.png")} />
           </TouchableHighlight>
-          <Text style={this.props.nightMode && styles.nightMode}>
-            {"\n"}{Strings.about_6}{"\n"}
+          <Text style={nightMode && styles.nightMode}>
+            {"\n"}
+            {Strings.about_6}
+            {"\n"}
           </Text>
-          <Text
-            style={[styles.small, this.props.nightMode && styles.nightMode]}
-          />
+          <Text style={[styles.small, nightMode && styles.nightMode]} />
 
           <View style={styles.singleLine}>
             <View style={styles.leftContainer}>
-              <Text
-                style={[styles.small, this.props.nightMode && styles.nightMode]}
-              >
+              <Text style={[styles.small, nightMode && styles.nightMode]}>
                 &copy; {new Date().getFullYear()} {Strings.khalis_foundation}
               </Text>
             </View>
-            <Text
-              style={[styles.small, this.props.nightMode && styles.nightMode]}
-            >
-              {Strings.app_version}: {VersionNumber.appVersion} (
-              {VersionNumber.buildVersion}){"\n"}
+            <Text style={[styles.small, nightMode && styles.nightMode]}>
+              {Strings.app_version}: {VersionNumber.appVersion} ({VersionNumber.buildVersion}){"\n"}
             </Text>
           </View>
         </ScrollView>
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 8,
-    backgroundColor: "#fff"
-  },
-  nightMode: {
-    backgroundColor: "#000",
-    color: "#fff"
-  },
-  singleLine: {
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "bold"
-  },
-  small: {
-    fontSize: 11
-  }
-});
+Home.propTypes = {
+  navigation: PropTypes.shape({
+    addEventListener: PropTypes.func,
+    canGoBack: PropTypes.func,
+    dispatch: PropTypes.func,
+    getID: PropTypes.func,
+    getParent: PropTypes.func,
+    getState: PropTypes.func,
+    goBack: PropTypes.func,
+    isFocused: PropTypes.func,
+    navigate: PropTypes.func,
+    pop: PropTypes.func,
+    popToTop: PropTypes.func,
+    push: PropTypes.func,
+    removeListener: PropTypes.func,
+    replace: PropTypes.func,
+    reset: PropTypes.func,
+    setOptions: PropTypes.func,
+    setParams: PropTypes.func,
+  }).isRequired,
+  nightMode: PropTypes.bool.isRequired,
+};
 
 function mapStateToProps(state) {
   return {
-    nightMode: state.nightMode
+    nightMode: state.nightMode,
   };
 }