Issue 31 (#32)

* feat

* fix: errors

App.ts

@@ -3,4 +3,8 @@
 // GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
 global.Buffer = global.Buffer || require("buffer").Buffer;
 import { App } from "./src/app";
+import { LogBox } from "react-native";
+LogBox.ignoreLogs([
+  "Non-serializable values were found in the navigation state",
+]);
 export default App;

package.json

@@ -45,20 +45,74 @@
       }
     }
   },
+  "eslintConfig": {
+    "extends": [
+      "airbnb-base",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint",
+      "react"
+    ],
+    "env": {
+      "browser": true
+    },
+    "rules": {
+      "curly": [
+        "error",
+        "all"
+      ],
+      "max-classes-per-file": 0,
+      "no-param-reassign": 0,
+      "no-restricted-syntax": [
+        "error",
+        "ForInStatement",
+        "LabelStatement",
+        "WithStatement"
+      ],
+      "no-underscore-dangle": 0,
+      "no-unused-expressions": 0,
+      "import/extensions": 0,
+      "import/no-unresolved": 0,
+      "import/prefer-default-export": 0,
+      "class-methods-use-this": 0,
+      "global-require": 0,
+      "@typescript-eslint/no-var-requires": 0
+    },
+    "overrides": [
+      {
+        "files": "*.js",
+        "rules": {
+          "@typescript-eslint/explicit-function-return-type": 0
+        }
+      },
+      {
+        "files": "*.ts",
+        "parser": "@typescript-eslint/parser"
+      }
+    ]
+  },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
   },
   "dependencies": {
     "@ant-design/react-native": "^4.0.4",
-    "@expo/vector-icons": "^10.0.0",
+    "@callstack/react-theme-provider": "^2.1.0",
+    "@expo/vector-icons": "^12.0.0",
     "@react-native-community/async-storage": "~1.12.0",
     "@react-native-community/cameraroll": "^4.0.0",
+    "@react-native-community/masked-view": "0.1.10",
     "@react-native-community/picker": "1.6.6",
-    "@react-native-community/segmented-control": "2.1.1",
+    "@react-native-community/segmented-control": "2.2.1",
     "@react-native-community/slider": "3.0.3",
-    "@react-native-community/viewpager": "4.1.6",
+    "@react-native-community/viewpager": "4.2.0",
+    "@react-navigation/bottom-tabs": "^5.11.1",
+    "@react-navigation/native": "^5.8.9",
+    "@react-navigation/stack": "^5.12.6",
     "@sentry/react": "^5.21.1",
     "@sentry/react-native": "^1.7.1",
     "@types/deep-extend": "^0.4.31",
@@ -77,22 +131,23 @@
     "buffer": "^5.4.3",
     "currency-icons": "^1.0.13",
     "deep-extend": "^0.6.0",
-    "expo": "^39.0.3",
+    "expo": "^40.0.0",
     "expo-analytics": "^1.0.13",
-    "expo-asset": "~8.2.0",
-    "expo-constants": "~9.2.0",
-    "expo-contacts": "~8.5.0",
-    "expo-font": "~8.3.0",
-    "expo-haptics": "~8.3.0",
-    "expo-localization": "~9.0.0",
-    "expo-mail-composer": "~8.4.0",
-    "expo-notifications": "~0.7.2",
-    "expo-permissions": "~9.3.0",
-    "expo-sms": "~8.3.1",
-    "expo-splash-screen": "~0.6.1",
-    "expo-status-bar": "~1.0.2",
-    "expo-store-review": "~2.2.0",
-    "expo-web-browser": "~8.5.0",
+    "expo-asset": "~8.2.1",
+    "expo-constants": "~9.3.3",
+    "expo-contacts": "~8.6.0",
+    "expo-font": "~8.4.0",
+    "expo-haptics": "~8.4.0",
+    "expo-localization": "~9.1.0",
+    "expo-mail-composer": "~9.0.0",
+    "expo-mixpanel-analytics": "0.0.7",
+    "expo-notifications": "~0.8.2",
+    "expo-permissions": "~10.0.0",
+    "expo-sms": "~8.4.0",
+    "expo-splash-screen": "~0.8.1",
+    "expo-status-bar": "~1.0.3",
+    "expo-store-review": "~2.3.0",
+    "expo-web-browser": "~8.6.0",
     "fbemitter": "^2.1.1",
     "graphql": "14.5.8",
     "graphql-tag": "2.10.1",
@@ -103,17 +158,17 @@
     "react": "16.13.1",
     "react-apollo": "3.1.3",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-animatable": "^1.3.3",
     "react-native-appearance": "~0.3.3",
-    "react-native-gesture-handler": "~1.7.0",
-    "react-native-safe-area-context": "3.1.4",
+    "react-native-gesture-handler": "~1.8.0",
+    "react-native-reanimated": "~1.13.0",
+    "react-native-safe-area-context": "3.1.9",
     "react-native-safe-area-view": "^1.1.1",
-    "react-native-screens": "~2.10.1",
+    "react-native-screens": "~2.15.0",
     "react-native-svg": "12.1.0",
-    "react-native-web": "~0.13.7",
-    "react-native-webview": "10.7.0",
-    "react-navigation": "^3.12.0",
+    "react-native-web": "~0.13.12",
+    "react-native-webview": "11.0.0",
     "react-redux": "6.0.0",
     "redux": "4.0.1",
     "redux-devtools-extension": "2.13.8",
@@ -134,15 +189,15 @@
     "apollo": "^2.30.2",
     "babel-plugin-import": "1.11.0",
     "babel-plugin-module-resolver": "^3.0.0",
-    "babel-preset-expo": "^8.3.0",
+    "babel-preset-expo": "8.3.0",
     "eslint": "7.2.0",
     "eslint-config-airbnb-base": "14.2.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-react": "7.20.0",
     "husky": "3.0.0",
     "jest": "^26.2.2",
-    "jest-expo": "^39.0.0",
+    "jest-expo": "^40.0.0",
     "prettier": "^2.0.5",
     "pretty-quick": "1.11.1",
     "react-test-renderer": "16.8.3",
@@ -151,7 +206,7 @@
     "tslint-config-prettier": "1.18.0",
     "tslint-microsoft-contrib": "6.0.0",
     "tslint-require-connnect-typing": "1.0.1",
-    "typescript": "~3.9.2"
+    "typescript": "~4.0.0"
   },
   "private": true
 }

