From 1e0cdf034c9859d1e4bcc1c922fd9c7706830dc7 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 01:22:45 +0000 Subject: [PATCH] Add template explorer actions hook --- src/components/TemplateExplorer.tsx | 50 +++----------------- src/hooks/use-template-explorer-actions.ts | 55 ++++++++++++++++++++++ 2 files changed, 61 insertions(+), 44 deletions(-) create mode 100644 src/hooks/use-template-explorer-actions.ts diff --git a/src/components/TemplateExplorer.tsx b/src/components/TemplateExplorer.tsx index 82ed9ba..73f7c4e 100644 --- a/src/components/TemplateExplorer.tsx +++ b/src/components/TemplateExplorer.tsx @@ -8,8 +8,8 @@ import { ScrollArea } from '@/components/ui/scroll-area' import { Badge } from '@/components/ui/badge' import { useSeedTemplates } from '@/hooks/data/use-seed-templates' import { Copy, Download } from '@phosphor-icons/react' -import { toast } from 'sonner' import templateUi from '@/config/template-ui.json' +import { useTemplateExplorerActions } from '@/hooks/use-template-explorer-actions' const ui = templateUi.explorer @@ -185,49 +185,11 @@ export function TemplateExplorer() { const currentTemplate = templates.find(t => t.id === selectedTemplate) - const copyToClipboard = (text: string) => { - navigator.clipboard.writeText(text) - toast.success(ui.toasts.copySuccess) - } - - const downloadJSON = () => { - if (!currentTemplate) return - - const dataStr = JSON.stringify(currentTemplate.data, null, 2) - const blob = new Blob([dataStr], { type: 'application/json' }) - const url = URL.createObjectURL(blob) - const link = document.createElement('a') - link.href = url - link.download = `${currentTemplate.id}-template.json` - document.body.appendChild(link) - link.click() - document.body.removeChild(link) - URL.revokeObjectURL(url) - - toast.success(ui.toasts.downloadSuccess) - } - - const exportCurrentData = async () => { - const keys = await window.spark.kv.keys() - const data: Record = {} - - for (const key of keys) { - data[key] = await window.spark.kv.get(key) - } - - const dataStr = JSON.stringify(data, null, 2) - const blob = new Blob([dataStr], { type: 'application/json' }) - const url = URL.createObjectURL(blob) - const link = document.createElement('a') - link.href = url - link.download = 'current-project-data.json' - document.body.appendChild(link) - link.click() - document.body.removeChild(link) - URL.revokeObjectURL(url) - - toast.success(ui.toasts.exportSuccess) - } + const { + copyToClipboard, + downloadJSON, + exportCurrentData + } = useTemplateExplorerActions(currentTemplate) if (!currentTemplate) return null diff --git a/src/hooks/use-template-explorer-actions.ts b/src/hooks/use-template-explorer-actions.ts new file mode 100644 index 0000000..0b23ed6 --- /dev/null +++ b/src/hooks/use-template-explorer-actions.ts @@ -0,0 +1,55 @@ +/// + +import { useCallback } from 'react' +import { toast } from 'sonner' +import templateUi from '@/config/template-ui.json' +import type { Template } from '@/hooks/data/use-seed-templates' + +const ui = templateUi.explorer + +type TemplateData = Record + +const triggerJsonDownload = (data: TemplateData, filename: string) => { + const dataStr = JSON.stringify(data, null, 2) + const blob = new Blob([dataStr], { type: 'application/json' }) + const url = URL.createObjectURL(blob) + const link = document.createElement('a') + link.href = url + link.download = filename + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + URL.revokeObjectURL(url) +} + +export function useTemplateExplorerActions(selectedTemplate?: Template) { + const copyToClipboard = useCallback((text: string) => { + navigator.clipboard.writeText(text) + toast.success(ui.toasts.copySuccess) + }, []) + + const downloadJSON = useCallback(() => { + if (!selectedTemplate) return + + triggerJsonDownload(selectedTemplate.data, `${selectedTemplate.id}-template.json`) + toast.success(ui.toasts.downloadSuccess) + }, [selectedTemplate]) + + const exportCurrentData = useCallback(async () => { + const keys = await window.spark.kv.keys() + const data: Record = {} + + for (const key of keys) { + data[key] = await window.spark.kv.get(key) + } + + triggerJsonDownload(data, 'current-project-data.json') + toast.success(ui.toasts.exportSuccess) + }, []) + + return { + copyToClipboard, + downloadJSON, + exportCurrentData + } +}