fix: uppy not opening, i18n for uppy

Disables React.StrictMode because of known issues and incompabilities with external widgets.
May be enabled again for specified parts of the application.

.gitignore

@@ -40,5 +40,7 @@ testem.log
 .DS_Store
 Thumbs.db
 
+# Public UI dependencies
 eui_theme_light.min.css
-eui_theme_dark.min.css
+eui_theme_dark.min.css
+apps/postybirb-ui/public/uppy-i18n/*.js

apps/postybirb-ui/src/app/app-i18n-provider.tsx

@@ -1,8 +1,16 @@
 import { EuiFlexGroup, EuiLoadingSpinner } from '@elastic/eui';
 import { i18n } from '@lingui/core';
 import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
+import { Locale as UppyLocale } from '@uppy/core';
 import { useCallback, useEffect, useState } from 'react';
 import { SettingsStore } from '../stores/settings.store';
+import { uppyLocales } from './languages';
+
+declare module '@lingui/core' {
+  interface I18n {
+    uppy: UppyLocale;
+  }
+}
 
 type AppI18nProviderProps = {
   children: React.ReactNode;
@@ -22,6 +30,26 @@ export function AppI18nProvider(props: AppI18nProviderProps) {
       // eslint-disable-next-line no-param-reassign
       locale = locale ?? 'en';
       const { messages } = await import(`../lang/${locale}.po`);
+
+      const uppyLocale = uppyLocales[locale];
+      try {
+        // Instead of exporting separate variable/hook/context
+        // just set uppy right here, so all components will
+        // receive update on the locale change
+        i18n.uppy = (
+          await import(`../../public/uppy-i18n/${uppyLocale}.js`)
+        ).default;
+      } catch (error) {
+        // Note: instead of not loading i18n for the whole
+        // application, show helpfull error message to the console
+        // eslint-disable-next-line no-console
+        console.error(
+          // eslint-disable-next-line lingui/no-unlocalized-strings
+          `Failed to load uppy locale for ${locale}, mapped: ${uppyLocale}, error:`,
+          error
+        );
+      }
+
       i18n.loadAndActivate({ locale, messages });
       if (!loaded) setLoaded(true);
     },
@@ -34,17 +62,32 @@ export function AppI18nProvider(props: AppI18nProviderProps) {
     });
   }, [setLocale]);
 
+  const [tooLongLoading, setTooLongLoading] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      if (!loaded) {
+        setTooLongLoading(true);
+      }
+    }, 5000);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (loaded) {
     return <LinguiI18nProvider i18n={i18n} {...props} />;
   }
 
   return (
-    <EuiFlexGroup alignItems="center" justifyContent="center">
-      <EuiLoadingSpinner size="xl" />
-      {
+    <EuiFlexGroup justifyContent="center" style={{ alignContent: 'center' }}>
+      <EuiFlexGroup justifyContent="center" alignItems="center">
+        <EuiLoadingSpinner size="xl" />
+        {
+          // eslint-disable-next-line lingui/no-unlocalized-strings
+        }
+        Loading translations...
+      </EuiFlexGroup>
+      {tooLongLoading &&
         // eslint-disable-next-line lingui/no-unlocalized-strings
-      }
-      Loading translations...
+        'Loading takes too much time, please check console if there is any error.'}
     </EuiFlexGroup>
   );
 }

apps/postybirb-ui/src/app/languages.tsx

@@ -5,3 +5,11 @@ export const languages = [
   [msg`Russian`, 'ru'],
   [msg`Spanish`, 'es'],
 ] as const;
+
+// Map of the language codes for the file picker
+// https://uppy.io/docs/locales/#list-of-locales
+export const uppyLocales = {
+  en: 'en_US',
+  ru: 'ru_RU',
+  es: 'es_ES',
+} as Record<string, string>;

apps/postybirb-ui/src/components/shared/uploader/model-uploader.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/require-default-props */
+import { useLingui } from '@lingui/react';
 import { ISubmissionDto } from '@postybirb/types';
 import Compressor from '@uppy/compressor';
 import Uppy from '@uppy/core';
