Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { IconButton } from '@mui/material';

import { AttachFile, SendRounded } from '@mui/icons-material';

import { FileModal, Form, FormInput } from '@shared/components';

import { useModal } from '@shared/hooks';

export const ChatForm = ({ onSubmit }) => {

  const [files, setFiles] = useState([]);

  const { showModal, closeModal } = useModal();

  const handleSubmit = (data) => {

    onSubmit({ ...data, file: files[0] });

  };

  const attachFile = () => {

    showModal(

      'Elegir archivo',

      <FileModal

        onSubmit={(data) => {

          setFiles(data);

          closeModal();

        }}

      />

    );

  };

  return (

    <Form

      defaultValues={{ message: '' }}

      reset

      onSubmit={handleSubmit}

      style={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}

    >

      <IconButton onClick={attachFile}>

        <AttachFile />

      </IconButton>

      <FormInput

        name='message'

        placeholder='Escribe un mensaje'

        autoComplete='off'

        rules={{ required: true }}

        endAdornment={

          <IconButton type='submit' sx={{ padding: 0.4 }}>

            <SendRounded />

          </IconButton>

        }

      />

    </Form>

  );

};