- Create Group
+ {t('Create Group')}
-
WHO CAN SEE THIS GROUP?
+ {t('WHO CAN SEE THIS GROUP?')}
- {visibilityString(visibility)}
- {visibilityDescription(visibility)}
+ {t(visibilityString(visibility))}
+ {t(visibilityDescription(visibility))}
- {label}
- {visibilityDescription(GROUP_VISIBILITY[label])}
+ {t(label)}
+ {t(visibilityDescription(GROUP_VISIBILITY[label]))}
-
WHO CAN JOIN THIS GROUP?
+ {t('WHO CAN JOIN THIS GROUP?')}
- {accessibilityString(accessibility)}
- {accessibilityDescription(accessibility)}
+ {t(accessibilityString(accessibility))}
+ {t(accessibilityDescription(accessibility))}
- {label}
- {accessibilityDescription(GROUP_ACCESSIBILITY[label])}
+ {t(label)}
+ {t(accessibilityDescription(GROUP_ACCESSIBILITY[label]))}
- IS THIS GROUP A MEMBER OF OTHER GROUPS?
+ {t('IS THIS GROUP A MEMBER OF OTHER GROUPS?')}
-
?
-
{/* TODO: somehow show groups that are restricted and will be a join request differently */}
You may add parent groups if you are a moderator of the group you wish to add, or if the group you wish to add has the Open access setting which allows any group to join it
+ {t('You may add parent groups if you are a moderator of the group you wish to add, or if the group you wish to add has the Open access setting which allows any group to join it')}
-
}
}
+export default withTranslation()(FlagContent)
diff --git a/src/components/FlagContent/FlagContent.test.js b/src/components/FlagContent/FlagContent.test.js
index 674702cdc..b4ab4818a 100644
--- a/src/components/FlagContent/FlagContent.test.js
+++ b/src/components/FlagContent/FlagContent.test.js
@@ -1,6 +1,13 @@
import React from 'react'
import { shallow, mount } from 'enzyme'
import FlagContent from './FlagContent'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
describe('FlagContent', () => {
it('matches the last snapshot', () => {
diff --git a/src/components/FlagContent/__snapshots__/FlagContent.test.js.snap b/src/components/FlagContent/__snapshots__/FlagContent.test.js.snap
index ba44bf2ff..fa09636f5 100644
--- a/src/components/FlagContent/__snapshots__/FlagContent.test.js.snap
+++ b/src/components/FlagContent/__snapshots__/FlagContent.test.js.snap
@@ -14,6 +14,7 @@ exports[`FlagContent calls submit successfully with category:other 1`] = `
promptVisible={false}
reasonRequired={false}
submitFlagContent={[MockFunction]}
+ t={[Function]}
type="post"
visible={true}
>
diff --git a/src/components/GoogleButton/GoogleButton.js b/src/components/GoogleButton/GoogleButton.js
index 7f5a6b4c3..2e5a76c23 100644
--- a/src/components/GoogleButton/GoogleButton.js
+++ b/src/components/GoogleButton/GoogleButton.js
@@ -1,4 +1,5 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import cx from 'classnames'
import './GoogleButton.scss'
@@ -7,7 +8,8 @@ export default function GoogleButton ({
signUp,
className = ''
}) {
- const label = 'Continue with Google'
+ const { t } = useTranslation()
+ const label = t('Continue with Google')
return {
@@ -24,22 +26,22 @@ export default function HyloCookieConsent () {
expires={150}
onAccept={() => { console.log('here is where we would call a function to store the users cookie preferences') }}
>
- Hylo uses cookies to enhance the user experience.
+ {t('Hylo uses cookies to enhance the user experience.')}
{hasLocation && 'New Post at this location: '}What would you like to create?
+{hasLocation && t('New Post at this location:') + ' '}{t('What would you like to create?')}
{postTypes.map(postType => { querystringParams.set('newPostType', postType) @@ -26,8 +43,8 @@ export default function CreateModalChooser ({ location }) {you're subscribed to #{this.ignoreHash(topicName)}
: Created topic #{this.ignoreHash(topicName)}
)
+ ? (subscribeAfterCreate ? {t('you\'re subscribed to #{{topicName}}', { topicName: this.ignoreHash(topicName) })}
: {t('Created topic #{{topicName}}', { topicName: this.ignoreHash(topicName) })}
)
: {nameError}
}
- you're subscribed to #
+ you're subscribed to #{{topicName}}
diff --git a/src/components/ErrorBoundary/ErrorBoundary.js b/src/components/ErrorBoundary/ErrorBoundary.js
index 2e93c1948..83f2ebc6b 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.js
+++ b/src/components/ErrorBoundary/ErrorBoundary.js
@@ -1,8 +1,9 @@
import React from 'react'
+import { withTranslation } from 'react-i18next'
import './ErrorBoundary.scss'
import rollbar from 'client/rollbar'
-export default class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React.Component {
constructor (props) {
super(props)
this.state = { hasError: false }
@@ -17,7 +18,7 @@ export default class ErrorBoundary extends React.Component {
}
render () {
- const message = this.props.message || 'Oops! Something went wrong. Try reloading the page.'
+ const message = this.props.message || this.props.t('Oops! Something went wrong. Try reloading the page.')
if (this.state.hasError) {
// You can render any custom fallback UI
return
@@ -31,3 +32,4 @@ export default class ErrorBoundary extends React.Component {
return this.props.children
}
}
+export default withTranslation()(ErrorBoundary)
diff --git a/src/components/ErrorBoundary/ErrorBoundary.test.js b/src/components/ErrorBoundary/ErrorBoundary.test.js
index 7c286f07c..e612a0417 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.test.js
+++ b/src/components/ErrorBoundary/ErrorBoundary.test.js
@@ -2,6 +2,14 @@ import ErrorBoundary from './ErrorBoundary'
import { mount } from 'enzyme'
import React from 'react'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
const Something = () => null
it('renders children correctly', () => {
diff --git a/src/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.js.snap b/src/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.js.snap
index e3f61f952..fa52c226c 100644
--- a/src/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.js.snap
+++ b/src/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.js.snap
@@ -3,6 +3,7 @@
exports[`renders an error when an error is thrown 1`] = `
-
Already Invited
+ {t('Already Invited')}
{eventInvitations.map(eventInvitation =>
{
})
export function Search ({ onChange }) {
+ const { t } = useTranslation()
return
x && x.focus()}
- placeholder='Search members'
+ placeholder={t('Search members')}
onChange={onChange} />
}
+
+export default EventInviteDialog
diff --git a/src/components/EventInviteDialog/EventInviteDialog.test.js b/src/components/EventInviteDialog/EventInviteDialog.test.js
index 91b54058e..574d9897c 100644
--- a/src/components/EventInviteDialog/EventInviteDialog.test.js
+++ b/src/components/EventInviteDialog/EventInviteDialog.test.js
@@ -2,6 +2,18 @@ import EventInviteDialog, { InviteeRow, Search } from './EventInviteDialog'
import { shallow } from 'enzyme'
import React from 'react'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
describe('EventInviteDialog', () => {
it('renders correctly', () => {
const props = {
diff --git a/src/components/FacebookButton/FacebookButton.js b/src/components/FacebookButton/FacebookButton.js
index 794701a45..134cfd3c0 100644
--- a/src/components/FacebookButton/FacebookButton.js
+++ b/src/components/FacebookButton/FacebookButton.js
@@ -1,4 +1,5 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import cx from 'classnames'
import Icon from 'components/Icon'
import './FacebookButton.scss'
@@ -8,7 +9,8 @@ export default function FacebookButton ({
signUp,
className = ''
}) {
- const label = 'Continue with Facebook'
+ const { t } = useTranslation()
+ const label = t('Continue with Facebook')
return
{ this.setState({ explanation: e.target.value }) }}
placeholder={subtitle} />
-
+
-
Explanation for Flagging
+{t('Explanation for Flagging')}
-
How do we use cookies?
-Hylo login & session
-We use cookies to help understand whether you are logged in and to understand your preferences and where you are in Hylo.
-Mixpanel
-We use a service called Mixpanel to understand how people like you use Hylo. Your identity is anonymized but your behavior is recorded so that we can make improvements to Hylo based on how people are using it.
-Optimizely
-Optimizely helps us to test improvements to Hylo by showing different users different sets of features. Optimizely tracks who has seen what and how successful the feature is in accomplishing it's goal
-Intercom
-When people on Hylo need help or want to report a bug, they are interacting with a service called intercom. Intercom stores cookies in your browser to keep track of conversations with us, the development team.
-Local storage & cache
-We store images, icons and application data in your browser to improve performance and load times.
- +{t('How do we use cookies?')}
+{t('Hylo login & session')}
+{t('We use cookies to help understand whether you are logged in and to understand your preferences and where you are in Hylo.')}
+{t('Mixpanel')}
+{t('We use a service called Mixpanel to understand how people like you use Hylo. Your identity is anonymized but your behavior is recorded so that we can make improvements to Hylo based on how people are using it.')}
+{t('Optimizely')}
+{t('Optimizely helps us to test improvements to Hylo by showing different users different sets of features. Optimizely tracks who has seen what and how successful the feature is in accomplishing it\'s goal')}
+{t('Intercom')}
+{t('When people on Hylo need help or want to report a bug, they are interacting with a service called intercom. Intercom stores cookies in your browser to keep track of conversations with us, the development team.')}
+{t('Local storage & cache')}
+{t('We store images, icons and application data in your browser to improve performance and load times.')}
+
- {selectedIcon ?
No icon selected
}
+ {selectedIcon ? {t('No icon selected')}
}
diff --git a/src/components/KeyControlledList/KeyControlledItemList.js b/src/components/KeyControlledList/KeyControlledItemList.js
new file mode 100644
index 000000000..65e76934c
--- /dev/null
+++ b/src/components/KeyControlledList/KeyControlledItemList.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import { withTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import { indexOf, omit } from 'lodash/fp'
+import Icon from 'components/Icon'
+import { accessibilityIcon, visibilityIcon } from 'store/models/Group'
+import KeyControlledList from './KeyControlledList'
+import './KeyControlledItemList.scss'
+
+const { array, func, object, bool, string } = PropTypes
+
+class KeyControlledItemList extends React.Component {
+ static propTypes = {
+ onChange: func.isRequired,
+ items: array,
+ selected: object,
+ tabChooses: bool,
+ theme: object,
+ className: string,
+ renderListItem: func
+ }
+
+ static defaultProps = {
+ theme: {
+ items: null,
+ item: null,
+ 'item-active': null
+ }
+ }
+
+ // this method is called from other components
+ handleKeys = event => {
+ return this.refs.kcl.handleKeys(event)
+ }
+
+ change = (choice, event) => {
+ event.preventDefault()
+ this.props.onChange(choice, event)
+ }
+
+ onChangeExtractingItem = (element, node, event) => {
+ const item = this.props.items[element.ref]
+ this.change(item, event)
+ }
+
+ // FIXME use more standard props e.g. {label, value} instead of {id, name}, or
+ // provide an API for configuring them
+ render () {
+ const { items, selected, theme, tagType } = this.props
+ const selectedIndex = indexOf(selected, items)
+
+ const renderListItem = this.props.renderListItem
+ ? item => this.props.renderListItem({ item, handleChoice: this.change })
+ : item =>
+ this.change(item, event)}>
+
+
+ const listItems = items.map(renderListItem)
+
+ return
+ {item.name}
+
+ {tagType && tagType === 'groups' &&
- {tagType && tagType === 'groups' &&
- this.change(item, event)}>
-
-
- const listItems = items.map(renderListItem)
-
- return {
- Ended: Sun, Nov 29, 2020 at 12:00AM GMT
+ Ended: {{endTime}}
Groups
}
+ {tagType && tagType === 'groups' && {this.props.t('Groups')}
}
-
{this.childrenWithRefs}
- {item.name}
-
- {tagType && tagType === 'groups' && {group?.name} Group Shape
+{group?.name} {t('Group Shape')}
-
)
diff --git a/src/components/Member/Member.js b/src/components/Member/Member.js
index 41b80ce11..d3837eeb8 100644
--- a/src/components/Member/Member.js
+++ b/src/components/Member/Member.js
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types'
import React from 'react'
+import { withTranslation } from 'react-i18next'
import { bgImageStyle } from 'util/index'
import BadgeEmoji from 'components/BadgeEmoji'
import Dropdown from 'components/Dropdown'
@@ -9,11 +10,11 @@ import './Member.scss'
const { object, string, shape } = PropTypes
-export default class Member extends React.Component {
+class Member extends React.Component {
removeOnClick (e, id, name, removeMember) {
e.preventDefault()
- if (window.confirm(`are you sure you want to remove ${name}?`)) {
+ if (window.confirm(this.props.t('are you sure you want to remove {{name}}?', { name }))) {
removeMember(id)
}
}
@@ -25,7 +26,8 @@ export default class Member extends React.Component {
member: { id, name, location, tagline, avatarUrl, skills, moderatedGroupMemberships, groupRoles },
goToPerson,
canModerate,
- removeMember
+ removeMember,
+ t
} = this.props
const badges = (group.id && groupRoles.filter(role => role.groupId === group.id)) || []
@@ -33,16 +35,19 @@ export default class Member extends React.Component {
return (
Native Territories
+{t('Native Territories')}
{displayFeatures.reduce((acc, f) => [...acc,
{f.properties.Name}
], [])}
- {canModerate &&
}
}
+export default withTranslation()(EventBody)
diff --git a/src/components/PostCard/EventBody/EventBody.test.js b/src/components/PostCard/EventBody/EventBody.test.js
index 427d8e6c0..42476a855 100644
--- a/src/components/PostCard/EventBody/EventBody.test.js
+++ b/src/components/PostCard/EventBody/EventBody.test.js
@@ -3,6 +3,14 @@ import { shallow } from 'enzyme'
import EventBody from './EventBody'
import moment from 'moment-timezone'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
describe('EventBody', () => {
it.skip('matches last snapshot', () => {
const event = {
diff --git a/src/components/PostCard/EventRSVP/EventRSVP.js b/src/components/PostCard/EventRSVP/EventRSVP.js
index 8f7d2ea93..550308ad4 100644
--- a/src/components/PostCard/EventRSVP/EventRSVP.js
+++ b/src/components/PostCard/EventRSVP/EventRSVP.js
@@ -1,29 +1,31 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import './EventRSVP.scss'
import DropdownButton from 'components/DropdownButton'
import { RESPONSES } from 'store/models/EventInvitation'
export default function EventRSVP ({ myEventResponse, respondToEvent, position }) {
+ const { t } = useTranslation()
var label
switch (myEventResponse) {
case RESPONSES.YES:
- label = 'Going'
+ label = t('Going')
break
case RESPONSES.INTERESTED:
- label = 'Interested'
+ label = t('Interested')
break
case RESPONSES.NO:
- label = 'Not Going'
+ label = t('Not Going')
break
default:
- label = 'RSVP'
+ label = t('RSVP')
}
const choices = [
- { label: 'Going', value: RESPONSES.YES },
- { label: 'Interested', value: RESPONSES.INTERESTED },
- { label: 'Not Going', value: RESPONSES.NO }
+ { label: t('Going'), value: RESPONSES.YES },
+ { label: t('Interested'), value: RESPONSES.INTERESTED },
+ { label: t('Not Going'), value: RESPONSES.NO }
]
return
{name}
{location}
{creatorIsModerator && (
-
}
+
+export default withTranslation()(MemberSelector)
diff --git a/src/components/MemberSelector/MemberSelector.test.js b/src/components/MemberSelector/MemberSelector.test.js
index 7c21c63fb..812276a3b 100644
--- a/src/components/MemberSelector/MemberSelector.test.js
+++ b/src/components/MemberSelector/MemberSelector.test.js
@@ -2,6 +2,14 @@ import React from 'react'
import { shallow } from 'enzyme'
import MemberSelector, { Suggestion } from './MemberSelector'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
describe('MemberSelector', () => {
const defaultMinProps = {
setMembers: () => {},
diff --git a/src/components/MemberSelector/__snapshots__/MemberSelector.test.js.snap b/src/components/MemberSelector/__snapshots__/MemberSelector.test.js.snap
index 0c35b523f..8a70162a5 100644
--- a/src/components/MemberSelector/__snapshots__/MemberSelector.test.js.snap
+++ b/src/components/MemberSelector/__snapshots__/MemberSelector.test.js.snap
@@ -8,6 +8,7 @@ exports[`MemberSelector renders correctly (with min props) 1`] = `
placeholder="Type persons name..."
renderSuggestion={[Function]}
suggestions={Array []}
+ t={[Function]}
tags={Array []}
theme={Object {}}
/>
diff --git a/src/components/Membership/Membership.js b/src/components/Membership/Membership.js
index 672151cf4..a6adfcf0b 100644
--- a/src/components/Membership/Membership.js
+++ b/src/components/Membership/Membership.js
@@ -1,4 +1,5 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import { groupUrl } from 'util/navigation'
import { DEFAULT_AVATAR } from 'store/models/Group'
import { Link } from 'react-router-dom'
@@ -8,23 +9,24 @@ import './Membership.scss'
export default function Membership ({ membership, index, archive }) {
const { group, hasModeratorRole } = membership
+ const { t } = useTranslation()
const leave = () => {
- if (window.confirm(`Are you sure you want to leave ${group.name}?`)) {
+ if (window.confirm(t('Are you sure you want to leave {{groupName}}?', { groupName: group.name }))) {
archive(group)
}
}
return (
}
-
)
}
diff --git a/src/components/Membership/Membership.test.js b/src/components/Membership/Membership.test.js
index 72d7098ee..eab6b6e11 100644
--- a/src/components/Membership/Membership.test.js
+++ b/src/components/Membership/Membership.test.js
@@ -2,6 +2,18 @@ import React from 'react'
import { shallow } from 'enzyme'
import Membership from './Membership'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
describe('Membership', () => {
it('matches last snapshot', () => {
const props = {
diff --git a/src/components/ModalDialog/ModalDialog.js b/src/components/ModalDialog/ModalDialog.js
index c9cc73700..c2013af5b 100644
--- a/src/components/ModalDialog/ModalDialog.js
+++ b/src/components/ModalDialog/ModalDialog.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react'
+import { withTranslation } from 'react-i18next'
import { bool, func, node, string } from 'prop-types'
import { bgImageStyle } from 'util/index'
@@ -7,7 +8,7 @@ import Icon from 'components/Icon'
import './ModalDialog.scss'
-export default class ModalDialog extends Component {
+class ModalDialog extends Component {
static propTypes = {
// Any image in assets (filename or path relative to /assets).
// Will be shown at bottom left of dialog.
@@ -57,7 +58,6 @@ export default class ModalDialog extends Component {
showCancelButton: true,
showSubmitButton: true,
submitButtonIsDisabled: () => false,
- submitButtonText: 'Ok',
useNotificationFormat: false
}
@@ -91,7 +91,7 @@ export default class ModalDialog extends Component {
showCancelButton,
showSubmitButton,
submitButtonIsDisabled,
- submitButtonText,
+ submitButtonText = this.props.t('Ok'),
showModalTitle,
useNotificationFormat,
style
@@ -108,35 +108,47 @@ export default class ModalDialog extends Component {
const innerStyle = { ...backgroundStyle, ...style }
const showControls = showCancelButton || showSubmitButton
- return {hasModeratorRole ? group.moderatorDescriptor : 'Member'}
of
+ {hasModeratorRole ? group.moderatorDescriptor : 'Member'}
of{/* TODO: Translation */}
- { archive && Leave }
+ { archive && {t('Leave')} }
-
@@ -87,7 +88,7 @@ export default class EventBody extends Component {
-
-
- {/* TODO: i18n on tooltip */}
-
+
}
{post.donationsLink && !donationService &&
}
{attachmentType === 'file'
?
- {useNotificationFormat &&
-
+ )
}
}
+export default withTranslation()(ModalDialog)
diff --git a/src/components/ModalDialog/ModalDialog.test.js b/src/components/ModalDialog/ModalDialog.test.js
index 5f25a71b8..8c8e98a85 100644
--- a/src/components/ModalDialog/ModalDialog.test.js
+++ b/src/components/ModalDialog/ModalDialog.test.js
@@ -2,6 +2,14 @@ import React from 'react'
import { shallow } from 'enzyme'
import ModalDialog from './ModalDialog'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
describe('ModalDialog', () => {
let props
diff --git a/src/components/ModalFooter/ModalFooter.js b/src/components/ModalFooter/ModalFooter.js
index 6c2972b0e..611c1a9b7 100644
--- a/src/components/ModalFooter/ModalFooter.js
+++ b/src/components/ModalFooter/ModalFooter.js
@@ -1,14 +1,17 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import './ModalFooter.scss'
export default function ModalFooter ({ previous, submit, continueText, showPrevious = true }) {
+ const { t } = useTranslation()
+
return - {modalTitle} -
} + return ( +
+
-
+
+
-
-
+ {useNotificationFormat &&
+
+
+ + {modalTitle} +
} +
+ {children}
+
+
+ {showControls &&
+
+ {showCancelButton &&
+ }
+ {showSubmitButton &&
+ }
+
}
- {children}
-
-
- {showControls &&
- {showCancelButton && }
- {showSubmitButton && }
-
}
- {showPrevious && Previous}
+ {showPrevious && {t('Previous')}}
{continueText}
or press Enter
+ {t('or press Enter')}
-
}
}
+export default withTranslation()(Pillbox)
diff --git a/src/components/Pillbox/Pillbox.test.js b/src/components/Pillbox/Pillbox.test.js
index d73307301..207e35abf 100644
--- a/src/components/Pillbox/Pillbox.test.js
+++ b/src/components/Pillbox/Pillbox.test.js
@@ -2,6 +2,14 @@ import React from 'react'
import { shallow } from 'enzyme'
import Pillbox from './Pillbox'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
describe('Pillbox', () => {
it('renders', () => {
const wrapper = shallow(CLOSE
+{t('CLOSE')}
{header}
{body}
{secondParagraph &&{secondParagraph}
} diff --git a/src/components/ModalSidebar/ModalSidebar.test.js b/src/components/ModalSidebar/ModalSidebar.test.js index 8ed31ee54..c013c5f26 100644 --- a/src/components/ModalSidebar/ModalSidebar.test.js +++ b/src/components/ModalSidebar/ModalSidebar.test.js @@ -2,6 +2,18 @@ import React from 'react' import { shallow } from 'enzyme' import ModalSidebar from './ModalSidebar' +jest.mock('react-i18next', () => ({ + ...jest.requireActual('react-i18next'), + useTranslation: (domain) => { + return { + t: (str) => str, + i18n: { + changeLanguage: () => new Promise(() => {}) + } + } + } +})) + describe('ModalSidebar', () => { it('renders correctly without a theme', () => { const header = 'header' diff --git a/src/components/NoPosts/index.js b/src/components/NoPosts/index.js index 260327123..9b5830fd1 100644 --- a/src/components/NoPosts/index.js +++ b/src/components/NoPosts/index.js @@ -1,12 +1,19 @@ import React from 'react' +import { useTranslation } from 'react-i18next' import './NoPosts.scss' import { jollyAxolotl } from 'util/assets' -export default ({ message = 'Nothing to see here', className }) => ( -
- 
-
-
-
-)
+const NoPosts = ({ message, className }) => {
+ const { t } = useTranslation()
+ const tMessage = message || t('Nothing to see here')
+ return (
+ -
{message}
+
+
+
+
+ )
+}
+
+export default NoPosts
diff --git a/src/components/NotFound/index.js b/src/components/NotFound/index.js
index 9c57984e4..e3425ca41 100644
--- a/src/components/NotFound/index.js
+++ b/src/components/NotFound/index.js
@@ -1,14 +1,17 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import connector from './NotFound.connector'
import './NotFound.scss'
function NotFound ({ goBack, className }) {
+ const { t } = useTranslation()
+
return (
+
{tMessage}
-
)
}
diff --git a/src/components/PeopleTyping/PeopleTyping.js b/src/components/PeopleTyping/PeopleTyping.js
index 8430c6400..4eb763178 100644
--- a/src/components/PeopleTyping/PeopleTyping.js
+++ b/src/components/PeopleTyping/PeopleTyping.js
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types'
import React from 'react'
+import { withTranslation } from 'react-i18next'
import { each, values } from 'lodash'
import './PeopleTyping.scss'
const { string, object } = PropTypes
@@ -7,7 +8,7 @@ const { string, object } = PropTypes
// the amount to delay before deciding that someone is no longer typing
const MAX_TYPING_PAUSE = 5000
-export default class PeopleTyping extends React.Component {
+class PeopleTyping extends React.Component {
componentDidMount () {
if (window) {
this.interval = setInterval(this.resetTyping.bind(this), 500)
@@ -30,9 +31,9 @@ export default class PeopleTyping extends React.Component {
const names = values(peopleTyping).map(v => v.name)
return Oops, there's nothing to see here.
- Go back +{t('Oops, there\'s nothing to see here.')}
+ {t('Go back')} - 404 Not Found + {t('404 Not Found')}
{names.length === 1 &&
}
@@ -41,3 +42,5 @@ PeopleTyping.propTypes = {
className: string,
peopleTyping: object
}
+
+export default withTranslation()(PeopleTyping)
diff --git a/src/components/PeopleTyping/PeopleTyping.test.js b/src/components/PeopleTyping/PeopleTyping.test.js
index 191583588..0881bdd94 100644
--- a/src/components/PeopleTyping/PeopleTyping.test.js
+++ b/src/components/PeopleTyping/PeopleTyping.test.js
@@ -2,6 +2,14 @@ import PeopleTyping from './PeopleTyping'
import { shallow } from 'enzyme'
import React from 'react'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
it('does something', () => {
shallow(
- {names[0]} is typing...
+ {names[0]} {this.props.t('is typing...')}
}
- {names.length > 1 && Multiple people are typing...
}
+ {names.length > 1 && {this.props.t('Multiple people are typing...')}
}
{numAttachments > 1
- ?
@@ -75,10 +76,10 @@ export default class EventBody extends Component {
excludePersonId={get('id', currentUser)}
onClick={togglePeopleDialog}
phrases={{
- emptyMessage: 'No one is attending yet',
- phraseSingular: 'is attending',
- mePhraseSingular: 'are attending',
- pluralPhrase: 'attending'
+ emptyMessage: t('No one is attending yet'),
+ phraseSingular: t('is attending'),
+ mePhraseSingular: t('are attending'),
+ pluralPhrase: t('attending')
}}
/>
{numAttachments} attachments
+ ? {numAttachments} {t('attachments')}
: ' '
}
@@ -133,7 +134,7 @@ export default function PostBigGridItem (props) {
: ' '}
{post.type === 'event' &&
}
-
}
diff --git a/src/components/PostCard/EventBody/EventBody.js b/src/components/PostCard/EventBody/EventBody.js
index e0164b376..839fa9c59 100644
--- a/src/components/PostCard/EventBody/EventBody.js
+++ b/src/components/PostCard/EventBody/EventBody.js
@@ -1,6 +1,7 @@
import cx from 'classnames'
import { get, filter } from 'lodash/fp'
import React, { Component } from 'react'
+import { withTranslation } from 'react-i18next'
import { TextHelpers } from 'hylo-shared'
import Button from 'components/Button'
import EmojiRow from 'components/EmojiRow'
@@ -14,7 +15,7 @@ import PeopleInfo from 'components/PostCard/PeopleInfo'
import { RESPONSES } from 'store/models/EventInvitation'
import '../PostBody/PostBody.scss'
-export default class EventBody extends Component {
+class EventBody extends Component {
state = {
showInviteDialog: false
}
@@ -22,7 +23,7 @@ export default class EventBody extends Component {
toggleInviteDialog = () => this.setState({ showInviteDialog: !this.state.showInviteDialog })
render () {
- const { currentUser, event, respondToEvent, slug, expanded, className, constrained, onClick, togglePeopleDialog } = this.props
+ const { currentUser, event, respondToEvent, slug, expanded, className, constrained, onClick, togglePeopleDialog, t } = this.props
const { showInviteDialog } = this.state
const { id, startTime, endTime, location, eventInvitations, groups } = event
@@ -42,7 +43,7 @@ export default class EventBody extends Component {
Can you go?
+ {t('Can you go?')}
diff --git a/src/components/PostCard/EventRSVP/EventRSVP.test.js b/src/components/PostCard/EventRSVP/EventRSVP.test.js
index a619b0752..11a61b3ac 100644
--- a/src/components/PostCard/EventRSVP/EventRSVP.test.js
+++ b/src/components/PostCard/EventRSVP/EventRSVP.test.js
@@ -3,6 +3,18 @@ import EventRSVP from './EventRSVP'
import { RESPONSES } from 'store/models/EventInvitation'
import { shallow } from 'enzyme'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
it('renders correctly with YES response', () => {
const props = {
myEventResponse: RESPONSES.YES
diff --git a/src/components/PostCard/PeopleInfo/PeopleInfo.js b/src/components/PostCard/PeopleInfo/PeopleInfo.js
index cd443a486..15251fe14 100644
--- a/src/components/PostCard/PeopleInfo/PeopleInfo.js
+++ b/src/components/PostCard/PeopleInfo/PeopleInfo.js
@@ -1,6 +1,7 @@
import cx from 'classnames'
import { find, sortBy } from 'lodash/fp'
import React from 'react'
+import { useTranslation } from 'react-i18next'
import RoundImageRow from 'components/RoundImageRow'
@@ -12,27 +13,33 @@ export default function PeopleInfo ({
people,
peopleTotal,
excludePersonId,
- phrases = {
- emptyMessage: 'Be the first to comment',
- phraseSingular: 'commented',
- mePhraseSingular: 'commented',
- pluralPhrase: 'commented'
- },
+ phrases,
onClick,
small,
tiny
}) {
+ const { t } = useTranslation()
+
+ const defaultPhrases = {
+ emptyMessage: t('Be the first to comment'),
+ phraseSingular: t('commented'),
+ mePhraseSingular: t('commented'),
+ pluralPhrase: t('commented')
+ }
+
+ const mergedPhrases = { ...defaultPhrases, ...phrases }
+
const currentUserIsMember = find(c => c.id === excludePersonId, people)
const sortedPeople = currentUserIsMember && people.length === 2
? sortBy(c => c.id !== excludePersonId, people) // me first
: sortBy(c => c.id === excludePersonId, people) // me last
- const firstName = person => person.id === excludePersonId ? 'You' : person.name.split(' ')[0]
+ const firstName = person => person.id === excludePersonId ? t('You') : person.name.split(' ')[0]
const {
emptyMessage,
phraseSingular,
mePhraseSingular,
pluralPhrase
- } = phrases
+ } = mergedPhrases
let names = ''
let phrase = pluralPhrase
@@ -45,9 +52,9 @@ export default function PeopleInfo ({
phrase = currentUserIsMember ? mePhraseSingular : phraseSingular
names = firstName(sortedPeople[0])
} else if (sortedPeople.length === 2) {
- names = `${firstName(sortedPeople[0])} and ${firstName(sortedPeople[1])}`
+ names = t('{{personOne}} and {{personTwo}}', { personOne: firstName(sortedPeople[0]), personTwo: firstName(sortedPeople[1]) })
} else {
- names = `${firstName(sortedPeople[0])}, ${firstName(sortedPeople[1])} and ${peopleTotal - 2} other${peopleTotal - 2 > 1 ? 's' : ''}`
+ names = `${firstName(sortedPeople[0])}, ${firstName(sortedPeople[1])} and ${peopleTotal - 2} other${peopleTotal - 2 > 1 ? 's' : ''}`// TODO: Handle this translation i18n
}
caption = `${names} ${phrase}`
avatarUrls = people.map(p => p.avatarUrl)
diff --git a/src/components/PostCard/PostCard.js b/src/components/PostCard/PostCard.js
index d87843b5c..b70989903 100644
--- a/src/components/PostCard/PostCard.js
+++ b/src/components/PostCard/PostCard.js
@@ -2,6 +2,7 @@ import cx from 'classnames'
import { get } from 'lodash/fp'
import React, { useCallback, useEffect, useRef } from 'react'
import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
import CardImageAttachments from 'components/CardImageAttachments'
import Icon from 'components/Icon'
import { POST_PROP_TYPES } from 'store/models/Post'
@@ -33,7 +34,7 @@ export default function PostCard (props) {
} = props
const postCardRef = forwardedRef || useRef()
-
+ const { t } = useTranslation()
// TODO: dupe of clickcatcher?
const shouldShowDetails = useCallback(element => {
if (element === postCardRef) return true
@@ -71,8 +72,7 @@ export default function PostCard (props) {
- Started: Tue, Nov 29, 2022 at 12:00AM / Ends: Thu, Nov 29, 2029 at 12:00AM GMT
+ Started: {{from}} / Ends: {{endTime}}
({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
beforeEach(() => {
timezoneMock.register('US/Pacific')
})
diff --git a/src/components/PostCard/PostCompletion/PostCompletion.js b/src/components/PostCard/PostCompletion/PostCompletion.js
index 547e8a8ae..fe9877f10 100644
--- a/src/components/PostCard/PostCompletion/PostCompletion.js
+++ b/src/components/PostCard/PostCompletion/PostCompletion.js
@@ -1,34 +1,36 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import './PostCompletion.scss'
import DropdownButton from 'components/DropdownButton'
-const promptOptions = {
- request: 'Is this request still needed?',
- offer: 'Is this offer still available?',
- resource: 'Is this resource still available?',
- project: 'Is this project still active?'
-}
+export default function PostCompletion ({ type, startTime, endTime, isFulfilled, fulfillPost, unfulfillPost }) {
+ const { t } = useTranslation()
-const messages = {
- request: [
- { label: 'This is still needed', value: false },
- { label: 'No longer needed', value: true }
- ],
- offer: [
- { label: 'Available', value: false },
- { label: 'Unavailable', value: true }
- ],
- resource: [
- { label: 'Available', value: false },
- { label: 'Unavailable', value: true }
- ],
- project: [
- { label: 'Active', value: false },
- { label: 'Completed', value: true }
- ]
-}
+ const promptOptions = {
+ request: t('Is this request still needed?'),
+ offer: t('Is this offer still available?'),
+ resource: t('Is this resource still available?'),
+ project: t('Is this project still active?')
+ }
-export default function PostCompletion ({ type, startTime, endTime, isFulfilled, fulfillPost, unfulfillPost }) {
+ const messages = {
+ request: [
+ { label: t('This is still needed'), value: false },
+ { label: t('No longer needed'), value: true }
+ ],
+ offer: [
+ { label: t('Available'), value: false },
+ { label: t('Unavailable'), value: true }
+ ],
+ resource: [
+ { label: t('Available'), value: false },
+ { label: t('Unavailable'), value: true }
+ ],
+ project: [
+ { label: t('Active'), value: false },
+ { label: t('Completed'), value: true }
+ ]
+ }
const label = messages[type].find(choice => choice.value === !!isFulfilled).label
const prompt = promptOptions[type]
diff --git a/src/components/PostCard/PostCompletion/PostCompletion.test.js b/src/components/PostCard/PostCompletion/PostCompletion.test.js
index 4756c0447..af5c6d095 100644
--- a/src/components/PostCard/PostCompletion/PostCompletion.test.js
+++ b/src/components/PostCard/PostCompletion/PostCompletion.test.js
@@ -2,6 +2,18 @@ import React from 'react'
import PostCompletion from './PostCompletion'
import { shallow } from 'enzyme'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
it('renders correctly if fulfilled', () => {
const props = {
isFulfilled: true,
diff --git a/src/components/PostCard/PostFooter/PostFooter.js b/src/components/PostCard/PostFooter/PostFooter.js
index cac9d85e2..4c1753281 100644
--- a/src/components/PostCard/PostFooter/PostFooter.js
+++ b/src/components/PostCard/PostFooter/PostFooter.js
@@ -1,14 +1,15 @@
+import React from 'react'
+import { withTranslation } from 'react-i18next'
import cx from 'classnames'
import { get } from 'lodash/fp'
import PropTypes from 'prop-types'
-import React from 'react'
import PeopleInfo from '../PeopleInfo'
import Tooltip from 'components/Tooltip'
import { CURRENT_USER_PROP_TYPES } from 'store/models/Me'
import './PostFooter.scss'
-export default class PostFooter extends React.PureComponent {
+class PostFooter extends React.PureComponent {
static propTypes= {
currentUser: PropTypes.shape(CURRENT_USER_PROP_TYPES),
commenters: PropTypes.array,
@@ -39,3 +40,5 @@ export default class PostFooter extends React.PureComponent {
)
}
}
+
+export default withTranslation()(PostFooter)
diff --git a/src/components/PostCard/PostFooter/PostFooter.test.js b/src/components/PostCard/PostFooter/PostFooter.test.js
index abb5e103e..1191dfbbb 100644
--- a/src/components/PostCard/PostFooter/PostFooter.test.js
+++ b/src/components/PostCard/PostFooter/PostFooter.test.js
@@ -2,6 +2,14 @@ import PostFooter from './PostFooter'
import { shallow } from 'enzyme'
import React from 'react'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
const commenters = [
{ name: 'Joe Smith', id: '1', avatarUrl: '' },
{ name: 'Sue Jones', id: '2', avatarUrl: '' },
diff --git a/src/components/PostCard/PostGroups/PostGroups.js b/src/components/PostCard/PostGroups/PostGroups.js
index c5e6795b1..5da1ebad8 100644
--- a/src/components/PostCard/PostGroups/PostGroups.js
+++ b/src/components/PostCard/PostGroups/PostGroups.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react'
+import { useTranslation, withTranslation } from 'react-i18next'
import { get, isEmpty } from 'lodash/fp'
import cx from 'classnames'
import { Link } from 'react-router-dom'
@@ -7,7 +8,7 @@ import GroupsList from 'components/GroupsList'
import Icon from 'components/Icon'
import './PostGroups.scss'
-export default class PostGroups extends Component {
+class PostGroups extends Component {
static defaultState = {
expanded: false
}
@@ -24,7 +25,7 @@ export default class PostGroups extends Component {
}
render () {
- const { groups, constrained, slug, showBottomBorder } = this.props
+ const { groups, constrained, slug, showBottomBorder, t } = this.props
const { expanded } = this.state
// don't show if there are no groups or this isn't cross posted
@@ -32,9 +33,9 @@ export default class PostGroups extends Component {
return
@@ -43,7 +44,7 @@ export default class PostGroups extends Component {
}
}
-export function LinkedGroupNameList ({ groups, maxShown = 2, expandFunc }) {
+export function LinkedGroupNameList ({ groups, maxShown = 2, expandFunc, t }) {
const groupsToDisplay = (maxShown && maxShown <= groups.length)
? groups.slice(0, maxShown)
: groups
@@ -52,7 +53,7 @@ export function LinkedGroupNameList ({ groups, maxShown = 2, expandFunc }) {
return
{groupsToDisplay.map((group, i) =>
- )}
{othersCount > 0 &&
- and
+ {t('and')}
{phrase}
}
+
+export default withTranslation()(PostGroups)
diff --git a/src/components/PostCard/PostGroups/PostGroups.test.js b/src/components/PostCard/PostGroups/PostGroups.test.js
index fcefc1e52..6604ce406 100644
--- a/src/components/PostCard/PostGroups/PostGroups.test.js
+++ b/src/components/PostCard/PostGroups/PostGroups.test.js
@@ -2,6 +2,14 @@ import React from 'react'
import PostGroups from './PostGroups'
import { shallow } from 'enzyme'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
describe('PostGroups', () => {
it('matches last snapshot', () => {
const props = {
diff --git a/src/components/PostCard/PostGroups/__snapshots__/PostGroups.test.js.snap b/src/components/PostCard/PostGroups/__snapshots__/PostGroups.test.js.snap
index 688e3427b..a01ab1d02 100644
--- a/src/components/PostCard/PostGroups/__snapshots__/PostGroups.test.js.snap
+++ b/src/components/PostCard/PostGroups/__snapshots__/PostGroups.test.js.snap
@@ -10,7 +10,7 @@ exports[`PostGroups matches last snapshot 1`] = `
- Posted In:
+ Posted In:
{pinned &&
)
}
+
+export default withTranslation()(PostHeader)
diff --git a/src/components/PostCard/PostHeader/PostHeader.test.js b/src/components/PostCard/PostHeader/PostHeader.test.js
index 7811c4b57..93d34a824 100644
--- a/src/components/PostCard/PostHeader/PostHeader.test.js
+++ b/src/components/PostCard/PostHeader/PostHeader.test.js
@@ -2,6 +2,14 @@ import PostHeader, { TopicsLine } from './PostHeader'
import { shallow } from 'enzyme'
import React from 'react'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
it('matches snapshot', () => {
const creator = {
name: 'JJ',
diff --git a/src/components/PostCard/PostHeader/__snapshots__/PostHeader.test.js.snap b/src/components/PostCard/PostHeader/__snapshots__/PostHeader.test.js.snap
index b66c663e4..89152798b 100644
--- a/src/components/PostCard/PostHeader/__snapshots__/PostHeader.test.js.snap
+++ b/src/components/PostCard/PostHeader/__snapshots__/PostHeader.test.js.snap
@@ -94,6 +94,12 @@ exports[`matches announcement snapshot 1`] = `
"label": "Copy Link",
"onClick": [Function],
},
+ Object {
+ "icon": "Trash",
+ "label": "Delete",
+ "onClick": [Function],
+ "red": true,
+ },
]
}
toggleChildren={
@@ -196,6 +202,12 @@ exports[`matches announcement snapshot 2`] = `
"label": "Copy Link",
"onClick": [Function],
},
+ Object {
+ "icon": "Trash",
+ "label": "Delete",
+ "onClick": [Function],
+ "red": true,
+ },
]
}
toggleChildren={
@@ -389,6 +401,12 @@ exports[`matches snapshot 1`] = `
"label": "Copy Link",
"onClick": [Function],
},
+ Object {
+ "icon": "Trash",
+ "label": "Delete",
+ "onClick": [Function],
+ "red": true,
+ },
]
}
toggleChildren={
@@ -473,6 +491,12 @@ exports[`matches snapshot 2`] = `
"label": "Copy Link",
"onClick": [Function],
},
+ Object {
+ "icon": "Trash",
+ "label": "Delete",
+ "onClick": [Function],
+ "red": true,
+ },
]
}
toggleChildren={
@@ -652,6 +676,12 @@ exports[`renders human readable dates 1`] = `
"label": "Copy Link",
"onClick": [Function],
},
+ Object {
+ "icon": "Trash",
+ "label": "Delete",
+ "onClick": [Function],
+ "red": true,
+ },
]
}
toggleChildren={
@@ -669,7 +699,7 @@ exports[`renders human readable dates 1`] = `
- Started: Sun, Nov 29, 2020 at 12:00AM / Ends: Thu, Nov 29, 2029 at 12:00AM GMT
+ Started: {{from}} / Ends: {{endTime}}
-
-
-
{featured && (
- Featured: This video will be full-width, displayed above the description, and playable.
+ {t('Featured:')} {t('This video will be full-width, displayed above the description, and playable.')}
)}
diff --git a/src/components/PostEditor/PostEditor.js b/src/components/PostEditor/PostEditor.js
index 2fa5d3c01..910bde5dc 100644
--- a/src/components/PostEditor/PostEditor.js
+++ b/src/components/PostEditor/PostEditor.js
@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
import React from 'react'
import ReactTooltip from 'react-tooltip'
+import { withTranslation } from 'react-i18next'
import { debounce, get, isEqual } from 'lodash/fp'
import cx from 'classnames'
import Moment from 'moment-timezone'
@@ -28,9 +29,7 @@ import { sanitizeURL } from 'util/url'
export const MAX_TITLE_LENGTH = 50
-const donationsLinkPlaceholder = 'Add a donation link (must be valid URL)'
-const projectManagementLinkPlaceholder = 'Add a project management link (must be valid URL)'
-export default class PostEditor extends React.Component {
+class PostEditor extends React.Component {
static propTypes = {
context: PropTypes.string,
clearLinkPreview: PropTypes.func,
@@ -38,7 +37,6 @@ export default class PostEditor extends React.Component {
createPost: PropTypes.func,
currentUser: PropTypes.object,
currentGroup: PropTypes.object,
- detailsPlaceholder: PropTypes.string,
editing: PropTypes.bool,
goToPost: PropTypes.func,
linkPreviewStatus: PropTypes.string,
@@ -48,30 +46,12 @@ export default class PostEditor extends React.Component {
post: PropTypes.shape(POST_PROP_TYPES),
removeLinkPreview: PropTypes.func,
setIsDirty: PropTypes.func,
- titlePlaceholderForPostType: PropTypes.object,
updatePost: PropTypes.func,
fetchLocation: PropTypes.func,
ensureLocationIdIfCoordinate: PropTypes.func
}
static defaultProps = {
- titlePlaceholderForPostType: {
- offer: 'What help can you offer?',
- request: 'What are you looking for help with?',
- resource: 'What resource is available?',
- project: 'What would you like to call your project?',
- event: 'What is your event called?',
- default: 'What’s on your mind?'
- },
- // XXX: right now we can't change these for post types otherwise changing post type will reset the HyloEditor content
- detailPlaceholderForPostType: {
- offer: 'Add a description',
- request: 'Add a description',
- resource: 'Add a description',
- project: 'Add a description',
- event: 'Add a description',
- default: 'Add a description'
- },
post: {
type: 'discussion',
title: '',
@@ -91,7 +71,8 @@ export default class PostEditor extends React.Component {
post,
topic,
announcementSelected,
- postType
+ postType,
+ t
}) => {
const defaultPostWithGroupsAndTopic = Object.assign(
{},
@@ -131,6 +112,15 @@ export default class PostEditor extends React.Component {
constructor (props) {
super(props)
+ const { t } = this.props
+ // Dynamic strings that need to be invoked somewhere
+ t('Quick topic-based chats')
+ t('Talk about whats important with others')
+ t('What can people help you with?')
+ t('What do you have for others?')
+ t('Let people know about available resources')
+ t('Create a project that people can help with')
+ t('Invite people to your event')
this.state = this.buildStateFromProps(props)
this.titleInputRef = React.createRef()
@@ -192,23 +182,42 @@ export default class PostEditor extends React.Component {
}
titlePlaceholderForPostType (type) {
- const { titlePlaceholderForPostType } = this.props
+ const { t } = this.props
+
+ const titlePlaceHolders = {
+ offer: t('What help can you offer?'),
+ request: t('What are you looking for help with?'),
+ resource: t('What resource is available?'),
+ project: t('What would you like to call your project?'),
+ event: t('What is your event called?'),
+ default: t('What’s on your mind?')
+ }
+
return (
- titlePlaceholderForPostType[type] ||
- titlePlaceholderForPostType.default
+ titlePlaceHolders[type] ||
+ titlePlaceHolders.default
)
}
detailPlaceholderForPostType (type) {
- const { detailPlaceholderForPostType } = this.props
+ const { t } = this.props
+ // XXX: right now we can't change these for post types otherwise changing post type will reset the HyloEditor content and lose content
+ const detailPlaceHolders = {
+ offer: t('Add a description'),
+ request: t('Add a description'),
+ resource: t('Add a description'),
+ project: t('Add a description'),
+ event: t('Add a description'),
+ default: t('Add a description')
+ }
return (
- detailPlaceholderForPostType[type] ||
- detailPlaceholderForPostType.default
+ detailPlaceHolders[type] ||
+ detailPlaceHolders.default
)
}
postTypeButtonProps = (forPostType) => {
- const { loading } = this.props
+ const { loading, t } = this.props
const { type } = this.state.post
const active = type === forPostType
const className = cx(
@@ -222,10 +231,10 @@ export default class PostEditor extends React.Component {
const label = active
? (
- {forPostType}{' '}
+ {t(forPostType)}{' '}
@@ -630,7 +643,7 @@ export default class PostEditor extends React.Component {
maxLength={MAX_TITLE_LENGTH}
/>
{titleLengthError && (
- {`Title can't have more than ${MAX_TITLE_LENGTH} characters`}
+ {t('Title can\'t have more than {{maxTitleLength}} characters', { maxTitleLength: MAX_TITLE_LENGTH })}
)}
{isProject && (
-
)}
Project Members
+ {t('Project Members')}
-
Topics
+ {t('Topics')}
-
Post in
+ {t('Post in')}
-
)}
{isProject && (
Timeframe
+ {t('Timeframe')}
To
+ {t('To')}
-
)}
{isEvent && (
Location
+ {t('Location')}
-
-
@@ -788,17 +801,17 @@ export default class PostEditor extends React.Component {
'accept-contributions-help'
)}
>
- To accept financial contributions for this project, you have
- to connect a Stripe account. Go to{' '}
- Settings to set it up.
- (Remember to save your changes before leaving this form)
+ {t(`To accept financial contributions for this project, you have
+ to connect a Stripe account. Go to`)}
+ {t('Settings')}{' '}{t('to set it up.')}
+ {t('(Remember to save your changes before leaving this form)')}
)}
Invite People
+ {t('Invite People')}
Accept Contributions
+ {t('Accept Contributions')}
{hasStripeAccount && (
{!acceptContributions && (
- If you turn 'Accept Contributions' on, people will be able
+ {t(`If you turn 'Accept Contributions' on, people will be able
to send money to your Stripe connected account to support
- this project.
+ this project.`)}
)}
-
Donation Link
+ {t('Donation Link')}
-
Project Management
+ {t('Project Management')}
)
}
+
+export default withTranslation()(PostEditor)
diff --git a/src/components/PostEditor/PostEditor.test.js b/src/components/PostEditor/PostEditor.test.js
index 0e26ec963..e96599ee2 100644
--- a/src/components/PostEditor/PostEditor.test.js
+++ b/src/components/PostEditor/PostEditor.test.js
@@ -8,6 +8,14 @@ jest.mock('lodash/debounce', () => fn => {
return fn
})
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ withTranslation: () => Component => {
+ Component.defaultProps = { ...Component.defaultProps, t: (str) => str }
+ return Component
+ }
+}))
+
describe('PostEditor', () => {
const baseProps = {}
@@ -29,22 +37,11 @@ describe('PostEditor', () => {
const props = {
...baseProps,
initialPrompt: 'a test prompt',
- titlePlaceholderForPostType: {
- default: 'a test title placeholder'
- },
- detailsPlaceholder: 'details placeholder'
}
const wrapper = shallow(
- If you turn 'Accept Contributions' on, people will be able to send money to your Stripe connected account to support this project.
+ If you turn 'Accept Contributions' on, people will be able
+ to send money to your Stripe connected account to support
+ this project.
@@ -2352,14 +2365,15 @@ exports[`PostEditor renders with min props 1`] = `
- {/* TODO: i18n on tooltip */}
{
const numOtherCommentors = commentersTotal - 1
const unread = false
const startTimeMoment = Moment(post.startTime)
+ const { t } = useTranslation()
return (
}
{customViewType === 'stream'
- ?
+ {currentUserHasMemberships && context !== CONTEXT_MY && (
@@ -61,7 +63,7 @@ const PostListRow = (props) => {
}
@@ -69,10 +71,9 @@ const PostListRow = (props) => {
{childPost &&
- {/* TODO: i18n on tooltip */}
-
`;
diff --git a/src/components/SkillsToLearnSection/SkillsToLearnSection.js b/src/components/SkillsToLearnSection/SkillsToLearnSection.js
index 357b5d44a..9e73e689f 100644
--- a/src/components/SkillsToLearnSection/SkillsToLearnSection.js
+++ b/src/components/SkillsToLearnSection/SkillsToLearnSection.js
@@ -1,4 +1,10 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import SkillsSection from '../SkillsSection/SkillsSection'
-export default (props) =>
- {/*
- Note: Can make memberDetails optional by adding a `withDetails` flag
- sending in `goToMember` and switchin the onClick on a `MemberRow` to
- go there instead of showing detail and making adding a conditional
- style to make width of members-list be 100% in that case.
- */}
-
diff --git a/src/components/SendAnnouncementModal/SendAnnouncementModal.test.js b/src/components/SendAnnouncementModal/SendAnnouncementModal.test.js
index 3be7003f9..baae4826d 100644
--- a/src/components/SendAnnouncementModal/SendAnnouncementModal.test.js
+++ b/src/components/SendAnnouncementModal/SendAnnouncementModal.test.js
@@ -2,6 +2,18 @@ import SendAnnouncementModal from './SendAnnouncementModal'
import { shallow } from 'enzyme'
import React from 'react'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
it('renders correctly with one group', () => {
const props = {
closeModal: jest.fn(),
diff --git a/src/components/SendAnnouncementModal/__snapshots__/SendAnnouncementModal.test.js.snap b/src/components/SendAnnouncementModal/__snapshots__/SendAnnouncementModal.test.js.snap
index c32f3f0cc..9158bea84 100644
--- a/src/components/SendAnnouncementModal/__snapshots__/SendAnnouncementModal.test.js.snap
+++ b/src/components/SendAnnouncementModal/__snapshots__/SendAnnouncementModal.test.js.snap
@@ -48,8 +48,7 @@ exports[`renders correctly with multiple groups, where the current user is not a
`;
@@ -55,6 +56,7 @@ exports[`shows editable fields when isMe = true 1`] = `
]
}
placeholder="What skills and interests do you have?"
+ t={[Function]}
/>
- {this.props.members.length > 7 &&
- {members.map(member =>
+ return (
+
+
-
+
+ )
}
}
function MemberRow ({ member, selected, onClick }) {
const { name, avatarUrl, response } = member
- return
+ {/*
+ Note: Can make memberDetails optional by adding a `withDetails` flag
+ sending in `goToMember` and switchin the onClick on a `MemberRow` to
+ go there instead of showing detail and making adding a conditional
+ style to make width of members-list be 100% in that case.
+ */}
+
- {selectedMember &&
+ {this.props.members.length > 7 &&
+ {members.map(member =>
+
+ {selectedMember &&
-
}
diff --git a/src/components/PublicToggle/PublicToggle.js b/src/components/PublicToggle/PublicToggle.js
index 2cd49081c..c2f752f01 100644
--- a/src/components/PublicToggle/PublicToggle.js
+++ b/src/components/PublicToggle/PublicToggle.js
@@ -1,12 +1,13 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
+import { withTranslation } from 'react-i18next'
import cx from 'classnames'
import SwitchStyled from 'components/SwitchStyled'
import Icon from 'components/Icon'
import './PublicToggle.scss'
const { func, bool } = PropTypes
-export default class PublicToggle extends Component {
+class PublicToggle extends Component {
static propTypes = {
isPublic: bool,
togglePublic: func
@@ -17,16 +18,17 @@ export default class PublicToggle extends Component {
}
render () {
- const { isPublic, togglePublic } = this.props
+ const { isPublic, togglePublic, t } = this.props
return (
)
}
}
+export default withTranslation()(PublicToggle)
diff --git a/src/components/RemovableListItem/RemovableListItem.js b/src/components/RemovableListItem/RemovableListItem.js
index 7ad09b891..828687c30 100644
--- a/src/components/RemovableListItem/RemovableListItem.js
+++ b/src/components/RemovableListItem/RemovableListItem.js
@@ -1,14 +1,16 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { DEFAULT_AVATAR } from 'store/models/Group'
import RoundImage from 'components/RoundImage'
import './RemovableListItem.scss'
export default function RemovableListItem ({ item, removeItem, skipConfirm = false, square, size, confirmMessage, url }) {
+ const { t } = useTranslation()
const remove = () => {
if (skipConfirm) return removeItem(item.id)
- confirmMessage = confirmMessage || `Are you sure you want to remove ${item.name}?`
+ confirmMessage = confirmMessage || t('Are you sure you want to remove {{item.name}}?', { item })
if (window.confirm(confirmMessage)) {
removeItem(item.id)
}
@@ -26,6 +28,6 @@ export default function RemovableListItem ({ item, removeItem, skipConfirm = fal
{url && {title}}
{!url && {title}}
- {removeItem && Remove}
+ {removeItem && {t('Remove')}}
}
diff --git a/src/components/RemovableListItem/RemovableListItem.test.js b/src/components/RemovableListItem/RemovableListItem.test.js
index bfed5a884..cf9fe45e0 100644
--- a/src/components/RemovableListItem/RemovableListItem.test.js
+++ b/src/components/RemovableListItem/RemovableListItem.test.js
@@ -2,6 +2,18 @@ import RemovableListItem from './RemovableListItem'
import { shallow } from 'enzyme'
import React from 'react'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
describe('RemovableListItem', () => {
it('renders correctly', () => {
const item = {
diff --git a/src/components/RemovableListItem/__snapshots__/RemovableListItem.test.js.snap b/src/components/RemovableListItem/__snapshots__/RemovableListItem.test.js.snap
index d57679b72..fb80cf56b 100644
--- a/src/components/RemovableListItem/__snapshots__/RemovableListItem.test.js.snap
+++ b/src/components/RemovableListItem/__snapshots__/RemovableListItem.test.js.snap
@@ -13,6 +13,7 @@ exports[`RemovableListItem does not render as links when no URL specified 1`] =
Zeus
@@ -63,6 +64,7 @@ exports[`RemovableListItem renders correctly 1`] = `
Zeus
diff --git a/src/components/SendAnnouncementModal/SendAnnouncementModal.js b/src/components/SendAnnouncementModal/SendAnnouncementModal.js
index bd98c95e1..50e31c195 100644
--- a/src/components/SendAnnouncementModal/SendAnnouncementModal.js
+++ b/src/components/SendAnnouncementModal/SendAnnouncementModal.js
@@ -1,4 +1,5 @@
import React from 'react'
+import { useTranslation } from 'react-i18next'
import './SendAnnouncementModal.scss'
import Button from '../Button'
@@ -12,26 +13,27 @@ export default function SendAnnouncementModal ({
const groupIds = groups.map(c => c.id)
const groupModIds = myModeratedGroups.map(c => c.id)
const canModerateAllGroups = groupIds.every(val => groupModIds.indexOf(val) >= 0)
+ const { t } = useTranslation()
return
-
-
-
- {name}
+ return (
+
+ )
}
function MemberDetail ({ member, currentGroup }) {
- return
+
- {response &&
+
+
+
+ {name}
+
+ {response &&
+ {humanResponse(response)}
+
}
- {humanResponse(response)}
-
}
-
-
+ return (
+
+
+ )
}
+
+export default withTranslation()(PostPeopleDialog)
diff --git a/src/components/PostSelector/PostSelector.js b/src/components/PostSelector/PostSelector.js
index d76d2758e..3ab38aef8 100644
--- a/src/components/PostSelector/PostSelector.js
+++ b/src/components/PostSelector/PostSelector.js
@@ -1,6 +1,7 @@
import update from 'immutability-helper'
import { isEmpty } from 'lodash'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
import useInView from 'react-cool-inview'
import { useDrag, useDrop } from 'react-dnd'
import { useDispatch, useSelector } from 'react-redux'
@@ -24,6 +25,7 @@ export default function PostSelector ({ collection, draggable, group, onRemovePo
const [selectedPosts, setSelectedPosts] = useState(posts || [])
const [suggestionsOpen, setSuggestionsOpen] = useState(false)
const searchBoxRef = useRef()
+ const { t } = useTranslation()
const debouncedAutcomplete = useDebounce(autocomplete, 300)
@@ -82,7 +84,7 @@ export default function PostSelector ({ collection, draggable, group, onRemovePo
}
const handleDelete = (post, index) => () => {
- if (window.confirm('Remove post?')) {
+ if (window.confirm(t('Remove post?'))) {
setSelectedPosts((prevPosts) => {
onRemovePost(post)
return update(prevPosts, {
@@ -142,7 +144,7 @@ export default function PostSelector ({ collection, draggable, group, onRemovePo
handleInputChange(event.target.value)}
onFocus={() => setSuggestionsOpen(true)}
@@ -171,6 +173,7 @@ export default function PostSelector ({ collection, draggable, group, onRemovePo
export function SelectedPost ({ draggable, post, index, movePost, handleDelete }) {
const ref = useRef(null)
+ const { t } = useTranslation()
const [{ handlerId }, drop] = useDrop({ // eslint-disable-line no-unused-vars
accept: 'post',
@@ -235,7 +238,7 @@ export function SelectedPost ({ draggable, post, index, movePost, handleDelete }
return
-
-
MAKE AN ANNOUNCEMENT
+{t('MAKE AN ANNOUNCEMENT')}
{groupCount === 1 && canModerateAllGroups && -This means that all members of this group will receive an instant email and push notification about this Post. (This feature is available to moderators only.)
+{t('This means that all members of this group will receive an instant email and push notification about this Post. (This feature is available to moderators only.')}
} {groupCount > 1 && canModerateAllGroups && -This means that all members of the {groupCount} groups selected will receive instant email and push notifications about this Post. (This feature is available to moderators only.)
+{t('This means that all members of the {{groupCount}} groups selected will receive instant email and push notifications about this Post. (This feature is available to moderators only.', { groupCount })}
} {!canModerateAllGroups && -This means that all members of the {groupCount} groups selected will receive an instant email and push notification about this Post.
-This will only be sent as an Announcement to the groups where you are a Moderator. For other groups it will be shared as a regular Post.
+{t('This means that all members of the {{groupCount}} groups selected will receive an instant email and push notification about this Post.', { groupCount })}
+{t('This will only be sent as an Announcement to the groups where you are a Moderator. For other groups it will be shared as a regular Post.')}
} - - + +- This means that all members of the - groups selected will receive an instant email and push notification about this Post. + This means that all members of the {{groupCount}} groups selected will receive an instant email and push notification about this Post.
} } +export default withTranslation()(SkillsSection) diff --git a/src/components/SkillsSection/SkillsSection.test.js b/src/components/SkillsSection/SkillsSection.test.js index 07ea328d7..56ee84a57 100644 --- a/src/components/SkillsSection/SkillsSection.test.js +++ b/src/components/SkillsSection/SkillsSection.test.js @@ -2,6 +2,14 @@ import SkillsSection from './SkillsSection' import { shallow } from 'enzyme' import React from 'react' +jest.mock('react-i18next', () => ({ + ...jest.requireActual('react-i18next'), + withTranslation: () => Component => { + Component.defaultProps = { ...Component.defaultProps, t: (str) => str } + return Component + } +})) + it('shows basic pills', () => { const skills = [{ id: 1, name: 'test' }, { id: 2, name: 'unclickable' }] diff --git a/src/components/SkillsSection/__snapshots__/SkillsSection.test.js.snap b/src/components/SkillsSection/__snapshots__/SkillsSection.test.js.snap index a48e6b409..32704eb23 100644 --- a/src/components/SkillsSection/__snapshots__/SkillsSection.test.js.snap +++ b/src/components/SkillsSection/__snapshots__/SkillsSection.test.js.snap @@ -25,6 +25,7 @@ exports[`shows basic pills 1`] = ` ] } placeholder="What skills and interests do you have?" + t={[Function]} />
{numCustomFilters} Filters
+ ? {numCustomFilters} {t('Filters')}
: customViewType === 'collection'
- ? Collection
+ ? {t('Collection')}
: ''}
{subtitle &&
@@ -86,18 +94,50 @@ export default function StreamBanner ({
filtered by topics:
}
+ {customViewTopics.length > 0 && customViewTopics.map(t => #{t.name})}
+
+ : ''
+ )
+ }}
+ />)}
- {currentUserHasMemberships && context !== CONTEXT_MY && (filtered by topics:
}
+ {customPostTypes.length === 0 ? t('None') : customPostTypes.map((p, i) => {t('filtered by topics:')}
}
{customViewTopics.length > 0 && customViewTopics.map(t => #{t.name})}
: ''
)
}}
- />)}
+ />}
)
}
-export function postPromptString (type = '', { firstName }) {
- const postPrompts = {
- event: `Hi ${firstName}, want to create an event?`,
- offer: `Hi ${firstName}, what would you like to share?`,
- request: `Hi ${firstName}, what are you looking for?`,
- project: `Hi ${firstName}, what would you like to create?`,
- resource: `Hi ${firstName}, what resource is available?`,
- default: `Hi ${firstName}, what's on your mind?`
- }
-
- return postPrompts[type] || postPrompts['default']
-}
-
-export class PostPrompt extends React.Component {
- static defaultProps = {
- firstName: '',
- promptStringFunc: postPromptString,
- querystringParams: {},
- routeParams: {},
- type: ''
+export const PostPrompt = (props) => {
+ const { avatarUrl, className = 'post-prompt', firstName = '', type = '', querystringParams = {}, routeParams = {} } = props
+ const [hover, setHover] = useState(false)
+ const { t } = useTranslation()
+
+ const postPromptString = (type, firstName) => {
+ const postPrompts = {
+ offer: t('Hi {{firstName}}, what would you like to share?', { firstName }),
+ request: t('Hi {{firstName}}, what are you looking for?', { firstName }),
+ project: t('Hi {{firstName}}, what would you like to create?', { firstName }),
+ event: t('Hi {{firstName}}, want to create an event?', { firstName }),
+ default: t('Hi {{firstName}}, what\'s on your mind?', { firstName })
+ }
+ return postPrompts[type] || postPrompts.default
}
- constructor (props) {
- super(props)
- this.state = { hover: false }
- }
-
- onMouseEnterHandler = () => this.setState({ hover: true })
-
- onMouseLeaveHandler = () => this.setState({ hover: false })
-
- render () {
- const { avatarUrl, className, firstName, type, promptStringFunc, querystringParams, routeParams } = this.props
- const { hover } = this.state
-
- return (
-
-
-
- )
- }
+ return (
+
-
-
-
- setHover(true)} onMouseLeave={() => setHover(false)}>
+
+
+ )
}
diff --git a/src/components/StreamBanner/StreamBanner.test.js b/src/components/StreamBanner/StreamBanner.test.js
index 6b50444a5..514ceefe1 100644
--- a/src/components/StreamBanner/StreamBanner.test.js
+++ b/src/components/StreamBanner/StreamBanner.test.js
@@ -1,7 +1,20 @@
import React from 'react'
-import StreamBanner, { postPromptString } from './StreamBanner'
+import StreamBanner, { PostPrompt } from './StreamBanner'
+import { BrowserRouter } from 'react-router-dom'
import { mount } from 'enzyme'
+jest.mock('react-i18next', () => ({
+ ...jest.requireActual('react-i18next'),
+ useTranslation: (domain) => {
+ return {
+ t: (str) => str,
+ i18n: {
+ changeLanguage: () => new Promise(() => {})
+ }
+ }
+ }
+}))
+
const currentUser = {
avatarUrl: 'me.png',
firstName: () => 'Bob',
@@ -46,11 +59,11 @@ it('matches the snapshot for an orphan user', () => {
expect(node).toMatchSnapshot()
})
-describe('postPromptString', () => {
- it('renders a post prompt string', () => {
- const firstName = 'anybody'
+describe('PostPrompt', () => {
+ it('renders a post prompt', () => {
+ const firstName = 'Arturo'
+ const wrapper = mount(
+
+
+
+