From 533b446927ef8022828ba9c6e6b05e20c62e26cf Mon Sep 17 00:00:00 2001
From: Delilah <23665803+goplayoutside3@users.noreply.github.com>
Date: Sat, 14 Dec 2024 20:16:33 -0600
Subject: [PATCH] Setup react-i18next for MyGroups components

---
 .../src/components/MyGroups/MyGroups.js        | 11 +++++------
 .../components/MyGroups/MyGroups.stories.js    |  5 +++++
 .../components/MyGroups/MyGroupsContainer.js   | 10 ++++++----
 .../components/CreateButton/CreateButton.js    |  8 ++++++--
 .../MyGroups/components/GroupCard/GroupCard.js | 14 ++++++++------
 .../components/PreviewLayout/PreviewLayout.js  | 15 +++++++--------
 packages/lib-user/src/translations/en.json     | 18 +++++++++++++++++-
 7 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/packages/lib-user/src/components/MyGroups/MyGroups.js b/packages/lib-user/src/components/MyGroups/MyGroups.js
index f4500b1349..906292779a 100644
--- 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
index 6293792675..06ac52621d 100644
--- 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
index 21fb1aaef8..5fd1a23722 100644
--- 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
index 0ee48eda17..e58778f87d 100644
--- 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
index 33f4180c24..9cb1128ae4 100644
--- a/packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.js
+++ b/packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.js
@@ -3,6 +3,7 @@ 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'
 
@@ -10,7 +11,7 @@ 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,7 +76,7 @@ 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
@@ -82,19 +84,19 @@ function GroupCard({
             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
index 13521439ee..4010a1349e 100644
--- 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
index 10e82f573b..9ad4a90b94 100644
--- 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"
+    }
   }
 }