changes the locales structure making english strings as keys

Previously they were stored according to the format
'src/locales/{{lng}}/translation.json'
and after review, they are stored according to the following:
'src/locales/{{lng}}.json'
Also, the english strings are used as the keys/identifier in
translation files to make it easy to understand and implement.

Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
This commit is contained in:
Sudhanshu Gautam 2019-07-04 16:05:25 +05:30
parent 66b4d9a86f
commit 6713303247
7 changed files with 41 additions and 61 deletions

View file

@ -28,10 +28,10 @@ export default function Header() {
return ( return (
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
<Typography edge="start" variant="h6">OpenWrt Firmware Selector Wizard</Typography> <Typography edge="start" variant="h6">{t('OpenWrt Firmware Selector Wizard')}</Typography>
<div style={{flexGrow: 1}}></div> <div style={{flexGrow: 1}}></div>
<Button aria-describedby={id} color="secondary" variant="contained" onClick={openChangeLanguagePopper}> <Button aria-describedby={id} color="secondary" variant="contained" onClick={openChangeLanguagePopper}>
{t('components.changeLanguage')} &nbsp; {t('Change Language')} &nbsp;
<LanguageIcon /> <LanguageIcon />
</Button> </Button>
<Popper <Popper
@ -53,8 +53,8 @@ export default function Header() {
value={value} value={value}
onChange={changeLanguage} onChange={changeLanguage}
> >
<FormControlLabel value="en" control={<Radio />} label="English" /> <FormControlLabel value="en" control={<Radio />} label={t('English')} />
<FormControlLabel value="de" control={<Radio />} label="German" /> <FormControlLabel value="de" control={<Radio />} label={t('German')} />
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Paper> </Paper>

View file

@ -140,17 +140,17 @@ class Home extends React.Component {
<Container className="home-container" onClick={this.toggleSearchIfIntended}> <Container className="home-container" onClick={this.toggleSearchIfIntended}>
<Paper className="home-container-paper"> <Paper className="home-container-paper">
<Typography variant="h5"> <Typography variant="h5">
{this.props.t('appIntro.head')} {this.props.t('Download OpenWrt firmware for your device!')}
</Typography> </Typography>
<Typography> <Typography>
{this.props.t('appIntro.para')} {this.props.t('Please use the input below to download firmware for your device!')}
</Typography> </Typography>
<br /> <br />
<div className="search-container"> <div className="search-container">
<FormControl fullWidth> <FormControl fullWidth>
<SearchTextField <SearchTextField
id="outlined-adornment-search-devices" id="outlined-adornment-search-devices"
labeltext={this.props.t('components.search.label')} labeltext={this.props.t('Search...')}
value={this.state.query} value={this.state.query}
onChange={this.search} onChange={this.search}
onClick={this.search} onClick={this.search}
@ -186,7 +186,7 @@ class Home extends React.Component {
(this.state.searchResults.length === 0 && this.state.showSearch) && ( (this.state.searchResults.length === 0 && this.state.showSearch) && (
<Paper elevation={4} className="search-results"> <Paper elevation={4} className="search-results">
<ListItem> <ListItem>
<ListItemText primary={this.props.t('components.search.noResults')}></ListItemText> <ListItemText primary={this.props.t('No results')}></ListItemText>
</ListItem> </ListItem>
</Paper> </Paper>
) )
@ -196,17 +196,17 @@ class Home extends React.Component {
<table className="device-table"> <table className="device-table">
<tbody> <tbody>
<tr> <tr>
<td>{this.props.t('table.model')}</td> <td>{this.props.t('Model')}</td>
<td>{this.state.device.model}</td> <td>{this.state.device.model}</td>
</tr> </tr>
<tr> <tr>
<td>{this.props.t('table.vendor')}</td> <td>{this.props.t('Vendor')}</td>
<td>{this.state.device.vendor}</td> <td>{this.state.device.vendor}</td>
</tr> </tr>
{ {
this.state.device.variant === null || this.state.device.variant === '' ? '' : ( this.state.device.variant === null || this.state.device.variant === '' ? '' : (
<tr> <tr>
<td>{this.props.t('table.variant')}</td> <td>{this.props.t('Variant')}</td>
<td>{this.state.device.variant}</td> <td>{this.state.device.variant}</td>
</tr> </tr>
) )

View file

@ -1,8 +1,8 @@
import i18n from 'i18next'; import i18n from 'i18next';
import { initReactI18next } from 'react-i18next'; import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector'; import LanguageDetector from 'i18next-browser-languagedetector';
import translationEN from './locales/en/translation.json'; import translationEN from './locales/en.json';
import translationDE from './locales/de/translation.json'; import translationDE from './locales/de.json';
const resources = { const resources = {

14
src/locales/de.json Normal file
View file

@ -0,0 +1,14 @@
{
"English": "Englisch",
"German": "Deutsche",
"Submit": "Einreichen",
"Change Language": "Sprache ändern",
"Search your device": "Suchen Sie Ihr Gerät",
"No results": "Keine Ergebnisse",
"Model": "Modell",
"Vendor": "Verkäufer",
"Variant": "Variante",
"OpenWrt Firmware Selector Wizard": "OpenWrt Firmware Selector Wizard",
"Download OpenWrt firmware for your device!": "Laden Sie die OpenWrt-Firmware für Ihr Gerät herunter!",
"Please use the input below to download firmware for your device!": "Bitte benutzen Sie den unten stehenden Eingang, um die Firmware für Ihr Gerät herunterzuladen!"
}

View file

@ -1,24 +0,0 @@
{
"title": "OpenWrt Firmware Selector Wizard",
"appIntro": {
"head": "Laden Sie die OpenWrt-Firmware für Ihr Gerät herunter!",
"para": "Bitte benutzen Sie den unten stehenden Eingang, um die Firmware für Ihr Gerät herunterzuladen!"
},
"components": {
"submit": "einreichen",
"changeLanguage": "Sprache ändern",
"select": {
"placeholder": "Wählen...",
"noOptions": "Keine Optionen"
},
"search": {
"label": "Suchen Sie Ihr Gerät",
"noResults": "Keine Ergebnisse"
}
},
"table": {
"model": "Modell",
"vendor": "Verkäufer",
"variant": "Variante"
}
}

14
src/locales/en.json Normal file
View file

@ -0,0 +1,14 @@
{
"English": "English",
"German": "German",
"Submit": "Submit",
"Change Language": "Change Language",
"Search your device": "Search your device",
"No results": "No results",
"Model": "Model",
"Vendor": "Vendor",
"Variant": "Variant",
"OpenWrt Firmware Selector Wizard": "OpenWrt Firmware Selector Wizard",
"Download OpenWrt firmware for your device!": "Download OpenWrt firmware for your device!",
"Please use the input below to download firmware for your device!": "Please use the input below to download firmware for your device!"
}

View file

@ -1,24 +0,0 @@
{
"title": "OpenWrt Firmware Selector Wizard",
"appIntro": {
"head": "Download OpenWrt firmware for your device!",
"para": "Please use the input below to download firmware for your device!"
},
"components": {
"submit": "Submit",
"changeLanguage": "Change Language",
"select": {
"placeholder": "Select...",
"noOptions": "No options"
},
"search": {
"label": "Search your device",
"noResults": "No results"
}
},
"table": {
"model": "Model",
"vendor": "Vendor",
"variant": "Variant"
}
}