Skip to content

Commit

Permalink
Migrating from react-l10n to react-i18next
Browse files Browse the repository at this point in the history
  • Loading branch information
@minhducsun2002
minhducsun2002 committed May 6, 2019
1 parent 7fac8d8 commit 74974aa
Show file tree
Hide file tree
Showing 32 changed files with 270 additions and 349 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
"@material-ui/icons": "^3.0.1",
"dayjs": "^1.8.8",
"husky": "^1.3.1",
"i18next": "^15.1.0",
"lint-staged": "^8.1.5",
"notistack": "^0.7.0",
"react": "^16.6.3",
"react-ace": "^6.4.0",
"react-dom": "^16.6.3",
"react-globally": "^1.1.0",
"react-l10n": "^0.3.0",
"react-i18next": "^9.0.10",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.5"
},
Expand Down
31 changes: 15 additions & 16 deletions src/app/globalStatusBar/clock/clock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import AccessTime from '@material-ui/icons/AccessTime';
import timeAgo from '../../../external/timeAgo.js';
import './clock.css';

import LocalizedMessage from 'react-l10n';
import { withNamespaces } from 'react-i18next';

/**
* @name CountdownClock
Expand Down Expand Up @@ -51,31 +51,30 @@ class CountdownClock extends Component {
}

render() {
const { t } = this.props;
return (
<Tooltip
placement='bottom'
title={`${this.props.time.start.toLocaleString()} - ${this.props.time.end.toLocaleString()}`}>
<span>
<Button disabled id='clock' className={this.state.clockStyleClass}>
<Button
disabled
id='clock'
className={this.state.clockStyleClass}
style={{
textTransform: 'none'
}}>
<AccessTime style={{ marginRight: '10px' }} />
{this.state.ended ? (
<LocalizedMessage id='globalStatusBar.clock.ended' />
) : this.state.started ? (
<>
<LocalizedMessage id='globalStatusBar.clock.timeLeft' />
{` : ${this.state.current} / ${this.state.duration}`}
</>
) : (
<>
{`${timeAgo(new Date(), this.props.time.start)} `}
<LocalizedMessage id='globalStatusBar.clock.beforeStart' />
</>
)}
{this.state.ended
? t('globalStatusBar.clock.ended')
: this.state.started
? `${t('globalStatusBar.clock.timeLeft')} : ${this.state.current} / ${this.state.duration}`
: `${timeAgo(new Date(), this.props.time.start)} ${t('globalStatusBar.clock.beforeStart')}`}
</Button>
</span>
</Tooltip>
);
}
}

export default CountdownClock;
export default withNamespaces()(CountdownClock);
59 changes: 0 additions & 59 deletions src/app/globalStatusBar/clock/clock.test.js
View file

This file was deleted.

7 changes: 4 additions & 3 deletions src/app/globalStatusBar/globalStatusBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { Component } from 'react';
import { Toolbar, AppBar, IconButton } from '@material-ui/core';

import Menu from '@material-ui/icons/Menu';
import LocalizedMessage from 'react-l10n';

import ContestSignature from './contestSignature/contestSignature.js';
import CountdownClock from './clock/clock.js';
Expand All @@ -13,6 +12,7 @@ import UserSettingMenu from './userSetting/userSettingMenu.js';
import UserSettingDialog from './userSetting/userSettingDialog.js';

import logout from './userSetting/stub/logout.js';
import { withNamespaces } from 'react-i18next';

/**
* @name GlobalStatusBar
Expand Down Expand Up @@ -103,6 +103,7 @@ class GlobalStatusBar extends Component {
}

render() {
const { t } = this.props;
return (
<>
<AppBar position='sticky'>
Expand All @@ -128,7 +129,7 @@ class GlobalStatusBar extends Component {
loginDialogOpen: true
})
}>
<LocalizedMessage id='globalStatusBar.login.invokingButton' />
{t('globalStatusBar.login.invokingButton')}
</LoginButton>
) : (
<UserSettingButton user={this.props.currentUser} onClick={this.openUserMenu} />
Expand All @@ -153,4 +154,4 @@ class GlobalStatusBar extends Component {
}
}

export default GlobalStatusBar;
export default withNamespaces()(GlobalStatusBar);
34 changes: 12 additions & 22 deletions src/app/globalStatusBar/login/loginDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ import Lock from '@material-ui/icons/Lock';
import { fade } from '../lib/libTransition.js';

import login from './stub/login.js';
import { translations } from '../../../strings/hestia-l10n/l10n-loader.js';

import LocalizedMessage from 'react-l10n';
import { withNamespaces } from 'react-i18next';

/**
* @name LoginDialog
Expand Down Expand Up @@ -46,9 +45,6 @@ class LoginDialog extends Component {
loginInProgress: false,
errorLogin: false
};
this.handleUserIDChange = this.handleUserIDChange.bind(this);
this.handleKeyChange = this.handleKeyChange.bind(this);
this.resolveEnterKey = this.resolveEnterKey.bind(this);
}

resolveEnterKey = event => {
Expand Down Expand Up @@ -77,22 +73,18 @@ class LoginDialog extends Component {
};

render() {
const { t } = this.props;
return (
<Dialog
{...this.props}
disableEscapeKeyDown={this.state.loginInProgress}
disableBackdropClick={this.state.loginInProgress}
// if logging in, no exiting
TransitionComponent={this.props.TransitionComponent ? this.props.TransitionComponent : fade}>
<DialogTitle>
<LocalizedMessage id='globalStatusBar.login.dialog.title' />
</DialogTitle>
<DialogTitle>{t('globalStatusBar.login.dialog.title')}</DialogTitle>

<DialogContent>
<DialogContentText>
<LocalizedMessage id='globalStatusBar.login.dialog.greeting' />
{/* TODO : configurable language */}
</DialogContentText>
<DialogContentText>{t('globalStatusBar.login.dialog.greeting')}</DialogContentText>

