Fix language change applied without confirmation in modal (#634)

Author: akib22

src/components/EditorHeader/Modal/Language.jsx

@@ -1,22 +1,21 @@
-import { useTranslation } from "react-i18next";
 import { useSettings } from "../../../hooks";
 import { languages } from "../../../i18n/i18n";
 
-export default function Language() {
+export default function Language({ language, setLanguage }) {
   const { settings } = useSettings();
-  const { i18n } = useTranslation();
+  const isDarkMode = settings.mode === "dark";
 
   return (
     <div className="grid grid-cols-4 md:grid-cols-2 gap-4">
       {languages.map((l) => (
         <button
           key={l.code}
-          onClick={() => i18n.changeLanguage(l.code)}
+          onClick={() => setLanguage(l.code)}
           className={`space-y-1 py-3 px-4 rounded-md border-2 ${
-            settings.mode === "dark"
+            isDarkMode
               ? "bg-zinc-700 hover:bg-zinc-600"
               : "bg-zinc-100 hover:bg-zinc-200"
-          } ${i18n.language === l.code ? "border-zinc-400" : "border-transparent"}`}
+          } ${language === l.code ? "border-zinc-400" : "border-transparent"}`}
         >
           <div className="flex justify-between items-center">
             <div className="font-semibold">{l.native_name}</div>

src/components/EditorHeader/Modal/Modal.jsx

@@ -1,45 +1,45 @@
 import {
-  Spin,
-  Input,
   Image,
-  Toast,
+  Input,
   Modal as SemiUIModal,
+  Spin,
+  Toast,
 } from "@douyinfe/semi-ui";
-import { DB, MODAL, STATUS, State } from "../../../data/constants";
+import { saveAs } from "file-saver";
+import { Parser } from "node-sql-parser";
+import { Parser as OracleParser } from "oracle-sql-parser";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { DB, MODAL, STATUS, State } from "../../../data/constants";
+import { databases } from "../../../data/databases";
 import { db } from "../../../data/db";
 import {
   useAreas,
+  useDiagram,
   useEnums,
   useNotes,
-  useDiagram,
+  useSaveState,
+  useTasks,
   useTransform,
   useTypes,
   useUndoRedo,
-  useTasks,
-  useSaveState,
 } from "../../../hooks";
-import { saveAs } from "file-saver";
-import { Parser } from "node-sql-parser";
-import { Parser as OracleParser } from "oracle-sql-parser";
+import { isRtl } from "../../../i18n/utils/rtl";
+import { importSQL } from "../../../utils/importSQL";
 import {
   getModalTitle,
   getModalWidth,
   getOkText,
 } from "../../../utils/modalData";
-import Rename from "./Rename";
-import Open from "./Open";
-import New from "./New";
+import CodeEditor from "../../CodeEditor";
 import ImportDiagram from "./ImportDiagram";
 import ImportSource from "./ImportSource";
-import SetTableWidth from "./SetTableWidth";
 import Language from "./Language";
+import New from "./New";
+import Open from "./Open";
+import Rename from "./Rename";
+import SetTableWidth from "./SetTableWidth";
 import Share from "./Share";
-import CodeEditor from "../../CodeEditor";
-import { useTranslation } from "react-i18next";
-import { importSQL } from "../../../utils/importSQL";
-import { databases } from "../../../data/databases";
-import { isRtl } from "../../../i18n/utils/rtl";
 
 const extensionToLanguage = {
   md: "markdown",
@@ -70,6 +70,9 @@ export default function Modal({
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { setSaveState } = useSaveState();
   const [uncontrolledTitle, setUncontrolledTitle] = useState(title);
+  const [uncontrolledLanguage, setUncontrolledLanguage] = useState(
+    i18n.language,
+  );
   const [importSource, setImportSource] = useState({
     src: "",
     overwrite: false,
@@ -254,8 +257,12 @@ export default function Modal({
         setModal(MODAL.NONE);
         return;
       case MODAL.NEW:
-        setModal(MODAL.NONE);
         createNewDiagram(selectedTemplateId);
+        setModal(MODAL.NONE);
+        return;
+      case MODAL.LANGUAGE:
+        i18n.changeLanguage(uncontrolledLanguage);
+        setModal(MODAL.NONE);
         return;
       default:
         setModal(MODAL.NONE);
@@ -347,7 +354,12 @@ export default function Modal({
       case MODAL.TABLE_WIDTH:
         return <SetTableWidth />;
       case MODAL.LANGUAGE:
-        return <Language />;
+        return (
+          <Language
+            language={uncontrolledLanguage}
+            setLanguage={setUncontrolledLanguage}
+          />
+        );
       case MODAL.SHARE:
         return <Share title={title} setModal={setModal} />;
       default:
@@ -379,6 +391,7 @@ export default function Modal({
       }}
       onCancel={() => {
         if (modal === MODAL.RENAME) setUncontrolledTitle(title);
+        if (modal === MODAL.LANGUAGE) setUncontrolledLanguage(i18n.language);
         setModal(MODAL.NONE);
       }}
       centered