import React from 'react' ; import { useDispatch , useSelector } from 'react-redux' ; import { useForm , FormContextValues , OnSubmit } from 'react-hook-form' ; import { useHistory } from 'react-router-dom' ; import { Input , StyledH3Input } from '@bug-ui/Form' ; import { Button , toast } from '@bug-ui' ; import AddBugSchema from './AddBugSchema' ; import Editor from 'components/Editor/Editor' ; import DashboardHeader from 'components/DashboardHeader' ; import StyledEditor from 'components/Editor/Editor.style' ; import AddBugWrapper from './AddBug.style' ; import socket from 'utils/socket' ; import { addBug } from 'store/ducks/bugs' ; import { StoreState } from 'store' ; const AddBug = ( ) => { const history = useHistory ( ) ; const dispatch = useDispatch ( ) ; const { register , handleSubmit , errors , watch , reset , setValue } = useForm ( { validationSchema : AddBugSchema } ) ; const markdown = watch ( 'body' ) ; const handleMarkdown = ( e ) => { setValue ( 'body' , e . target . value ) ; } ; const [ isLoading , error ] = useSelector ( ( state ) => [ state . loading [ 'bugs/ADD_BUG' ] , state . error [ 'bugs/ADD_BUG' ] ] ) ; const onSubmit = async ( data ) => { dispatch ( addBug ( data ) ) . then ( ( ) => { reset ( ) ; setValue ( 'body' , '' ) ; history . push ( '/dashboard/bugs' ) ; socket . emit ( 'send-notification' , { message : 'New bug' } ) ; toast . success ( 'New bug added!' ) ; } ) ; } ; error && toast . error ( error ) ; return ( < AddBugWrapper > < DashboardHeader > < h1 > Submit new bug < /h1> < /DashboardHeader> < form onSubmit = { handleSubmit ( onSubmit as any ) } > < StyledEditor > < StyledH3Input className = "bug__edit-title" > < Input autoComplete = "off" name = "title" type = "text" icon = "edit" placeholder = "Enter Title" errors = { errors } inputRef = { register ( { required : 'Title is required' } ) } / > < /StyledH3Input> < Editor handleMarkdown = { handleMarkdown } markdown = { markdown } errors = { errors } inputRef = { register } / > < Button isLoading = { isLoading } type = "submit" className = "bug__button" icon = "plus" > Submit < /Button> < /StyledEditor> < /form> < /AddBugWrapper>); } ; export default AddBug ;