Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'

import { useForm } from 'react-hook-form'

import { useSelector } from 'react-redux'

import { IconButton } from '@mui/material'

import { Send } from '@mui/icons-material'

import { StyledCommentForm } from './comments-ui'

import Input from '@app/components/UI/Input'

export default function CommentForm({ onSubmit = () => null }) {

  const labels = useSelector(({ intl }) => intl.labels)

  const { register, handleSubmit, errors, setValue, watch } = useForm({

    defaultValues: {

      comment: ''

    }

  })

  const currentComment = watch('comment')

  const submitHandler = handleSubmit(({ comment }) => {

    onSubmit(comment)

    setValue('comment', '')

  })

  useEffect(() => {

    register('comment', { required: true })

  }, [])

  return (

    <StyledCommentForm onSubmit={submitHandler} autoComplete='off'>

      {/* {image && (

        <Avatar

          src={}

          alt='Profile image'

          sx={{ width: '45px', height: '45px' }}

        />

      )} */}

      <Input

        type='text'

        name='comment'

        placeholder={labels.write_a_comment}

        primary={false}

        onChange={(e) => setValue('comment', e.target.value)}

        value={currentComment}

        error={errors.comment?.message}

        sx={{ flex: '1 1 50%' }}

      />

      <IconButton type='submit'>

        <Send />

      </IconButton>

    </StyledCommentForm>

  )

}