feat: Allow user to filter by token

src/screens/TokensListScreen.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { NativeStackScreenProps } from 'react-native-screens/native-stack'
+import { fireEvent } from '@testing-library/react-native'
+
+import { getMockedNavigation, renderWithTheme } from '../../test/utils'
+import { MainStackParamList } from '../Main'
+import { Secret } from '../types'
+import * as hooks from '../hooks/use-secret-selector'
+
+import { TokensListScreen } from './TokensListScreen'
+
+const secret: Secret = {
+  _id: 'id',
+  secret: 'secret',
+  uid: 'uid',
+  tokens: [],
+  account: 'account',
+  issuer: '',
+}
+
+jest.mock('@react-navigation/core', () => ({
+  useIsFocused: jest.fn().mockReturnValue(true),
+}))
+
+describe('TokensListScreen', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  beforeEach(() => {
+    jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => secret)
+  })
+
+  const setup = () => {
+    const props = {
+      navigation: getMockedNavigation<'TokensList'>(),
+      route: { params: { secretId: secret._id } },
+    } as unknown as NativeStackScreenProps<MainStackParamList, 'TokensList'>
+    return renderWithTheme(<TokensListScreen {...props} />)
+  }
+
+  it('should match snapshot when there are no tokens', () => {
+    const view = setup()
+    expect(view).toMatchSnapshot()
+  })
+
+  it('should display an empty list when there are no tokens', () => {
+    const { getByText } = setup()
+    expect(getByText('No Tokens')).toBeTruthy()
+    expect(
+      getByText('Create a new token and it will appear here.')
+    ).toBeTruthy()
+  })
+
+  it('should display a list with two tokens when there are two tokens', () => {
+    jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => ({
+      ...secret,
+      tokens: [
+        { token: 'token1', description: 'description of token 1' },
+        { token: 'token2', description: 'description of token 2' },
+      ],
+    }))
+
+    const { queryByText } = setup()
+
+    expect(queryByText('No Tokens')).toBeFalsy()
+    expect(queryByText('description of token 1')).toBeTruthy()
+    expect(queryByText('description of token 2')).toBeTruthy()
+  })
+
+  it('should be able to filter by description', () => {
+    jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => ({
+      ...secret,
+      tokens: [
+        { token: '17526hkkdoeuagk122', description: 'My github token' },
+        { token: '17adsdsdakdoeuagk122', description: 'My NPM token' },
+      ],
+    }))
+
+    const { queryByText, getByA11yLabel } = setup()
+
+    const input = getByA11yLabel('Search')
+    fireEvent.changeText(input, 'github')
+    expect(queryByText('My github token')).toBeTruthy()
+    expect(queryByText('My NPM token')).toBeFalsy()
+
+    fireEvent.changeText(input, 'token')
+    expect(queryByText('My github token')).toBeTruthy()
+    expect(queryByText('My NPM token')).toBeTruthy()
+  })
+
+  it('should be able to filter by token', () => {
+    jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => ({
+      ...secret,
+      tokens: [
+        { token: '17526hkkdoeuagk122', description: 'My github token' },
+        { token: '17adsdsdakdoeuagk122', description: 'My NPM token' },
+      ],
+    }))
+
+    const { queryByText, getByA11yLabel } = setup()
+
+    const input = getByA11yLabel('Search')
+    fireEvent.changeText(input, 'hkkdoeuagk')
+    expect(queryByText('My github token')).toBeTruthy()
+    expect(queryByText('My NPM token')).toBeFalsy()
+
+    fireEvent.changeText(input, '17')
+    expect(queryByText('My github token')).toBeTruthy()
+    expect(queryByText('My NPM token')).toBeTruthy()
+  })
+})

