Add BaseView component and fix all linting errors

Signed-off-by: Karim Stekelenburg <karim@animo.id>

.eslintrc.js

@@ -10,6 +10,8 @@ module.exports = {
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'error',
     'no-console': 'error',
+    semi: ['error', 'never'],
+    // '@typescript-eslint/semi': ['error', 'never'],
   },
   overrides: [
     {
@@ -19,4 +21,4 @@ module.exports = {
       },
     },
   ],
-};
+}

.prettierrc

@@ -1,6 +1,6 @@
 {
   "printWidth": 120,
-  "semi": true,
+  "semi": false,
   "singleQuote": true,
   "trailingComma": "es5",
   "arrowParens": "avoid"

__tests__/App-test.js

@@ -2,13 +2,13 @@
  * @format
  */
 
-import 'react-native';
-import React from 'react';
-import App from '../src/App';
+import 'react-native'
+import React from 'react'
+import App from '../src/App'
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer'
 
 it('renders correctly', () => {
-  renderer.create(<App />);
-});
+  renderer.create(<App />)
+})

babel.config.js

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

index.js

@@ -1,5 +1,5 @@
-import { AppRegistry } from 'react-native';
-import App from './src/App';
-import { name as appName } from './app.json';
+import { AppRegistry } from 'react-native'
+import App from './src/App'
+import { name as appName } from './app.json'
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => App)

metro.config.js

@@ -14,4 +14,4 @@ module.exports = {
       },
     }),
   },
-};
+}

package.json

@@ -8,7 +8,7 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint --ignore-path .gitignore '**/*.+(js|ts|jsx|tsx)'",
+    "lint": "eslint --ignore-path .gitignore 'src/**/*.+(ts|tsx)'",
     "prettier": "prettier '**/*.+(json|md|yml|yaml)'",
     "format": "yarn prettier --write",
     "check-format": "yarn prettier --list-different"

src/App.tsx

@@ -1,43 +1,48 @@
-import React, { ComponentType, useEffect, useState } from 'react';
-import * as eva from '@eva-design/eva';
-import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';
-import { AppNavigator } from './components/AppNavigator';
-import { Provider } from 'react-redux';
-import { store } from './redux/store';
-import { initAgent } from './agentInit';
-import { setConnections } from './redux/slices/connectionSlice';
-import 'react-native-get-random-values';
-import { LoaderView } from './views';
+import React, { useEffect, useState } from 'react'
+import * as eva from '@eva-design/eva'
+import { ApplicationProvider } from '@ui-kitten/components'
+import { AppNavigator } from './components/AppNavigator'
+import { Provider } from 'react-redux'
+import { store } from './redux/store'
+import 'react-native-get-random-values'
+import { LoaderView } from './views'
 
 const App = (): Element => {
-  const [agentInitialized, setAgentInitalized] = useState(false);
+  const [agentInitialized, setAgentInitalized] = useState(false)
 
   useEffect(() => {
     async function initializeAgent(): Promise<void> {
-      const agent = await initAgent({
-        mediatorUrl: 'https://33c31ff85667.ngrok.io',
-      });
+      //   const agent = await initAgent({
+      //     mediatorUrl: 'https://33c31ff85667.ngrok.io',
+      //   });
 
-      await agent.init();
-      store.dispatch(setConnections(await agent.connections.getAll()));
-      setAgentInitalized(true);
+      //   await agent.init();
+      //   agent.connections.receiveInvitation()
+      //   store.dispatch(setConnections(await agent.connections.getAll()));
+
+      //   DEBUG STUFF
+
+      setTimeout(() => {
+        setAgentInitalized(true)
+      }, 5000)
+
+      // setAgentInitalized(true);
     }
-    initializeAgent();
-  }, []);
+    initializeAgent()
+  }, [])
 
   return (
     <>
       <ApplicationProvider {...eva} theme={eva.dark}>
         {!agentInitialized && <LoaderView />}
-        {/* <LoaderView /> */}
         {agentInitialized && (
           <Provider store={store}>
             <AppNavigator />
           </Provider>
         )}
       </ApplicationProvider>
     </>
-  );
-};
+  )
+}
 
-export default App;
+export default App

src/agentInit.ts

