chore: refactor and TS fixes

.eslintrc.js

@@ -0,0 +1,50 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    '@react-native-community',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  rules: {
+    'import/order': ['error', { 'newlines-between': 'always' }],
+    'react-native/no-inline-styles': 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+    'no-shadow': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    // ESLint doesn't find React Native components
+    // Remove this setting when this issue is fixed.
+    // https://github.com/facebook/react-native/issues/28549
+    'import/ignore': ['react-native'],
+    'import/resolver': {
+      'babel-module': {},
+    },
+  },
+  globals: {
+    crypto: true,
+  },
+  env: {
+    'jest/globals': true,
+  },
+}

babel.config.js

@@ -1,7 +1,7 @@
 module.exports = function (api) {
   api.cache(true)
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['babel-preset-expo', '@babel/typescript'],
     env: {
       production: {
         plugins: ['react-native-paper/babel'],

package.json

@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",
+    "@babel/preset-typescript": "^7.15.0",
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
     "@react-native-community/eslint-config": "^3.0.1",
@@ -62,10 +63,14 @@
     "@testing-library/react-native": "^7.2.0",
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.30",
-    "@types/react-native": "^0.65.8",
+    "@types/react-native": "0.63.35",
     "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.28.1",
+    "@typescript-eslint/parser": "^4.28.1",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",

src/Main.tsx

@@ -15,14 +15,20 @@ import theme from './lib/defaultTheme'
 import routes from './lib/routeDefinitions'
 import { useAuthentication } from './context/authentication'
 import { useSecrets } from './context/secrets'
-import Home from './screens/Home'
-import TypeNewSecretScreen from './screens/TypeNewSecretScreen'
-import ScanNewSecretScreen from './screens/ScanNewSecretScreen'
+import { HomeScreen } from './screens/Home'
+import { TypeScreen } from './screens/TypeScreen'
+import { ScanScreen } from './screens/ScanScreen'
 import Auth from './components/Auth'
 import HomeHeaderRight from './components/HomeHeaderRight'
 import DefaultHeaderLeft from './components/DefaultHeaderLeft'
 
-const Stack = createStackNavigator()
+const MainStack = createStackNavigator()
+
+export type MainStackParamList = {
+  Home: undefined
+  Scan: undefined
+  Type: undefined
+}
 
 const UI_STRINGS = {
   routes: {
@@ -61,7 +67,7 @@ export default function Main() {
 
   return (
     <NavigationContainer>
-      <Stack.Navigator
+      <MainStack.Navigator
         {...{
           initialRouteName: routes.home.name,
           screenOptions: {
@@ -74,31 +80,31 @@ export default function Main() {
           },
         }}
       >
-        <Stack.Screen
+        <MainStack.Screen
           name={routes.home.name}
-          component={Home}
+          component={HomeScreen}
           options={{
             title: UI_STRINGS.routes.home.title,
             headerRight: HomeHeaderRight,
           }}
         />
-        <Stack.Screen
+        <MainStack.Screen
           name={routes.scan.name}
-          component={ScanNewSecretScreen}
+          component={ScanScreen}
           options={{
             title: UI_STRINGS.routes.scan.title,
             headerLeft: DefaultHeaderLeft,
           }}
         />
-        <Stack.Screen
+        <MainStack.Screen
           name={routes.type.name}
-          component={TypeNewSecretScreen}
+          component={TypeScreen}
           options={{
             title: UI_STRINGS.routes.type.title,
             headerLeft: DefaultHeaderLeft,
           }}
         />
-      </Stack.Navigator>
+      </MainStack.Navigator>
     </NavigationContainer>
   )
 }

src/components/Actions.tsx

@@ -4,40 +4,42 @@ import { FAB } from 'react-native-paper'
 
 import theme from '../lib/defaultTheme'
 
-const A11Y_LABELS = {
-  scan: 'Scan QR Code',
-  type: 'Add details manually',
-}
-
 const styles = StyleSheet.create({
   primaryButton: {
     backgroundColor: theme.colors.primary,
   },
 })
 
-export default function Actions({ onScan, onType }) {
-  const [open, setOpen] = useState(false)
-  const handleStateChange = ({ open: f }) => setOpen(f)
+const initialState = { open: false }
+
+type ActionsProps = {
+  onScan: () => void
+  onType: () => void
+}
+
+export const Actions: React.FC<ActionsProps> = ({ onScan, onType }) => {
+  const [{ open }, setOpen] = useState(initialState)
 
   return (
     <FAB.Group
+      visible
       open={open}
       accessibilityLabel="show-actions"
       icon={open ? 'close' : 'plus'}
       fabStyle={styles.primaryButton}
       actions={[
         {
           icon: 'qrcode',
-          label: A11Y_LABELS.scan,
+          label: 'Scan QR Code',
           onPress: onScan,
         },
         {
           icon: 'pencil',
-          label: A11Y_LABELS.type,
+          label: 'Add details manually',
           onPress: onType,
         },
       ]}
-      onStateChange={handleStateChange}
+      onStateChange={setOpen}
     />
   )
 }

src/components/Secret/Menu.tsx → src/components/SecretCard/ContextMenu.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
 import { Divider, Menu, IconButton } from 'react-native-paper'
 
-export default function ContextMenu({
+type ContextMenuProps = {
+  open: boolean
+  onToggle: () => void
+  onRefresh?: () => void
+  onRevoke?: () => void
+  onDelete: () => void
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({
   open,
   onToggle,
   onRefresh,
   onRevoke,
   onDelete,
-}) {
+}) => {
   return (
     <Menu
       visible={open}
@@ -17,7 +25,6 @@ export default function ContextMenu({
           icon="dots-vertical"
           accessibilityLabel="toggle-menu"
           size={24}
-          mode="contained"
           onPress={onToggle}
         />
       }

src/components/Secret/CopyableInfo.tsx → src/components/SecretCard/CopyableInfo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { IconButton } from 'react-native-paper'
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, Text, StyleProp, TextStyle } from 'react-native'
 import * as Clipboard from 'expo-clipboard'
 import Toast from 'react-native-root-toast'
 
@@ -15,10 +15,18 @@ const styles = StyleSheet.create({
   },
 })
 
-const CopyableInfo = ({ children, textCustomStyle }) => {
+type CopyableInfoProps = {
+  children: string
+  textStyle: StyleProp<TextStyle>
+}
+
+export const CopyableInfo: React.FC<CopyableInfoProps> = ({
+  children,
+  textStyle,
+}) => {
   return (
     <View style={styles.row}>
-      <Text style={textCustomStyle}>{children}</Text>
+      <Text style={textStyle}>{children}</Text>
       <IconButton
         style={styles.iconButton}
         icon="content-copy"
@@ -35,5 +43,3 @@ const CopyableInfo = ({ children, textCustomStyle }) => {
     </View>
   )
 }
-
-export default CopyableInfo

src/components/Secret/OTP.tsx → src/components/SecretCard/OTP.tsx

@@ -5,7 +5,7 @@ import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'
 import otpLib from '../../lib/otp'
 import theme from '../../lib/defaultTheme'
 
-import CopyableInfo from './CopyableInfo'
+import { CopyableInfo } from './CopyableInfo'
 
 const styles = StyleSheet.create({
   row: {
@@ -39,18 +39,23 @@ const styles = StyleSheet.create({
   otp: { fontSize: 12 },
 })
 
-export default function OTP({ value }) {
+type OTPProps = {
+  value: string
+}
+
+export const OTP: React.FC<OTPProps> = ({ value }) => {
   return (
     <View style={styles.row}>
       <Text style={styles.label}>OTP</Text>
       <View style={styles.otpRow}>
-        <CopyableInfo textCustomStyle={styles.value}>{value}</CopyableInfo>
+        <CopyableInfo textStyle={styles.value}>{value}</CopyableInfo>
         <CountdownCircleTimer
           key={value}
           size={30}
           strokeWidth={3}
           isPlaying
-          duration={otpLib.timeRemaining()}
+          duration={30}
+          initialRemainingTime={otpLib.timeRemaining()}
           colors="#EB829C"
         >
           {({ remainingTime }) => (