Skip to content

Commit

Permalink
Adding reacti18next
Browse files Browse the repository at this point in the history
  • Loading branch information
damianpm committed Mar 27, 2020
1 parent f5ddca6 commit d23ef52
Show file tree
Hide file tree
Showing 16 changed files with 266 additions and 78 deletions.
8 changes: 7 additions & 1 deletion portafly/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,13 @@
"dotenv-expand": "5.1.0",
"fs-extra": "^8.1.0",
"history": "^4.10.1",
"i18next": "^19.3.3",
"i18next-browser-languagedetector": "^4.0.2",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.6",
"react-async": "^10.0.0",
"react-dom": "^16.12.0",
"react-i18next": "^11.3.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-router-last-location": "^2.0.1",
Expand All @@ -25,6 +28,8 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/i18next": "^13.0.0",
"@types/i18next-browser-languagedetector": "^3.0.0",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
Expand Down Expand Up @@ -126,7 +131,8 @@
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"@src": "<rootDir>/src/root.ts",
"@src/(.*)": "<rootDir>/src/$1",
"@test/(.*)": "<rootDir>/src/tests/$1"
"@test/(.*)": "<rootDir>/src/tests/$1",
"i18next": "<rootDir>/src/tests/__mocks__/reacti18nextMock.js"
},
"moduleFileExtensions": [
"web.js",
Expand Down
74 changes: 11 additions & 63 deletions portafly/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,53 +1,12 @@
import 'react-app-polyfill/ie11'
import { Brand } from '@patternfly/react-core'
import React from 'react'
import { BrowserRouter as Router, Redirect, useHistory } from 'react-router-dom'
import { AppLayout, SwitchWith404, LazyRoute } from 'components'
import { BrowserRouter as Router, Redirect } from 'react-router-dom'
import { SwitchWith404, LazyRoute, Root } from 'components'
import { LastLocationProvider } from 'react-router-last-location'
import logo from 'assets/logo.svg'

const Logo = <Brand src={logo} alt="patternfly logo" />
const navItems = [
{
title: 'Overview',
to: '/',
exact: true
},
{
title: 'Analytics',
to: '/analytics',
items: [
{ to: '/analytics/usage', title: 'Usage' }
]
},
{
title: 'Applications',
to: '/applications',
items: [
{ to: '/applications', title: 'Listing' },
{ to: '/applications/plans', title: 'Application Plans' }
]
},
{
title: 'Integration',
to: '/integration',
items: [
{ to: '/integration/configuration', title: 'Configuration' }
]
}
]

const getOverviewPage = () => import('pages/Overview')
const getApplicationsPage = () => import('pages/Applications')

const App = () => (
<Router>
<LastLocationProvider>
<Root />
</LastLocationProvider>
</Router>
)

const PagesSwitch = () => (
<SwitchWith404>
<LazyRoute path="/" exact getComponent={getOverviewPage} />
Expand All @@ -56,25 +15,14 @@ const PagesSwitch = () => (
</SwitchWith404>
)

const Root = () => {
const history = useHistory()
const logoProps = React.useMemo(
() => ({
onClick: () => history.push('/')
}),
[history]
)
return (
<AppLayout
logo={Logo}
logoProps={logoProps}
navVariant="vertical"
navItems={navItems}
navGroupsStyle="expandable"
>
<PagesSwitch />
</AppLayout>
)
}
const App = () => (
<Router>
<LastLocationProvider>
<Root>
<PagesSwitch />
</Root>
</LastLocationProvider>
</Router>
)

export { App }
62 changes: 62 additions & 0 deletions portafly/src/components/Root.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react'
import { Brand } from '@patternfly/react-core'
import { useTranslation } from 'react-i18next'
import { useHistory } from 'react-router-dom'
import { AppLayout } from 'components'
import logo from 'assets/logo.svg'

const Root: React.FunctionComponent = ({ children }) => {
const { t } = useTranslation('shared')
const Logo = <Brand src={logo} alt={t('logo_alt_text')} />

const navItems = [
{
title: t('nav_items.overview'),
to: '/',
exact: true
},
{
title: t('nav_items.analytics'),
to: '/analytics',
items: [
{ to: '/analytics/usage', title: t('nav_items.analytics_usage') }
]
},
{
title: t('nav_items.applications'),
to: '/applications',
items: [
{ to: '/applications', title: t('nav_items.applications_listing') },
{ to: '/applications/plans', title: t('nav_items.applications_app_plans') }
]
},
{
title: t('nav_items.integration'),
to: '/integration',
items: [
{ to: '/integration/configuration', title: t('nav_items.integration_configuration') }
]
}
]

const history = useHistory()
const logoProps = React.useMemo(
() => ({
onClick: () => history.push('/')
}),
[history]
)
return (
<AppLayout
logo={Logo}
logoProps={logoProps}
navVariant="vertical"
navItems={navItems}
navGroupsStyle="expandable"
>
{children}
</AppLayout>
)
}

export { Root }
1 change: 1 addition & 0 deletions portafly/src/components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ export * from './Loading'
export * from './NotFound'
export * from './SwitchWith404'
export * from './util'
export * from './Root'
40 changes: 40 additions & 0 deletions portafly/src/i18n/i18n.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import i18n, { FormatFunction } from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import { EN } from 'i18n/locales'

const formatFn: FormatFunction = (value, format) => {
if (format === 'uppercase') return value.toUpperCase()
if (format === 'lowercase') return value.toLowerCase()
return value
}

const options = {
lng: 'en',
fallbackLng: ['en'],
debug: false,
interpolation: {
format: formatFn,
escapeValue: false
},
ns: ['shared', 'overview', 'analytics', 'applications', 'integration'],
defaultNS: 'shared',
react: {
transKeepBasicHtmlNodesFor: ['br', 'strong', 'i']
},
resources: {
en: {
shared: EN.SHARED,
overview: EN.OVERVIEW,
analytics: EN.ANALYTICS,
applications: EN.APPLICATIONS,
integration: EN.INTEGRATION
}
}
}

i18n.use(LanguageDetector)
.use(initReactI18next)
.init(options)

export { i18n }
8 changes: 8 additions & 0 deletions portafly/src/i18n/locales/en/analytics.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"page_title": "Analytics | Portafly",
"page_title_desc": "Page title of the Analytics page",
"body_title": "Analytics",
"body_title_desc": "Body title of the Analytics page",
"subtitle": "This is the Analytics page",
"subtitle_desc": "Subtitle of the Analytics page"
}
8 changes: 8 additions & 0 deletions portafly/src/i18n/locales/en/applications.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"page_title": "Applications | Portafly",
"page_title_desc": "Page title of the Applications page",
"body_title": "Applications",
"body_title_desc": "Body title of the Applications page",
"subtitle": "This is the Applications page",
"subtitle_desc": "Subtitle of the Applications page"
}
8 changes: 8 additions & 0 deletions portafly/src/i18n/locales/en/integration.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"page_title": "Integration | Portafly",
"page_title_desc": "Page title of the Integration page",
"body_title": "Integration",
"body_title_desc": "Body title of the Integration page",
"subtitle": "This is the Integration page",
"subtitle_desc": "Subtitle of the Integration page"
}
8 changes: 8 additions & 0 deletions portafly/src/i18n/locales/en/overview.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"page_title": "Overview | Portafly",
"page_title_desc": "Page title of the Overview page",
"body_title": "Overview",
"body_title_desc": "Body title of the Overview page",
"subtitle": "This is the Overview page",
"subtitle_desc": "Subtitle of the Overview page"
}
30 changes: 30 additions & 0 deletions portafly/src/i18n/locales/en/shared.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"logo_alt_text": "Red Hat Integration logo",
"logo_alt_text_desc": "Alt attribute of the main logo",
"nav_items": {
"overview": "Overview",
"overview_desc": "Title of Overview menu item",
"analytics": "Analytics",
"analytics_desc": "Title of Analytics menu item",
"analytics_usage": "Usage",
"analytics_usage_desc": "Title of Analytics > Usage menu item",
"applications": "Applications",
"applications_desc": "Title of Applications menu item",
"applications_listing": "Listing",
"applications_listing_desc": "Title of Applications > Listing menu item",
"applications_app_plans": "Applications Plans",
"applications_app_plans_desc": "Title of Applications > Applications Plans menu item",
"integration": "Integration",
"integration_desc": "Title of Integration menu item",
"integration_configuration": "Configuration",
"integration_configuration_desc": "Title of Integration > Configuration menu item"
},
"navigation_items_desc": "Titles of navigation items",
"format": {
"uppercase": "{{text, uppercase}}",
"uppercase_desc": "Formats a text as uppercase",
"lowercase": "{{text, lowercase}}",
"lowercase_desc": "Formats a text as lowercase"
},
"format_desc": "Utilities to format text"
}
15 changes: 15 additions & 0 deletions portafly/src/i18n/locales/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import shared from 'i18n/locales/en/shared.json'
import overview from 'i18n/locales/en/overview.json'
import analytics from 'i18n/locales/en/analytics.json'
import applications from 'i18n/locales/en/applications.json'
import integration from 'i18n/locales/en/integration.json'

