From 219cd617a5478f9661cf12867a4836129c27e6b3 Mon Sep 17 00:00:00 2001
From: Arooran Thanabalasingam <13069024+bigaru@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:29:27 +0200
Subject: [PATCH] feat: define custom file extension

---
 src/blocks/download/block.json |  3 +++
 src/blocks/download/edit.tsx   | 22 ++++++++++++++++++++--
 src/blocks/download/index.tsx  |  1 +
 src/blocks/download/view.tsx   |  5 +++--
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/blocks/download/block.json b/src/blocks/download/block.json
index 482089f9..267335e5 100644
--- a/src/blocks/download/block.json
+++ b/src/blocks/download/block.json
@@ -22,6 +22,9 @@
 			"type": "string",
 			"default": "file"
 		},
+		"fileExt": {
+			"type": "string"
+		},
 		"metadata": {
 			"type": "object",
 			"default": {
diff --git a/src/blocks/download/edit.tsx b/src/blocks/download/edit.tsx
index 231e9572..98a3a126 100644
--- a/src/blocks/download/edit.tsx
+++ b/src/blocks/download/edit.tsx
@@ -2,7 +2,7 @@ import { InseriRoot, useDiscover } from '@inseri/lighthouse'
 import { IconFileDownload } from '@tabler/icons-react'
 import { BlockControls, InspectorControls } from '@wordpress/block-editor'
 import type { BlockEditProps } from '@wordpress/blocks'
-import { PanelBody, PanelRow, TextControl, ToolbarButton, ToolbarGroup } from '@wordpress/components'
+import { PanelBody, PanelRow, TextControl, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components'
 import { useEffect, useState } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { edit } from '@wordpress/icons'
@@ -15,7 +15,7 @@ import View from './view'
 
 function EditComponent(props: BlockEditProps<Attributes>) {
 	const { isSelected, setAttributes, attributes } = props
-	const { blockId, metadata, inputKey, label, fileName } = attributes
+	const { blockId, metadata, inputKey, label, fileName, fileExt } = attributes
 
 	const [isWizardMode, setWizardMode] = useRecoilState(wizardState(blockId))
 	const isValueSet = !!inputKey
@@ -59,6 +59,24 @@ function EditComponent(props: BlockEditProps<Attributes>) {
 					<PanelRow>
 						<TextControl label={__('File Name', 'inseri-core')} value={fileName} onChange={(value) => setAttributes({ fileName: value })} />
 					</PanelRow>
+					<PanelRow>
+						<ToggleControl
+							label={__('Determine file extension automatically', 'inseri-core')}
+							checked={fileExt === undefined}
+							onChange={(checked) => setAttributes({ fileExt: checked ? undefined : '' })}
+						/>
+					</PanelRow>
+					{fileExt !== undefined && (
+						<PanelRow>
+							<TextControl
+								label={__('File Extension', 'inseri-core')}
+								value={fileExt ?? ''}
+								onChange={(value) => {
+									setAttributes({ fileExt: value })
+								}}
+							/>
+						</PanelRow>
+					)}
 				</PanelBody>
 			</InspectorControls>
 			{isWizardMode ? (
diff --git a/src/blocks/download/index.tsx b/src/blocks/download/index.tsx
index 35cca843..9b4f27e0 100644
--- a/src/blocks/download/index.tsx
+++ b/src/blocks/download/index.tsx
@@ -14,6 +14,7 @@ export interface Attributes {
 	inputKey: string
 	label: string
 	fileName: string
+	fileExt: string | undefined
 	metadata: {
 		name: string
 	}
diff --git a/src/blocks/download/view.tsx b/src/blocks/download/view.tsx
index 3ca62670..96b8d588 100644
--- a/src/blocks/download/view.tsx
+++ b/src/blocks/download/view.tsx
@@ -8,7 +8,7 @@ import { downloadLinkState, extensionState, wizardState } from './state'
 
 export default function View(props: { attributes: Attributes; setAttributes?: (item: Partial<Attributes>) => void }) {
 	const { attributes, setAttributes } = props
-	const { blockId, inputKey, label, fileName } = attributes
+	const { blockId, inputKey, label, fileName, fileExt } = attributes
 
 	const [downloadLink, setDownloadLink] = useRecoilState(downloadLinkState(blockId))
 	const [extension, setExtension] = useRecoilState(extensionState(blockId))
@@ -52,7 +52,8 @@ export default function View(props: { attributes: Attributes; setAttributes?: (i
 		},
 	})
 
-	const fullFileName = fileName + (extension ? '.' + extension : '')
+	const preparedExt = fileExt ?? extension
+	const fullFileName = fileName + (preparedExt ? '.' + preparedExt : '')
 
 	return (
 		<Button style={{ color: '#fff' }} component="a" href={downloadLink} download={fullFileName} disabled={!isReady}>