Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lib-user: Setup react-i18next for MyGroups components #6555

Merged
merged 2 commits into from
Jan 6, 2025
Merged

lib-user: Setup react-i18next for MyGroups components #6555

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
533b446
Setup react-i18next for MyGroups components
goplayoutside3 Dec 15, 2024
f609e6b
lib-user: Setup react-i18next for UserHome components (#6556)
goplayoutside3 Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions packages/lib-user/src/components/MyGroups/MyGroups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -20,6 +21,7 @@ function MyGroups({
groups = [],
loading = false
}) {
const { t } = useTranslation()
return (
<>
{loading ? (
Expand All @@ -39,7 +41,7 @@ function MyGroups({
pad='medium'
>
<SpacedText uppercase={false}>
There was an error.
{t('MyGroups.error')}
</SpacedText>
<SpacedText uppercase={false}>
{error?.message}
Expand All @@ -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' />]} />
Comment on lines -55 to +58
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See https://github.com/zooniverse/front-end-monorepo/pull/6228/files#r1735238281. Trans inserts a line break here.

</Paragraph>
</Box>
) : (
Expand Down
5 changes: 5 additions & 0 deletions packages/lib-user/src/components/MyGroups/MyGroups.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,8 @@ export const Default = {
loading: false
}
}

export const Empty = {
groups: [],
loading: false
}
10 changes: 6 additions & 4 deletions packages/lib-user/src/components/MyGroups/MyGroupsContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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)

Expand Down Expand Up @@ -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 />
Expand All @@ -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
Expand All @@ -104,7 +106,7 @@ function MyGroupsContainer({ authUser, login, previewLayout = false }) {
}}
label={
<SpacedText size='1rem' uppercase={false}>
Learn more about groups
{t('MyGroups.learnMore')}
</SpacedText>
}
/>
Expand Down
8 changes: 6 additions & 2 deletions packages/lib-user/src/components/MyGroups/components/CreateButton/CreateButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}
Expand All @@ -26,7 +30,7 @@ function CreateButton({
icon={<Add size='1rem' />}
labelSize='1rem'
onClick={onClick}
text={text}
text={labelText}
/>
)
}
Expand Down
14 changes: 8 additions & 6 deletions packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -51,6 +52,7 @@ function GroupCard({
projects = 0,
role = ''
}) {
const { t } = useTranslation()
return (
<StyledListItem>
<StyledLink
Expand All @@ -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>
Expand Down
15 changes: 7 additions & 8 deletions packages/lib-user/src/components/MyGroups/components/PreviewLayout/PreviewLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'>
Expand All @@ -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>
)}
Expand All @@ -62,7 +61,7 @@ export default function PreviewLayout({
}}
label={
<SpacedText size='1rem' uppercase={false}>
Learn more about groups
{t('MyGroups.learnMore')}
</SpacedText>
}
/>
Expand Down
18 changes: 17 additions & 1 deletion packages/lib-user/src/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
}
}
Loading