Intl

app/soapbox/features/feed-suggestions/feed-suggestions.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import VerificationBadge from 'soapbox/components/verification_badge';
@@ -9,6 +10,11 @@ import ActionButton from '../ui/components/action-button';
 
 import type { Account } from 'soapbox/types/entities';
 
+const messages = defineMessages({
+  heading: { id: 'feedSuggestions.heading', defaultMessage: 'Suggested profiles' },
+  viewAll: { id: 'feedSuggestions.viewAll', defaultMessage: 'View all' },
+});
+
 const SuggestionItem = ({ accountId }: { accountId: string }) => {
   const account = useAccount(accountId) as Account;
 
@@ -52,18 +58,19 @@ const SuggestionItem = ({ accountId }: { accountId: string }) => {
 };
 
 const FeedSuggestions = () => {
+  const intl = useIntl();
   const suggestedProfiles = useAppSelector((state) => state.suggestions.items);
 
   return (
     <Card size='lg' variant='rounded'>
       <HStack justifyContent='between' alignItems='center'>
-        <CardTitle title='Suggested profiles' />
+        <CardTitle title={intl.formatMessage(messages.heading)} />
 
         <Link
           to='/suggestions'
           className='text-primary-600 dark:text-primary-400 hover:underline'
         >
-          View all
+          {intl.formatMessage(messages.viewAll)}
         </Link>
       </HStack>
 

app/soapbox/features/follow-recommendations/index.tsx

@@ -1,6 +1,6 @@
 import debounce from 'lodash/debounce';
 import React, { useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchSuggestions } from 'soapbox/actions/suggestions';
 import ScrollableList from 'soapbox/components/scrollable_list';
@@ -9,8 +9,13 @@ import AccountContainer from 'soapbox/containers/account_container';
 import Column from 'soapbox/features/ui/components/column';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 
+const messages = defineMessages({
+  heading: { id: 'followRecommendations.heading', defaultMessage: 'Suggested profiles' },
+});
+
 const FollowRecommendations: React.FC = () => {
   const dispatch = useAppDispatch();
+  const intl = useIntl();
   const features = useFeatures();
 
   const suggestions = useAppSelector((state) => state.suggestions.items);
@@ -31,7 +36,7 @@ const FollowRecommendations: React.FC = () => {
 
   if (suggestions.size === 0 && !isLoading) {
     return (
-      <Column label='Suggested profiles'>
+      <Column label={intl.formatMessage(messages.heading)}>
         <Text align='center'>
           <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
         </Text>
@@ -40,7 +45,7 @@ const FollowRecommendations: React.FC = () => {
   }
 
   return (
-    <Column label='Suggested profiles'>
+    <Column label={intl.formatMessage(messages.heading)}>
       <Stack space={4}>
         <ScrollableList
           isLoading={isLoading}