Skip to content

Commit

Permalink
Merge pull request #139 from vnma0/global-state
Browse files Browse the repository at this point in the history 
Allow changing languages without reloading
  • Loading branch information
@minhducsun2002
minhducsun2002 authored Apr 21, 2019
2 parents 006727b + 2e29c61 commit 9145c1d
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 49 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@
"@material-ui/core": "^3.7.0",
"@material-ui/icons": "^3.0.1",
"dayjs": "^1.8.8",
"js-cookie": "^2.2.0",
"husky": "^1.3.1",
"js-cookie": "^2.2.0",
"lint-staged": "^8.1.5",
"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-router-dom": "^4.3.1",
"react-scripts": "^2.1.5"
Expand Down
42 changes: 14 additions & 28 deletions src/app/globalStatusBar/userSetting/userSettingDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { Component } from 'react';
import { DialogTitle, DialogContent, Dialog, DialogActions, AppBar, Tabs, Tab } from '@material-ui/core';
import { Button } from '@material-ui/core';

import * as Cookies from 'js-cookie';
import { withGlobalState } from 'react-globally';

import PasswordChangeDialog from './passwordChange/passwordChangeDialog.js';
import LocaleChange from './localeChange/localeChange.js';
Expand All @@ -27,29 +27,21 @@ import LocalizedMessage from 'react-l10n';
class UserSettingDialog extends Component {
constructor(props) {
super(props);

// default to en_US
if (!Cookies.get('language')) Cookies.set('language', 'en_US');

this.state = {
currentTab: 0,
pwdChangeDialogOpen: false,

language: Cookies.get('language')
pwdChangeDialogOpen: false
};

this.requireReload = false;
// some settings require reloading

this.submitOptions = this.submitOptions.bind(this);
}

submitOptions() {
Cookies.set('language', this.state.language);
submitOptions = () => {
localStorage.setItem('language', this.props.globalState.language);
this.props.onClose();
};

if (this.requireReload) window.location.reload();
else this.props.onClose();
}
onClose = () => {
this.props.setGlobalState({ language: localStorage.getItem('language') });
this.props.onClose();
};

render() {
return (
Expand Down Expand Up @@ -106,22 +98,16 @@ class UserSettingDialog extends Component {
<>
<LocaleChange
languages={supportedLanguages}
choice={this.state.language}
choice={this.props.globalState.language}
onChange={(event, arg) => {
this.requireReload = arg !== Cookies.get('language');
this.setState({ language: arg });
this.props.setGlobalState({ language: arg });
}}
/>
{this.requireReload && (
<div style={{ color: 'red', marginTop: 10 }}>
<LocalizedMessage id='globalStatusBar.userSetting.dialog.entry.language.notice' />
</div>
)}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={this.props.onClose}>
<Button onClick={this.onClose}>
<LocalizedMessage id='globalStatusBar.userSetting.dialog.options.cancel' />
</Button>
<Button onClick={this.submitOptions}>
Expand All @@ -144,4 +130,4 @@ class UserSettingDialog extends Component {
}
}

export default UserSettingDialog;
export default withGlobalState(UserSettingDialog);
50 changes: 30 additions & 20 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ import './external/roboto/roboto.css';

import { BrowserRouter as Router, Route } from 'react-router-dom';
import { LocalizationProvider } from 'react-l10n';
import * as Cookies from 'js-cookie';
import { Provider, withGlobalState } from 'react-globally';

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

import GlobalStatusBar from './app/globalStatusBar/globalStatusBar.js'
import Sidenav from './app/sidenav/sidenav.js'
import Homepage from './app/home/homepage.js'
import Submission from './app/submissions/submissionLazyWrapper.js'
import ProblemWrapper from './app/problemList/problemWrapper.js'
import ScoreboardWrapper from './app/scoreboard/scoreboardLazyWrapper'
import Notify from './app/notifier/notify.js'
import { slideIn } from './app/globalStatusBar/lib/libTransition.js'
import GlobalStatusBar from './app/globalStatusBar/globalStatusBar.js';
import Sidenav from './app/sidenav/sidenav.js';
import Homepage from './app/home/homepage.js';
import Submission from './app/submissions/submissionLazyWrapper.js';
import ProblemWrapper from './app/problemList/problemWrapper.js';
import ScoreboardWrapper from './app/scoreboard/scoreboardLazyWrapper';
import Notify from './app/notifier/notify.js';
import { slideIn } from './app/globalStatusBar/lib/libTransition.js';

import SubmissionLauncher from './app/submissions/submissionLauncher.js';
import ProblemLauncher from './app/problemList/problemLauncher.js';
Expand All @@ -27,6 +27,10 @@ import verifyLogin from './app/globalStatusBar/login/stub/credential.js';
import publicParse from './app/globalStatusBar/staticStub/public.js';
import { toggleSidenav } from './app/sidenav/sidenav.js';

const globalState = {
language: localStorage.getItem('language') || 'en_US'
};

class Hestia extends React.Component {
constructor(props) {
super(props);
Expand All @@ -44,12 +48,6 @@ class Hestia extends React.Component {
end: new Date()
}
};
// preparing languages
this.language = Cookies.get('language') || 'en_US';
this.strings =
this.language && translations[this.language]
? { resources: translations[this.language].resources }
: { resources: translations['en_US'].resources };
}

componentWillMount() {
Expand All @@ -71,8 +69,13 @@ class Hestia extends React.Component {
}

render() {
let language = this.props.globalState.language;
let strings =
language && translations[language]
? { resources: translations[language].resources }
: { resources: translations['en_US'].resources };
return (
<LocalizationProvider {...this.strings}>
<LocalizationProvider {...strings}>
<Notify
autoHideDuration={1000}
TransitionComponent={props => slideIn(props, 'left')}
Expand Down Expand Up @@ -126,23 +129,23 @@ class Hestia extends React.Component {
path='/submissions'
render={() => (
<Submission
title={`${this.state.contestName} - ${this.strings.resources.submissions.launcher}`}
title={`${this.state.contestName} - ${strings.resources.submissions.launcher}`}
/>
)}
/>
<Route
path='/problems'
render={() => (
<ProblemWrapper
title={`${this.state.contestName} - ${this.strings.resources.problems.launcher}`}
title={`${this.state.contestName} - ${strings.resources.problems.launcher}`}
/>
)}
/>
<Route
path='/scoreboard'
render={() => (
<ScoreboardWrapper
title={`${this.state.contestName} - ${this.strings.resources.scoreboard.launcher}`}
title={`${this.state.contestName} - ${strings.resources.scoreboard.launcher}`}
/>
)}
/>
Expand All @@ -153,4 +156,11 @@ class Hestia extends React.Component {
}
}

ReactDOM.render(<Hestia />, document.querySelector('#root'));
var HestiaGlobal = withGlobalState(Hestia);

ReactDOM.render(
<Provider globalState={globalState}>
<HestiaGlobal />
</Provider>,
document.querySelector('#root')
);

0 comments on commit 9145c1d

Please sign in to comment.