From 4c6c41e9b9ff42cf249d2d5b3000417628412158 Mon Sep 17 00:00:00 2001
From: Delilah <23665803+goplayoutside3@users.noreply.github.com>
Date: Sat, 14 Dec 2024 22:08:59 -0600
Subject: [PATCH] Setup react-i18next for HeaderDropdown, ProfileHeader, and
 TopProjects

---
 .../shared/Layout/components/HeaderDropdown.js         |  4 +++-
 .../components/shared/ProfileHeader/ProfileHeader.js   | 10 ++++++----
 .../src/components/shared/TopProjects/TopProjects.js   | 10 +++++++---
 packages/lib-user/src/translations/en.json             |  6 ++++++
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/lib-user/src/components/shared/Layout/components/HeaderDropdown.js b/packages/lib-user/src/components/shared/Layout/components/HeaderDropdown.js
index f8d7287d78..578efec4d8 100644
--- a/packages/lib-user/src/components/shared/Layout/components/HeaderDropdown.js
+++ b/packages/lib-user/src/components/shared/Layout/components/HeaderDropdown.js
@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components'
 import { Box, DropButton } from 'grommet'
 import { FormDown } from 'grommet-icons'
 import { SpacedText } from '@zooniverse/react-components'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 const StyledDropButton = styled(DropButton)`
   position: relative;
@@ -57,6 +58,7 @@ const StyledLi = styled.li`
 `
 
 function HeaderDropdown({ secondaryHeaderItems = [] }) {
+  const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
 
   const handleOpen = () => {
@@ -98,7 +100,7 @@ function HeaderDropdown({ secondaryHeaderItems = [] }) {
         pad={{ horizontal: 'medium', vertical: 'xsmall' }}
       >
         <SpacedText size='.78rem' weight={700}>
-          Group Options
+          {t('HeaderDropdown.label')}
         </SpacedText>
         <FormDown color='white' />
       </Box>
diff --git a/packages/lib-user/src/components/shared/ProfileHeader/ProfileHeader.js b/packages/lib-user/src/components/shared/ProfileHeader/ProfileHeader.js
index 12fdead987..9d57f7bc11 100644
--- a/packages/lib-user/src/components/shared/ProfileHeader/ProfileHeader.js
+++ b/packages/lib-user/src/components/shared/ProfileHeader/ProfileHeader.js
@@ -2,6 +2,7 @@ import { SpacedText, ZooniverseLogo } from '@zooniverse/react-components'
 import { Box, ResponsiveContext } from 'grommet'
 import { number, string } from 'prop-types'
 import { useContext } from 'react'
+import { useTranslation } from '../../../translations/i18n.js'
 
 import {
   Avatar,
@@ -17,6 +18,7 @@ function ProfileHeader({
   login = '',
   projects = undefined
 }) {
+  const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
 
   return (
@@ -65,25 +67,25 @@ function ProfileHeader({
       >
         {classifications !== undefined ?
           <TitledStat
-            title='Classifications'
+            title={t('common.classifications')}
             value={classifications}
           />
           : null}
         {hours !== undefined ?
           <TitledStat
-            title='Hours'
+            title={t('common.hours')}
             value={hours}
           />
           : null}
         {contributors !== undefined ?
           <TitledStat
-            title='Contributors'
+            title={t('common.contributors')}
             value={contributors}
           />
           : null}
         {projects !== undefined ?
           <TitledStat
-            title='Projects'
+            title={t('common.projects')}
             value={projects}
           />
           : null}
diff --git a/packages/lib-user/src/components/shared/TopProjects/TopProjects.js b/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
index d4d725f6b7..93fbc7eaca 100644
--- a/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
+++ b/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
@@ -3,6 +3,7 @@ import { arrayOf, bool, node, number, string, shape } from 'prop-types'
 import { useContext } from 'react'
 import styled from 'styled-components'
 import { Loader, ProjectCard } from '@zooniverse/react-components'
+import { useTranslation } from '../../../translations/i18n.js'
 
 import { ContentBox } from '@components/shared'
 
@@ -23,9 +24,10 @@ const StyledRowList = styled(Box)`
 `
 
 function CardsGrid({ children }) {
+  const { t } = useTranslation()
   return (
     <StyledGridList
-      a11yTitle='Top Projects'
+      a11yTitle={t('TopProjects.title')}
       columns={['1fr', '1fr', '1fr']}
       forwardedAs='ul'
       gap='xsmall'
@@ -43,9 +45,10 @@ CardsGrid.propTypes = {
 }
 
 function CardsRow({ children }) {
+  const { t } = useTranslation()
   return (
     <StyledRowList
-      a11yTitle='Top Projects'
+      a11yTitle={t('TopProjects.title')}
       direction='row'
       forwardedAs='ul'
       gap='small'
@@ -71,6 +74,7 @@ function TopProjects({
   loading = false,
   projects = []
 }) {
+  const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
   const cardSize = grid ? 'small' : size
 
@@ -96,7 +100,7 @@ function TopProjects({
 
   return (
     <ContentBox
-      title='Top Projects'
+      title={t('TopProjects.title')}
     >
       {loading ? (
         <Box
diff --git a/packages/lib-user/src/translations/en.json b/packages/lib-user/src/translations/en.json
index e459b066de..a05ba3f2b5 100644
--- a/packages/lib-user/src/translations/en.json
+++ b/packages/lib-user/src/translations/en.json
@@ -96,6 +96,9 @@
       "title": "Top Contributors"
     }
   },
+  "HeaderDropdown": {
+    "label": "Group Options"
+  },
   "MyGroups": {
     "createNew": "Create new group",
     "error": "There was an error fetching your groups",
@@ -110,6 +113,9 @@
       "seeAll": "See all"
     }
   },
+  "TopProjects": {
+    "title": "Top Projects"
+  },
   "UserHome": {
     "Dashboard": {
       "allTime": "All Time",