fix: optimization tranbox

src/views/Options/FavWords.js

@@ -1,6 +1,5 @@
 import Stack from "@mui/material/Stack";
-import { OPT_TRANS_BAIDU } from "../../config";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
@@ -8,11 +7,10 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useI18n } from "../../hooks/I18n";
-import Alert from "@mui/material/Alert";
-import { apiTranslate } from "../../apis";
 import Box from "@mui/material/Box";
 import { useFavWords } from "../../hooks/FavWords";
 import DictCont from "../Selection/DictCont";
+import SugCont from "../Selection/SugCont";
 import DownloadButton from "./DownloadButton";
 import UploadButton from "./UploadButton";
 import Button from "@mui/material/Button";
@@ -20,42 +18,6 @@ import ClearAllIcon from "@mui/icons-material/ClearAll";
 import { isValidWord } from "../../libs/utils";
 import { kissLog } from "../../libs/log";
 
-function DictField({ word }) {
-  const [dictResult, setDictResult] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    (async () => {
-      try {
-        setLoading(true);
-        setError("");
-        const dictRes = await apiTranslate({
-          text: word,
-          translator: OPT_TRANS_BAIDU,
-          fromLang: "en",
-          toLang: "zh-CN",
-        });
-        dictRes[2].type === 1 && setDictResult(JSON.parse(dictRes[2].result));
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [word]);
-
-  if (loading) {
-    return <CircularProgress size={24} />;
-  }
-
-  if (error) {
-    return <Alert severity="error">{error}</Alert>;
-  }
-
-  return <DictCont dictResult={dictResult} />;
-}
-
 function FavAccordion({ word, index }) {
   const [expanded, setExpanded] = useState(false);
 
@@ -72,7 +34,12 @@ function FavAccordion({ word, index }) {
         <Typography>{`${index + 1}. ${word}`}</Typography>
       </AccordionSummary>
       <AccordionDetails>
-        {expanded && <DictField word={word} />}
+        {expanded && (
+          <Stack spacing={2}>
+            <DictCont text={word} />
+            <SugCont text={word} />
+          </Stack>
+        )}
       </AccordionDetails>
     </Accordion>
   );

src/views/Selection/AudioBtn.js

@@ -7,7 +7,7 @@ export default function AudioBtn({ text, lan = "uk" }) {
 
   if (error || !ready) {
     return (
-      <IconButton disabled>
+      <IconButton disabled size="small">
         <VolumeUpIcon />
       </IconButton>
     );
@@ -15,14 +15,14 @@ export default function AudioBtn({ text, lan = "uk" }) {
 
   if (playing) {
     return (
-      <IconButton color="primary">
+      <IconButton color="primary" size="small">
         <VolumeUpIcon />
       </IconButton>
     );
   }
 
   return (
-    <IconButton onClick={onPlay}>
+    <IconButton onClick={onPlay} size="small">
       <VolumeUpIcon />
     </IconButton>
   );

src/views/Selection/DictCont.js

@@ -1,16 +1,63 @@
+import { useState, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import FavBtn from "./FavBtn";
 import Typography from "@mui/material/Typography";
 import AudioBtn from "./AudioBtn";
+import CircularProgress from "@mui/material/CircularProgress";
+import Alert from "@mui/material/Alert";
+import { OPT_TRANS_BAIDU } from "../../config";
+import { apiTranslate } from "../../apis";
+import { isValidWord } from "../../libs/utils";
 
 const phonicMap = {
   en_phonic: ["英", "uk"],
   us_phonic: ["美", "en"],
 };
 
-export default function DictCont({ dictResult }) {
-  if (!dictResult) {
+export default function DictCont({ text }) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [dictResult, setDictResult] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        setError("");
+        setDictResult(null);
+
+        if (!isValidWord(text)) {
+          return;
+        }
+
+        const dictRes = await apiTranslate({
+          text,
+          translator: OPT_TRANS_BAIDU,
+          fromLang: "en",
+          toLang: "zh-CN",
+        });
+
+        if (dictRes[2]?.type === 1) {
+          setDictResult(JSON.parse(dictRes[2].result));
+        }
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [text]);
+
+  if (error) {
+    return <Alert severity="error">{error}</Alert>;
+  }
+
+  if (loading) {
+    return <CircularProgress size={16} />;
+  }
+
+  if (!text || !dictResult) {
     return;
   }
 
@@ -33,7 +80,7 @@ export default function DictCont({ dictResult }) {
             ?.map(Object.entries)
             .map((item) => item[0])
             .map(([key, val]) => (
-              <span>
+              <span key={key}>
                 <span>{`${phonicMap[key]?.[0] || key} ${val}`}</span>
                 <AudioBtn text={dictResult.src} lan={phonicMap[key]?.[1]} />
               </span>

src/views/Selection/SugCont.js

@@ -1,7 +1,21 @@
+import { useState, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import { apiBaiduSuggest } from "../../apis";
+
+export default function SugCont({ text }) {
+  const [sugs, setSugs] = useState([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setSugs(await apiBaiduSuggest(text));
+      } catch (err) {
+        // skip
+      }
+    })();
+  }, [text]);
 
-export default function SugCont({ sugs }) {
   return (
     <Box>
       {sugs.map(({ k, v }) => (

src/views/Selection/TranBox.js

@@ -14,6 +14,8 @@ import { useI18n } from "../../hooks/I18n";
 import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
 import { useState, useRef } from "react";
 import TranCont from "./TranCont";
+import DictCont from "./DictCont";
+import SugCont from "./SugCont";
 import CopyBtn from "./CopyBtn";
 
 function TranForm({ text, setText, tranboxSetting, transApis }) {
@@ -24,7 +26,6 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
   const [translator, setTranslator] = useState(tranboxSetting.translator);
   const [fromLang, setFromLang] = useState(tranboxSetting.fromLang);
   const [toLang, setToLang] = useState(tranboxSetting.toLang);
-  const [toLang2, setToLang2] = useState(tranboxSetting.toLang2);
   const inputRef = useRef(null);
 
   return (
@@ -146,11 +147,11 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
         translator={translator}
         fromLang={fromLang}
         toLang={toLang}
-        toLang2={toLang2}
-        setToLang={setToLang}
-        setToLang2={setToLang2}
+        toLang2={tranboxSetting.toLang2}
         transApis={transApis}
       />
+      <DictCont text={text} />
+      <SugCont text={text} />
     </Stack>
   );
 }

src/views/Selection/TranCont.js

@@ -1,16 +1,12 @@
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
-import Alert from "@mui/material/Alert";
 import CircularProgress from "@mui/material/CircularProgress";
 import Stack from "@mui/material/Stack";
 import { useI18n } from "../../hooks/I18n";
-import { DEFAULT_TRANS_APIS, OPT_TRANS_BAIDU } from "../../config";
+import { DEFAULT_TRANS_APIS } from "../../config";
 import { useEffect, useState } from "react";
-import { apiTranslate, apiBaiduLangdetect, apiBaiduSuggest } from "../../apis";
-import { isValidWord } from "../../libs/utils";
+import { apiTranslate, apiBaiduLangdetect } from "../../apis";
 import CopyBtn from "./CopyBtn";
-import DictCont from "./DictCont";
-import SugCont from "./SugCont";
 
 export default function TranCont({
   text,
@@ -18,16 +14,12 @@ export default function TranCont({
   fromLang,
   toLang,
   toLang2 = "en",
-  setToLang,
-  setToLang2,
   transApis,
 }) {
   const i18n = useI18n();
   const [trText, setTrText] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
-  const [dictResult, setDictResult] = useState(null);
-  const [sugs, setSugs] = useState([]);
 
   useEffect(() => {
     (async () => {
@@ -35,101 +27,59 @@ export default function TranCont({
         setLoading(true);
         setTrText("");
         setError("");
-        setDictResult(null);
-        setSugs([]);
 
-        // 互译
+        let to = toLang;
         if (toLang !== toLang2 && toLang2 !== "none") {
           const detectLang = await apiBaiduLangdetect(text);
           if (detectLang === toLang) {
-            setToLang(toLang2);
-            setToLang2(toLang);
-            return;
+            to = toLang2;
           }
         }
 
-        // 翻译
         const apiSetting =
           transApis[translator] || DEFAULT_TRANS_APIS[translator];
         const tranRes = await apiTranslate({
           text,
           translator,
           fromLang,
-          toLang,
+          toLang: to,
           apiSetting,
         });
         setTrText(tranRes[0]);
-
-        // 词典
-        if (isValidWord(text) && toLang.startsWith("zh")) {
-          if (fromLang === "en" && translator === OPT_TRANS_BAIDU) {
-            tranRes[2].type === 1 &&
-              setDictResult(JSON.parse(tranRes[2].result));
-          } else {
-            const dictRes = await apiTranslate({
-              text,
-              translator: OPT_TRANS_BAIDU,
-              fromLang: "en",
-              toLang: "zh-CN",
-            });
-            dictRes[2].type === 1 &&
-              setDictResult(JSON.parse(dictRes[2].result));
-          }
-        }
-
-        // 建议
-        if (text.length < 20) {
-          setSugs(await apiBaiduSuggest(text));
-        }
       } catch (err) {
         setError(err.message);
       } finally {
         setLoading(false);
       }
     })();
-  }, [
-    text,
-    translator,
-    fromLang,
-    toLang,
-    toLang2,
-    setToLang,
-    setToLang2,
-    transApis,
-  ]);
+  }, [text, translator, fromLang, toLang, toLang2, transApis]);
 
   return (
-    <>
-      <Box>
-        <TextField
-          size="small"
-          label={i18n("translated_text")}
-          // disabled
-          fullWidth
-          multiline
-          value={trText}
-          InputProps={{
-            startAdornment: loading ? <CircularProgress size={16} /> : null,
-            endAdornment: (
-              <Stack
-                direction="row"
-                sx={{
-                  position: "absolute",
-                  right: 0,
-                  top: 0,
-                }}
-              >
-                <CopyBtn text={trText} />
-              </Stack>
-            ),
-          }}
-        />
-      </Box>
-
-      {loading && <CircularProgress size={24} />}
-      {error && <Alert severity="error">{error}</Alert>}
-      {dictResult && <DictCont dictResult={dictResult} />}
-      {sugs.length > 0 && <SugCont sugs={sugs} />}
-    </>
+    <Box>
+      <TextField
+        size="small"
+        label={i18n("translated_text")}
+        // disabled
+        fullWidth
+        multiline
+        value={trText}
+        helperText={error}
+        InputProps={{
+          startAdornment: loading ? <CircularProgress size={16} /> : null,
+          endAdornment: (
+            <Stack
+              direction="row"
+              sx={{
+                position: "absolute",
+                right: 0,
+                top: 0,
+              }}
+            >
+              <CopyBtn text={trText} />
+            </Stack>
+          ),
+        }}
+      />
+    </Box>
   );
 }