Translate components

public/locales/de.json

@@ -1,6 +1,17 @@
 {
   "common": {
-    "options": "Optionen"
+    "options": "Optionen",
+    "or": "oder"
+  },
+  "Components": {
+    "PDF": {
+      "download": "Herunterladen",
+      "failure": "Fehler beim Laden der PDF",
+      "retry": "Erneut Versuchen",
+      "previous": "Vorherige",
+      "jump_to_page": "Spring zu Seite",
+      "next": "Nächste"
+    }
   },
   "Organisms": {
     "Welcome": {
@@ -76,6 +87,19 @@
     "ConfirmDialog": {
       "cancel": "Abbrechen"
     },
+    "Message": {
+      "add_reaction": "Reaktion hinzufügen",
+      "reply": "Antworten",
+      "edit": "Bearbeiten",
+      "read_receipts": "Lesebestätigungen",
+      "view_source": "Quelle ansehen"
+    },
+    "RoomNotification": {
+      "default": "Global",
+      "all_messages": "Alle Nachrichten",
+      "mentions_and_keywords": "Erwähnungen & Schlüsselwörter",
+      "mute": "Stummschalten"
+    },
     "RoomOptions": {
       "title": "Optionen für {{room_name}}",
       "leave": {
@@ -97,5 +121,78 @@
       "settings": "Einstellungen",
       "leave": "Verlassen"
     }
+  },
+  "Templates": {
+    "Auth": {
+      "loading_homeserver_list": "Lade Liste der Homeserver...",
+      "looking_for_homeserver": "Suche nach Homeserver...",
+      "connecting_to_homeserver": "Verbinde mit {{homeserver}}...",
+      "unable_to_connect": "Keine Verbindung möglich. Bitte prüfe deine Eingabe",
+      "username_taken": "Benutzername ist bereits vergeben",
+      "registration_in_progress": "Registrierung in Bearbeitung...",
+      "link_about": "Über",
+      "link_twitter": "Twitter",
+      "link_matrix": "Powered by Matrix",
+      "dont_have_an_account": "Du hast noch keinen Account?",
+      "already_have_an_account": "Du hast bereits einen Account?",
+      "register_link": "Registrieren",
+      "login_link": "Anmelden",
+      "redirecting": "Leite weiter...",
+      "login_in_progress": "Anmeldung in Bearbeitung...",
+      "bad_localpart_error": "Der Benutzername darf nur die Zeichen a-z, 0-9 oder '=_-./' enthalten",
+      "user_id_too_long_error": "Deine Benutzer-ID, einschließlich des Hostnamens, darf nicht mehr als 255 Zeichen lang sein.",
+      "bad_password_error": "Das Kennwort muss mindestens 1 Kleinbuchstaben, 1 Großbuchstaben, 1 Ziffer, 1 Sonderzeichen und 8-127 Zeichen (keine Leerzeichen) enthalten.",
+      "confirm_password_error": "Die Kennwörter stimmen nicht überein",
+      "bad_email_error": "Ungültige E-Mail-Adresse",
+      "invalid_password": "Ungültiges Kennwort",
+      "check_credentials": "Bitte prüfe deine Zugangsdaten",
+      "login_types": {
+        "username": "Benutzername",
+        "email": "E-Mail"
+      },
+      "homeserver_form": {
+        "title": "Homeserver",
+        "header": "Liste der Homeserver"
+      },
+      "login_form": {
+        "title": "Anmeldung",
+        "prompt_email": "E-Mail",
+        "prompt_username": "Benutzername",
+        "prompt_password": "Kennwort",
+        "login_button": "Anmelden"
+      },
+      "register_form": {
+        "title": "Registrierung",
+        "prompt_email_required": "E-Mail (erforderlich)",
+        "prompt_email_optional": "E-Mail",
+        "prompt_username": "Benutzername",
+        "prompt_password": "Kennwort",
+        "prompt_confirm_password": "Kennwort bestätigen",
+        "register_button": "Registrieren"
+      },
+      "terms_and_conditions": {
+        "title": "Den Bedingungen zustimmen",
+        "description": "Um die Registrierung abzuschließen, musst du den Nutzungsbedingungen zustimmen.",
+        "accept": "Ich stimme den <a>Nutzungsbedingungen</a> zu",
+        "submit_button": "Absenden"
+      },
+      "validate_email": {
+        "title": "E-Mail verifizieren",
+        "continue_button": "Fortfahren",
+        "message": "Bitte prüfe dein E-Mail-Postfach <bold>{{email_address}}</bold> und validiere deine E-Mail-Adresse bevor du fortfährst"
+      },
+      "captcha": {
+        "message": "Bitte markiere das folgende Feld um fortzufahren"
+      }
+    },
+    "Client": {
+      "loading_messages": {
+        "default": "Aufwärmen",
+        "message_one": "Beinahe am Ziel...",
+        "message_two": "Sieht aus, als hättest du eine Menge Zeug aufzuwärmen!"
+      },
+      "logout_prompt": "Abmeldung",
+      "clear_cache": "Zwischenspeicher löschen & neuladen"
+    }
   }
 }

public/locales/en.json

@@ -1,6 +1,17 @@
 {
   "common": {
-    "options": "Options"
+    "options": "Options",
+    "or": "Or"
+  },
+  "Components": {
+    "PDF": {
+      "download": "Download",
+      "failure": "Failed to load PDF",
+      "retry": "Retry",
+      "previous": "Previous",
+      "jump_to_page": "Jump To Page",
+      "next": "Next"
+    }
   },
   "Organisms": {
     "Welcome": {
@@ -76,6 +87,19 @@
     "ConfirmDialog": {
       "cancel": "Cancel"
     },
+    "Message": {
+      "add_reaction": "Add reaction",
+      "reply": "Reply",
+      "edit": "Edit",
+      "read_receipts": "Read receipts",
+      "view_source": "View source"
+    },
+    "RoomNotification": {
+      "default": "Global",
+      "all_messages": "All messages",
+      "mentions_and_keywords": "Mentions & Keywords",
+      "mute": "Mute"
+    },
     "RoomOptions": {
       "title": "Options for {{room_name}}",
       "leave": {
@@ -97,5 +121,78 @@
       "settings": "Settings",
       "leave": "Leave"
     }
+  },
+  "Templates": {
+    "Auth": {
+      "loading_homeserver_list": "Loading homeserver list...",
+      "looking_for_homeserver": "Looking for homeserver...",
+      "connecting_to_homeserver": "Connecting to {{homeserver}}...",
+      "unable_to_connect": "Unable to connect. Please check your input",
+      "username_taken": "Username is already taken",
+      "registration_in_progress": "Registration in progress...",
+      "link_about": "About",
+      "link_twitter": "Twitter",
+      "link_matrix": "Powered by Matrix",
+      "dont_have_an_account": "Dont have an account?",
+      "already_have_an_account": "Already have an account?",
+      "register_link": "Register",
+      "login_link": "Login",
+      "redirecting": "Redirecting...",
+      "login_in_progress": "Login in progress...",
+      "bad_localpart_error": "Username can only contain characters a-z, 0-9, or '=_-./'",
+      "user_id_too_long_error": "Your user ID, including the hostname, can't be more than 255 characters long.",
+      "bad_password_error": "Password must contain at least 1 lowercase, 1 uppercase, 1 number, 1 non-alphanumeric character, 8-127 characters with no space.",
+      "confirm_password_error": "Passwords don't match.",
+      "bad_email_error": "Invalid email address",
+      "invalid_password": "Invalid password",
+      "check_credentials": "Please check your credentials",
+      "login_types": {
+        "username": "Username",
+        "email": "Email"
+      },
+      "homeserver_form": {
+        "title": "Homeserver",
+        "header": "Homeserver list"
+      },
+      "login_form": {
+        "title": "Login",
+        "prompt_email": "Email",
+        "prompt_username": "Username",
+        "prompt_password": "Password",
+        "login_button": "Login"
+      },
+      "register_form": {
+        "title": "Register",
+        "prompt_email_required": "Email (Required)",
+        "prompt_email_optional": "Email",
+        "prompt_username": "Username",
+        "prompt_password": "Password",
+        "prompt_confirm_password": "Confirm password",
+        "register_button": "Register"
+      },
+      "terms_and_conditions": {
+        "title": "Agree with terms",
+        "description": "In order to complete registration, you need to agree to the terms and conditions.",
+        "accept": "I accept <a>Terms and Conditions</a>",
+        "submit_button": "Submit"
+      },
+      "validate_email": {
+        "title": "Verify email",
+        "continue_button": "Continue",
+        "message": "Please check your email <bold>{{email_address}}</bold> and validate before continuing further"
+      },
+      "captcha": {
+        "message": "Pleace check the box below to proceed"
+      }
+    },
+    "Client": {
+      "loading_messages": {
+        "default": "Heating up",
+        "message_one": "Almost there...",
+        "message_two": "Looks like you have a lot of stuff to heat up!"
+      },
+      "logout_prompt": "Logout",
+      "clear_cache": "Clear cache & reload"
+    }
   }
 }

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -19,6 +19,7 @@ import {
   as,
   config,
 } from 'folds';
+import { useTranslation } from 'react-i18next';
 import FocusTrap from 'focus-trap-react';
 import FileSaver from 'file-saver';
 import * as css from './PdfViewer.css';
@@ -97,6 +98,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       if (docState.status !== AsyncStatus.Success) return;
       setPageNo((n) => Math.min(n + 1, docState.data.numPages));
     };
+    const { t } = useTranslation();
 
     return (
       <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
@@ -139,15 +141,15 @@ export const PdfViewer = as<'div', PdfViewerProps>(
               radii="300"
               before={<Icon size="50" src={Icons.Download} />}
             >
-              <Text size="B300">Download</Text>
+              <Text size="B300">{t('Components.PDF.download')}</Text>
             </Chip>
           </Box>
         </Header>
         <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="200">
           {isLoading && <Spinner variant="Secondary" size="600" />}
           {isError && (
             <>
-              <Text>Failed to load PDF</Text>
+              <Text>{t('Components.PDF.failure')}</Text>
               <Button
                 variant="Critical"
                 fill="Soft"
@@ -156,7 +158,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
                 before={<Icon src={Icons.Warning} size="50" />}
                 onClick={loadPdfJS}
               >
-                <Text size="B300">Retry</Text>
+                <Text size="B300">{t('Components.PDF.retry')}</Text>
               </Button>
             </>
           )}
@@ -183,7 +185,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
               onClick={handlePrevPage}
               aria-disabled={pageNo <= 1}
             >
-              <Text size="B300">Previous</Text>
+              <Text size="B300">{t('Components.PDF.previous')}</Text>
             </Chip>
             <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
               <PopOut
@@ -220,7 +222,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
                           aria-label="Page Number"
                         />
                         <Button type="submit" size="300" variant="Primary" radii="300">
-                          <Text size="B300">Jump To Page</Text>
+                          <Text size="B300">{t('Components.PDF.jump_to_page')}</Text>
                         </Button>
                       </Box>
                     </Menu>
@@ -247,7 +249,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
               onClick={handleNextPage}
               aria-disabled={pageNo >= docState.data.numPages}
             >
-              <Text size="B300">Next</Text>
+              <Text size="B300">{t('Components.PDF.next')}</Text>
             </Chip>
           </Header>
         )}

src/app/i18n.ts

@@ -25,6 +25,9 @@ i18n
     backend: {
       loadPath: 'public/locales/{{lng}}.json',
     },
+    react: {
+      useSuspense: false,
+    },
   });
 
 export default i18n;

src/app/molecules/room-notification/RoomNotification.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import './RoomNotification.scss';
+import { useTranslation } from 'react-i18next';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -16,19 +17,19 @@ import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
 
 const items = [{
   iconSrc: BellIC,
-  text: 'Global',
+  text: 'Molecules.RoomNotification.default',
   type: cons.notifs.DEFAULT,
 }, {
   iconSrc: BellRingIC,
-  text: 'All messages',
+  text: 'Molecules.RoomNotification.all_messages',
   type: cons.notifs.ALL_MESSAGES,
 }, {
   iconSrc: BellPingIC,
-  text: 'Mentions & Keywords',
+  text: 'Molecules.RoomNotification.mentions_and_keywords',
   type: cons.notifs.MENTIONS_AND_KEYWORDS,
 }, {
   iconSrc: BellOffIC,
-  text: 'Mute',
+  text: 'Molecules.RoomNotification.mute',
   type: cons.notifs.MUTE,
 }];
 
@@ -115,6 +116,7 @@ function useNotifications(roomId) {
 
 function RoomNotification({ roomId }) {
   const [activeType, setNotification] = useNotifications(roomId);
+  const { t } = useTranslation();
 
   return (
     <div className="room-notification">
@@ -127,7 +129,7 @@ function RoomNotification({ roomId }) {
             onClick={() => setNotification(item)}
           >
             <Text varient="b1">
-              <span>{item.text}</span>
+              <span>{t(item.text)}</span>
               <RadioButton isActive={activeType === item.type} />
             </Text>
           </MenuItem>