Setup react-i18next for MyGroups components

zooniverse · Dec 15, 2024 · 533b446 · 533b446
1 parent b71d0bb
commit 533b446
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 27 deletions.
diff --git a/packages/lib-user/src/components/MyGroups/MyGroups.js b/packages/lib-user/src/components/MyGroups/MyGroups.js
@@ -2,6 +2,7 @@ import { Loader, SpacedText } from '@zooniverse/react-components'
 import { Box, Grid, Paragraph } from 'grommet'
 import { arrayOf, bool, shape, string } from 'prop-types'
 import styled from 'styled-components'
+import { useTranslation, Trans } from '../../translations/i18n.js'
 
 import GroupCardList from './components/GroupCardList'
 
@@ -20,6 +21,7 @@ function MyGroups({
   groups = [],
   loading = false
 }) {
+  const { t } = useTranslation()
   return (
     <>
       {loading ? (
@@ -39,7 +41,7 @@ function MyGroups({
           pad='medium'
         >
           <SpacedText uppercase={false}>
-            There was an error.
+            {t('MyGroups.error')}
           </SpacedText>
           <SpacedText uppercase={false}>
             {error?.message}
@@ -52,11 +54,8 @@ function MyGroups({
           justify='center'
           pad='medium'
         >
-          <Paragraph margin={{ top: '0', bottom: '20px' }}>
-            You are not a member of any Groups.
-          </Paragraph>
-          <Paragraph margin={{ top: '0', bottom: '20px' }}>
-            Create one below
+          <Paragraph margin={{ top: '0', bottom: '20px' }} textAlign='center'>
+            <Trans i18nKey='MyGroups.noGroups' components={[ <br key='line-break' />]} />
           </Paragraph>
         </Box>
       ) : (

diff --git a/packages/lib-user/src/components/MyGroups/MyGroups.stories.js b/packages/lib-user/src/components/MyGroups/MyGroups.stories.js
@@ -43,3 +43,8 @@ export const Default = {
     loading: false
   }
 }
+
+export const Empty = {
+  groups: [],
+  loading: false
+}
diff --git a/packages/lib-user/src/components/MyGroups/MyGroupsContainer.js b/packages/lib-user/src/components/MyGroups/MyGroupsContainer.js
@@ -4,6 +4,7 @@ import { SpacedText } from '@zooniverse/react-components'
 import { Anchor, Box } from 'grommet'
 import { bool, shape, string } from 'prop-types'
 import { useState } from 'react'
+import { useTranslation } from '../../translations/i18n.js'
 
 import {
   usePanoptesMemberships,
@@ -26,6 +27,7 @@ import GroupCreateFormContainer from './components/GroupCreateFormContainer'
 import PreviewLayout from './components/PreviewLayout'
 
 function MyGroupsContainer({ authUser, login, previewLayout = false }) {
+  const { t } = useTranslation()
   const [groupModalActive, setGroupModalActive] = useState(false)
   const [page, setPage] = useState(1)
 
@@ -67,7 +69,7 @@ function MyGroupsContainer({ authUser, login, previewLayout = false }) {
       <GroupModal
         active={groupModalActive}
         handleClose={handleGroupModal}
-        title='create new group'
+        title={t('MyGroups.createNew')}
         titleColor='black'
       >
         <GroupCreateFormContainer />
@@ -77,13 +79,13 @@ function MyGroupsContainer({ authUser, login, previewLayout = false }) {
           primaryHeaderItem={
             <HeaderLink
               href='/'
-              label='back'
+              label={t('common.back')}
               primaryItem={true}
             />
           }
         >
           <ContentBox
-            title='My Groups'
+            title={t('MyGroups.title')}
             pad={{ horizontal: '60px', vertical: '30px' }}
           >
             <MyGroups
@@ -104,7 +106,7 @@ function MyGroupsContainer({ authUser, login, previewLayout = false }) {
                 }}
                 label={
                   <SpacedText size='1rem' uppercase={false}>
-                    Learn more about groups
+                    {t('MyGroups.learnMore')}
                   </SpacedText>
                 }
               />

diff --git a/packages/lib-user/src/components/MyGroups/components/CreateButton/CreateButton.js b/packages/lib-user/src/components/MyGroups/components/CreateButton/CreateButton.js
@@ -2,6 +2,7 @@ import { PlainButton } from '@zooniverse/react-components'
 import { Add } from 'grommet-icons'
 import { func, string } from 'prop-types'
 import styled from 'styled-components'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 const StyledButton = styled(PlainButton)`
   width: fit-content;
@@ -13,8 +14,11 @@ const StyledButton = styled(PlainButton)`
 
 function CreateButton({
   onClick,
-  text = 'create new group'
+  text = ''
 }) {
+  const { t } = useTranslation()
+  const labelText = text.length ? text : t('MyGroups.createNew')
+
   return (
     <StyledButton
       a11yTitle={text}
@@ -26,7 +30,7 @@ function CreateButton({
       icon={<Add size='1rem' />}
       labelSize='1rem'
       onClick={onClick}
-      text={text}
+      text={labelText}
     />
   )
 }

diff --git a/packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.js b/packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.js
@@ -3,14 +3,15 @@ import { Box } from 'grommet'
 import Link from 'next/link'
 import { number, string } from 'prop-types'
 import styled, { css } from 'styled-components'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 import { TitledStat } from '@components/shared'
 
 const StyledListItem = styled.li`
   border-radius: 8px;
   list-style: none;
   width: clamp(385px, 100%, 564px);
-  
+
   &:hover, &:focus-within {
     box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.25);
   }
@@ -51,6 +52,7 @@ function GroupCard({
   projects = 0,
   role = ''
 }) {
+  const { t } = useTranslation()
   return (
     <StyledListItem>
       <StyledLink
@@ -74,27 +76,27 @@ function GroupCard({
               round='xsmall'
               background={role === 'group_admin' ? 'neutral-2' : 'accent-1'}
             >
-              {role === 'group_admin' ? 'Admin' : 'Member'}
+              {role === 'group_admin' ? t('MyGroups.GroupCard.admin') : t('MyGroups.GroupCard.member')}
             </StyledRole>
           </Box>
           <Box
             direction='row'
             justify='between'
           >
             <TitledStat
-              title='Classifications'
+              title={t('common.classifications')}
               value={classifications}
             />
             <TitledStat
-              title='Hours'
+              title={t('common.hours')}
               value={hours}
             />
             <TitledStat
-              title='Contributors'
+              title={t('common.contributors')}
               value={contributors}
             />
             <TitledStat
-              title='Projects'
+              title={t('common.projects')}
               value={projects}
             />
           </Box>

diff --git a/packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js b/packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js
@@ -2,6 +2,7 @@ import { Loader, SpacedText } from '@zooniverse/react-components'
 import { Anchor, Box, Paragraph } from 'grommet'
 import { arrayOf, bool, func, shape, string } from 'prop-types'
 import Link from 'next/link'
+import { useTranslation, Trans } from '../../../../translations/i18n.js'
 
 import { ContentBox } from '@components/shared'
 import GroupCardContainer from '../GroupCard/GroupCardContainer.js'
@@ -15,11 +16,12 @@ export default function PreviewLayout({
   loading = false,
   handleGroupModal = DEFAULT_HANDLER
 }) {
+  const { t } = useTranslation()
   return (
     <ContentBox
-      linkLabel='See all'
+      linkLabel={t('MyGroups.PreviewLayout.seeAll')}
       linkProps={{ as: Link, href: `/users/${authUser?.login}/groups` }}
-      title='My Groups'
+      title={t('MyGroups.title')}
     >
       {loading && (
         <Box fill justify='center' align='center'>
@@ -45,11 +47,8 @@ export default function PreviewLayout({
         </Box>
       ) : (
         <Box fill justify='center' align='center'>
-          <Paragraph margin={{ top: '0', bottom: '20px' }}>
-            You are not a member of any Groups.
-          </Paragraph>
-          <Paragraph margin={{ top: '0', bottom: '20px' }}>
-            Create one below
+          <Paragraph margin={{ top: '0', bottom: '20px' }} textAlign='center'>
+            <Trans i18nKey='MyGroups.noGroups' components={[ <br key='line-break' />]} />
           </Paragraph>
         </Box>
       )}
@@ -62,7 +61,7 @@ export default function PreviewLayout({
           }}
           label={
             <SpacedText size='1rem' uppercase={false}>
-              Learn more about groups
+              {t('MyGroups.learnMore')}
             </SpacedText>
           }
         />

diff --git a/packages/lib-user/src/translations/en.json b/packages/lib-user/src/translations/en.json
@@ -3,7 +3,9 @@
     "avatarAlt": "{{login}} avatar",
     "back": "Back",
     "classifications": "Classifications",
-    "hours": "Hours"
+    "contributors": "Contributors",
+    "hours": "Hours",
+    "projects": "Projects"
   },
   "Contributors": {
     "error": "There was an error",
@@ -49,5 +51,19 @@
       "tip": "Includes active and inactive members.",
       "title": "Top Contributors"
     }
+  },
+  "MyGroups": {
+    "createNew": "Create new group",
+    "error": "There was an error fetching your groups",
+    "learnMore": "Learn more about groups",
+    "noGroups": "You are not a member of any Groups.<0/>Create one below",
+    "title": "My Groups",
+    "GroupCard": {
+      "admin": "Admin",
+      "member": "Member"
+    },
+    "PreviewLayout": {
+      "seeAll": "See all"
+    }
   }
 }