tomasz
/
frontend-frameworks-showcase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding initial version for react i18n.

master
Tomasz Półgrabia 2021-01-02 12:39:13 +01:00
parent 0cbfd7021a
commit f0813fd849
5 changed files with 127 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
frontend-react/src/App.js
View File

@ -5,78 +5,86 @@ import {
Switch, Switch,
Route, Link Route, Link
} from 'react-router-dom'; } from 'react-router-dom';
import {FormattedMessage, IntlProvider} from 'react-intl';
import GlobalContext from './GlobalContext'; import GlobalContext from './GlobalContext';
import PeopleIndex from "./views/People/PeopleIndex"; import PeopleIndex from "./views/People/PeopleIndex";
import PeopleAdd from "./views/People/PeopleAdd"; import PeopleAdd from "./views/People/PeopleAdd";
import PeopleEdit from "./views/People/PeopleEdit"; import PeopleEdit from "./views/People/PeopleEdit";
import {PeopleService} from "./views/People/PeopleService"; import {PeopleService} from "./views/People/PeopleService";
import messages from './locale/messages';
const defaultLocale = 'en';
function App() { function App() {
// this should be read from for example local storage and should be changeable. For now it's fixed.
const currentLocale = 'en';
return ( return (
<GlobalContext.Provider value={{peopleService: new PeopleService()}}> <IntlProvider locale={currentLocale} defaultLocale={defaultLocale} messages={messages[currentLocale]}>
<div> <GlobalContext.Provider value={{peopleService: new PeopleService()}}>
<Router> <div>
<nav className="navbar" role="navigation" aria-label="main navigation"> <Router>
<div className="navbar-brand"> <nav className="navbar" role="navigation" aria-label="main navigation">
<a className="navbar-item" href="/"> <div className="navbar-brand">
<h2 id="logo" className="is-uppercase bold" i18n="app-people-management-limited-label"> <a className="navbar-item" href="/">
PeopleIndex management limited <h2 id="logo" className="is-uppercase bold">
</h2> <FormattedMessage id='app.navbar.banner'/>
</a> </h2>
</a>
<a href="#logo" role="button" className="navbar-burger" aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<Link className="navbar-item" to="/">
Home
</Link>
<Link className="navbar-item" to="/people/add">
Add person
</Link>
<a href="#logo" role="button" className="navbar-burger" aria-label="menu"
aria-expanded="false"
data-target="mainNavbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div> </div>
<div className="navbar-end"> <div id="mainNavbar" className="navbar-menu">
<div className="navbar-item"> <div className="navbar-start">
<div className="buttons"> <Link className="navbar-item" to="/">
<a href="#logo" className="button is-primary"> <FormattedMessage id="app.navbar.home"/>
<strong>Sign up</strong> </Link>
</a>
<a href="#logo" className="button is-light"> <Link className="navbar-item" to="/people/add">
<strong>Log in</strong> <FormattedMessage id="app.navbar.person.add"/>
</a> </Link>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="buttons">
<a href="#logo" className="button is-primary">
<strong><FormattedMessage id="app.navbar.signup"/></strong>
</a>
<a href="#logo" className="button is-light">
<strong><FormattedMessage id="app.navbar.login"/></strong>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </nav>
</nav> <Switch>
<Switch> <Route path="/people/" exact={true}>
<Route path="/people/" exact={true}> <PeopleIndex/>
<PeopleIndex/> </Route>
</Route> <Route path="/people/add" exact={true}>
<Route path="/people/add" exact={true}> <PeopleAdd/>
<PeopleAdd/> </Route>
</Route> <Route path="/people/edit/:personId" exact={true} children={<PeopleEdit/>}/>
<Route path="/people/edit/:personId" exact={true} children={<PeopleEdit/>}/> <Route path="/" exact={true}>
<Route path="/" exact={true}> <PeopleIndex/>
<PeopleIndex/> </Route>
</Route> <Route>
<Route> 404 page
404 page </Route>
</Route> </Switch>
</Switch> </Router>
</Router> </div>
</div> </GlobalContext.Provider>
</GlobalContext.Provider> </IntlProvider>
); );
} }

22
frontend-react/src/locale/en.json Normal file
View File

