refactor(frontend): use helper func instead of hook for json export

apps/frontend/src/app/gallery/components/GallerySlide/GallerySlideInfo/GallerySlideInfo.tsx

@@ -4,8 +4,9 @@ import type { ComponentPropsWithoutRef } from 'react'
 
 import { ButtonDownload } from '@ui/ButtonDownload'
 import { GallerySlideDetailItem } from './GallerySlideDetailItem'
-import { useExportJSON } from '@hooks/useExportJSON'
+import { createAndDownloadJSONFile } from '@utility/json-file'
 import { geistMono } from '@app/fonts'
+import { SITE_TITLE } from '@site/config'
 import type { ClassNameProps } from '@app-types/ClassNameProps'
 import styles from './GallerySlideInfo.module.css'
 
@@ -35,11 +36,9 @@ export const GallerySlideInfo = ({ index, label, settings, details, className }:
 )
 
 const ExportSettings = ({ index, settings }: Pick<Props, 'index' | 'settings'>) => {
-  const { handleExportJSON } = useExportJSON()
-
   const handleExport = () =>
-    handleExportJSON({
-      fileName: `scissors-slide-${index + 1}-settings`,
+    createAndDownloadJSONFile({
+      fileName: `${SITE_TITLE.toLowerCase()}-slide-${index + 1}-settings`,
       payload: settings
     })
 

apps/frontend/src/stores/hooks/useExportSettings.ts

@@ -2,12 +2,10 @@ import { useCallback } from 'react'
 
 import { useConvertSettings } from './useConvertSettings'
 import { useResizeSettings } from './useResizeSettings'
-import { useExportJSON } from '@hooks/useExportJSON'
 import { TOOLBAR_TAB, type ToolbarTab } from '@stores/tabs'
+import { createAndDownloadJSONFile } from '@utility/json-file'
 
 export const useExportSettings = (selectedTab: ToolbarTab) => {
-  const { handleExportJSON } = useExportJSON()
-
   const convertSettings = useConvertSettings()
   const resizeSettings = useResizeSettings()
 
@@ -34,11 +32,11 @@ export const useExportSettings = (selectedTab: ToolbarTab) => {
 
     const { fileName, settings: payload } = exportPayload
 
-    handleExportJSON({
+    createAndDownloadJSONFile({
       fileName,
       payload
     })
-  }, [collectExportPayload, handleExportJSON])
+  }, [collectExportPayload])
 
   return { exportSettings }
 }

apps/frontend/src/utility/json-file.ts

@@ -1,3 +1,5 @@
+import { downloadFile } from './export'
+
 /**
  * @param file - JSON file to read
  * @returns parsed JSON object or rejects with error
@@ -34,3 +36,22 @@ export const createJSONBlob = <T>(payload: T): Blob => {
     type: 'application/json'
   })
 }
+
+/**
+ * @param payload - any value to convert to JSON
+ * @param fileName - name of the file without extension
+ */
+export const createAndDownloadJSONFile = ({
+  payload,
+  fileName
+}: {
+  payload: Record<string, any>
+  fileName: string
+}) => {
+  const blob = createJSONBlob(payload)
+
+  downloadFile({
+    blob,
+    download: `${fileName}.json`
+  })
+}