11import { treaty } from '@elysiajs/eden'
22import { Button , Input , Tabs , Textarea } from '@nmit-coursition/ui/design-system'
33import { convertSubtitlesToBlob } from '@nmit-coursition/utils'
4- import { useSignal } from '@preact/signals-react'
5- import { useActionState } from 'react'
4+ import { useActionState , useState } from 'react'
65import { toast } from 'sonner'
76import { z } from 'zod'
87import { zfd } from 'zod-form-data'
@@ -44,19 +43,19 @@ const statusStates = [
4443]
4544
4645export default function Index ( ) {
47- const status = useSignal < 'idle' | 'upload' | 'parse' | 'done' > ( 'idle' )
46+ const [ status , setStatus ] = useState < 'idle' | 'upload' | 'parse' | 'done' > ( 'idle' )
4847
4948 const handleSubmit = async ( formData : FormData ) => {
5049 try {
51- status . value = 'upload'
50+ setStatus ( 'upload' )
5251
5352 const rawFormData = Object . fromEntries ( formData . entries ( ) )
5453 const type = formData . has ( 'file' ) ? 'file' : 'url'
5554 const parsedData = fileSchema . parse ( { type, ...rawFormData } )
5655
5756 const videoSource = parsedData . type === 'file' ? URL . createObjectURL ( parsedData . file ) : parsedData . url
5857
59- status . value = 'parse'
58+ setStatus ( 'parse' )
6059 const keywordsArray = parsedData . keywords ? parsedData . keywords . split ( ',' ) . map ( ( word ) => `${ word } :5` ) : [ ]
6160 const output : ( 'text' | 'vtt' | 'srt' ) [ ] = [ 'text' , 'srt' , 'vtt' ]
6261
@@ -88,11 +87,11 @@ export default function Index() {
8887
8988 if ( error ) throw new Error ( error . value . description )
9089 const { text, srt, vtt } = data
91- status . value = 'done'
90+ setStatus ( 'done' )
9291 return { raw : text , srt, vtt, videoSource }
9392 } catch ( error ) {
9493 toast . error ( `Something went wrong. Reason: ${ error instanceof Error ? error . message : 'Unknown.' } ` )
95- status . value = 'idle'
94+ setStatus ( 'idle' )
9695 return initialState
9796 }
9897 }
@@ -102,7 +101,7 @@ export default function Index() {
102101 return (
103102 < div className = 'flex justify-center h-screen' >
104103 < div className = 'p-4 max-w-2xl w-full' >
105- { status . value === 'idle' && (
104+ { status === 'idle' && (
106105 < >
107106 < h1 className = 'text-2xl font-bold mb-4' > Upload media</ h1 >
108107 < form className = 'space-y-4' action = { formAction } >
@@ -157,10 +156,8 @@ export default function Index() {
157156 </ form >
158157 </ >
159158 ) }
160- { status . value !== 'idle' && status . value !== 'done' && (
161- < StatusDisplay states = { statusStates } status = { status . value } />
162- ) }
163- { status . value === 'done' && (
159+ { status !== 'idle' && status !== 'done' && < StatusDisplay states = { statusStates } status = { status } /> }
160+ { status === 'done' && (
164161 < Tabs
165162 listClassName = 'h-auto'
166163 triggerClassName = 'text-lg m-1'
0 commit comments