52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
|
import { chakra, MenuItem, MenuItemProps, useToast } from '@chakra-ui/react'
|
||
|
|
import { FileIcon } from 'assets/icons'
|
||
|
|
import { Typebot } from 'models'
|
||
|
|
import React, { ChangeEvent, useState } from 'react'
|
||
|
|
import { readFile } from 'services/utils'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
onNewTypebot: (typebot: Typebot) => void
|
||
|
|
} & MenuItemProps
|
||
|
|
|
||
|
|
export const ImportFromFileMenuItem = ({ onNewTypebot, ...props }: Props) => {
|
||
|
|
const [isLoading, setIsLoading] = useState(false)
|
||
|
|
const toast = useToast({
|
||
|
|
position: 'top-right',
|
||
|
|
status: 'error',
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
|
||
|
|
if (!e.target?.files) return
|
||
|
|
setIsLoading(true)
|
||
|
|
const file = e.target.files[0]
|
||
|
|
const fileContent = await readFile(file)
|
||
|
|
try {
|
||
|
|
onNewTypebot(JSON.parse(fileContent))
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err)
|
||
|
|
toast({ description: 'Failed to parse the file' })
|
||
|
|
}
|
||
|
|
setIsLoading(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<chakra.input
|
||
|
|
type="file"
|
||
|
|
id="file-input"
|
||
|
|
display="none"
|
||
|
|
onChange={handleInputChange}
|
||
|
|
accept=".json"
|
||
|
|
/>
|
||
|
|
<MenuItem
|
||
|
|
icon={<FileIcon />}
|
||
|
|
id="file-input"
|
||
|
|
isLoading={isLoading}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{props.children}
|
||
|
|
</MenuItem>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|