Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP 48 i18n support #113

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

WIP 48 i18n support #113

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d879145
add deps
vimark1 Nov 16, 2018
7604d19
add nvmrc file
vimark1 Nov 16, 2018
d4ab6e3
initial commit on i18n
vimark1 Nov 16, 2018
a6aa2f8
update package-lock
vimark1 Nov 16, 2018
a4f376b
prettier
vimark1 Nov 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
initial commit on i18n
  • Loading branch information
@vimark1
vimark1 committed Nov 16, 2018
commit d4ab6e3074a9564a4c7035609877480e3972cdce
40 changes: 40 additions & 0 deletions src/i18n.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n.use(LanguageDetector).init({
// we init with resources
resources: {
en: {
translations: {
"LastScore": "Last score",
"SessionsCompleted": "Sessions completed"
}
},
de: {
translations: {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn’t need this parent object structure

"LastScore": "Letzter Punktestand",
"SessionsCompleted": "Sitzungen abgeschlossen"
}
}
},
fallbackLng: "en",
debug: false,

// have a common namespace used around the full app
ns: ["translations"],
defaultNS: "translations",

keySeparator: false, // we use content as keys

interpolation: {
escapeValue: false, // not needed for react!!
formatSeparator: ","
},

react: {
wait: true
}
});

export default i18n;

14 changes: 12 additions & 2 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ import firebaseCred from './firebase-cred.json';
import ga from './ga-cred.json';
import configureStore from './store/configureStore';

import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";

const config = firebaseCred;
const store = configureStore();

Expand All @@ -35,9 +38,11 @@ firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(user => {
user = user || ({} as User);
store.dispatch(userPreferencesFetchRequestAction({ uid: user.uid }));
ReactDOM.render(

const App = () => (
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18n}>
<div>
<Header user={user} />
<Container className="main">
Expand All @@ -51,8 +56,13 @@ firebase.auth().onAuthStateChanged(user => {
</Switch>
</Container>
</div>
</I18nextProvider>
</Provider>
</BrowserRouter>,
</BrowserRouter>
);

ReactDOM.render(
<App />,
document.getElementById('root')
);
});
10 changes: 6 additions & 4 deletions src/pages/TypingTest/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ReactGA from 'react-ga';
import { connect } from 'react-redux';
import words from '../../data/words';
import Text from './components/Text';
import { translate, Trans } from 'react-i18next';

import { User } from 'firebase';

Expand All @@ -12,6 +13,7 @@ import * as actionTypes from '../../actions/actionTypes';
import './style.css';

interface TypingTestProps {
t: (key: string) => string;
user: User;
updateScoreboard: (user: User, score: number) => any;
saveScore: (userId: string, score: number) => any;
Expand Down Expand Up @@ -213,15 +215,15 @@ class TypingTest extends Component<TypingTestProps, TypingTestState> {

render() {
const { letters, index, score, error } = this.state;
const { user, sessionsCompleted } = this.props;
const { t, user, sessionsCompleted } = this.props;
const loggedIn = user && user.uid;

return (
<div className="App">
<Text letters={letters} index={index} />

<p>Last score: {score}</p>
<p>Sessions completed: {sessionsCompleted}</p>
<p>{t('LastScore')}: {score}</p>
<p>{t('SessionsCompleted')}: {sessionsCompleted}</p>

{!loggedIn && <div className="error center">Please log in to save your score!</div>}
{error && <div className="error center">{error}</div>}
Expand Down Expand Up @@ -251,4 +253,4 @@ export const Unwrapped = TypingTest;
export default connect(
mapStateToProps,
mapDispatchToProps
)(TypingTest);
)(translate('translations')(TypingTest));