lib-user: Setup react-i18next for UserHome components

packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.js

@@ -11,6 +11,7 @@ import { useContext } from 'react'
 import styled, { css, useTheme } from 'styled-components'
 import { bool, shape, string } from 'prop-types'
 import { SpacedHeading, SpacedText } from '@zooniverse/react-components'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 import DashboardLink from './components/DashboardLink.js'
 import StatsTabsContainer from './components/StatsTabs/StatsTabsContainer.js'
@@ -139,9 +140,11 @@ const border = {
 }
 
 export default function Dashboard({ user, userLoading }) {
+  const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
   const { dark } = useTheme()
 
+  // No translations, this link is going away
   const blogLinkLabel =
     size === 'small'
       ? 'About your homepage'
@@ -183,7 +186,7 @@ export default function Dashboard({ user, userLoading }) {
           }}
         >
           <Image
-            alt='User avatar'
+            alt={t('common.avatarAlt', { login: user?.login })}
             fit='contain'
             src={
               !user?.avatar_src || userLoading
@@ -228,22 +231,22 @@ export default function Dashboard({ user, userLoading }) {
         <Box direction='row' gap='30px' margin={{ bottom: '30px' }}>
           <DashboardLink
             icon={<Favorite />}
-            text='Favorites'
+            text={t('UserHome.Dashboard.favorites')}
             href={`https://www.zooniverse.org/favorites/${user?.login}`}
           />
           <DashboardLink
             icon={<Bookmark />}
-            text='Collections'
+            text={t('UserHome.Dashboard.collections')}
             href={`https://www.zooniverse.org/collections/${user?.login}`}
           />
           <DashboardLink
             icon={<Chat />}
-            text='Comments'
+            text={t('UserHome.Dashboard.comments')}
             href={`https://www.zooniverse.org/users/${user?.login}`}
           />
           <DashboardLink
             icon={<MailOption />}
-            text='Messages'
+            text={t('UserHome.Dashboard.messages')}
             href={`https://www.zooniverse.org/inbox`}
           />
         </Box>
@@ -256,13 +259,14 @@ export default function Dashboard({ user, userLoading }) {
               alignSelf={size === 'small' ? 'center' : 'end'}
               forwardedAs={Link}
               href={`/users/${user?.login}/stats`}
-              label={<SpacedText>More Stats</SpacedText>}
+              label={<SpacedText>{t('UserHome.Dashboard.moreStats')}</SpacedText>}
               icon={<FormNext />}
               reverse
               color={{ light: 'dark-5', dark: 'white' }}
               gap='large'
             />
             <StyledBadge color='white' size='0.75rem' weight='bold'>
+              {/* No translation, this is going away */}
               NEW
             </StyledBadge>
           </Relative>

packages/lib-user/src/components/UserHome/components/Dashboard/components/StatsTabs/StatsTabs.js

@@ -9,6 +9,7 @@ import {
 import { number, shape } from 'prop-types'
 import { useContext } from 'react'
 import styled from 'styled-components'
+import { useTranslation } from '../../../../../../translations/i18n.js'
 
 import { Tip } from '@components/shared'
 
@@ -19,6 +20,7 @@ const StyledTab = styled(Tab)`
 `
 
 function Stat({ stats }) {
+  const { t } = useTranslation()
   return (
     <Box direction='row'>
       <Box align='center' gap='xxsmall' width='50%'>
@@ -28,7 +30,7 @@ function Stat({ stats }) {
             color={{ dark: 'white', light: 'black' }}
             weight='bold'
           >
-            Classifications
+            {t('common.classifications')}
           </Text>
           <Tip contentText='Click on MORE STATS to generate a volunteer certificate' />
         </Box>
@@ -42,7 +44,7 @@ function Stat({ stats }) {
           color={{ dark: 'white', light: 'black' }}
           weight='bold'
         >
-          Projects
+          {t('common.projects')}
         </Text>
         <Text color={{ light: 'neutral-1', dark: 'accent-1' }} size='xxlarge'>
           {stats.projects?.toLocaleString()}
@@ -53,16 +55,17 @@ function Stat({ stats }) {
 }
 
 export default function StatsTabs({ statsPreview }) {
+  const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
 
   return (
     <ThemeContext.Extend value={tabsTheme}>
       <Box width={size !== 'small' ? { min: '480px' } : { min: '350px'}}>
         <GrommetTabs gap='small' size={size}>
-          <StyledTab title='This Week'>
+          <StyledTab title={t('UserHome.Dashboard.thisWeek')}>
             {statsPreview?.thisWeek && <Stat stats={statsPreview.thisWeek} />}
           </StyledTab>
-          <StyledTab title='All Time'>
+          <StyledTab title={t('UserHome.Dashboard.allTime')}>
             {statsPreview?.allTime && <Stat stats={statsPreview.allTime} />}
           </StyledTab>
         </GrommetTabs>

packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js

@@ -2,6 +2,7 @@ import { Anchor, Box, ResponsiveContext, Text } from 'grommet'
 import { arrayOf, bool, shape, string } from 'prop-types'
 import { useContext } from 'react'
 import { Loader, ProjectCard, SpacedText } from '@zooniverse/react-components'
+import { useTranslation, Trans } from '../../../../translations/i18n.js'
 
 import { ContentBox } from '@components/shared'
 
@@ -10,31 +11,34 @@ export default function RecentProjects({
   projectPreferences = [],
   error = undefined
 }) {
+  const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
 
   return (
-    <ContentBox title='Continue Classifying' screenSize={size}>
+    <ContentBox title={t('UserHome.RecentProjects.title')} screenSize={size}>
       {isLoading && (
         <Box fill justify='center' align='center'>
           <Loader />
         </Box>
       )}
       {!isLoading && error && (
         <Box fill justify='center' align='center' pad='medium'>
-          <SpacedText>
-            There was an error fetching your recent projects
-          </SpacedText>
+          <SpacedText>{t('UserHome.RecentProjects.error')}</SpacedText>
         </Box>
       )}
       {!isLoading && !projectPreferences.length && !error && (
         <Box fill justify='center' align='center' pad='medium'>
-          <SpacedText>No Recent Projects found</SpacedText>
+          <SpacedText>{t('UserHome.RecentProjects.noProjects')}</SpacedText>
           <Text>
-            Start by{' '}
-            <Anchor href='https://www.zooniverse.org/projects'>
-              classifying any project
-            </Anchor>
-            .
+            <Trans
+              i18nKey='UserHome.RecentProjects.start'
+              components={[
+                <Anchor
+                  key='projects-page'
+                  href='https://www.zooniverse.org/projects'
+                />
+              ]}
+            />
           </Text>
         </Box>
       )}

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjects.js

@@ -2,6 +2,7 @@ import { Anchor, Box, ResponsiveContext, Text } from 'grommet'
 import { arrayOf, bool, shape, string } from 'prop-types'
 import { useContext } from 'react'
 import { Loader, SpacedText } from '@zooniverse/react-components'
+import { useTranslation, Trans } from '../../../../translations/i18n.js'
 
 import { ContentBox } from '@components/shared'
 import SubjectCard from '../SubjectCard/SubjectCard.js'
@@ -11,6 +12,7 @@ function RecentSubjects({
   recents = [],
   error = undefined
 }) {
+  const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
 
   return (
@@ -23,19 +25,23 @@ function RecentSubjects({
       {!isLoading && error && (
         <Box fill justify='center' align='center' pad='medium'>
           <SpacedText>
-            There was an error fetching recent classifications
+            {t('UserHome.RecentSubjects.error')}
           </SpacedText>
         </Box>
       )}
       {!isLoading && !recents?.length && !error && (
         <Box fill justify='center' align='center' pad='medium'>
-          <SpacedText>No Recent Classifications found</SpacedText>
+          <SpacedText>{t('UserHome.RecentSubjects.noSubjects')}</SpacedText>
           <Text>
-            Start by{' '}
-            <Anchor href='https://www.zooniverse.org/projects'>
-              classifying any project
-            </Anchor>{' '}
-            to show your recent classifications here.
+            <Trans
+                i18nKey='UserHome.RecentProjects.start' // same message in this component too
+                components={[
+                  <Anchor
+                    key='projects-page'
+                    href='https://www.zooniverse.org/projects'
+                  />
+                ]}
+              />
           </Text>
         </Box>
       )}

packages/lib-user/src/components/UserHome/components/SubjectCard/SubjectCard.js

@@ -10,9 +10,10 @@
 /* The shape and styling of this component is similar to ProjectCard in lib-react-components */
 
 import styled from 'styled-components'
-import { Anchor, Box } from 'grommet'
+import { Box } from 'grommet'
 import { Media, SpacedText } from '@zooniverse/react-components'
 import { string } from 'prop-types'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 const StyledBox = styled(Box)`
   overflow: hidden;
@@ -62,6 +63,7 @@ export default function SubjectCard({
   projectSlug = '',
   subjectID
 }) {
+  const { t } = useTranslation()
   // to PFE
   const href = `https://www.zooniverse.org/projects/${projectSlug}/talk/subjects/${subjectID}`
 
@@ -75,14 +77,14 @@ export default function SubjectCard({
       round='8px'
     >
       <Media
-        alt={`subject ${subjectID}`}
+        alt={`${t('UserHome.SubjectCard.subject')} ${subjectID}`}
         controls={false}
         src={mediaSrc}
         width={cardWidth(size) * 2}
       />
       <Gradient fill />
       <StyledSpacedText color='white' weight='bold'>
-        {'Subject ' + subjectID}
+        {t('UserHome.SubjectCard.subject')} {subjectID}
       </StyledSpacedText>
     </StyledBox>
   )

packages/lib-user/src/translations/en.json

@@ -65,5 +65,29 @@
     "PreviewLayout": {
       "seeAll": "See all"
     }
+  },
+  "UserHome": {
+    "Dashboard": {
+      "allTime": "All Time",
+      "collections": "Collections",
+      "comments": "Comments",
+      "favorites": "Favorites",
+      "messages": "Messages",
+      "moreStats": "More Stats",
+      "thisWeek": "This Week"
+    },
+    "RecentProjects": {
+      "error": "There was an error fetching your recent projects",
+      "noProjects": "No Recent Projects found",
+      "start": "Start by <0>classifying any project</0>.",
+      "title": "Continue Classifying"
+    },
+    "RecentSubjects": {
+      "error": "There was an error fetching recent classifications",
+      "noSubjects": "No recent classifications found"
+    },
+    "SubjectCard": {
+      "subject": "Subject"
+    }
   }
 }