From 293dff45f45a492d5633d38111c85267aeb70252 Mon Sep 17 00:00:00 2001
From: Kodai Aoyama <kodai.aoyama+github@gmail.com>
Date: Mon, 18 Jul 2022 14:08:39 +0900
Subject: [PATCH] add export button

---
 app/pages/projects/[projectId].tsx | 31 ++++++++++-
 app/pages/stubs/[stubId].tsx       | 22 +++++++-
 package-lock.json                  | 87 +++++++++++++++++++-----------
 package.json                       |  2 +
 4 files changed, 110 insertions(+), 32 deletions(-)

diff --git a/app/pages/projects/[projectId].tsx b/app/pages/projects/[projectId].tsx
index f62be98..588747a 100644
--- a/app/pages/projects/[projectId].tsx
+++ b/app/pages/projects/[projectId].tsx
@@ -9,6 +9,7 @@ import {
   useMutation,
   Routes,
   usePaginatedQuery,
+  invoke,
 } from "blitz"
 import Layout from "app/core/layouts/Layout"
 import getProject from "app/projects/queries/getProject"
@@ -32,8 +33,15 @@ import {
   Text,
 } from "@chakra-ui/react"
 import { HiViewGridAdd, HiOutlineClipboardCopy } from "react-icons/hi"
-import { ChevronLeftIcon, ChevronRightIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DeleteIcon,
+  EditIcon,
+  DownloadIcon,
+} from "@chakra-ui/icons"
 import { CopyToClipboard } from "react-copy-to-clipboard"
