Merge pull request #16 from na-trium-144/export

Export実装

pages/api/add_rule.ts

@@ -11,6 +11,7 @@ export const addRule = async (rule: Rule) => {
         data: {
           num: rule.num,
           text: rule.text,
+          textTrans: rule.textTrans,
         },
       })
       .catch((err) => {

pages/editor.tsx

@@ -10,8 +10,12 @@ import { Rule, Comment } from "lib/types";
 
 export const highlighter = (code: string) => {
   const colorSelector = (l: string) => {
-    if (l.startsWith("#")) {
+    if (l.startsWith("##")) {
+      return "green";
+    } else if (l.startsWith("#")) {
       return "brown";
+    } else if (l.startsWith(">>")) {
+      return "blue";
     } else if (l.startsWith(">")) {
       return "green";
     } else if (l.startsWith("@")) {
@@ -64,6 +68,8 @@ export default function RuleEditor() {
           comments: [],
         };
         ruleCurrent.num = l.slice(1).trim();
+      } else if (l.startsWith(">>")) {
+        ruleCurrent.textTrans += l.slice(2).trim() + "\n";
       } else if (l.startsWith(">")) {
         ruleCurrent.text += l.slice(1).trim() + "\n";
       } else if (l.startsWith("@")) {

pages/export.tsx

@@ -0,0 +1,86 @@
+import { useState, useEffect, useRef } from "react";
+import Editor from "react-simple-code-editor";
+import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Button from "@mui/material/Button";
+import { useApi } from "components/apiprovider";
+import { Rule, Comment } from "lib/types";
+import { highlighter } from "./editor";
+
+export default function RuleEditor() {
+  const [code, setCode] = useState<string>("");
+  const codeBlob = useRef<null | Blob>(null);
+  const [objUrl, setObjUrl] = useState<string>("");
+  const { rules, editRuleTrans, apiResult, fetchAll } = useApi();
+
+  useEffect(() => {
+    const collator = new Intl.Collator([], { numeric: true });
+    const code = rules
+      .sort((a, b) => collator.compare(a.num, b.num))
+      .reduce(
+        (prev, rule) =>
+          prev +
+          `#${rule.num}\n` +
+          rule.text
+            .split("\n")
+            .filter((l) => l.length > 0)
+            .map((l) => `>${l}\n`)
+            .join("") +
+          rule.textTrans
+            .split("\n")
+            .filter((l) => l.length > 0)
+            .map((l) => `>>${l}\n`)
+            .join("") +
+          rule.comments.reduce(
+            ({ str, prevCategory }, c) => {
+              if (prevCategory !== c.category.name) {
+                str += `@${c.category.name}\n`;
+              }
+              str += `-${c.text}\n`;
+              return { str, prevCategory: c.category.name };
+            },
+            { str: "", prevCategory: "" }
+          ).str +
+          "\n",
+        ""
+      );
+    setCode(code);
+    codeBlob.current = new Blob([code], { type: "text/plain" });
+    const url = window.URL.createObjectURL(codeBlob.current);
+    setObjUrl(url);
+  }, []);
+
+  return (
+    <Container>
+      <Typography variant="h5">ルールエクスポート</Typography>
+      <Box sx={{ py: 1 }}>
+        <a href={objUrl} download="rule_reader.txt">
+          <Button variant="contained">ダウンロード</Button>
+        </a>
+      </Box>
+      <Box
+        sx={{
+          mt: 1,
+          mb: 2,
+          width: "100%",
+          border: 1,
+          borderColor: "gray",
+        }}
+      >
+        <Editor
+          value={code}
+          onValueChange={() => undefined}
+          highlight={highlighter}
+          padding={10}
+          ignoreTabKey
+          style={{
+            fontFamily: "monospace",
+          }}
+        />
+      </Box>
+    </Container>
+  );
+}