add upload button for fav words

src/views/Options/DownloadButton.js

@@ -0,0 +1,27 @@
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import Button from "@mui/material/Button";
+
+export default function DownloadButton({ data, text, fileName }) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    if (data) {
+      const url = window.URL.createObjectURL(new Blob([data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", fileName || `${Date.now()}.json`);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+    }
+  };
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={handleClick}
+      startIcon={<FileDownloadIcon />}
+    >
+      {text}
+    </Button>
+  );
+}

src/views/Options/FavWords.js

@@ -1,21 +1,23 @@
 import Stack from "@mui/material/Stack";
 import { OPT_TRANS_BAIDU } from "../../config";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CircularProgress from "@mui/material/CircularProgress";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import FileUploadIcon from "@mui/icons-material/FileUpload";
 import { useI18n } from "../../hooks/I18n";
 import Alert from "@mui/material/Alert";
 import { apiTranslate } from "../../apis";
 import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
 import { useFavWords } from "../../hooks/FavWords";
-import { DictCont } from "../Selection/TranCont";
+import DictCont from "../Selection/DictCont";
+import DownloadButton from "./DownloadButton";
+import UploadButton from "./UploadButton";
+import Button from "@mui/material/Button";
+import ClearAllIcon from "@mui/icons-material/ClearAll";
+import { isValidWord } from "../../libs/utils";
 
 function DictField({ word }) {
   const [dictResult, setDictResult] = useState(null);
@@ -53,7 +55,7 @@ function DictField({ word }) {
   return <DictCont dictResult={dictResult} />;
 }
 
-function FavAccordion({ word }) {
+function FavAccordion({ word, index }) {
   const [expanded, setExpanded] = useState(false);
 
   const handleChange = (e) => {
@@ -66,7 +68,7 @@ function FavAccordion({ word }) {
         {/* <Typography>{`[${new Date(
           createdAt
         ).toLocaleString()}] ${word}`}</Typography> */}
-        <Typography>{word}</Typography>
+        <Typography>{`${index + 1}. ${word}`}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         {expanded && <DictField word={word} />}
@@ -75,80 +77,9 @@ function FavAccordion({ word }) {
   );
 }
 
-function DownloadButton({ data, text, fileName }) {
-  const handleClick = (e) => {
-    e.preventDefault();
-    if (data) {
-      const url = window.URL.createObjectURL(new Blob([data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute(
-        "download",
-        fileName || `kiss-words_${Date.now()}.json`
-      );
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-    }
-  };
-  return (
-    <Button
-      size="small"
-      variant="outlined"
-      onClick={handleClick}
-      startIcon={<FileDownloadIcon />}
-    >
-      {text}
-    </Button>
-  );
-}
-
-function UploadButton({ handleImport, text }) {
-  const i18n = useI18n();
-  const inputRef = useRef(null);
-  const handleClick = () => {
-    inputRef.current && inputRef.current.click();
-  };
-  const onChange = (e) => {
-    const file = e.target.files[0];
-    if (!file) {
-      return;
-    }
-
-    if (!file.type.includes("json")) {
-      alert(i18n("error_wrong_file_type"));
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      handleImport(e.target.result);
-    };
-    reader.readAsText(file);
-  };
-
-  return (
-    <Button
-      size="small"
-      variant="outlined"
-      onClick={handleClick}
-      startIcon={<FileUploadIcon />}
-    >
-      {text}
-      <input
-        type="file"
-        accept=".json"
-        ref={inputRef}
-        onChange={onChange}
-        hidden
-      />
-    </Button>
-  );
-}
-
 export default function FavWords() {
   const i18n = useI18n();
-  const { favWords } = useFavWords();
+  const { loading, favWords, mergeWords, clearWords } = useFavWords();
   const favList = Object.entries(favWords).sort((a, b) =>
     a[0].localeCompare(b[0])
   );
@@ -156,8 +87,11 @@ export default function FavWords() {
 
   const handleImport = async (data) => {
     try {
-      console.log("data", data);
-      // await rules.merge(JSON.parse(data));
+      const newWords = data
+        .split("\n")
+        .map((line) => line.split(",")[0].trim())
+        .filter(isValidWord);
+      await mergeWords(newWords);
     } catch (err) {
       console.log("[import rules]", err);
     }
@@ -173,17 +107,42 @@ export default function FavWords() {
           useFlexGap
           flexWrap="wrap"
         >
-          <UploadButton text={i18n("import")} handleImport={handleImport} />
-          <DownloadButton
-            data={JSON.stringify(downloadList, null, 2)}
-            text={i18n("export")}
+          <UploadButton
+            text={i18n("import")}
+            handleImport={handleImport}
+            fileType="text"
+            fileExts={[".txt", ".csv"]}
           />
+          <DownloadButton
+            data={downloadList.join("\n")}
+            text={i18n("export")}
+            fileName={`kiss-words_${Date.now()}.txt`}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() => {
+              clearWords();
+            }}
+            startIcon={<ClearAllIcon />}
+          >
+            {i18n("clear_all")}
+          </Button>
         </Stack>
 
         <Box>
-          {favList.map(([word, { createdAt }]) => (
-            <FavAccordion key={word} word={word} createdAt={createdAt} />
-          ))}
+          {loading ? (
+            <CircularProgress size={24} />
+          ) : (
+            favList.map(([word, { createdAt }], index) => (
+              <FavAccordion
+                key={word}
+                index={index}
+                word={word}
+                createdAt={createdAt}
+              />
+            ))
+          )}
         </Box>
       </Stack>
     </Box>

src/views/Options/Rules.js

@@ -16,7 +16,7 @@ import {
   URL_KISS_RULES_NEW_ISSUE,
   OPT_SYNCTYPE_WORKER,
 } from "../../config";
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
@@ -26,8 +26,6 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { useRules } from "../../hooks/Rules";
 import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import FileUploadIcon from "@mui/icons-material/FileUpload";
 import { useSetting } from "../../hooks/Setting";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
@@ -50,6 +48,8 @@ import OwSubRule from "./OwSubRule";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import HelpButton from "./HelpButton";
 import { useSyncCaches } from "../../hooks/Sync";
+import DownloadButton from "./DownloadButton";
+import UploadButton from "./UploadButton";
 
 function RuleFields({ rule, rules, setShow, setKeyword }) {
   const initFormValues = rule || {
@@ -392,77 +392,6 @@ function RuleAccordion({ rule, rules }) {
   );
 }
 
-function DownloadButton({ data, text, fileName }) {
-  const handleClick = (e) => {
-    e.preventDefault();
-    if (data) {
-      const url = window.URL.createObjectURL(new Blob([data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute(
-        "download",
-        fileName || `kiss-rules_${Date.now()}.json`
-      );
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-    }
-  };
-  return (
-    <Button
-      size="small"
-      variant="outlined"
-      onClick={handleClick}
-      startIcon={<FileDownloadIcon />}
-    >
-      {text}
-    </Button>
-  );
-}
-
-function UploadButton({ handleImport, text }) {
-  const i18n = useI18n();
-  const inputRef = useRef(null);
-  const handleClick = () => {
-    inputRef.current && inputRef.current.click();
-  };
-  const onChange = (e) => {
-    const file = e.target.files[0];
-    if (!file) {
-      return;
-    }
-
-    if (!file.type.includes("json")) {
-      alert(i18n("error_wrong_file_type"));
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      handleImport(e.target.result);
-    };
-    reader.readAsText(file);
-  };
-
-  return (
-    <Button
-      size="small"
-      variant="outlined"
-      onClick={handleClick}
-      startIcon={<FileUploadIcon />}
-    >
-      {text}
-      <input
-        type="file"
-        accept=".json"
-        ref={inputRef}
-        onChange={onChange}
-        hidden
-      />
-    </Button>
-  );
-}
-
 function ShareButton({ rules, injectRules, selectedUrl }) {
   const alert = useAlert();
   const i18n = useI18n();
@@ -564,6 +493,7 @@ function UserRules({ subRules }) {
         <DownloadButton
           data={JSON.stringify([...rules.list].reverse(), null, 2)}
           text={i18n("export")}
+          fileName={`kiss-rules_${Date.now()}.json`}
         />
 
         <ShareButton

src/views/Options/UploadButton.js

@@ -0,0 +1,55 @@
+import { useRef } from "react";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import { useI18n } from "../../hooks/I18n";
+import Button from "@mui/material/Button";
+
+export default function UploadButton({
+  handleImport,
+  text,
+  fileType = "json",
+  fileExts = [".json"],
+}) {
+  const i18n = useI18n();
+  const inputRef = useRef(null);
+  const handleClick = () => {
+    if (inputRef.current) {
+      inputRef.current.click();
+      inputRef.current.value = null;
+    }
+  };
+  const onChange = (e) => {
+    const file = e.target.files[0];
+    if (!file) {
+      return;
+    }
+
+    if (!file.type.includes(fileType)) {
+      alert(i18n("error_wrong_file_type"));
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      handleImport(e.target.result);
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={handleClick}
+      startIcon={<FileUploadIcon />}
+    >
+      {text}
+      <input
+        type="file"
+        accept={fileExts.join(", ")}
+        ref={inputRef}
+        onChange={onChange}
+        hidden
+      />
+    </Button>
+  );
+}