@@ -21,11 +22,13 @@ type UploaderProps = {
 
 export default function ModalUploader(props: UploaderProps) {
   const [theme] = useContext(AppThemeContext);
+  const { i18n } = useLingui();
   const { accept, compress, isOpen, endpointPath, onClose, onComplete } = props;
 
   const uppy = useMemo(() => {
     const u = new Uppy({
       autoProceed: false,
+      locale: i18n.uppy,
       restrictions: {
         maxNumberOfFiles: 1,
         allowedFileTypes: accept,
@@ -82,7 +85,7 @@ export default function ModalUploader(props: UploaderProps) {
 
     return u;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [endpointPath, onComplete, compress]);
+  }, [endpointPath, onComplete, compress, i18n.uppy]);
 
   useEffect(() => () => uppy.close(), [uppy]);
 

apps/postybirb-ui/src/components/shared/uploader/uploader.tsx

@@ -1,3 +1,4 @@
+import { useLingui } from '@lingui/react';
 import Uppy from '@uppy/core';
 import DropTarget from '@uppy/drop-target';
 import ImageEditor from '@uppy/image-editor';
@@ -16,11 +17,13 @@ type UploaderProps = {
 
 export default function Uploader(props: UploaderProps) {
   const [theme] = useContext(AppThemeContext);
+  const { i18n } = useLingui();
   const { endpointPath, onComplete } = props;
 
   const uppy = useMemo(() => {
     const u = new Uppy({
       autoProceed: false,
+      locale: i18n.uppy,
     });
 
     u.use(Webcam)
@@ -65,7 +68,7 @@ export default function Uploader(props: UploaderProps) {
     });
 
     return u;
-  }, [endpointPath, onComplete]);
+  }, [endpointPath, onComplete, i18n.uppy]);
 
   useEffect(() => () => uppy.close(), [uppy]);
 

apps/postybirb-ui/src/main.tsx

@@ -1,5 +1,4 @@
 import { EuiErrorBoundary } from '@elastic/eui';
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import App from './app/app';
@@ -62,9 +61,7 @@ const router = createBrowserRouter([
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <RouterProvider router={router} />
-  </StrictMode>
+  <RouterProvider router={router} />
 );
 
 declare global {

package.json

@@ -39,6 +39,7 @@
     "postinstall": "run-p --continue-on-error postinstall:*",
     "postinstall:deps": "exitzero electron-builder install-app-deps",
     "postinstall:copy-themes": "shx cp node_modules/@elastic/eui/dist/*.min.css apps/postybirb-ui/public",
+    "postinstall:copy-uppy-i18n": "shx cp -r node_modules/@uppy/locales/lib/*[!.map].js apps/postybirb-ui/public/uppy-i18n/",
     "postinstall:patch-package": "patch-package",
     "postinstall:i18n": "lingui extract --clean",
     "setup": "run-s setup:husky",
@@ -76,6 +77,7 @@
     "@uppy/drop-target": "^2.0.1",
     "@uppy/file-input": "^3.0.3",
     "@uppy/image-editor": "^2.1.3",
+    "@uppy/locales": "^3.5.2",
     "@uppy/progress-bar": "^3.0.3",
     "@uppy/react": "^3.1.3",
     "@uppy/webcam": "^3.3.0",
@@ -90,7 +92,6 @@
     "cronstrue": "^2.32.0",
     "document-register-element": "1.13.1",
     "electron-context-menu": "^3.1.1",
-    "tslib": "2.5.2",
     "electron-updater": "^6.1.4",
     "express": "^4.18.2",
     "fastq": "^1.13.0",
@@ -126,6 +127,7 @@
     "socket.io-client": "^4.4.1",
     "tinykeys": "^1.3.0",
     "tinymce": "^6.4.1",
+    "tslib": "2.5.2",
     "type-fest": "^2.19.0",
     "uuid": "^8.3.2",
     "winston": "^3.11.0"

yarn.lock

@@ -5988,6 +5988,13 @@
     "@uppy/utils" "^5.4.3"
     preact "^10.5.13"
 
+"@uppy/locales@^3.5.2":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/@uppy/locales/-/locales-3.5.2.tgz#fa14c92f5edf3d73913323048dbac6fa370ffbc0"
+  integrity sha512-YBOC5ynbgv0OsS++h5mLGGYnEHpTnXmTXLL+IzZdwo5phezCn28rCtkipyZjV3x2U02u3vt6RavsRmPNNZCGxg==
+  dependencies:
+    "@uppy/utils" "^5.7.2"
+
 "@uppy/progress-bar@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@uppy/progress-bar/-/progress-bar-3.0.3.tgz#0f16c274a957322afc4a85827fc37f58a851faa1"
@@ -6053,6 +6060,14 @@
     lodash "^4.17.21"
     preact "^10.5.13"
 
+"@uppy/utils@^5.7.2":
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/@uppy/utils/-/utils-5.7.4.tgz#479c1cd0e6790eb74654212ea128a1a28e392044"
+  integrity sha512-0Xsr7Xqdrb9mgfY3hi0YdhIaAxUw6qJasAflNMwNsyLGt3kH4pLfQHucolBKfWglVGtk1vfb49hZYvJGpcpzYA==
+  dependencies:
+    lodash "^4.17.21"
+    preact "^10.5.13"
+
 "@uppy/webcam@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@uppy/webcam/-/webcam-3.3.0.tgz#74c127940112dc303d4f0c71be4b839461f70c82"