<Grid container spacing={16} alignItems='flex-end'>
<Grid item>
Expand All @@ -101,7 +93,7 @@ class LoginDialog extends Component {
<Grid item>
<TextField
autoFocus={true}
label={<LocalizedMessage id='globalStatusBar.login.dialog.usernameHint' />}
label={t('globalStatusBar.login.dialog.usernameHint')}
value={this.state.id}
onChange={this.handleUserIDChange}
fullWidth={true}
Expand All @@ -120,7 +112,7 @@ class LoginDialog extends Component {
</Grid>
<Grid item>
<TextField
label={<LocalizedMessage id='globalStatusBar.login.dialog.passkeyHint' />}
label={t('globalStatusBar.login.dialog.passkeyHint')}
ref={this.state.passkeyRef}
type='password'
onChange={this.handleKeyChange}
Expand All @@ -135,7 +127,7 @@ class LoginDialog extends Component {

<DialogActions>
<Button disabled={this.state.loginInProgress} onClick={this.props.onClose}>
<LocalizedMessage id='globalStatusBar.login.dialog.options.cancel' />
{t('globalStatusBar.login.dialog.options.cancel')}
</Button>
<Button
disabled={this.state.loginInProgress}
Expand All @@ -146,11 +138,9 @@ class LoginDialog extends Component {
});
if (success) window.location.reload();
else
this.props.enqueueSnackbar(
translations[this.props.globalState.language].resources.globalStatusBar.login
.dialog.errorText,
{ variant: 'error' }
);
this.props.enqueueSnackbar(t('globalStatusBar.login.dialog.errorText'), {
variant: 'error'
});
});
// if login finished, hide the loading circle
this.setState({
Expand All @@ -161,7 +151,7 @@ class LoginDialog extends Component {
{this.state.loginInProgress ? (
<CircularProgress size={20} />
) : (
<LocalizedMessage id='globalStatusBar.login.dialog.options.login' />
t('globalStatusBar.login.dialog.options.login')
)}
</Button>
</DialogActions>
Expand All @@ -170,4 +160,4 @@ class LoginDialog extends Component {
}
}

export default withGlobalState(withSnackbar(LoginDialog));
export default withNamespaces()(withGlobalState(withSnackbar(LoginDialog)));
39 changes: 13 additions & 26 deletions src/app/globalStatusBar/userSetting/userSettingDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ import LocaleChange from './localeChange/localeChange.js';
import { fade } from '../lib/libTransition.js';

import { supportedLanguages } from '../../../strings/hestia-l10n/l10n-loader.js';

import LocalizedMessage from 'react-l10n';
import { withNamespaces } from 'react-i18next';

/**
* @name UserSettingDialog
Expand Down Expand Up @@ -40,24 +39,21 @@ class UserSettingDialog extends Component {

onClose = () => {
this.props.setGlobalState({ language: localStorage.getItem('language') });
this.props.i18n.changeLanguage(localStorage.getItem('language'));
this.props.onClose();
};

render() {
const { t } = this.props;
return (
<>
<Dialog
{...this.props}
TransitionComponent={this.props.TransitionComponent ? this.props.TransitionComponent : fade}>
<DialogTitle>
{this.props.user ? (
<>
<LocalizedMessage id='globalStatusBar.userSetting.dialog.title.userPresent' />
{this.props.user}
</>
) : (
<LocalizedMessage id='globalStatusBar.userSetting.dialog.title.userAbsent' />
)}
{this.props.user
? `${t('globalStatusBar.userSetting.dialog.title.userPresent')}${this.props.user}`
: t('globalStatusBar.userSetting.dialog.title.userAbsent')}
</DialogTitle>
<DialogContent>
<AppBar position='static'>
Expand All @@ -66,16 +62,8 @@ class UserSettingDialog extends Component {
fullWidth
onChange={(e, v) => this.setState({ currentTab: v })}>
{/* we only care about the target value, ignore the event passed */}
<Tab
label={
<LocalizedMessage id='globalStatusBar.userSetting.dialog.entry.password.title' />
}
/>
<Tab
label={
<LocalizedMessage id='globalStatusBar.userSetting.dialog.entry.language.title' />
}
/>
<Tab label={t('globalStatusBar.userSetting.dialog.entry.password.title')} />
<Tab label={t('globalStatusBar.userSetting.dialog.entry.language.title')} />
</Tabs>
</AppBar>
{this.state.currentTab === 0 && (
Expand All @@ -90,7 +78,7 @@ class UserSettingDialog extends Component {
pwdChangeDialogOpen: true
})
}>
<LocalizedMessage id='globalStatusBar.userSetting.dialog.entry.password.invokingButton' />
{t('globalStatusBar.userSetting.dialog.entry.password.invokingButton')}
</Button>
</div>
)}
Expand All @@ -101,17 +89,16 @@ class UserSettingDialog extends Component {
choice={this.props.globalState.language}
onChange={(event, arg) => {
this.props.setGlobalState({ language: arg });
this.props.i18n.changeLanguage(arg);
}}
/>
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={this.onClose}>
<LocalizedMessage id='globalStatusBar.userSetting.dialog.options.cancel' />
</Button>
<Button onClick={this.onClose}>{t('globalStatusBar.userSetting.dialog.options.cancel')}</Button>
<Button onClick={this.submitOptions}>
<LocalizedMessage id='globalStatusBar.userSetting.dialog.options.save' />
{t('globalStatusBar.userSetting.dialog.options.save')}
</Button>
</DialogActions>
</Dialog>
Expand All @@ -130,4 +117,4 @@ class UserSettingDialog extends Component {
}
}

export default withGlobalState(UserSettingDialog);
export default withNamespaces()(withGlobalState(UserSettingDialog));

0 comments on commit 74974aa

Please sign in to comment.