src/app.tsx

@@ -3,19 +3,19 @@ import React, { useEffect } from "react";
 import { StyleSheet, View } from "react-native";
 import { StatusBar } from "expo-status-bar";
 import { connect } from "react-redux";
-import { AppNavigatorContainer } from "@/common/navigation/app-navigator-container";
+import { AppNavigator } from "@/common/navigation/app-navigator";
 import { Providers } from "@/common/providers";
 import "@/common/sentry";
-import { theme, setTheme } from "@/common/theme";
-import { withTheme } from "@/common/with-theme";
+import { actionUpdateReduxState } from "@/common/root-reducer";
+import { useTheme } from "@/common/theme";
+import { Scope, TranslateOptions } from "i18n-js";
 import { PreAuthView } from "@/screens/mine-screen/pre-auth-view";
 import { useCachedResources } from "@/common/hooks/use-cached-resource";
-import { i18n } from "@/translations";
+import { i18n, LocalizationContext } from "@/translations";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: theme.white,
   },
 });
 
@@ -36,51 +36,75 @@ export function App() {
     };
   }, []);
 
+  const [locale, setLocale] = React.useState(i18n.locale);
+  const localizationContext = React.useMemo(
+    () => ({
+      t: (scope: Scope, options: TranslateOptions) =>
+        i18n.t(scope, { locale, ...options }),
+      locale,
+      setLocale,
+    }),
+    [locale]
+  );
+
   if (!isLoadingComplete) {
     return null;
   }
 
   return (
-    <Providers>
-      <AppContent />
-    </Providers>
+    <LocalizationContext.Provider value={localizationContext}>
+      <Providers>
+        <AppContent />
+      </Providers>
+    </LocalizationContext.Provider>
   );
 }
 
-const AppContent = withTheme(
-  connect(
-    (state: {
-      base: { authToken: string; currentTheme: string; locale: string };
-    }) => ({
-      authToken: state.base.authToken,
-      currentTheme: state.base.currentTheme,
-      locale: state.base.locale,
-    })
-  )(
-    (props: {
-      authToken: string;
-      currentTheme: "dark" | "light";
-      locale: string;
-    }) => {
-      const { locale, currentTheme } = props;
+const AppContent = connect(
+  (state: {
+    base: { authToken: string; currentTheme: string; locale: string };
+  }) => ({
+    authToken: state.base.authToken,
+    currentTheme: state.base.currentTheme,
+    locale: state.base.locale,
+  }),
+  (dispatch) => ({
+    updateReduxState(payload: { base: { currentTheme: string } }): void {
+      dispatch(actionUpdateReduxState(payload));
+    },
+  })
+)(
+  (props: {
+    authToken: string;
+    currentTheme: "dark" | "light";
+    locale: string;
+    updateReduxState: (state: { base: { currentTheme: string } }) => void;
+  }) => {
+    const { locale, currentTheme, updateReduxState } = props;
+    const { setLocale } = React.useContext(LocalizationContext);
+    const theme = useTheme();
+    if (locale && i18n) {
+      i18n.locale = locale;
+    }
 
-      if (locale && i18n) {
-        i18n.locale = locale;
-      }
+    if (currentTheme !== theme.name) {
+      updateReduxState({
+        base: { currentTheme },
+      });
+    }
 
-      if (currentTheme !== theme.name) {
-        setTheme(currentTheme);
-      }
+    React.useEffect(() => {
+      setLocale(locale);
+    }, []);
 
-      if (!props.authToken) {
-        return <PreAuthView />;
-      }
-      return (
-        <View style={styles.container}>
-          <StatusBar style={theme.name === "dark" ? "light" : "dark"} />
-          <AppNavigatorContainer />
-        </View>
-      );
+    if (!props.authToken) {
+      return <PreAuthView />;
     }
-  )
+    return (
+      <View style={styles.container}>
+        <StatusBar style={theme.name === "dark" ? "light" : "dark"} />
+        <AppNavigator />
+      </View>
+    );
+  }
 );