@ -0,0 +1,22 @@
{
"app.navbar.banner": "People Management Limited",
"app.navbar.home": "Home",
"app.navbar.person.add": "Add person",
"app.navbar.signup": "Sign up",
"app.navbar.login": "Log in",
"people.index.table.id.header": "Id",
"people.index.table.firstName.header": "First name",
"people.index.table.lastName.header": "Last name",
"people.index.table.email.header": "E-mail",
"people.index.table.status.header": "Status",
"people.index.table.status.value.active": "Active",
"people.index.table.status.value.inactive": "Inactive",
"people.form.person.not.available": "Sorry, the person with id {personId} is not available",
"people.form.firstName.label": "First name",
"people.form.lastName.label": "Last name",
"people.form.email.label": "E-mail",
"people.form.status.label": "Status",
"people.form.status.value.active": "Active",
"people.form.status.value.inactive": "Inactive",
"people.form.submit.label": "Submit"
}

7
frontend-react/src/locale/messages.js Normal file
View File

@ -0,0 +1,7 @@
import enMessages from './en.json';
let messages = {
"en": enMessages
};
export default messages;

33
frontend-react/src/views/People/PeopleForm.jsx
View File

@ -3,6 +3,7 @@ import {useHistory} from 'react-router-dom';
import {isValidEmail, validateForm} from "../../utils/validators"; import {isValidEmail, validateForm} from "../../utils/validators";
import GlobalContext from "../../GlobalContext"; import GlobalContext from "../../GlobalContext";
import classNames from 'classnames'; import classNames from 'classnames';
import {useIntl} from "react-intl";
const personValidators = { const personValidators = {
email: [isValidEmail] email: [isValidEmail]
@ -17,6 +18,7 @@ export function PeopleForm(params) {
status: 0 status: 0
}); });
const {formatMessage} = useIntl();
const history = useHistory(); const history = useHistory();
const {peopleService} = useContext(GlobalContext); const {peopleService} = useContext(GlobalContext);
let [errors, setErrors] = useState(validateForm(personValidators, formData)); let [errors, setErrors] = useState(validateForm(personValidators, formData));
@ -83,11 +85,12 @@ export function PeopleForm(params) {
return (loading return (loading
? <div className="loader"/> ? <div className="loader"/>
: (personNotAvailable && personId) : (personNotAvailable && personId)
? <div>Sorry, the person with id {personId} is not available</div> ? <div>{formatMessage({id: 'people.form.person.not.available'}, {personId: personId})}</div>
: <form> : <form>
<div className="field is-horizontal"> <div className="field is-horizontal">
<div className="field-label is-medium"> <div className="field-label is-medium">
<label htmlFor="firstName" className="label">First name</label> <label htmlFor="firstName"
className="label">{formatMessage({id: 'people.form.firstName.label'})}</label>
</div> </div>
<div className="field-body"> <div className="field-body">
<div className="field"> <div className="field">
@ -97,7 +100,7 @@ export function PeopleForm(params) {
name="firstName" name="firstName"
type="text" type="text"
className={classNames("input", {'is-danger': errors.firstName})} className={classNames("input", {'is-danger': errors.firstName})}
placeholder="First name" placeholder={formatMessage({id: 'people.form.firstName.label'})}
value={formData?.firstName} value={formData?.firstName}
onInput={onInputChange} onInput={onInputChange}
/> />
@ -108,7 +111,8 @@ export function PeopleForm(params) {
<div className="field is-horizontal"> <div className="field is-horizontal">
<div className="field-label is-medium"> <div className="field-label is-medium">
<label htmlFor="lastName" className="label">Last name</label> <label htmlFor="lastName"
className="label">{formatMessage({id: 'people.form.lastName.label'})}</label>
</div> </div>
<div className="field-body"> <div className="field-body">
<div className="field"> <div className="field">
@ -118,7 +122,7 @@ export function PeopleForm(params) {
name="lastName" name="lastName"
type="text" type="text"
className={classNames("input", {'is-danger': errors.lastName})} className={classNames("input", {'is-danger': errors.lastName})}
placeholder="Last name" placeholder={formatMessage({id: 'people.form.lastName.label'})}
value={formData?.lastName} value={formData?.lastName}
onInput={onInputChange} onInput={onInputChange}
/> />
@ -129,7 +133,8 @@ export function PeopleForm(params) {
<div className="field is-horizontal"> <div className="field is-horizontal">
<div className="field-label is-medium"> <div className="field-label is-medium">
<label htmlFor="email" className="label">E-mail</label> <label htmlFor="email"
className="label">{formatMessage({id: 'people.form.email.label'})}</label>
</div> </div>
<div className="field-body"> <div className="field-body">
<div className="field"> <div className="field">
@ -139,7 +144,7 @@ export function PeopleForm(params) {
name="email" name="email"
type="text" type="text"
className={classNames("input", {'is-danger': errors.email})} className={classNames("input", {'is-danger': errors.email})}
placeholder="E-mail" placeholder={formatMessage({id: 'people.form.email.label'})}
value={formData?.email} value={formData?.email}
onInput={onInputChange} onInput={onInputChange}
/> />
@ -150,7 +155,8 @@ export function PeopleForm(params) {
<div className="field is-horizontal"> <div className="field is-horizontal">
<div className="field-label is-medium"> <div className="field-label is-medium">
<label htmlFor="status" className="label">Status</label> <label htmlFor="status"
className="label">{formatMessage({id: 'people.form.status.label'})}</label>
</div> </div>
<div className="field-body"> <div className="field-body">
<div className="field"> <div className="field">
@ -162,8 +168,10 @@ export function PeopleForm(params) {
className={classNames("input", {'is-danger': errors.status})} className={classNames("input", {'is-danger': errors.status})}
value={formData?.status} value={formData?.status}
onInput={onInputChange}> onInput={onInputChange}>
<option value="0">Active</option> <option
<option value="1">Inactive</option> value="0">{formatMessage({id: 'people.form.status.value.active'})}</option>
<option
value="1">{formatMessage({id: 'people.form.status.value.inactive'})}</option>
</select> </select>
</div> </div>
</div> </div>
@ -173,9 +181,10 @@ export function PeopleForm(params) {
<div className="field"> <div className="field">
<div className="control"> <div className="control">
<button type="button" className="button is-primary" onClick={() => submitPerson()}>Submit <button type="button" className="button is-primary" onClick={() => submitPerson()}>
{formatMessage({id: 'people.form.submit.label'})}
</button> </button>
</div> </div>
</div> </div>
</form>) </form>)
}; }

17
frontend-react/src/views/People/PeopleIndex.jsx
View File

@ -1,5 +1,6 @@
import "bulma"; import "bulma";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {FormattedMessage, useIntl} from 'react-intl';
import {useHistory} from 'react-router-dom'; import {useHistory} from 'react-router-dom';
import GlobalContext from "../../GlobalContext"; import GlobalContext from "../../GlobalContext";
@ -7,6 +8,8 @@ export default function PeopleIndex() {
const {peopleService} = useContext(GlobalContext); const {peopleService} = useContext(GlobalContext);
const [people, setPeople] = useState([]); const [people, setPeople] = useState([]);
const history = useHistory(); const history = useHistory();
const {formatMessage} = useIntl();
useEffect(() => { useEffect(() => {
peopleService.getAllPeople() peopleService.getAllPeople()
.then(people => { .then(people => {
@ -22,11 +25,11 @@ export default function PeopleIndex() {
<table className="table is-striped is-fullwidth"> <table className="table is-striped is-fullwidth">
<thead> <thead>
<tr> <tr>
<th>Id</th> <th><FormattedMessage id='people.index.table.id.header'/></th>
<th>First name</th> <th><FormattedMessage id='people.index.table.firstName.header'/></th>
<th>Last name</th> <th><FormattedMessage id='people.index.table.lastName.header'/></th>
<th>E-mail</th> <th><FormattedMessage id='people.index.table.email.header'/></th>
<th>Status</th> <th><FormattedMessage id='people.index.table.status.header'/></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -36,7 +39,9 @@ export default function PeopleIndex() {
<td>{it.firstName}</td> <td>{it.firstName}</td>
<td>{it.lastName}</td> <td>{it.lastName}</td>
<td>{it.email}</td> <td>{it.email}</td>
<td>{it.status === 0 ? 'Active' : 'Inactive'}</td> <td>{it.status === 0
? formatMessage({id: 'people.index.table.status.value.active'})
: formatMessage({id: 'people.index.table.status.value.inactive'})}</td>
</tr> </tr>
)} )}
</tbody> </tbody>