chore: convert codebase to TS (#215)

Converts the whole codebase, including the example to TS. Fixes #202

Author: ankeetmaini

.babelrc

@@ -15,18 +15,19 @@ jobs:
     - run:
         working_directory: ~/rgommezz/react-native-offline
         command: nvm install 9.10.0 && nvm alias default 9.10.0
+    - run: npm i
     # Restore the dependency cache
     - restore_cache:
         keys:
         # This branch if available
-        - v1-dep-{{ .Branch }}-
+        - v3-dep-{{ .Branch }}-
         # Default branch if not
-        - v1-dep-master-
+        - v3-dep-master-
         # Any branch if there are none on the default branch - this should be unnecessary if you have your default branch configured correctly
-        - v1-dep-
+        - v3-dep-
     # Save dependency cache
     - save_cache:
-        key: v1-dep-{{ .Branch }}-{{ epoch }}
+        key: v3-dep-{{ .Branch }}-{{ epoch }}
         paths:
         # This is a broad list of cache paths to include many possible development environments
         # You can probably delete some of these entries
@@ -41,6 +42,7 @@ jobs:
         - ./node_modules
     # Test
     - run: npm run lint
+    - run: npm run ts
     - run: npm run test:coverage
     # Teardown
     # Save test results

.circleci/config.yml

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
 flow-typed/
+test/__snapshots__/

.eslintignore

@@ -1,18 +1,21 @@
 {
   "extends": [
     "airbnb",
-    "plugin:flowtype/recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "prettier",
-    "prettier/flowtype",
-    "prettier/react"
-  ],
-  "parser": "babel-eslint",
-  "plugins": [
-    "flowtype",
-    "react",
-    "prettier"
+    "prettier/react",
+    "prettier/@typescript-eslint"
   ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react", "@typescript-eslint", "prettier"],
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
@@ -37,28 +40,18 @@
     "import/extensions": 0,
     "no-use-before-define": 0,
     "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 0,
     "global-require": 0,
     "prefer-promise-reject-errors": 0,
     "react/prop-types": 0,
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/jsx-filename-extension": 0,
     "react/require-default-props": 0,
-    "flowtype/boolean-style": [
-      2,
-      "boolean"
-    ],
-    "flowtype/no-weak-types": 1,
-    "flowtype/require-parameter-type": 0,
-    "flowtype/require-return-type": [
-      0,
-      "always",
-      {
-        "annotateUndefined": "never"
-      }
-    ],
-    "flowtype/require-valid-file-annotation": 2,
-    "flowtype/use-flow-type": 1,
-    "flowtype/valid-syntax": 1,
-    "react/display-name": 0
+    "react/display-name": 0,
+    "react/destructuring-assignment": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "no-return-assign": 0,
+    "no-undef": 0,
+    "@typescript-eslint/ban-ts-ignore": 1
   },
   "globals": {
     "jest": true

.eslintrc

@@ -4,6 +4,8 @@ npm-debug.log
 
 #jest
 coverage/
+.jest/
+dist/
 
 # OSX
 #

.flowconfig

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

.gitignore

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["module:metro-react-native-babel-preset"]
+};

.prettierrc.json

@@ -1,14 +1,25 @@
 import React from 'react';
 import { Platform, StatusBar, StyleSheet, View } from 'react-native';
-import { AppLoading, Font, Icon } from 'expo';
+import { Ionicons } from '@expo/vector-icons';
+import * as Font from 'expo-font';
 import AppNavigator from './navigation/AppNavigator';
 import DummyNetworkContext from './DummyNetworkContext';
 
 const onlineUrl = 'https://www.google.com/';
 const offlineUrl = 'https://www.weifhweopfhwioehfiwoephfpweoifhewifhpewoif.com';
+interface Props {
+  skipLoadingScreen?: boolean;
+}
 
-export default class App extends React.Component {
-  constructor(props) {
+interface State {
+  isLoadingComplete: boolean;
+  network: {
+    pingUrl: string;
+    toggleConnection: () => void;
+  };
+}
+export default class App extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       isLoadingComplete: false,
@@ -19,6 +30,14 @@ export default class App extends React.Component {
     };
   }
 
+  async componentDidMount() {
+    await Font.loadAsync({
+      ...Ionicons.font,
+      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
+    });
+    this.setState({ isLoadingComplete: true });
+  }
+
   toggleConnection = () => {
     this.setState(prevState => ({
       network: {
@@ -29,26 +48,11 @@ export default class App extends React.Component {
     }));
   };
 
-  loadResourcesAsync = async () =>
-    Font.loadAsync({
-      ...Icon.Ionicons.font,
-      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
-    });
-
-  handleFinishLoading = () => {
-    this.setState({ isLoadingComplete: true });
-  };
-
   render() {
     const { isLoadingComplete, network } = this.state;
     const { skipLoadingScreen } = this.props;
     if (!isLoadingComplete && !skipLoadingScreen) {
-      return (
-        <AppLoading
-          startAsync={this.loadResourcesAsync}
-          onFinish={this.handleFinishLoading}
-        />
-      );
+      return null;
     }
     return (
       <DummyNetworkContext.Provider value={network}>