Internationalization & localization (#1822)

* install and setup lingui

* setup dynamic locale activation and async loading

* first pass of automated replacement of text messages

* add some more documentaton

* fix nits

* add `es` and `hi`locales for testing purposes

* make accessibilityLabel localized

* compile and extract new messages

* fix merge conflicts

* fix eslint warning

* change instructions from sending email to opening PR

* fix comments

src/view/screens/Feeds.tsx

@@ -27,6 +27,8 @@ import {FeedSourceModel} from 'state/models/content/feed-source'
 import {FlatList} from 'view/com/util/Views'
 import {useFocusEffect} from '@react-navigation/native'
 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
@@ -34,6 +36,7 @@ export const FeedsScreen = withAuthRequired(
   observer<Props>(function FeedsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const {_} = useLingui()
     const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
     const myFeeds = store.me.myFeeds
@@ -88,12 +91,12 @@ export const FeedsScreen = withAuthRequired(
           href="/settings/saved-feeds"
           hitSlop={10}
           accessibilityRole="button"
-          accessibilityLabel="Edit Saved Feeds"
+          accessibilityLabel={_(msg`Edit Saved Feeds`)}
           accessibilityHint="Opens screen to edit Saved Feeds">
           <CogIcon size={22} strokeWidth={2} style={pal.textLight} />
         </Link>
       )
-    }, [pal])
+    }, [pal, _])
 
     const onRefresh = React.useCallback(() => {
       myFeeds.refresh()
@@ -124,11 +127,11 @@ export const FeedsScreen = withAuthRequired(
                   },
                 ]}>
                 <Text type="title-lg" style={[pal.text, s.bold]}>
-                  My Feeds
+                  <Trans>My Feeds</Trans>
                 </Text>
                 <Link
                   href="/settings/saved-feeds"
-                  accessibilityLabel="Edit My Feeds"
+                  accessibilityLabel={_(msg`Edit My Feeds`)}
                   accessibilityHint="">
                   <CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
                 </Link>
@@ -139,7 +142,7 @@ export const FeedsScreen = withAuthRequired(
         } else if (item.type === 'saved-feeds-loading') {
           return (
             <>
-              {Array.from(Array(item.numItems)).map((_, i) => (
+              {Array.from(Array(item.numItems)).map((_i, i) => (
                 <SavedFeedLoadingPlaceholder key={`placeholder-${i}`} />
               ))}
             </>
@@ -161,7 +164,7 @@ export const FeedsScreen = withAuthRequired(
                   },
                 ]}>
                 <Text type="title-lg" style={[pal.text, s.bold]}>
-                  Discover new feeds
+                  <Trans>Discover new feeds</Trans>
                 </Text>
                 {!isMobile && (
                   <SearchInput
@@ -203,14 +206,22 @@ export const FeedsScreen = withAuthRequired(
                 paddingBottom: '150%',
               }}>
               <Text type="lg" style={pal.textLight}>
-                No results found for "{query}"
+                <Trans>No results found for "{query}"</Trans>
               </Text>
             </View>
           )
         }
         return null
       },
-      [isMobile, pal, query, onChangeQuery, onPressCancelSearch, onSubmitQuery],
+      [
+        isMobile,
+        pal,
+        query,
+        onChangeQuery,
+        onPressCancelSearch,
+        onSubmitQuery,
+        _,
+      ],
     )
 
     return (
@@ -249,7 +260,7 @@ export const FeedsScreen = withAuthRequired(
           onPress={onPressCompose}
           icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
           accessibilityRole="button"
-          accessibilityLabel="New post"
+          accessibilityLabel={_(msg`New post`)}
           accessibilityHint=""
         />
       </View>
@@ -289,7 +300,7 @@ function SavedFeed({feed}: {feed: FeedSourceModel}) {
         {feed.error ? (
           <View style={[styles.offlineSlug, pal.borderDark]}>
             <Text type="xs" style={pal.textLight}>
-              Feed offline
+              <Trans>Feed offline</Trans>
             </Text>
           </View>
         ) : null}