@@ -1,98 +1,99 @@
-import { InboundTransporter, OutboundTransporter, Agent } from 'aries-framework-javascript';
-import indy from 'rn-indy-sdk';
-import axios from 'axios';
-import { poll } from 'await-poll';
-import { InitConfig } from 'aries-framework-javascript/build/lib/types';
-import RNFS from 'react-native-fs';
+import { Agent, InboundTransporter, OutboundTransporter } from 'aries-framework-javascript'
+import { InitConfig } from 'aries-framework-javascript/build/lib/types'
+import { poll } from 'await-poll'
+import axios from 'axios'
+import RNFS from 'react-native-fs'
+import indy from 'rn-indy-sdk'
 
 // ==========================================================
 // GENESIS FILE DOWNLOAD AND STORAGE
 // ==========================================================
 export async function storeGenesis(genesis: string, fileName: string): Promise<string> {
-  const genesisPath = `${RNFS.DocumentDirectoryPath}/${fileName}`;
+  const genesisPath = `${RNFS.DocumentDirectoryPath}/${fileName}`
 
-  await RNFS.writeFile(genesisPath, genesis, 'utf8');
+  await RNFS.writeFile(genesisPath, genesis, 'utf8')
 
-  return genesisPath;
+  return genesisPath
 }
 
 export async function downloadGenesis(): Promise<string> {
-  const url = 'http://dev.greenlight.bcovrin.vonx.io/genesis';
+  const url = 'http://dev.greenlight.bcovrin.vonx.io/genesis'
 
-  const response = await axios.get(url);
+  const response = await axios.get(url)
 
-  return response.data;
+  return response.data
 }
 
 // ==========================================================
 // MAIN TRANSPORTERS
 // ==========================================================
 class PollingInboundTransporter implements InboundTransporter {
-  public stop: boolean;
+  public stop: boolean
 
   public constructor() {
-    this.stop = false;
+    this.stop = false
   }
   public async start(agent: Agent): Promise<void> {
-    await this.registerMediator(agent);
+    await this.registerMediator(agent)
   }
 
   public async registerMediator(agent: Agent): Promise<void> {
-    const mediatorUrl = agent.getMediatorUrl();
-    const mediatorInvitationUrlResponse = await axios.get(`${mediatorUrl}/invitation`);
-    const response = await axios.get(`${mediatorUrl}/`);
-    const { verkey: mediatorVerkey } = response.data;
+    const mediatorUrl = agent.getMediatorUrl()
+    const mediatorInvitationUrlResponse = await axios.get(`${mediatorUrl}/invitation`)
+    const response = await axios.get(`${mediatorUrl}/`)
+    const { verkey: mediatorVerkey } = response.data
     await agent.routing.provision({
       verkey: mediatorVerkey,
       invitationUrl: mediatorInvitationUrlResponse.data,
-    });
-    this.pollDownloadMessages(agent);
+    })
+    this.pollDownloadMessages(agent)
   }
 
   private pollDownloadMessages(agent: Agent): void {
     poll(
       async () => {
-        const downloadedMessages = await agent.routing.downloadMessages();
-        const messages = [...downloadedMessages];
+        const downloadedMessages = await agent.routing.downloadMessages()
+        const messages = [...downloadedMessages]
         while (messages && messages.length > 0) {
-          const message = messages.shift();
-          await agent.receiveMessage(message);
+          const message = messages.shift()
+          await agent.receiveMessage(message)
         }
       },
       () => !this.stop,
       5000
-    );
+    )
   }
 }
 
 class HttpOutboundTransporter implements OutboundTransporter {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public async sendMessage(outboundPackage: any, receiveReply: boolean): Promise<void> {
-    const { payload, endpoint } = outboundPackage;
+    const { payload, endpoint } = outboundPackage
 
     if (!endpoint) {
-      throw new Error(`Missing endpoint. I don't know how and where to send the message.`);
+      throw new Error(`Missing endpoint. I don't know how and where to send the message.`)
     }
 
     try {
       if (receiveReply) {
         const response = await fetch(endpoint, {
           method: 'POST',
           body: JSON.stringify(payload),
-        });
+        })
 
-        const data = await response.text();
+        const data = await response.text()
 
-        const wireMessage = JSON.parse(data);
-        return wireMessage;
+        const wireMessage = JSON.parse(data)
+        return wireMessage
       } else {
         await fetch(endpoint, {
           method: 'POST',
           body: JSON.stringify(payload),
-        });
+        })
       }
     } catch (e) {
       // console.log('error sending message', JSON.stringify(e));
-      throw e;
+      throw e
     }
   }
 }
