Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented a download function for the circuitJson download button. #49

Merged
merged 7 commits into from
Oct 11, 2024
Merged

Implemented a download function for the circuitJson download button. #49

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bc709f0
Implemented circuitJson download button and function
Oct 10, 2024
06734ee
fixed type error
Oct 10, 2024
64f4398
Merge branch 'tscircuit:main' into main
Abse2001 Oct 10, 2024
991d679
passed down circuitJson to download componant
Oct 11, 2024
227f25a
fixed bun.locb conflict
Oct 11, 2024
ab9d968
applied requested changes
Oct 11, 2024
9edba80
formated
Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified bun.lockb
View file
Open in desktop
Binary file not shown.
27 changes: 18 additions & 9 deletions src/components/DownloadButtonAndMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
fileName: string
circuitJson: string
}

export function DownloadButtonAndMenu({
className,
fileName,
circuitJson,
}: DownloadButtonAndMenuProps) {
return (
<div className={className}>
<DropdownMenu>
Expand All @@ -20,14 +31,12 @@ 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, fileName + ".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">
Expand Down
8 changes: 7 additions & 1 deletion src/components/EditorNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -51,6 +52,7 @@ export default function EditorNav({
onSave: () => void
}) {
const [, navigate] = useLocation()
const { circuitJson } = useRunTsx(code, snippet?.snippet_type)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you avoid using useRunTsx? It's a very expensive hook and the circuitJson should be computed elsewhere

return (
<nav className="flex items-center justify-between px-2 py-3 border-b border-gray-200 bg-white text-sm border-t">
<div className="flex items-center space-x-1">
Expand Down Expand Up @@ -111,7 +113,11 @@ export default function EditorNav({
<Sparkles className="mr-1 h-3 w-3" />
Edit with AI
</Button>
<DownloadButtonAndMenu className="hidden md:flex" />
<DownloadButtonAndMenu
fileName={snippet.unscoped_name}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

important concept: "variable transarency" means you keep the same variable name as it is passed around. Don't rename variables if you don't have to. When I read this code, i was surprised that fileName was the same as the unscoped name, i expected it to have an extension. Naming is hard, renaming makes you have to do it more often

Suggested change
fileName={snippet.unscoped_name}
snippetUnscopedName={snippet.unscoped_name}

circuitJson={circuitJson}
className="hidden md:flex"
/>
<Button
variant="ghost"
size="sm"
Expand Down
12 changes: 12 additions & 0 deletions src/lib/download-fns/download-circuit-json-fn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export const downloadCircuitJson = (content: string, filename: string) => {
const circuitJson = JSON.stringify(content, null, 2)
const blob = new Blob([circuitJson], { type: "text/plain" })
const url = URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = filename
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
}
2 changes: 0 additions & 2 deletions src/pages/view-snippet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { CodeEditor } from "@/components/CodeEditor"
import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
import Header from "@/components/Header"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
Expand Down Expand Up @@ -45,7 +44,6 @@ export const ViewSnippetPage = () => {
<Share className="mr-1 h-3 w-3" />
Copy URL
</Button>
<DownloadButtonAndMenu />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why remove from this page? can't we give it the props?

<div className="flex-grow" />
<TabsList>
<TabsTrigger value="code">Code</TabsTrigger>
Expand Down
Loading