Truncate search query in not found message

src/components/FilteredApps.tsx

@@ -11,6 +11,8 @@ import { selectAppsSearchQuery, selectAppsSearchResult } from '../slices/appsSea
 import SearchContext from '../contexts/SearchContext'
 // Constants
 import { APP_ITEM_HEIGHT_ICON_DISPLAYED, BACKGROUND_COLOR } from '../constants'
+// Utils
+import { truncateString } from '../utils/string'
 // Models
 import { RenderedIn } from '../models/rendered-in'
 import { AppDetails } from '../models/app-details'
@@ -30,7 +32,7 @@ const FilteredApps = () => {
   if (apps.length === 0 || invalidCharacters) {
     return (
       <View style={[styles.wrapper, styles.noAppsWrapper]}>
-        <Text style={styles.noAppsWrapperText}>No applications found for "{searchQuery}"</Text>
+        <Text style={styles.noAppsWrapperText}>No application found for "{truncateString(searchQuery, 20)}"</Text>
       </View>
     )
   }

src/utils/string.test.ts

@@ -0,0 +1,11 @@
+import { truncateString } from './string'
+
+describe('String utils tests', () => {
+  it(`should truncate string if it's length surpasses the max length`, () => {
+    expect(truncateString('Hello World!', 5)).toBe('Hello...')
+  })
+
+  it(`should not truncate string if it's length doesn't surpasses the max length`, () => {
+    expect(truncateString('Hi', 5)).toBe('Hi')
+  })
+})

src/utils/string.ts

@@ -0,0 +1,3 @@
+export const truncateString = (value: string | undefined, maxLength: number): string | undefined => {
+  return value && value.length > maxLength ? `${value.substring(0, maxLength)}...` : value
+}