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,
defaultPrivacy: 'public',
theme: 'lime',
// locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales
locale: 'en',
systemFont: false,
dyslexicFont: false,

View file

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

View file

@ -22,9 +22,8 @@ function main() {
ready(() => {
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') {
// avoid offline in dev mode because it's harder to debug
require('offline-plugin/runtime').install();

View file

@ -7,12 +7,12 @@
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" href="/packs/css/common.css">
<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>
<link rel="stylesheet" href="/packs/css/lime.chunk.css" data-react-helmet="true">
</head>
<body class="app-body">
<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>
</html>