fix language change not rerendering ui (#1638)

src/components/App.tsx

@@ -87,7 +87,7 @@ import { actions } from "../actions/register";
 
 import { ActionResult } from "../actions/types";
 import { getDefaultAppState } from "../appState";
-import { t } from "../i18n";
+import { t, getLanguage } from "../i18n";
 
 import {
   copyToAppClipboard,
@@ -229,6 +229,7 @@ class App extends React.Component<any, AppState> {
           onLockToggle={this.toggleLock}
           zenModeEnabled={zenModeEnabled}
           toggleZenMode={this.toggleZenMode}
+          lng={getLanguage().lng}
         />
         <main>
           <canvas

src/components/LayerUI.tsx

@@ -43,6 +43,7 @@ interface LayerUIProps {
   onLockToggle: () => void;
   zenModeEnabled: boolean;
   toggleZenMode: () => void;
+  lng: string;
 }
 
 const LayerUI = ({
@@ -325,6 +326,7 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
 
   return (
+    prev.lng === next.lng &&
     prev.elements === next.elements &&
     keys.every((key) => prevAppState[key] === nextAppState[key])
   );

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -4038,6 +4038,66 @@ exports[`regression tests pinch-to-zoom works: [end of test] number of elements
 
 exports[`regression tests pinch-to-zoom works: [end of test] number of renders 1`] = `8`;
 
+exports[`regression tests rerenders UI on language change: [end of test] appState 1`] = `
+Object {
+  "collaborators": Map {},
+  "currentItemBackgroundColor": "transparent",
+  "currentItemFillStyle": "hachure",
+  "currentItemFontFamily": 1,
+  "currentItemFontSize": 20,
+  "currentItemOpacity": 100,
+  "currentItemRoughness": 1,
+  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeStyle": "solid",
+  "currentItemStrokeWidth": 1,
+  "currentItemTextAlign": "left",
+  "cursorButton": "up",
+  "cursorX": 0,
+  "cursorY": 0,
+  "draggingElement": null,
+  "editingElement": null,
+  "editingGroupId": null,
+  "elementLocked": false,
+  "elementType": "rectangle",
+  "errorMessage": null,
+  "exportBackground": true,
+  "isCollaborating": false,
+  "isLoading": false,
+  "isResizing": false,
+  "isRotating": false,
+  "lastPointerDownWith": "mouse",
+  "multiElement": null,
+  "name": "Untitled-201933152653",
+  "openMenu": null,
+  "resizingElement": null,
+  "scrollX": 0,
+  "scrollY": 0,
+  "scrolledOutside": false,
+  "selectedElementIds": Object {},
+  "selectedGroupIds": Object {},
+  "selectionElement": null,
+  "shouldAddWatermark": false,
+  "shouldCacheIgnoreZoom": false,
+  "showShortcutsDialog": false,
+  "username": "",
+  "viewBackgroundColor": "#ffffff",
+  "zenModeEnabled": false,
+  "zoom": 1,
+}
+`;
+
+exports[`regression tests rerenders UI on language change: [end of test] history 1`] = `
+Object {
+  "recording": false,
+  "redoStack": Array [],
+  "stateHistory": Array [],
+}
+`;
+
+exports[`regression tests rerenders UI on language change: [end of test] number of elements 1`] = `0`;
+
+exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `4`;
+
 exports[`regression tests resize an element, trying every resize handle: [end of test] appState 1`] = `
 Object {
   "collaborators": Map {},

src/tests/regressionTests.test.tsx

@@ -2,7 +2,7 @@ import { reseed } from "../random";
 import React from "react";
 import ReactDOM from "react-dom";
 import * as Renderer from "../renderer/renderScene";
-import { render, fireEvent } from "./test-utils";
+import { render, screen, fireEvent } from "./test-utils";
 import App from "../components/App";
 import { ToolName } from "./queries/toolQueries";
 import { KEYS, Key } from "../keys";
@@ -623,4 +623,16 @@ describe("regression tests", () => {
     fireEvent.keyUp(document, { code: "Minus", ctrlKey: true });
     expect(h.state.zoom).toBe(1);
   });
+
+  it("rerenders UI on language change", () => {
+    // select rectangle tool to show properties menu
+    clickTool("rectangle");
+    // english lang should display `hachure` label
+    expect(screen.queryByText(/hachure/i)).not.toBeNull();
+    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
+      target: { value: "de-DE" },
+    });
+    // switching to german, `hachure` label should no longer exist
+    expect(screen.queryByText(/hachure/i)).toBeNull();
+  });
 });