124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
import { closeModal, openModal, rerenderModal } from '../components/modal'
|
|
import { navigate } from '../router'
|
|
import { apps } from '../state'
|
|
import { Button, Form, FormActions, FormCheckbox, FormCheckboxField, FormCheckboxLabel, FormError, FormField, FormInput, FormLabel, FormSelect } from '../styles'
|
|
|
|
type TemplateType = 'ssr' | 'spa' | 'bare'
|
|
|
|
let newAppCreating = false
|
|
let newAppError = ''
|
|
let newAppName = ''
|
|
let newAppTemplate: TemplateType = 'ssr'
|
|
let newAppTool = false
|
|
|
|
async function createNewApp() {
|
|
const name = newAppName.trim().toLowerCase().replace(/\s+/g, '-')
|
|
|
|
if (!name) {
|
|
newAppError = 'App name is required'
|
|
rerenderModal()
|
|
return
|
|
}
|
|
|
|
if (!/^[a-z][a-z0-9-]*$/.test(name)) {
|
|
newAppError = 'Name must start with a letter and contain only lowercase letters, numbers, and hyphens'
|
|
rerenderModal()
|
|
return
|
|
}
|
|
|
|
if (apps.some(a => a.name === name)) {
|
|
newAppError = 'An app with this name already exists'
|
|
rerenderModal()
|
|
return
|
|
}
|
|
|
|
newAppCreating = true
|
|
newAppError = ''
|
|
rerenderModal()
|
|
|
|
try {
|
|
const res = await fetch('/api/apps', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, template: newAppTemplate, tool: newAppTool }),
|
|
})
|
|
|
|
const data = await res.json()
|
|
|
|
if (!res.ok || !data.ok) {
|
|
throw new Error(data.error || 'Failed to create app')
|
|
}
|
|
|
|
// Success - close modal and navigate to the new app
|
|
closeModal()
|
|
navigate(`/app/${name}`)
|
|
} catch (err) {
|
|
newAppError = err instanceof Error ? err.message : 'Failed to create app'
|
|
newAppCreating = false
|
|
rerenderModal()
|
|
}
|
|
}
|
|
|
|
export function openNewAppModal() {
|
|
newAppCreating = false
|
|
newAppError = ''
|
|
newAppName = ''
|
|
newAppTemplate = 'ssr'
|
|
newAppTool = false
|
|
|
|
openModal('New App', () => (
|
|
<Form onSubmit={(e: Event) => {
|
|
e.preventDefault()
|
|
createNewApp()
|
|
}}>
|
|
<FormField>
|
|
<FormLabel for="app-name">App Name</FormLabel>
|
|
<FormInput
|
|
id="app-name"
|
|
type="text"
|
|
placeholder="my-app"
|
|
value={newAppName}
|
|
onInput={(e: Event) => {
|
|
newAppName = (e.target as HTMLInputElement).value
|
|
}}
|
|
autofocus
|
|
/>
|
|
{newAppError && <FormError>{newAppError}</FormError>}
|
|
</FormField>
|
|
<FormField>
|
|
<FormLabel for="app-template">Template</FormLabel>
|
|
<FormSelect
|
|
id="app-template"
|
|
onChange={(e: Event) => {
|
|
newAppTemplate = (e.target as HTMLSelectElement).value as TemplateType
|
|
}}
|
|
>
|
|
<option value="ssr" selected={newAppTemplate === 'ssr'}>SSR</option>
|
|
<option value="spa" selected={newAppTemplate === 'spa'}>SPA</option>
|
|
<option value="bare" selected={newAppTemplate === 'bare'}>Bare</option>
|
|
</FormSelect>
|
|
</FormField>
|
|
<FormCheckboxField>
|
|
<FormCheckbox
|
|
id="app-tool"
|
|
type="checkbox"
|
|
checked={newAppTool}
|
|
onChange={(e: Event) => {
|
|
newAppTool = (e.target as HTMLInputElement).checked
|
|
rerenderModal()
|
|
}}
|
|
/>
|
|
<FormCheckboxLabel for="app-tool">Tool</FormCheckboxLabel>
|
|
</FormCheckboxField>
|
|
<FormActions>
|
|
<Button type="button" onClick={closeModal} disabled={newAppCreating}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" variant="primary" disabled={newAppCreating}>
|
|
{newAppCreating ? 'Creating...' : 'Create App'}
|
|
</Button>
|
|
</FormActions>
|
|
</Form>
|
|
))
|
|
}
|