From 8b419030f702a5f8a6563e1e2def418bf03ef303 Mon Sep 17 00:00:00 2001
From: leaftail1880 <110915645+leaftaul1880@users.noreply.github.com>
Date: Sun, 10 Mar 2024 12:51:45 +0300
Subject: [PATCH] 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 | 4 +-
apps/postybirb-ui/public/uppy-i18n/.gitkeep | 0
.../src/app/app-i18n-provider.tsx | 53 +++++++++++++++++--
apps/postybirb-ui/src/app/languages.tsx | 8 +++
.../shared/uploader/model-uploader.tsx | 5 +-
.../components/shared/uploader/uploader.tsx | 5 +-
apps/postybirb-ui/src/main.tsx | 5 +-
package.json | 4 +-
yarn.lock | 15 ++++++
9 files changed, 86 insertions(+), 13 deletions(-)
create mode 100644 apps/postybirb-ui/public/uppy-i18n/.gitkeep
diff --git a/.gitignore b/.gitignore
index a5fd63f4..bf5bf957 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,5 +40,7 @@ testem.log
.DS_Store
Thumbs.db
+# Public UI dependencies
eui_theme_light.min.css
-eui_theme_dark.min.css
\ No newline at end of file
+eui_theme_dark.min.css
+apps/postybirb-ui/public/uppy-i18n/*.js
\ No newline at end of file
diff --git a/apps/postybirb-ui/public/uppy-i18n/.gitkeep b/apps/postybirb-ui/public/uppy-i18n/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/postybirb-ui/src/app/app-i18n-provider.tsx b/apps/postybirb-ui/src/app/app-i18n-provider.tsx
index 0983e1ab..e22ce582 100644
--- a/apps/postybirb-ui/src/app/app-i18n-provider.tsx
+++ b/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 ;
}
return (
-
-
- {
+
+
+
+ {
+ // eslint-disable-next-line lingui/no-unlocalized-strings
+ }
+ Loading translations...
+
+ {tooLongLoading &&
// eslint-disable-next-line lingui/no-unlocalized-strings
- }
- Loading translations...
+ 'Loading takes too much time, please check console if there is any error.'}
);
}
diff --git a/apps/postybirb-ui/src/app/languages.tsx b/apps/postybirb-ui/src/app/languages.tsx
index b0f67582..c47bedbb 100644
--- a/apps/postybirb-ui/src/app/languages.tsx
+++ b/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;
\ No newline at end of file
diff --git a/apps/postybirb-ui/src/components/shared/uploader/model-uploader.tsx b/apps/postybirb-ui/src/components/shared/uploader/model-uploader.tsx
index 6eb416db..a77c07ba 100644
--- a/apps/postybirb-ui/src/components/shared/uploader/model-uploader.tsx
+++ b/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]);
diff --git a/apps/postybirb-ui/src/components/shared/uploader/uploader.tsx b/apps/postybirb-ui/src/components/shared/uploader/uploader.tsx
index 5a4cfc4b..a72c73fa 100644
--- a/apps/postybirb-ui/src/components/shared/uploader/uploader.tsx
+++ b/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]);
diff --git a/apps/postybirb-ui/src/main.tsx b/apps/postybirb-ui/src/main.tsx
index 6ef749cc..56392109 100644
--- a/apps/postybirb-ui/src/main.tsx
+++ b/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(
-
-
-
+
);
declare global {
diff --git a/package.json b/package.json
index 97887729..f6b0cbd9 100644
--- a/package.json
+++ b/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"
diff --git a/yarn.lock b/yarn.lock
index bc04e6f4..47c014cb 100644
--- a/yarn.lock
+++ b/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"