Implemented a download function for the circuitJson download button. (#…

…49) * Implemented circuitJson download button and function * fixed type error * passed down circuitJson to download componant * fixed bun.locb conflict * applied requested changes * formated --------- Co-authored-by: Your Name <you@example.com>
tscircuit · Oct 11, 2024 · 6a340a8 · 6a340a8
1 parent 4f9539d
commit 6a340a8
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 11 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "@tscircuit/3d-viewer": "^0.0.32",
     "@tscircuit/footprinter": "^0.0.68",
     "@tscircuit/pcb-viewer": "^1.10.5",
+    "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
     "@valtown/codemirror-ts": "^2.2.0",
@@ -66,6 +67,7 @@
     "easyeda": "^0.0.32",
     "embla-carousel-react": "^8.3.0",
     "fflate": "^0.8.2",
+    "file-saver": "^2.0.5",
     "immer": "^10.1.1",
     "input-otp": "^1.2.4",
     "jose": "^5.9.3",

diff --git a/src/components/CodeAndPreview.tsx b/src/components/CodeAndPreview.tsx
@@ -98,6 +98,7 @@ export function CodeAndPreview({ snippet }: Props) {
   return (
     <div className="flex flex-col">
       <EditorNav
+        circuitJson={circuitJson}
         snippet={snippet}
         code={code}
         isSaving={updateSnippetMutation.isLoading}

diff --git a/src/components/DownloadButtonAndMenu.tsx b/src/components/DownloadButtonAndMenu.tsx
@@ -7,8 +7,19 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { Download, ChevronDown } from "lucide-react"
+import { downloadCircuitJson } from "@/lib/download-fns/download-circuit-json-fn"
 
-export function DownloadButtonAndMenu({ className }: { className?: string }) {
+interface DownloadButtonAndMenuProps {
+  className?: string
+  snippetUnscopedName: string | undefined
+  circuitJson: string
+}
+
+export function DownloadButtonAndMenu({
+  className,
+  snippetUnscopedName,
+  circuitJson,
+}: DownloadButtonAndMenuProps) {
   return (
     <div className={className}>
       <DropdownMenu>
@@ -20,14 +31,15 @@ export function DownloadButtonAndMenu({ className }: { className?: string }) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
-          <DropdownMenuItem className="text-xs">
-            <Download className="mr-1 h-3 w-3" />
-            <span className="flex-grow mr-6">Download TSX</span>
-            <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
-              tsx
-            </span>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem
+            className="text-xs"
+            onSelect={() =>
+              downloadCircuitJson(
+                circuitJson,
+                snippetUnscopedName || "circuit" + ".json",
+              )
+            }
+          >
             <Download className="mr-1 h-3 w-3" />
             <span className="flex-grow mr-6">Download Circuit JSON</span>
             <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">

diff --git a/src/components/EditorNav.tsx b/src/components/EditorNav.tsx
@@ -24,6 +24,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { useRunTsx } from "@/hooks/use-run-tsx"
 import { OpenInNewWindowIcon } from "@radix-ui/react-icons"
 import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
@@ -34,6 +35,7 @@ import { TypeBadge } from "./TypeBadge"
 import { SnippetLink } from "./SnippetLink"
 
 export default function EditorNav({
+  circuitJson,
   snippet,
   code,
   hasUnsavedChanges,
@@ -42,6 +44,7 @@ export default function EditorNav({
   onSave,
   isSaving,
 }: {
+  circuitJson: any
   snippet: Snippet
   code: string
   hasUnsavedChanges: boolean
@@ -111,7 +114,11 @@ export default function EditorNav({
           <Sparkles className="mr-1 h-3 w-3" />
           Edit with AI
         </Button>
-        <DownloadButtonAndMenu className="hidden md:flex" />
+        <DownloadButtonAndMenu
+          snippetUnscopedName={snippet.unscoped_name}
+          circuitJson={circuitJson}
+          className="hidden md:flex"
+        />
         <Button
           variant="ghost"
           size="sm"

diff --git a/src/lib/download-fns/createBlobURL.ts b/src/lib/download-fns/createBlobURL.ts
@@ -0,0 +1,4 @@
+export const createBlobURL = (content: string) => {
+  const blob = new Blob([content], { type: "text/plain" })
+  return URL.createObjectURL(blob)
+}
diff --git a/src/lib/download-fns/download-circuit-json-fn.ts b/src/lib/download-fns/download-circuit-json-fn.ts
@@ -0,0 +1,7 @@
+import { saveAs } from "file-saver"
+import { createBlobURL } from "./createBlobURL"
+export const downloadCircuitJson = (content: any, fileName: string) => {
+  const circuitJson = JSON.stringify(content, null, 2)
+  const blob = new Blob([circuitJson], { type: "application/json" })
+  saveAs(blob, fileName)
+}
diff --git a/src/pages/view-snippet.tsx b/src/pages/view-snippet.tsx
@@ -45,7 +45,11 @@ export const ViewSnippetPage = () => {
                 <Share className="mr-1 h-3 w-3" />
                 Copy URL
               </Button>
-              <DownloadButtonAndMenu />
+              <DownloadButtonAndMenu
+                snippetUnscopedName={snippet?.unscoped_name}
+                circuitJson={circuitJson}
+                className="hidden md:flex"
+              />
               <div className="flex-grow" />
               <TabsList>
                 <TabsTrigger value="code">Code</TabsTrigger>