+import { saveAs } from "file-saver"
 
 const BreadCrumb = ({ project }) => {
   return (
@@ -148,6 +156,27 @@ export const Project = () => {
                   <a>EDIT</a>
                 </Button>
               </Link>
+              <Button
+                mr="2"
+                colorScheme="teal"
+                variant="solid"
+                _hover={{ bg: "teal.400", borderColor: "teal.400" }}
+                leftIcon={<DownloadIcon />}
+                onClick={async () => {
+                  const { stubs } = await invoke(getStubs, { where: { projectId: projectId } })
+                  const stubsForExport = stubs.map(
+                    ({ path, method, contentType, statusCode, response, sleep }) => {
+                      return { path, method, contentType, statusCode, response, sleep }
+                    }
+                  )
+                  const blob = new Blob([JSON.stringify(stubsForExport)], {
+                    type: "application/json; charset=utf-8",
+                  })
+                  saveAs(blob, `co-metub_p${project.id}.json`)
+                }}
+              >
+                EXPORT
+              </Button>
               <Button
                 colorScheme="red"
                 variant="solid"
diff --git a/app/pages/stubs/[stubId].tsx b/app/pages/stubs/[stubId].tsx
index 26b915b..53ac2d7 100644
--- a/app/pages/stubs/[stubId].tsx
+++ b/app/pages/stubs/[stubId].tsx
@@ -15,10 +15,11 @@ import {
   Text,
 } from "@chakra-ui/react"
 import getProject from "app/projects/queries/getProject"
-import { DeleteIcon, EditIcon } from "@chakra-ui/icons"
+import { DeleteIcon, EditIcon, DownloadIcon } from "@chakra-ui/icons"
 import { HiOutlineClipboardCopy } from "react-icons/hi"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 import formatXml from "xml-formatter"
+import { saveAs } from "file-saver"
 
 const BreadCrumb = ({ stub }) => {
   const [project] = useQuery(getProject, { id: stub.projectId })
@@ -93,6 +94,25 @@ export const Stub = () => {
                 <a>EDIT</a>
               </Button>
             </Link>
+            <Button
+              mr="2"
+              colorScheme="teal"
+              variant="solid"
+              _hover={{ bg: "teal.400", borderColor: "teal.400" }}
+              leftIcon={<DownloadIcon />}
+              onClick={async () => {
+                const { path, method, contentType, statusCode, response, sleep } = stub
+                const blob = new Blob(
+                  [JSON.stringify({ path, method, contentType, statusCode, response, sleep })],
+                  {
+                    type: "application/json; charset=utf-8",
+                  }
+                )
+                saveAs(blob, `co-metub_s${stub.id}.json`)
+              }}
+            >
+              EXPORT
+            </Button>
             <Button
               colorScheme="red"
               variant="solid"
diff --git a/package-lock.json b/package-lock.json
index 9dcee66..87e504c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@prisma/client": "4.0.0",
         "better-sqlite3": "7.6.2",
         "blitz": "0.45.5",
+        "file-saver": "2.0.5",
         "final-form": "4.20.7",
         "framer-motion": "6.5.1",
         "react": "18.2.0",
@@ -27,6 +28,7 @@
         "zod": "3.17.3"
       },
       "devDependencies": {
+        "@types/file-saver": "2.0.5",
         "@types/react": "18.0.1",
         "eslint": "8.20.0",
         "husky": "8.0.1",
@@ -3983,6 +3985,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -4082,9 +4090,9 @@
       "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
     },
     "node_modules/@types/node": {
-      "version": "18.0.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.5.tgz",
-      "integrity": "sha512-En7tneq+j0qAiVwysBD79y86MT3ModuoIJbe7JXp+sb5UAjInSShmK3nXXMioBzfF7rXC12hv12d4IyCVwN4dA=="
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.6.tgz",
+      "integrity": "sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw=="
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -6247,11 +6255,14 @@
       }
     },
     "node_modules/clone-response": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
       "dependencies": {
         "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/clone-stats": {
@@ -6503,9 +6514,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.23.4",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.4.tgz",
-      "integrity": "sha512-vjsKqRc1RyAJC3Ye2kYqgfdThb3zYnx9CrqoCcjMOENMtQPC7ZViBvlDxwYU/2z2NI/IPuiXw5mT4hWhddqjzQ==",
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.5.tgz",
+      "integrity": "sha512-7Vh11tujtAZy82da4duVreQysIoO2EvVrur7y6IzZkH1IHPSekuDi8Vuw1+YKjkbfWLRD7Nc9ICQ/sIUDutcyg==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -6513,9 +6524,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.23.4",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.4.tgz",
-      "integrity": "sha512-lizxkcgj3XDmi7TUBFe+bQ1vNpD5E4t76BrBWI3HdUxdw/Mq1VF4CkiHzIKyieECKtcODK2asJttoofEeUKICQ==",
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.5.tgz",
+      "integrity": "sha512-8t78LdpKSuCq4pJYCYk8hl7XEkAX+BP16yRIwL3AanTksxuEf7CM83vRyctmiEL8NDZ3jpUcv56fk9/zG3aIuw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -8376,6 +8387,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -11465,9 +11481,9 @@
       }
     },
     "node_modules/keyv": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.3.2.tgz",
-      "integrity": "sha512-kn8WmodVBe12lmHpA6W8OY7SNh6wVR+Z+wZESF4iF5FCazaVXGWOtnbnvX0tMQ1bO+/TmOD9LziuYMvrIIs0xw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.3.3.tgz",
+      "integrity": "sha512-AcysI17RvakTh8ir03+a3zJr5r0ovnAH/XTXei/4HIv3bL2K/jzvgivLK9UuI/JbU1aJjM3NSAnVvVVd3n+4DQ==",
       "dependencies": {
         "compress-brotli": "^1.3.8",
         "json-buffer": "3.0.1"
@@ -21326,6 +21342,12 @@
         "@types/ms": "*"
       }
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -21425,9 +21447,9 @@
       "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
     },
     "@types/node": {
-      "version": "18.0.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.5.tgz",
-      "integrity": "sha512-En7tneq+j0qAiVwysBD79y86MT3ModuoIJbe7JXp+sb5UAjInSShmK3nXXMioBzfF7rXC12hv12d4IyCVwN4dA=="
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.6.tgz",
+      "integrity": "sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -23051,9 +23073,9 @@
       }
     },
     "clone-response": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
       "requires": {
         "mimic-response": "^1.0.0"
       }
@@ -23280,14 +23302,14 @@
       }
     },
     "core-js": {
-      "version": "3.23.4",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.4.tgz",
-      "integrity": "sha512-vjsKqRc1RyAJC3Ye2kYqgfdThb3zYnx9CrqoCcjMOENMtQPC7ZViBvlDxwYU/2z2NI/IPuiXw5mT4hWhddqjzQ=="
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.23.5.tgz",
+      "integrity": "sha512-7Vh11tujtAZy82da4duVreQysIoO2EvVrur7y6IzZkH1IHPSekuDi8Vuw1+YKjkbfWLRD7Nc9ICQ/sIUDutcyg=="
     },
     "core-js-pure": {
-      "version": "3.23.4",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.4.tgz",
-      "integrity": "sha512-lizxkcgj3XDmi7TUBFe+bQ1vNpD5E4t76BrBWI3HdUxdw/Mq1VF4CkiHzIKyieECKtcODK2asJttoofEeUKICQ=="
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.23.5.tgz",
+      "integrity": "sha512-8t78LdpKSuCq4pJYCYk8hl7XEkAX+BP16yRIwL3AanTksxuEf7CM83vRyctmiEL8NDZ3jpUcv56fk9/zG3aIuw=="
     },
     "core-util-is": {
       "version": "1.0.3",
@@ -24723,6 +24745,11 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -27033,9 +27060,9 @@
       }
     },
     "keyv": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.3.2.tgz",
-      "integrity": "sha512-kn8WmodVBe12lmHpA6W8OY7SNh6wVR+Z+wZESF4iF5FCazaVXGWOtnbnvX0tMQ1bO+/TmOD9LziuYMvrIIs0xw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.3.3.tgz",
+      "integrity": "sha512-AcysI17RvakTh8ir03+a3zJr5r0ovnAH/XTXei/4HIv3bL2K/jzvgivLK9UuI/JbU1aJjM3NSAnVvVVd3n+4DQ==",
       "requires": {
         "compress-brotli": "^1.3.8",
         "json-buffer": "3.0.1"
diff --git a/package.json b/package.json
index e91b182..a15c133 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@prisma/client": "4.0.0",
     "better-sqlite3": "7.6.2",
     "blitz": "0.45.5",
+    "file-saver": "2.0.5",
     "final-form": "4.20.7",
     "framer-motion": "6.5.1",
     "react": "18.2.0",
@@ -46,6 +47,7 @@
   },
   "devDependencies": {
     "@types/react": "18.0.1",
+    "@types/file-saver": "2.0.5",
     "eslint": "8.20.0",
     "husky": "8.0.1",
     "lint-staged": "13.0.3",