Pull locale from state, almost get dynamic locales working #7

This commit is contained in:
Alex Gleason 2020-04-28 15:25:10 -05:00
parent ea5643f138
commit c0f17cfc21
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 34 additions and 36 deletions

View File

@ -21,6 +21,8 @@ const defaultSettings = ImmutableMap({
deleteModal: true, deleteModal: true,
defaultPrivacy: 'public', defaultPrivacy: 'public',
theme: 'lime', theme: 'lime',
// locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales
locale: 'en',
systemFont: false, systemFont: false,
dyslexicFont: false, dyslexicFont: false,

View File

@ -24,9 +24,6 @@ import { fetchMe } from 'gabsocial/actions/me';
import PublicLayout from 'gabsocial/features/public_layout'; import PublicLayout from 'gabsocial/features/public_layout';
import { getSettings } from 'gabsocial/actions/settings'; import { getSettings } from 'gabsocial/actions/settings';
const { localeData, messages } = getLocale();
addLocaleData(localeData);
export const store = configureStore(); export const store = configureStore();
const hydrateAction = hydrateStore(initialState); const hydrateAction = hydrateStore(initialState);
@ -50,6 +47,7 @@ const mapStateToProps = (state) => {
systemFont: settings.get('systemFont'), systemFont: settings.get('systemFont'),
dyslexicFont: settings.get('dyslexicFont'), dyslexicFont: settings.get('dyslexicFont'),
demetricator: settings.get('demetricator'), demetricator: settings.get('demetricator'),
locale: settings.get('locale'),
}; };
}; };
@ -64,12 +62,16 @@ class GabSocialMount extends React.PureComponent {
systemFont: PropTypes.bool, systemFont: PropTypes.bool,
dyslexicFont: PropTypes.bool, dyslexicFont: PropTypes.bool,
demetricator: PropTypes.bool, demetricator: PropTypes.bool,
locale: PropTypes.string.isRequired,
}; };
render() { render() {
const { me, theme, reduceMotion, systemFont, dyslexicFont, demetricator } = this.props; const { me, theme, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
if (me === null) return null; if (me === null) return null;
const { localeData, messages } = getLocale();
addLocaleData(localeData);
// Disabling introduction for launch // Disabling introduction for launch
// const { showIntroduction } = this.props; // const { showIntroduction } = this.props;
// //
@ -86,21 +88,24 @@ class GabSocialMount extends React.PureComponent {
}); });
return ( return (
<> <IntlProvider locale={locale} messages={messages}>
<Helmet> <>
<body className={bodyClass} /> <Helmet>
{theme && <link rel='stylesheet' href={`/packs/css/${theme}.chunk.css`} />} <body className={bodyClass} />
</Helmet> <script src={`/packs/js/locale_${locale}.chunk.js`} />
<BrowserRouter> {theme && <link rel='stylesheet' href={`/packs/css/${theme}.chunk.css`} />}
<ScrollContext> </Helmet>
<Switch> <BrowserRouter>
{!me && <Route exact path='/' component={PublicLayout} />} <ScrollContext>
<Route exact path='/about/:slug?' component={PublicLayout} /> <Switch>
<Route path='/' component={UI} /> {!me && <Route exact path='/' component={PublicLayout} />}
</Switch> <Route exact path='/about/:slug?' component={PublicLayout} />
</ScrollContext> <Route path='/' component={UI} />
</BrowserRouter> </Switch>
</> </ScrollContext>
</BrowserRouter>
</>
</IntlProvider>
); );
} }
@ -108,21 +113,13 @@ class GabSocialMount extends React.PureComponent {
export default class GabSocial extends React.PureComponent { export default class GabSocial extends React.PureComponent {
static propTypes = {
locale: PropTypes.string.isRequired,
};
render() { render() {
const { locale } = this.props;
return ( return (
<IntlProvider locale={locale} messages={messages}> <Provider store={store}>
<Provider store={store}> <ErrorBoundary>
<ErrorBoundary> <GabSocialMount />
<GabSocialMount /> </ErrorBoundary>
</ErrorBoundary> </Provider>
</Provider>
</IntlProvider>
); );
} }

View File

@ -22,9 +22,8 @@ function main() {
ready(() => { ready(() => {
const mountNode = document.getElementById('gabsocial'); const mountNode = document.getElementById('gabsocial');
const props = JSON.parse(mountNode.getAttribute('data-props'));
ReactDOM.render(<GabSocial {...props} />, mountNode); ReactDOM.render(<GabSocial />, mountNode);
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
// avoid offline in dev mode because it's harder to debug // avoid offline in dev mode because it's harder to debug
require('offline-plugin/runtime').install(); require('offline-plugin/runtime').install();

View File

@ -7,12 +7,12 @@
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" href="/packs/css/common.css"> <link rel="stylesheet" href="/packs/css/common.css">
<script src="/packs/js/common.js"></script> <script src="/packs/js/common.js"></script>
<script src="/packs/js/locale_en.chunk.js"></script> <script src="/packs/js/locale_en.chunk.js" data-react-helmet="true"></script>
<script src="/packs/js/application.chunk.js"></script> <script src="/packs/js/application.chunk.js"></script>
<link rel="stylesheet" href="/packs/css/lime.chunk.css" data-react-helmet="true"> <link rel="stylesheet" href="/packs/css/lime.chunk.css" data-react-helmet="true">
</head> </head>
<body class="app-body"> <body class="app-body">
<noscript>To use Soapbox, please enable JavaScript.</noscript> <noscript>To use Soapbox, please enable JavaScript.</noscript>
<div class="app-holder" data-props="{&quot;locale&quot;:&quot;en&quot;}" id="gabsocial"></div> <div class="app-holder" id="gabsocial"></div>
</body> </body>
</html> </html>