const EN = {
SHARED: shared,
OVERVIEW: overview,
ANALYTICS: analytics,
APPLICATIONS: applications,
INTEGRATION: integration
}

export { EN }
1 change: 1 addition & 0 deletions portafly/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import ReactDOM from 'react-dom'
import '@patternfly/react-core/dist/styles/base.css'
import 'i18n/i18n'
import { App } from 'App'

ReactDOM.render(<App />, document.getElementById('root'))
16 changes: 9 additions & 7 deletions portafly/src/pages/Applications.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useFetch } from 'react-async'
import { useDocumentTitle } from 'components'
import {
Expand All @@ -11,7 +12,8 @@ import {
import { Table, TableHeader, TableBody } from '@patternfly/react-table'

const Applications: React.FunctionComponent = () => {
useDocumentTitle('Applications')
const { t } = useTranslation('applications')
useDocumentTitle(t('page_title'))

const columns = [
'Name',
Expand Down Expand Up @@ -48,22 +50,22 @@ const Applications: React.FunctionComponent = () => {
<>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Applications</Text>
<Text component="h1">{t('body_title')}</Text>
</TextContent>
<TextContent>
<Text component={TextVariants.p}>
This is the applications screen.
{t('subtitle')}
</Text>
</TextContent>
</PageSection>

<PageSection>
{rows
&& (
<Table cells={columns} rows={rows}>
<TableHeader />
<TableBody />
</Table>
<Table cells={columns} rows={rows}>
<TableHeader />
<TableBody />
</Table>
)}
</PageSection>
</>
Expand Down
Loading

0 comments on commit d23ef52

Please sign in to comment.