src/screens/TokensListScreen.test.tsx.snap.android

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TokensListScreen should match snapshot when there are no tokens 1`] = `
+<View
+  collapsable={false}
+  pointerEvents="box-none"
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexGrow": 1,
+        "justifyContent": "flex-start",
+        "paddingHorizontal": 16,
+        "paddingVertical": 24,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "marginTop": 64,
+          "padding": 32,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#6D6D68",
+              "fontFamily": "sans-serif",
+              "fontWeight": "normal",
+            },
+            Object {
+              "textAlign": "left",
+            },
+            Array [
+              Object {
+                "fontFamily": "Poppins_700Bold",
+                "fontSize": 24,
+                "letterSpacing": 0,
+                "lineHeight": 36,
+              },
+              Object {
+                "alignItems": "center",
+                "color": "#6D6D68",
+                "display": "flex",
+                "marginBottom": 0,
+              },
+              Object {
+                "marginBottom": 8,
+                "textAlign": "center",
+              },
+            ],
+          ]
+        }
+      >
+        No Tokens
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#6D6D68",
+              "fontFamily": "sans-serif",
+              "fontWeight": "normal",
+            },
+            Object {
+              "textAlign": "left",
+            },
+            Array [
+              Object {
+                "fontFamily": "DidactGothic_400Regular",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+              },
+              Object {
+                "alignItems": "center",
+                "color": "#6D6D68",
+                "display": "flex",
+                "marginBottom": 0,
+              },
+              Object {
+                "textAlign": "center",
+              },
+            ],
+          ]
+        }
+      >
+        Create a new token and it will appear here.
+      </Text>
+    </View>
+  </View>
+</View>
+`;

src/screens/TokensListScreen.test.tsx.snap.ios

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TokensListScreen should match snapshot when there are no tokens 1`] = `
+<View
+  collapsable={false}
+  pointerEvents="box-none"
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexGrow": 1,
+        "justifyContent": "flex-start",
+        "paddingHorizontal": 16,
+        "paddingVertical": 24,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "marginTop": 64,
+          "padding": 32,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#6D6D68",
+              "fontFamily": "System",
+              "fontWeight": "400",
+            },
+            Object {
+              "textAlign": "left",
+            },
+            Array [
+              Object {
+                "fontFamily": "Poppins_700Bold",
+                "fontSize": 24,
+                "letterSpacing": 0,
+                "lineHeight": 36,
+              },
+              Object {
+                "alignItems": "center",
+                "color": "#6D6D68",
+                "display": "flex",
+                "marginBottom": 0,
+              },
+              Object {
+                "marginBottom": 8,
+                "textAlign": "center",
+              },
+            ],
+          ]
+        }
+      >
+        No Tokens
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#6D6D68",
+              "fontFamily": "System",
+              "fontWeight": "400",
+            },
+            Object {
+              "textAlign": "left",
+            },
+            Array [
+              Object {
+                "fontFamily": "DidactGothic_400Regular",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+              },
+              Object {
+                "alignItems": "center",
+                "color": "#6D6D68",
+                "display": "flex",
+                "marginBottom": 0,
+              },
+              Object {
+                "textAlign": "center",
+              },
+            ],
+          ]
+        }
+      >
+        Create a new token and it will appear here.
+      </Text>
+    </View>
+  </View>
+</View>
+`;

src/screens/TokensListScreen.tsx

@@ -80,8 +80,10 @@ export const TokensListScreen = ({ route, navigation }: Props) => {
 
   const filteredTokens = useMemo(() => {
     if (search.length > 1) {
-      return tokens.filter(({ description }) =>
-        description.toLowerCase().includes(search.toLowerCase())
+      return tokens.filter(
+        ({ token, description }) =>
+          description.toLowerCase().includes(search.toLowerCase()) ||
+          token.toLowerCase().includes(search.toLowerCase())
       )
     } else {
       return tokens
@@ -112,6 +114,7 @@ export const TokensListScreen = ({ route, navigation }: Props) => {
                 accessibilityLabel="Search"
                 placeholder="Search..."
                 placeholderTextColor={theme.colors.disabled}
+                autoCorrect={false}
                 mode="outlined"
                 value={search}
                 onChangeText={setSearch}