Support ICU in TS components

2 files changed, 53 insertions, 21 deletions

diff --git a/client/src/app/helpers/i18n-utils.ts b/client/src/app/helpers/i18n-utils.ts
index bbfb12959..2017a31ea 100644
--- a/client/src/app/helpers/i18n-utils.ts
+++ b/client/src/app/helpers/i18n-utils.ts
@@ -1,4 +1,5 @@
 import { environment } from '../../environments/environment'
+import IntlMessageFormat from 'intl-messageformat'
 
 function isOnDevLocale () {
   return environment.production === false && window.location.search === '?lang=fr'
@@ -8,7 +9,31 @@ function getDevLocale () {
   return 'fr-FR'
 }
 
+function prepareIcu (icu: string) {
+  let alreadyWarned = false
+
+  try {
+    const msg = new IntlMessageFormat(icu, $localize.locale)
+
+    return (context: { [id: string]: number | string }, fallback: string) => {
+      try {
+        return msg.format(context) as string
+      } catch (err) {
+        if (!alreadyWarned) console.warn('Cannot format ICU %s.', icu, err)
+
+        alreadyWarned = true
+        return fallback
+      }
+    }
+  } catch (err) {
+    console.warn('Cannot build intl message %s.', icu, err)
+
+    return (_context: unknown, fallback: string) => fallback
+  }
+}
+
 export {
   getDevLocale,
+  prepareIcu,
   isOnDevLocale
 }
diff --git a/client/src/app/helpers/utils/upload.ts b/client/src/app/helpers/utils/upload.ts
index a3fce7fee..5c2600a0d 100644
--- a/client/src/app/helpers/utils/upload.ts
+++ b/client/src/app/helpers/utils/upload.ts
@@ -2,36 +2,43 @@ import { HttpErrorResponse } from '@angular/common/http'
 import { Notifier } from '@app/core'
 import { HttpStatusCode } from '@shared/models'
 
-function genericUploadErrorHandler (parameters: {
+function genericUploadErrorHandler (options: {
   err: Pick<HttpErrorResponse, 'message' | 'status' | 'headers'>
   name: string
   notifier: Notifier
   sticky?: boolean
 }) {
-  const { err, name, notifier, sticky } = { sticky: false, ...parameters }
-  const title = $localize`The upload failed`
-  let message = err.message
-
-  if (err instanceof ErrorEvent) { // network error
-    message = $localize`The connection was interrupted`
-    notifier.error(message, title, null, sticky)
-  } else if (err.status === HttpStatusCode.INTERNAL_SERVER_ERROR_500) {
-    message = $localize`The server encountered an error`
-    notifier.error(message, title, null, sticky)
-  } else if (err.status === HttpStatusCode.REQUEST_TIMEOUT_408) {
-    message = $localize`Your ${name} file couldn't be transferred before the set timeout (usually 10min)`
-    notifier.error(message, title, null, sticky)
-  } else if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) {
-    const maxFileSize = err.headers?.get('X-File-Maximum-Size') || '8G'
-    message = $localize`Your ${name} file was too large (max. size: ${maxFileSize})`
-    notifier.error(message, title, null, sticky)
-  } else {
-    notifier.error(err.message, title)
-  }
+  const { err, name, notifier, sticky = false } = options
+  const title = $localize`Upload failed`
+  const message = buildMessage(name, err)
 
+  notifier.error(message, title, null, sticky)
   return message
 }
 
 export {
   genericUploadErrorHandler
 }
+
+// ---------------------------------------------------------------------------
+
+function buildMessage (name: string, err: Pick<HttpErrorResponse, 'message' | 'status' | 'headers'>) {
+  if (err instanceof ErrorEvent) { // network error
+    return $localize`The connection was interrupted`
+  }
+
+  if (err.status === HttpStatusCode.INTERNAL_SERVER_ERROR_500) {
+    return $localize`The server encountered an error`
+  }
+
+  if (err.status === HttpStatusCode.REQUEST_TIMEOUT_408) {
+    return $localize`Your ${name} file couldn't be transferred before the server proxy timeout`
+  }
+
+  if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) {
+    const maxFileSize = err.headers?.get('X-File-Maximum-Size') || '8G'
+    return $localize`Your ${name} file was too large (max. size: ${maxFileSize})`
+  }
+
+  return err.message
+}