add export button

Author: solaoi

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"

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"

package-lock.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",