Implement renaming files

src/app/components/generator/FileRenaming.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks'
+import { useCallback, useState } from 'preact/hooks'
 import { Analytics } from '../../Analytics.js'
 import { useLocale } from '../../contexts/index.js'
 import { useModal } from '../../contexts/Modal.jsx'
@@ -7,33 +7,34 @@ import { TextInput } from '../forms/index.js'
 import { Modal } from '../Modal.js'
 
 interface Props {
-	uri: string,
+	oldId: string,
+	onRename: (newId: string) => void,
 }
-export function FileRenaming({ uri }: Props) {
+export function FileRenaming({ oldId, onRename }: Props) {
 	const { locale } = useLocale()
 	const { hideModal } = useModal()
-	const [fileId, setFileId] = useState(uri) // TODO: get original file id
+	const [fileId, setFileId] = useState(oldId)
 	const [error, setError] = useState<string>()
 
-	const changeFileId = (str: string) => {
+	const changeFileId = useCallback((str: string) => {
 		setError(undefined)
 		setFileId(str)
-	}
+	}, [])
 
-	const doSave = () => {
+	const doRename = useCallback(() => {
 		if (!fileId.match(/^([a-z0-9_.-]+:)?[a-z0-9/_.-]+$/)) {
 			setError('Invalid resource location')
 			return
 		}
 		Analytics.renameProjectFile('menu')
-		// TODO: rename file
+		onRename(fileId)
 		hideModal()
-	}
+	}, [fileId, hideModal])
 
 	return <Modal class="file-modal">
 		<p>{locale('project.rename_file')}</p>
-		<TextInput autofocus class="btn btn-input" value={fileId} onChange={changeFileId} onEnter={doSave} onCancel={hideModal} placeholder={locale('resource_location')} spellcheck={false} />
+		<TextInput autofocus class="btn btn-input" value={fileId} onChange={changeFileId} onEnter={doRename} onCancel={hideModal} placeholder={locale('resource_location')} spellcheck={false} />
 		{error !== undefined && <span class="invalid">{error}</span>}
-		<Btn icon="pencil" label={locale('project.rename')} onClick={doSave} />
+		<Btn icon="pencil" label={locale('project.rename')} onClick={doRename} />
 	</Modal>
 }