client/components/domain/wishes/createWish/CreateWish.tsx

86 lines
2.3 KiB
TypeScript
Raw Normal View History

2022-04-24 23:12:11 +02:00
import { FC, FormEvent, SyntheticEvent, useState } from 'react'
import { result } from '../../../common/result'
import { createWish, Wish } from '../models'
interface CreateWishProps {
onFocus: () => void
onSubmit: (wish: Wish) => void
}
const CreateWish: FC<CreateWishProps> = (props) => {
const [focused, setFocused] = useState<boolean>(false)
const onSubmit = (e: SyntheticEvent) => {
e.preventDefault()
const target = e.target as typeof e.target & {
wishName: { value: string }
wishDescription: { value?: string }
wishLink: { value?: string }
}
const wishRes = createWish(
target.wishName.value,
target.wishDescription.value,
target.wishLink.value
)
result.tap(wishRes, (wish) => {
props.onSubmit(wish)
})
}
return (
<div onFocus={() => setFocused(true)}>
<BasePrompt>
<form onSubmit={onSubmit}>
<div className="shadow p-4 space-y-6 bg-white">
<div className="p-1 rounded space-y-6 bg-pink-100">
<div className="bg-pink-100 transition-all">
<input
type="text"
name="wishName"
placeholder="Your wish!"
className="appearance-none w-full bg-pink-100 text-lg text-center p-6 outline-none"
/>
<div className={focused ? 'block' : 'hidden'}>
<InnerWishPrompt />
</div>
</div>
</div>
<button
type="submit"
className="py-2 px-4 bg-pink-400 rounded text-white"
>
Submit
</button>
</div>
</form>
</BasePrompt>
</div>
)
}
const InnerWishPrompt: FC = (props) => {
return (
<div className="space-y-4">
<textarea
name="wishDescription"
placeholder="Description"
className="block appearance-none w-full resize-none rounded py-3 px-4 outline-none bg-pink-100"
/>
<div className="h-0.5 w-3/4 m-auto w-content bg-gray-300" />
<input
type="text"
name="wishLink"
placeholder="https://example.mywish"
className="block appearance-none w-full rounded py-3 px-4 outline-none bg-pink-100"
/>
</div>
)
}
const BasePrompt: FC = (props) => <div>{props.children}</div>
export default CreateWish