add download button for fav words

src/views/Options/FavWords.js

@@ -1,15 +1,19 @@
 import Stack from "@mui/material/Stack";
 import { OPT_TRANS_BAIDU } from "../../config";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } 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";
 
@@ -71,14 +75,111 @@ 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 favList = Object.entries(favWords).sort((a, b) =>
     a[0].localeCompare(b[0])
   );
+  const downloadList = favList.map(([word]) => word);
+
+  const handleImport = async (data) => {
+    try {
+      console.log("data", data);
+      // await rules.merge(JSON.parse(data));
+    } catch (err) {
+      console.log("[import rules]", err);
+    }
+  };
+
   return (
     <Box>
       <Stack spacing={3}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={2}
+          useFlexGap
+          flexWrap="wrap"
+        >
+          <UploadButton text={i18n("import")} handleImport={handleImport} />
+          <DownloadButton
+            data={JSON.stringify(downloadList, null, 2)}
+            text={i18n("export")}
+          />
+        </Stack>
+
         <Box>
           {favList.map(([word, { createdAt }]) => (
             <FavAccordion key={word} word={word} createdAt={createdAt} />

src/views/Options/Rules.js

@@ -399,7 +399,10 @@ function DownloadButton({ data, text, fileName }) {
       const url = window.URL.createObjectURL(new Blob([data]));
       const link = document.createElement("a");
       link.href = url;
-      link.setAttribute("download", fileName || `${Date.now()}.json`);
+      link.setAttribute(
+        "download",
+        fileName || `kiss-rules_${Date.now()}.json`
+      );
       document.body.appendChild(link);
       link.click();
       link.remove();
@@ -417,11 +420,29 @@ function DownloadButton({ data, text, fileName }) {
   );
 }
 
-function UploadButton({ onChange, text }) {
+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
@@ -494,27 +515,13 @@ function UserRules({ subRules }) {
   const injectRules = !!setting?.injectRules;
   const { selectedUrl, selectedRules } = subRules;
 
-  const handleImport = (e) => {
+  const handleImport = async (data) => {
-    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) => {
     try {
-        await rules.merge(JSON.parse(e.target.result));
+      await rules.merge(JSON.parse(data));
     } catch (err) {
       console.log("[import rules]", err);
     }
   };
-    reader.readAsText(file);
-  };
 
   const handleInject = () => {
     updateSetting({
@@ -553,7 +560,7 @@ function UserRules({ subRules }) {
           {i18n("add")}
         </Button>
 
-        <UploadButton text={i18n("import")} onChange={handleImport} />
+        <UploadButton text={i18n("import")} handleImport={handleImport} />
         <DownloadButton
           data={JSON.stringify([...rules.list].reverse(), null, 2)}
           text={i18n("export")}