Typescript support (#497)

* Typescript setup

* Fixing linter errors

* Fixing tests

* fixing review comments

Author: Krzysztof Jan Modras

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@react-native-community',
+    'airbnb-typescript',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/react'
+  ],
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

ReactNative/js/bridge-manager.js

@@ -1,4 +1,5 @@
 import { NativeEventEmitter } from 'react-native';
+import prefs from 'browser-core-user-agent-ios/build/modules/core/prefs';
 
 export default class BridgeManager {
   constructor(bridge, inject, appReady) {
@@ -7,7 +8,7 @@ export default class BridgeManager {
     this.inject = inject;
     this.isAppReady = false;
     this.appReady = appReady;
-    this._bridge = bridge;
+    this.bridge = bridge;
     appReady.then(() => {
       this.isAppReady = true;
     });
@@ -17,15 +18,19 @@ export default class BridgeManager {
   }
 
   async onAction({ module, action, args, id }) {
-    for(const listener of this.actionListeners) {
+    const handled = [...this.actionListeners].some(listener => {
       try {
-        const handled = listener({ module, action, args, id });
-        if (handled) {
-          return;
+        if (listener({ module, action, args, id })) {
+          return true;
         }
       } catch (e) {
         //
       }
+      return false;
+    });
+
+    if (handled) {
+      return;
     }
 
     if (module === 'core' && action === 'setPref') {
@@ -34,26 +39,26 @@ export default class BridgeManager {
     }
 
     if (!this.isAppReady) {
-      await this.appReady
+      await this.appReady;
     }
 
     try {
       const response = await this.inject.module(module).action(action, ...args);
       if (typeof id !== 'undefined') {
-        this._bridge.replyToAction(id, { result: response });
+        this.bridge.replyToAction(id, { result: response });
       }
     } catch (e) {
       if (typeof id !== 'undefined') {
-        this._bridge.replyToAction(id, { error: e });
+        this.bridge.replyToAction(id, { error: e });
       }
     }
   }
 
   addActionListener(listener) {
-    this.actionListeners.add(listener)
+    this.actionListeners.add(listener);
   }
 
   removeActionListener(listener) {
     this.actionListeners.delete(listener);
   }
-}
+}

ReactNative/js/components/ListItem.js ReactNative/js/components/ListItem.jsx

@@ -1,14 +1,11 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
-import {
-  View,
-  Text,
-  TouchableWithoutFeedback,
-} from 'react-native';
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import { parse } from 'tldts';
 import Logo from './Logo';
 import { useStyles } from '../contexts/theme';
 
-const getStyle = (theme) => ({
+const getStyle = theme => ({
   row: {
     flexDirection: 'row',
   },
@@ -33,7 +30,7 @@ const getStyle = (theme) => ({
     fontWeight: 'bold',
   },
   rowDescription: {
-    color: theme.textColor + '99',
+    color: `${theme.textColor}99`,
   },
 });
 
@@ -42,6 +39,7 @@ export default function ListItem({ url, title, onPress, label }) {
 
   const name = parse(url).domain;
 
+  /* eslint-disable prettier/prettier */
   return (
     <TouchableWithoutFeedback
       onPress={onPress}
@@ -63,4 +61,5 @@ export default function ListItem({ url, title, onPress, label }) {
       </View>
     </TouchableWithoutFeedback>
   );
-}
+  /* eslint-enable prettier/prettier */
+}

ReactNative/js/components/Logo.js ReactNative/js/components/Logo.jsx

@@ -1,23 +1,22 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { Logo } from '@cliqz/component-ui-logo';
 import getLogo from 'cliqz-logo-database';
 
 const convertLogoUrl = logo => ({
   ...logo,
-  url: (logo.url || '')
-    .replace('logos', 'pngs')
-    .replace('.svg', '_192.png'),
+  url: (logo.url || '').replace('logos', 'pngs').replace('.svg', '_192.png'),
 });
 
 const DEFAULT_SIZE = 60;
 const DEFAULT_FONT_SIZE = 28;
 
-export default function ({ url, size: _size, fontSize: _fontSize }) {
-  let size = _size || DEFAULT_SIZE;
+export default ({ url, size: _size, fontSize: _fontSize }) => {
+  const size = _size || DEFAULT_SIZE;
   let fontSize = _fontSize || DEFAULT_FONT_SIZE;
 
   if (size !== DEFAULT_SIZE && !_fontSize) {
-    fontSize = DEFAULT_FONT_SIZE / DEFAULT_SIZE * size;
+    fontSize = (DEFAULT_FONT_SIZE / DEFAULT_SIZE) * size;
   }
   return (
     <Logo
@@ -29,4 +28,4 @@ export default function ({ url, size: _size, fontSize: _fontSize }) {
       fontSize={fontSize}
     />
   );
-}
+};

ReactNative/js/components/SpeedDial.js ReactNative/js/components/SpeedDial.jsx

@@ -1,16 +1,14 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
-import {
-  StyleSheet,
-  View,
-  TouchableWithoutFeedback,
-  Text,
-} from 'react-native';
+import { View, TouchableWithoutFeedback, Text } from 'react-native';
 import { parse } from 'tldts';
-import NativeDrawable, { normalizeUrl } from 'browser-core-user-agent-ios/build/modules/mobile-cards/components/custom/NativeDrawable';
+import NativeDrawable, {
+  normalizeUrl,
+} from 'browser-core-user-agent-ios/build/modules/mobile-cards/components/custom/NativeDrawable';
 import Logo from './Logo';
 import { withTheme } from '../contexts/theme';
 
-const getStyles = (theme) => ({
+const getStyles = theme => ({
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -46,9 +44,10 @@ const getStyles = (theme) => ({
 });
 
 const SpeedDial = ({ speedDial, onPress, theme, style = {} }) => {
-  const styles = getStyles(theme)
-  const url = speedDial.url;
+  const styles = getStyles(theme);
+  const { url } = speedDial;
   const name = parse(url).domain;
+  /* eslint-disable prettier/prettier */
   return (
     <TouchableWithoutFeedback
       onPress={() => onPress(speedDial)}
@@ -82,6 +81,7 @@ const SpeedDial = ({ speedDial, onPress, theme, style = {} }) => {
       </View>
     </TouchableWithoutFeedback>
   );
+  /* eslint-enable prettier/prettier */
 };
 
-export default withTheme(SpeedDial);
+export default withTheme(SpeedDial);

ReactNative/js/contexts/theme.js

@@ -5,33 +5,40 @@ const ThemeContext = React.createContext();
 
 export function withTheme(Component) {
   return function ThemeComponent(props) {
+    /* eslint-disable react/jsx-props-no-spreading */
     return (
+      // eslint-disable-next-line react/jsx-filename-extension
       <ThemeContext.Consumer>
-        {(theme) => <Component {...props} theme={theme} />}
+        {theme => <Component {...props} theme={theme} />}
       </ThemeContext.Consumer>
     );
   };
+  /* eslint-enable react/jsx-props-no-spreading */
 }
 
 //  would be perfect to avoid a global value here
-let updateTheme = () => {}
-const onAction = ({ module, action, args, id }) => {
+let updateTheme = () => {};
+const onAction = ({ module, action, args /* , id */ }) => {
   if (module === 'BrowserCore' && action === 'changeTheme') {
     updateTheme(args[0]);
     return true;
   }
+  return false;
 };
 
-export const ThemeWrapperComponentProvider = (bridgeManager) => ({ initialProps }) => (props) => {
+export const ThemeWrapperComponentProvider = bridgeManager => ({
+  initialProps,
+}) => props => {
   if (!initialProps.theme) {
     return props.children;
   }
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [theme, setData] = useState(initialProps.theme, [initialProps.theme]);
   updateTheme = setData;
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
-
     bridgeManager.addActionListener(onAction);
     return () => {
       // no need to unload - one listener per app is sufficient
@@ -43,12 +50,15 @@ export const ThemeWrapperComponentProvider = (bridgeManager) => ({ initialProps
       {props.children}
     </ThemeContext.Provider>
   );
-}
+};
 
-export const useStyles = (getStyle) => {
+export const useStyles = getStyle => {
   const theme = useContext(ThemeContext);
-  const styles = useMemo(() => StyleSheet.create(getStyle(theme)), [theme.mode]);
+  const styles = useMemo(() => StyleSheet.create(getStyle(theme)), [
+    getStyle,
+    theme,
+  ]);
   return styles;
-}
+};
 
-export default ThemeContext;
+export default ThemeContext;

ReactNative/js/globals/browser/networkStatus.js

@@ -13,5 +13,5 @@ NetInfo.addEventListener(state => {
 export default {
   async getLinkInfo() {
     return connectionType;
-  }
-};
+  },
+};

ReactNative/js/globals/navigator/userAgent.js

@@ -1,2 +1,2 @@
 // TODO: investigate who is using it
-global.navigator.userAgent = 'Cliqz';
+global.navigator.userAgent = 'Cliqz';