FuelRats · Delota · Feb 18, 2022
diff --git a/qms/frontend/next-env.d.ts b/qms/frontend/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

diff --git a/qms/frontend/package.json b/qms/frontend/package.json
@@ -9,20 +9,23 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@mui/lab": "^5.0.0-alpha.50",
     "@mui/material": "^5.0.3",
+    "@mui/styled-engine": "^5.4.2",
     "@mui/styled-engine-sc": "latest",
-    "@mui/styles": "latest",
+    "@mui/styles": "^5.4.2",
     "@sentry/nextjs": "^6.13.3",
     "@sentry/react": "^6.3.6",
     "@sentry/tracing": "^6.3.6",
     "apollo-server-micro": "^2.24.0",
     "axios": "^0.21.1",
     "graphql": "^15.5.0",
-    "i18next": "^20.2.4",
+    "i18next": "^21",
     "lodash": "^4.17.21",
-    "next": "^11.1.2",
-    "next-i18next": "^8.9.0",
+    "next": "^12",
+    "next-i18next": "^10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.8.15",

diff --git a/qms/frontend/pages/_document.js b/qms/frontend/pages/_document.js
@@ -4,6 +4,33 @@ import { ServerStyleSheet } from "styled-components";
 import theme from "../src/theme";
 
 export default class MyDocument extends Document {
+  // https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
   render() {
     return (
       <Html lang="en">
@@ -23,29 +50,3 @@ export default class MyDocument extends Document {
     );
   }
 }
-
-// https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js
-MyDocument.getInitialProps = async (ctx) => {
-  const sheet = new ServerStyleSheet();
-  const originalRenderPage = ctx.renderPage;
-
-  try {
-    ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
-      });
-
-    const initialProps = await Document.getInitialProps(ctx);
-    return {
-      ...initialProps,
-      styles: (
-        <React.Fragment>
-          {initialProps.styles}
-          {sheet.getStyleElement()}
-        </React.Fragment>
-      ),
-    };
-  } finally {
-    sheet.seal();
-  }
-};
diff --git a/qms/frontend/pages/index.tsx b/qms/frontend/pages/index.tsx
@@ -189,7 +189,7 @@ export default function Home() {
         />
       </Box>
       <Typography component="h1" variant="h5">
-        {t("rescueForm:timer?")}
+        {t<string>("rescueForm:timer")}
       </Typography>
       <RadioGroup
         value={codeRed}
@@ -199,12 +199,12 @@ export default function Home() {
       >
         <FormControlLabel
           control={<Radio />}
-          label={t("common:yes")}
+          label={t<string>("common:yes")}
           value={EmptyBoolean.TRUE}
         />
         <FormControlLabel
           control={<Radio />}
-          label={t("common:no")}
+          label={t<string>("common:no")}
           value={EmptyBoolean.FALSE}
         />
       </RadioGroup>
@@ -213,7 +213,7 @@ export default function Home() {
           <Box my={2}>
             <Alert severity="error">
               <AlertTitle>
-                {t("rescueForm:exitAlert.title").toUpperCase()}
+                {t<string>("rescueForm:exitAlert.title").toUpperCase()}
               </AlertTitle>
               <Trans
                 i18nKey="rescueForm:exitAlert.exitInstructions"
@@ -223,7 +223,7 @@ export default function Home() {
           </Box>
           <Box my={2}>
             <Alert severity="warning">
-              {t("rescueForm:infoAlert.enterGameWarning")}
+              {t<string>("rescueForm:infoAlert.enterGameWarning")}
               <br />
               <br />
               <Trans
@@ -236,7 +236,7 @@ export default function Home() {
       )}
 
       <Box my={2}>
-        <Typography>{t("rescueForm:cmdrName")}</Typography>
+        <Typography>{t<string>("rescueForm:cmdrName")}</Typography>
         <TextField
           placeholder="Surly Badger"
           fullWidth
@@ -247,14 +247,14 @@ export default function Home() {
       </Box>
 
       <Box my={2}>
-        <Typography>{t("rescueForm:system.systemName")}</Typography>
+        <Typography>{t<string>("rescueForm:system.systemName")}</Typography>
         <SystemsSearch
           onChange={handleSystemChange}
-          label={t("rescueForm:system.searchLabel")}
+          label={t<string>("rescueForm:system.searchLabel")}
         />
       </Box>
 
-      <Typography>{t("rescueForm:platform.header")}</Typography>
+      <Typography>{t<string>("rescueForm:platform.header")}</Typography>
       <RadioGroup
         value={platform}
         aria-label="large primary button group"
@@ -268,7 +268,7 @@ export default function Home() {
 
       {platform === "PC" && (
         <Box my={2}>
-          <Typography>{t("rescueForm:platform.which?")}</Typography>
+          <Typography>{t<string>("rescueForm:platform.which?")}</Typography>
           <RadioGroup value={odyssey} onChange={handleOdysseyChange}>
             <FormControlLabel
               value={EmptyBoolean.FALSE}
@@ -313,7 +313,7 @@ export default function Home() {
           size="large"
           color="secondary"
         >
-          {t("rescueForm:start")}
+          {t<string>("rescueForm:start")}
         </Button>
       </Box>
       <Backdrop open={loading}>

diff --git a/qms/frontend/pages/queued/[uuid]/index.tsx b/qms/frontend/pages/queued/[uuid]/index.tsx
@@ -117,7 +117,7 @@ export default function Index() {
   if (loading || !data) {
     return (
       <Container maxWidth="xs">
-        <Typography>{t("queuePage:loading")}</Typography>
+        <Typography>{t<string>("queuePage:loading")}</Typography>
       </Container>
     );
   }
@@ -130,23 +130,25 @@ export default function Index() {
       <Box my={2}>
         <Alert severity="info">
           <AlertTitle>
-            <strong>{t("queuePage:queueAlert.inQueue")}</strong>
+            <strong>{t<string>("queuePage:queueAlert.inQueue")}</strong>
           </AlertTitle>
-          {t("queuePage:queueAlert.busy")}
+          {t<string>("queuePage:queueAlert.busy")}
           <br />
-          {t("queuePage:queueAlert.refresh")}
+          {t<string>("queuePage:queueAlert.refresh")}
         </Alert>
       </Box>
       <Box my={2}>
         <Alert severity="warning">
           <AlertTitle>
-            <strong>{t("queuePage:fuelAlert.exit")}</strong>
+            <strong>{t<string>("queuePage:fuelAlert.exit")}</strong>
           </AlertTitle>
-          {t("queuePage:fuelAlert.instructions")}
+          {t<string>("queuePage:fuelAlert.instructions")}
         </Alert>
       </Box>
       <Typography variant="h5" component="h3">
-        {t("queuePage:position", { position: data.queuedClient.position })}
+        {t<string>("queuePage:position", {
+          position: data.queuedClient.position,
+        })}
       </Typography>
       <Box width="100%" my={2}>
         <LinearProgress />

diff --git a/qms/frontend/public/locales/de/rescueForm.json b/qms/frontend/public/locales/de/rescueForm.json
@@ -1,5 +1,5 @@
 {
-  "timer?": "Siehst du einen 'Sauerstoff leer in' Zähler?",
+  "timer": "Siehst du einen 'Sauerstoff leer in' Zähler?",
   "exitAlert": {
     "title": "Gehe ins Hauptmenü",
     "exitInstructions": "Bitte gehe sofort aus dem Spiel raus ins Hauptmenü, wo du dein Schiff im Hangar siehst."
@@ -13,7 +13,7 @@
     "systemName": "Systemname",
     "searchLabel": "Suche ein System"
   },
-  "platform" : {
+  "platform": {
     "odyssey?": "Spielst du die Odyssey Erweiterung?",
     "which?": "In welchem Modus spielen Sie?",
     "header": "Platform"

diff --git a/qms/frontend/public/locales/en/rescueForm.json b/qms/frontend/public/locales/en/rescueForm.json
@@ -1,5 +1,5 @@
 {
-  "timer?": "Do you see an 'oxygen depleted' timer?",
+  "timer": "Do you see an 'oxygen depleted' timer?",
   "exitAlert": {
     "title": "EXIT TO MAIN MENU",
     "exitInstructions": "Please exit to the main menu where you can see your ship in the hangar <strong>immediately</strong>!"
@@ -13,7 +13,7 @@
     "systemName": "System Name",
     "searchLabel": "Search for a system"
   },
-  "platform" : {
+  "platform": {
     "odyssey?": "Are you playing on Odyssey?",
     "which?": "In which mode are you playing?",
     "header": "Platform"

diff --git a/qms/frontend/public/locales/it/rescueForm.json b/qms/frontend/public/locales/it/rescueForm.json
@@ -1,5 +1,5 @@
 {
-  "timer?": "Vedi un timer con su scritto “OXYGEN DEPLETED”?",
+  "timer": "Vedi un timer con su scritto “OXYGEN DEPLETED”?",
   "exitAlert": {
     "title": "Esci al menu principale",
     "exitInstructions": "Per cortesia, esci al menu principale dove puoi vedere la tua nave nell’hangar <strong>immediatamente!<strong>"
@@ -13,7 +13,7 @@
     "systemName": "Nome del sistema",
     "searchLabel": "Cerca il sistema"
   },
-  "platform" : {
+  "platform": {
     "odyssey?": "Stai giocando con Odissey?",
     "which?": "In quale modalità stai giocando?",
     "header": "Piattaforma"

diff --git a/qms/frontend/public/locales/pt/rescueForm.json b/qms/frontend/public/locales/pt/rescueForm.json
@@ -1,5 +1,5 @@
 {
-  "timer?": "Vê um temporizador 'oxigénio de emergência'?",
+  "timer": "Vê um temporizador 'oxigénio de emergência'?",
   "exitAlert": {
     "title": "Por favor saída para o menu principal",
     "exitInstructions": "Por favor saída para o menu principal  onde vê a sua nave no hangar <strong>imediatamente</strong>!"
@@ -13,7 +13,7 @@
     "systemName": "Nome do sistema",
     "searchLabel": "procura de um sistema"
   },
-  "platform" : {
+  "platform": {
     "odyssey?": "Está a jogar na Odyssey?",
     "which?": "Em que modo está a jogar?",
     "header": "Plataforma"

diff --git a/qms/frontend/public/locales/ru/rescueForm.json b/qms/frontend/public/locales/ru/rescueForm.json
@@ -1,5 +1,5 @@
 {
-  "timer?": "Вы видите таймер с надписью 'Кислорода осталось на'?",
+  "timer": "Вы видите таймер с надписью 'Кислорода осталось на'?",
   "exitAlert": {
     "title": "Выйдите в главное меню",
     "exitInstructions": "Пожалуйста немедленно выйдите в главное меню, где вы можете видеть свой корабль в ангаре!"
@@ -13,7 +13,7 @@
     "systemName": "Название системы",
     "searchLabel": "Поиск системы"
   },
-  "platform" : {
+  "platform": {
     "odyssey?": "Вы играете в Odyssey?",
     "which?": "В каком режиме вы играете?",
     "header": "Платформа"

diff --git a/qms/frontend/tsconfig.json b/qms/frontend/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -18,17 +14,10 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "paths": {
-      "@mui/styled-engine": [
-        "./node_modules/@mui/styled-engine-sc"
-      ]
-    }
+      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
+    },
+    "incremental": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }