92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import React, { PureComponent } from 'react'
|
|
import isUrl from 'is-url-superb'
|
|
import Input from '../../../components/atoms/Form/Input'
|
|
import Button from '../../../components/atoms/Button'
|
|
import styles from './ItemForm.module.scss'
|
|
|
|
interface ItemFormProps {
|
|
addFile(url: string): void
|
|
placeholder: string
|
|
}
|
|
|
|
interface ItemFormStates {
|
|
url: string
|
|
hasError: boolean
|
|
noUrl: boolean
|
|
}
|
|
|
|
export default class ItemForm extends PureComponent<
|
|
ItemFormProps,
|
|
ItemFormStates
|
|
> {
|
|
public state: ItemFormStates = {
|
|
url: '',
|
|
hasError: false,
|
|
noUrl: false
|
|
}
|
|
|
|
private handleSubmit = (e: Event) => {
|
|
e.preventDefault()
|
|
|
|
const { url } = this.state
|
|
|
|
// return when required fields are empty, and url value is no url
|
|
// Can't use browser validation cause we are in a form within a form
|
|
if (!url) {
|
|
this.setState({ hasError: true })
|
|
return
|
|
}
|
|
|
|
if (url && !url.includes('ipfs://') && !isUrl(url)) {
|
|
this.setState({ noUrl: true })
|
|
return
|
|
}
|
|
|
|
this.props.addFile(url)
|
|
}
|
|
|
|
private handleChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
|
|
this.setState({ url: e.currentTarget.value })
|
|
this.clearErrors()
|
|
}
|
|
|
|
private clearErrors() {
|
|
if (this.state.hasError) this.setState({ hasError: false })
|
|
if (this.state.noUrl) this.setState({ noUrl: false })
|
|
}
|
|
|
|
public render() {
|
|
const { url, hasError, noUrl } = this.state
|
|
|
|
return (
|
|
<div className={styles.itemForm}>
|
|
<Input
|
|
label="Url"
|
|
name="url"
|
|
required
|
|
type="url"
|
|
placeholder={this.props.placeholder}
|
|
value={url}
|
|
onChange={this.handleChangeUrl}
|
|
help="Supported protocols are http(s):// and ipfs://"
|
|
/>
|
|
|
|
<Button onClick={(e: Event) => this.handleSubmit(e)}>
|
|
Add File
|
|
</Button>
|
|
|
|
{hasError && (
|
|
<span className={styles.error}>
|
|
Please fill in all required fields.
|
|
</span>
|
|
)}
|
|
{noUrl && (
|
|
<span className={styles.error}>
|
|
Please enter a valid URL.
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
}
|