Replace i18n by a custom implementation (#638)

There are two problems with the current localization strategy:
- We download the translations on-demand, which means that it does a serial roundtrip for nothing.
- withTranslation helper actually renders the app 3 times on startup, instead of once (I haven't tried to debug it)

src/components/ColorPicker.tsx

@@ -3,8 +3,7 @@ import { Popover } from "./Popover";
 
 import "./ColorPicker.css";
 import { KEYS } from "../keys";
-import { useTranslation } from "react-i18next";
-import { TFunction } from "i18next";
+import { t } from "../i18n";
 
 // This is a narrow reimplementation of the awesome react-color Twitter component
 // https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js
@@ -15,14 +14,12 @@ const Picker = function({
   onChange,
   onClose,
   label,
-  t,
 }: {
   colors: string[];
   color: string | null;
   onChange: (color: string) => void;
   onClose: () => void;
   label: string;
-  t: TFunction;
 }) {
   const firstItem = React.useRef<HTMLButtonElement>();
   const colorInput = React.useRef<HTMLInputElement>();
@@ -158,8 +155,6 @@ export function ColorPicker({
   onChange: (color: string) => void;
   label: string;
 }) {
-  const { t } = useTranslation();
-
   const [isActive, setActive] = React.useState(false);
   const pickerButton = React.useRef<HTMLButtonElement>(null);
 
@@ -195,7 +190,6 @@ export function ColorPicker({
                 pickerButton.current?.focus();
               }}
               label={label}
-              t={t}
             />
           </Popover>
         ) : null}

src/components/ExportDialog.tsx

@@ -11,8 +11,8 @@ import { AppState } from "../types";
 import { exportToCanvas } from "../scene/export";
 import { ActionsManagerInterface, UpdaterFn } from "../actions/types";
 import Stack from "./Stack";
+import { t } from "../i18n";
 
-import { useTranslation } from "react-i18next";
 import { KEYS } from "../keys";
 
 const probablySupportsClipboard =
@@ -52,7 +52,6 @@ function ExportModal({
   onExportToBackend: ExportCB;
   onCloseRequest: () => void;
 }) {
-  const { t } = useTranslation();
   const someElementIsSelected = elements.some(element => element.isSelected);
   const [scale, setScale] = useState(defaultScale);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
@@ -170,7 +169,6 @@ function ExportModal({
             elements,
             appState,
             syncActionResult,
-            t,
           )}
           <Stack.Col gap={1}>
             <div className="ExportDialog__scales">
@@ -195,7 +193,6 @@ function ExportModal({
               elements,
               appState,
               syncActionResult,
-              t,
             )}
             {someElementIsSelected && (
               <div>
@@ -238,7 +235,6 @@ export function ExportDialog({
   onExportToClipboard: ExportCB;
   onExportToBackend: ExportCB;
 }) {
-  const { t } = useTranslation();
   const [modalIsShown, setModalIsShown] = useState(false);
   const triggerButton = useRef<HTMLButtonElement>(null);
 

src/components/LanguageList.tsx

@@ -1,22 +1,20 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
+import { t } from "../i18n";
 
 export function LanguageList<T>({
-  onClick,
+  onChange,
   languages,
   currentLanguage,
 }: {
   languages: { lng: string; label: string }[];
-  onClick: (value: string) => void;
+  onChange: (value: string) => void;
   currentLanguage: string;
 }) {
-  const { t } = useTranslation();
-
   return (
     <React.Fragment>
       <select
         className="language-select"
-        onChange={({ target }) => onClick(target.value)}
+        onChange={({ target }) => onChange(target.value)}
         value={currentLanguage}
         aria-label={t("buttons.selectLanguage")}
       >

src/components/StoredScenesList.test.tsx

@@ -6,10 +6,6 @@ import { PreviousScene } from "../scene/types";
 
 Enzyme.configure({ adapter: new Adapter() });
 
-jest.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (key: any) => key }),
-}));
-
 function setup(props: any) {
   const currentProps = {
     ...props,

src/components/StoredScenesList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { PreviousScene } from "../scene/types";
+import { t } from "../i18n";
 
 interface StoredScenesListProps {
   scenes: PreviousScene[];
@@ -13,8 +13,6 @@ export function StoredScenesList({
   currentId,
   onChange,
 }: StoredScenesListProps) {
-  const { t } = useTranslation();
-
   return (
     <React.Fragment>
       <select