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

1 files changed, 16 insertions, 13 deletions

diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index c8b3e0917..99e1d7d98 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -43,6 +43,8 @@ import {NavigationProp} from 'lib/routes/types'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {isWeb} from 'platform/detection'
 import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useSetDrawerOpen} from '#/state/shell'
 import {useModalControls} from '#/state/modals'
 
@@ -50,6 +52,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
   const theme = useTheme()
   const pal = usePalette('default')
   const store = useStores()
+  const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
@@ -158,7 +161,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
           <View style={{}}>
             <TouchableOpacity
               testID="profileCardButton"
-              accessibilityLabel="Profile"
+              accessibilityLabel={_(msg`Profile`)}
               accessibilityHint="Navigates to your profile"
               onPress={onPressProfile}>
               <UserAvatar
@@ -215,7 +218,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               )
             }
             label="Search"
-            accessibilityLabel="Search"
+            accessibilityLabel={_(msg`Search`)}
             accessibilityHint=""
             bold={isAtSearch}
             onPress={onPressSearch}
@@ -237,7 +240,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               )
             }
             label="Home"
-            accessibilityLabel="Home"
+            accessibilityLabel={_(msg`Home`)}
             accessibilityHint=""
             bold={isAtHome}
             onPress={onPressHome}
@@ -259,7 +262,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               )
             }
             label="Notifications"
-            accessibilityLabel="Notifications"
+            accessibilityLabel={_(msg`Notifications`)}
             accessibilityHint={
               notifications.unreadCountLabel === ''
                 ? ''
@@ -286,7 +289,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               )
             }
             label="Feeds"
-            accessibilityLabel="Feeds"
+            accessibilityLabel={_(msg`Feeds`)}
             accessibilityHint=""
             bold={isAtFeeds}
             onPress={onPressMyFeeds}
@@ -294,14 +297,14 @@ export const DrawerContent = observer(function DrawerContentImpl() {
           <MenuItem
             icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
             label="Lists"
-            accessibilityLabel="Lists"
+            accessibilityLabel={_(msg`Lists`)}
             accessibilityHint=""
             onPress={onPressLists}
           />
           <MenuItem
             icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
             label="Moderation"
-            accessibilityLabel="Moderation"
+            accessibilityLabel={_(msg`Moderation`)}
             accessibilityHint=""
             onPress={onPressModeration}
           />
@@ -322,7 +325,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               )
             }
             label="Profile"
-            accessibilityLabel="Profile"
+            accessibilityLabel={_(msg`Profile`)}
             accessibilityHint=""
             onPress={onPressProfile}
           />
@@ -335,7 +338,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               />
             }
             label="Settings"
-            accessibilityLabel="Settings"
+            accessibilityLabel={_(msg`Settings`)}
             accessibilityHint=""
             onPress={onPressSettings}
           />
@@ -346,7 +349,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
         <View style={styles.footer}>
           <TouchableOpacity
             accessibilityRole="link"
-            accessibilityLabel="Send feedback"
+            accessibilityLabel={_(msg`Send feedback`)}
             accessibilityHint=""
             onPress={onPressFeedback}
             style={[
@@ -362,17 +365,17 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               icon={['far', 'message']}
             />
             <Text type="lg-medium" style={[pal.link, s.pl10]}>
-              Feedback
+              <Trans>Feedback</Trans>
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
             accessibilityRole="link"
-            accessibilityLabel="Send feedback"
+            accessibilityLabel={_(msg`Send feedback`)}
             accessibilityHint=""
             onPress={onPressHelp}
             style={[styles.footerBtn]}>
             <Text type="lg-medium" style={[pal.link, s.pl10]}>
-              Help
+              <Trans>Help</Trans>
             </Text>
           </TouchableOpacity>
         </View>