publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-03 10:24:19 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

End-to-end working localization (#336)

Browse source 
* End-to-end localization working
* Update package.json
* fix FormattedMessage confusion by using the `FormattedMessage` from `gatsby-plugin-intl` NOT `react-intl`
* TODO: `client/src/intl/es.json` should be generated from a translation tool.
* Update package-lock.json
This commit is contained in:
TomNUSDS 2021-07-14 12:05:18 -07:00 • committed by GitHub
commit cfce0dc826
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 523 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

50
client/src/components/J40Header.tsx
View file

@ -10,17 +10,45 @@ import {
} from '@trussworks/react-uswds';
import {Helmet} from 'react-helmet';
import {useFlags} from '../contexts/FlagContext';
import {defineMessages} from 'react-intl';
const J40Header = () => {
const flags = useFlags();
const intl = useIntl();
const title = intl.formatMessage({
id: '71L0pp',
defaultMessage: 'Justice40',
description: 'Title of the project',
});
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const messages = defineMessages({
title: {
id: 'header.title',
defaultMessage: 'Justice40',
description: 'Title in header',
},
about: {
id: 'header.about',
defaultMessage: 'About',
description: 'Navigate to the about page',
},
explore: {
id: 'header.explore',
defaultMessage: 'Explore the tool',
description: 'Navigate to the Explore the tool page',
},
methodology: {
id: 'header.methodology',
defaultMessage: 'Methodology',
description: 'Navigate to the Methodology page',
},
contact: {
id: 'header.contact',
defaultMessage: 'Contact',
description: 'Navigate to the Contact page',
},
timeline: {
id: 'header.timeline',
defaultMessage: 'Timeline',
description: 'Navigate to the Timeline page',
},
});
const title = intl.formatMessage(messages.title);
const toggleMobileNav = (): void =>
setMobileNavOpen((prevOpen) => !prevOpen);
@ -34,31 +62,31 @@ const J40Header = () => {
to={'/'}
key={'about'}
activeClassName="usa-current"
className={'j40-header'}>About</Link>],
className={'j40-header'}>{intl.formatMessage(messages.about)}</Link>],
['cejst',
<Link
to={'/cejst'}
key={'cejst'}
activeClassName="usa-current"
className={'j40-header'}>Explore the tool</Link>],
className={'j40-header'}>{intl.formatMessage(messages.explore)}</Link>],
['methodology',
<Link
to={'/methodology'}
key={'methodology'}
activeClassName="usa-current"
className={'j40-header'}>Methodology</Link>],
className={'j40-header'}>{intl.formatMessage(messages.methodology)}</Link>],
['contact',
<Link
to={'/contact'}
key={'contact'}
activeClassName="usa-current"
className={'j40-header'}>Contact</Link>],
className={'j40-header'}>{intl.formatMessage(messages.contact)}</Link>],
['timeline',
<Link
to={'/timeline'}
key={'timline'}
activeClassName="usa-current"
className={'j40-header'}>Timeline</Link>],
className={'j40-header'}>{intl.formatMessage(messages.timeline)}</Link>],
]);
// select which items from the above map to show, right now it's only two