@@ -102,12 +103,12 @@ class HttpOutboundTransporter implements OutboundTransporter {
 // ==========================================================
 // const inbound = new DummyInboundTransporter();
 // const outbound = new DummyOutboundTransporter();
-const inbound = new PollingInboundTransporter();
-const outbound = new HttpOutboundTransporter();
+const inbound = new PollingInboundTransporter()
+const outbound = new HttpOutboundTransporter()
 
 const initAgent = async (partialConfig: Partial<InitConfig> = {}): Promise<Agent> => {
-  const genesis = await downloadGenesis();
-  const genesisPath = await storeGenesis(genesis, 'genesis.txn');
+  const genesis = await downloadGenesis()
+  const genesisPath = await storeGenesis(genesis, 'genesis.txn')
 
   const agentConfig: InitConfig = {
     label: 'javascript',
@@ -117,10 +118,10 @@ const initAgent = async (partialConfig: Partial<InitConfig> = {}): Promise<Agent
     poolName: 'test-103',
     genesisPath,
     ...partialConfig,
-  };
-  const result = new Agent(agentConfig, inbound, outbound, indy);
+  }
+  const result = new Agent(agentConfig, inbound, outbound, indy)
 
-  return result;
-};
+  return result
+}
 
-export { initAgent };
+export { initAgent }

src/components/AppNavigator.tsx

@@ -1,30 +1,32 @@
-import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { BottomNavigation, BottomNavigationTab, Layout, Text } from '@ui-kitten/components';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { NavigationContainer } from '@react-navigation/native'
+import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components'
+import React from 'react'
+import { ConnectionsView, CredentialsView, ScannerView } from '../views'
 
-import { ConnectionsView, CredentialsView, ScannerView } from '../views';
+const { Navigator, Screen } = createBottomTabNavigator()
 
-const { Navigator, Screen } = createBottomTabNavigator();
-
-const BottomTabBar = ({ navigation, state }) => (
-  <BottomNavigation selectedIndex={state.index} onSelect={index => navigation.navigate(state.routeNames[index])}>
+const BottomTabBar = ({ navigation, state }): React.ReactElement => (
+  <BottomNavigation
+    selectedIndex={state.index}
+    onSelect={(index): void => navigation.navigate(state.routeNames[index])}
+  >
     <BottomNavigationTab title="Connections" />
     <BottomNavigationTab title="Credentials" />
     <BottomNavigationTab title="Scanner" />
   </BottomNavigation>
-);
+)
 
-const TabNavigator = () => (
-  <Navigator tabBar={props => <BottomTabBar {...props} />}>
+const TabNavigator: React.FC = (): React.ReactElement => (
+  <Navigator tabBar={(props): React.ReactElement => <BottomTabBar {...props} />}>
     <Screen name="Connections " component={ConnectionsView} />
     <Screen name="Credentials" component={CredentialsView} />
     <Screen name="Scanner" component={ScannerView} />
   </Navigator>
-);
+)
 
-export const AppNavigator = () => (
+export const AppNavigator: React.FC = (): React.ReactElement => (
   <NavigationContainer>
     <TabNavigator />
   </NavigationContainer>
-);
+)

src/components/ConnectionList.tsx

@@ -1,22 +1,22 @@
-import React, { ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
-import { Divider, List, ListItem } from '@ui-kitten/components';
-import { ConnectionRecord } from 'aries-framework-javascript';
+import React, { ReactElement } from 'react'
+import { StyleSheet } from 'react-native'
+import { Divider, List, ListItem } from '@ui-kitten/components'
+import { ConnectionRecord } from 'aries-framework-javascript'
 
-type ConnectionListProps = Array<ConnectionRecord>;
+type ConnectionListProps = Array<ConnectionRecord>
 
 const ConnectionList = (props: ConnectionListProps): Element => {
   const renderItem = ({ item, index }): ReactElement => (
     <ListItem title={`${item.title} ${index + 1}`} description={`${item.description} ${index + 1}`} />
-  );
+  )
 
-  return <List style={styles.container} data={props} ItemSeparatorComponent={Divider} renderItem={renderItem} />;
-};
+  return <List style={styles.container} data={props} ItemSeparatorComponent={Divider} renderItem={renderItem} />
+}
 
 const styles = StyleSheet.create({
   container: {
     maxHeight: 200,
   },
-});
+})
 
-export { ConnectionList };
+export { ConnectionList }