From 0333fa51c0d6a9c8dcf579817e9c494c55dd8e5a Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Wed, 20 Jan 2021 12:38:56 -0600
Subject: [PATCH] add developer settings with pseudolocalization

This is currently broken due to https://github.com/Shopify/quilt/pull/1725
---
 src/components/SettingsDrawer.tsx | 10 ++++++++++
 src/index.tsx                     | 12 ++++--------
 src/settings/i18n.ts              | 17 +++++++++++++++++
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src/settings/i18n.ts

diff --git a/src/components/SettingsDrawer.tsx b/src/components/SettingsDrawer.tsx
index 30e482ed..b24da192 100644
--- a/src/components/SettingsDrawer.tsx
+++ b/src/components/SettingsDrawer.tsx
@@ -19,6 +19,7 @@ import { Action, Dispatch } from '../actions';
 import { closeSettings, openAboutDialog } from '../actions/app';
 import { setBoolean } from '../actions/settings';
 import { RootState } from '../reducers';
+import { pseudolocalize } from '../settings/i18n';
 import {
     pybricksBugReportsUrl,
     pybricksGitterUrl,
@@ -206,6 +207,15 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                 <AboutDialog />
                             </ButtonGroup>
                         </FormGroup>
+                        {process.env.NODE_ENV === 'development' && (
+                            <FormGroup label="Developer">
+                                <Switch
+                                    checked={i18n.pseudolocalize !== false}
+                                    onClick={() => pseudolocalize(!i18n.pseudolocalize)}
+                                    label="Pseudolocalize"
+                                />
+                            </FormGroup>
+                        )}
                     </div>
                 </div>
             </Drawer>
diff --git a/src/index.tsx b/src/index.tsx
index ba9e496e..7dc552bc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@
 // Copyright (c) 2020-2021 The Pybricks Authors
 
 import { Classes, ResizeSensor } from '@blueprintjs/core';
-import { I18nContext, I18nManager } from '@shopify/react-i18n';
+import { I18nContext } from '@shopify/react-i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
@@ -17,13 +17,9 @@ import rootReducer from './reducers';
 import reportWebVitals from './reportWebVitals';
 import rootSaga from './sagas';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import { i18nManager } from './settings/i18n';
 
-const i18n = new I18nManager({
-    locale: 'en',
-    onError: (err): void => console.error(err),
-});
-
-const toaster = I18nToaster.create(i18n);
+const toaster = I18nToaster.create(i18nManager);
 
 const sagaMiddleware = createSagaMiddleware({ context: { notification: { toaster } } });
 // TODO: add runtime option or filter - logger affects firmware flash performance
@@ -58,7 +54,7 @@ sagaMiddleware.run(rootSaga);
 ReactDOM.render(
     <React.StrictMode>
         <Provider store={store}>
-            <I18nContext.Provider value={i18n}>
+            <I18nContext.Provider value={i18nManager}>
                 {/* This is a hack for correctly sizing to view height on mobile when not running in fullscreen mode. */}
                 {/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */}
                 <ResizeSensor
diff --git a/src/settings/i18n.ts b/src/settings/i18n.ts
new file mode 100644
index 00000000..2731a64e
--- /dev/null
+++ b/src/settings/i18n.ts
@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020-2021 The Pybricks Authors
+
+import { I18nManager } from '@shopify/react-i18n';
+
+// TODO: add locale setting and use browser preferred language as default
+
+/** The global i18n manager. */
+export const i18nManager = new I18nManager({
+    locale: 'en',
+    onError: (err): void => console.error(err),
+});
+
+/** Enables or disables pseudolocalization for development. */
+export function pseudolocalize(pseudolocalize: boolean): void {
+    i18nManager.update({ ...i18nManager.details, pseudolocalize });
+}