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, 19 insertions, 12 deletions

diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx
index 242b6a38a..f8b64085d 100644
--- a/src/view/com/modals/SelfLabel.tsx
+++ b/src/view/com/modals/SelfLabel.tsx
@@ -9,6 +9,8 @@ import {isWeb} from 'platform/detection'
 import {Button} from '../util/forms/Button'
 import {SelectableBtn} from '../util/forms/SelectableBtn'
 import {ScrollView} from 'view/com/modals/util'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
 
 const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
@@ -28,6 +30,7 @@ export const Component = observer(function Component({
   const {closeModal} = useModalControls()
   const {isMobile} = useWebMediaQueries()
   const [selected, setSelected] = useState(labels)
+  const {_} = useLingui()
 
   const toggleAdultLabel = (label: string) => {
     const hadLabel = selected.includes(label)
@@ -51,7 +54,7 @@ export const Component = observer(function Component({
     <View testID="selfLabelModal" style={[pal.view, styles.container]}>
       <View style={styles.titleSection}>
         <Text type="title-lg" style={[pal.text, styles.title]}>
-          Add a content warning
+          <Trans>Add a content warning</Trans>
         </Text>
       </View>
 
@@ -70,7 +73,7 @@ export const Component = observer(function Component({
               paddingBottom: 8,
             }}>
             <Text type="title" style={pal.text}>
-              Adult Content
+              <Trans>Adult Content</Trans>
             </Text>
             {hasAdultSelection ? (
               <Button
@@ -78,7 +81,7 @@ export const Component = observer(function Component({
                 onPress={removeAdultLabel}
                 style={{paddingTop: 0, paddingBottom: 0, paddingRight: 0}}>
                 <Text type="md" style={pal.link}>
-                  Remove
+                  <Trans>Remove</Trans>
                 </Text>
               </Button>
             ) : null}
@@ -116,23 +119,25 @@ export const Component = observer(function Component({
 
               <Text style={[pal.text, styles.adultExplainer]}>
                 {selected.includes('sexual') ? (
-                  <>Pictures meant for adults.</>
+                  <Trans>Pictures meant for adults.</Trans>
                 ) : selected.includes('nudity') ? (
-                  <>Artistic or non-erotic nudity.</>
+                  <Trans>Artistic or non-erotic nudity.</Trans>
                 ) : selected.includes('porn') ? (
-                  <>Sexual activity or erotic nudity.</>
+                  <Trans>Sexual activity or erotic nudity.</Trans>
                 ) : (
-                  <>If none are selected, suitable for all ages.</>
+                  <Trans>If none are selected, suitable for all ages.</Trans>
                 )}
               </Text>
             </>
           ) : (
             <View>
               <Text style={[pal.textLight]}>
-                <Text type="md-bold" style={[pal.textLight]}>
-                  Not Applicable
+                <Text type="md-bold" style={[pal.textLight, s.mr5]}>
+                  <Trans>Not Applicable.</Trans>
                 </Text>
-                . This warning is only available for posts with media attached.
+                <Trans>
+                  This warning is only available for posts with media attached.
+                </Trans>
               </Text>
             </View>
           )}
@@ -147,9 +152,11 @@ export const Component = observer(function Component({
           }}
           style={styles.btn}
           accessibilityRole="button"
-          accessibilityLabel="Confirm"
+          accessibilityLabel={_(msg`Confirm`)}
           accessibilityHint="">
-          <Text style={[s.white, s.bold, s.f18]}>Done</Text>
+          <Text style={[s.white, s.bold, s.f18]}>
+            <Trans>Done</Trans>
+          </Text>
         </TouchableOpacity>
       </View>
     </View>