Merge pull request #3247 from bluesky-social/samuel/dynamic-translations

Fix instances of static translations (`t` macro)

src/view/com/composer/select-language/SelectLangBtn.tsx

@@ -20,7 +20,7 @@ import {
   toPostLanguages,
   hasPostLanguage,
 } from '#/state/preferences/languages'
-import {t, msg} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 export function SelectLangBtn() {
@@ -84,15 +84,15 @@ export function SelectLangBtn() {
     }
 
     return [
-      {heading: true, label: t`Post language`},
+      {heading: true, label: _(msg`Post language`)},
       ...arr.slice(0, 6),
       {sep: true},
       {
-        label: t`Other...`,
+        label: _(msg`Other...`),
         onPress: onPressMore,
       },
     ]
-  }, [onPressMore, langPrefs, setLangPrefs, postLanguagesPref])
+  }, [onPressMore, langPrefs, setLangPrefs, postLanguagesPref, _])
 
   return (
     <DropdownButton

src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx

@@ -6,9 +6,11 @@
  *
  */
 import React from 'react'
-import {createHitslop} from 'lib/constants'
 import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native'
-import {t} from '@lingui/macro'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {createHitslop} from '#/lib/constants'
 
 type Props = {
   onRequestClose: () => void
@@ -16,20 +18,23 @@ type Props = {
 
 const HIT_SLOP = createHitslop(16)
 
-const ImageDefaultHeader = ({onRequestClose}: Props) => (
+const ImageDefaultHeader = ({onRequestClose}: Props) => {
-  <SafeAreaView style={styles.root}>
+  const {_} = useLingui()
-    <TouchableOpacity
+  return (
-      style={styles.closeButton}
+    <SafeAreaView style={styles.root}>
-      onPress={onRequestClose}
+      <TouchableOpacity
-      hitSlop={HIT_SLOP}
+        style={styles.closeButton}
-      accessibilityRole="button"
+        onPress={onRequestClose}
-      accessibilityLabel={t`Close image`}
+        hitSlop={HIT_SLOP}
-      accessibilityHint={t`Closes viewer for header image`}
+        accessibilityRole="button"
-      onAccessibilityEscape={onRequestClose}>
+        accessibilityLabel={_(msg`Close image`)}
-      <Text style={styles.closeText}>✕</Text>
+        accessibilityHint={_(msg`Closes viewer for header image`)}
-    </TouchableOpacity>
+        onAccessibilityEscape={onRequestClose}>
-  </SafeAreaView>
+        <Text style={styles.closeText}>✕</Text>
-)
+      </TouchableOpacity>
+    </SafeAreaView>
+  )
+}
 
 const styles = StyleSheet.create({
   root: {

src/view/com/util/BottomSheetCustomBackdrop.tsx

@@ -6,12 +6,15 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
 } from 'react-native-reanimated'
-import {t} from '@lingui/macro'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 export function createCustomBackdrop(
   onClose?: (() => void) | undefined,
 ): React.FC<BottomSheetBackdropProps> {
   const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => {
+    const {_} = useLingui()
+
     // animated variables
     const opacity = useAnimatedStyle(() => ({
       opacity: interpolate(
@@ -30,7 +33,7 @@ export function createCustomBackdrop(
     return (
       <TouchableWithoutFeedback
         onPress={onClose}
-        accessibilityLabel={t`Close bottom drawer`}
+        accessibilityLabel={_(msg`Close bottom drawer`)}
         accessibilityHint=""
         onAccessibilityEscape={() => {
           if (onClose !== undefined) {

src/view/com/util/ErrorBoundary.tsx

@@ -1,8 +1,9 @@
 import React, {Component, ErrorInfo, ReactNode} from 'react'
 import {ErrorScreen} from './error/ErrorScreen'
 import {CenteredView} from './Views'
-import {t} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {logger} from '#/logger'
+import {useLingui} from '@lingui/react'
 
 interface Props {
   children?: ReactNode
@@ -31,11 +32,7 @@ export class ErrorBoundary extends Component<Props, State> {
     if (this.state.hasError) {
       return (
         <CenteredView style={{height: '100%', flex: 1}}>
-          <ErrorScreen
+          <TranslatedErrorScreen details={this.state.error.toString()} />
-            title={t`Oh no!`}
-            message={t`There was an unexpected issue in the application. Please let us know if this happened to you!`}
-            details={this.state.error.toString()}
-          />
         </CenteredView>
       )
     }
@@ -43,3 +40,17 @@ export class ErrorBoundary extends Component<Props, State> {
     return this.props.children
   }
 }
+
+function TranslatedErrorScreen({details}: {details?: string}) {
+  const {_} = useLingui()
+
+  return (
+    <ErrorScreen
+      title={_(msg`Oh no!`)}
+      message={_(
+        msg`There was an unexpected issue in the application. Please let us know if this happened to you!`,
+      )}
+      details={details}
+    />
+  )
+}

src/view/shell/index.web.tsx

@@ -1,5 +1,9 @@
 import React, {useEffect} from 'react'
 import {View, StyleSheet, TouchableOpacity} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
 import {ErrorBoundary} from '../com/util/ErrorBoundary'
 import {Lightbox} from '../com/lightbox/Lightbox'
 import {ModalsContainer} from '../com/modals/Modal'
@@ -9,9 +13,7 @@ import {s, colors} from 'lib/styles'
 import {RoutesContainer, FlatNavigator} from '../../Navigation'
 import {DrawerContent} from './Drawer'
 import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
-import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
-import {t} from '@lingui/macro'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useCloseAllActiveElements} from '#/state/util'
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
@@ -24,6 +26,7 @@ function ShellInner() {
   const {isDesktop} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
   const closeAllActiveElements = useCloseAllActiveElements()
+  const {_} = useLingui()
 
   useWebBodyScrollLock(isDrawerOpen)
 
@@ -48,8 +51,8 @@ function ShellInner() {
         <TouchableOpacity
           onPress={() => setDrawerOpen(false)}
           style={styles.drawerMask}
-          accessibilityLabel={t`Close navigation footer`}
+          accessibilityLabel={_(msg`Close navigation footer`)}
-          accessibilityHint={t`Closes bottom navigation bar`}>
+          accessibilityHint={_(msg`Closes bottom navigation bar`)}>
           <View style={styles.drawerContainer}>
             <DrawerContent />
           </View>