Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { Controller, useForm } from 'react-hook-form';

import { useDispatch, useSelector } from 'react-redux';

import { useShareModal } from '@hooks';

import { addFeed } from '@store/feed/feed.actions';

import { feedTypes } from '@store/feed/feed.types';

import { addNotification } from '@store/notification/notification.actions';

import { shareModalTypes } from '@store/share-modal/shareModal.types';

import Form from '@components/common/form';

import Modal from '@components/UI/modal/Modal';

import Select from '@components/UI/inputs/Select';

import Ckeditor from '@components/common/ckeditor/Ckeditor';

import DropzoneComponent from '@components/dropzone/DropzoneComponent';

import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';

import ConfirmModal from './ConfirmModal';

const recomendationText = {

  [shareModalTypes.IMAGE]: 'Tamaño recomendado: 720x720',

  [shareModalTypes.FILE]: 'solo documentos PDF',

  [shareModalTypes.VIDEO]: 'Video de extensión mp4, mpeg, webm, mov'

};

const ShareModal = () => {

  const [showConfirm, setShowConfirm] = useState(false);

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

  const dispatch = useDispatch();

  const { show, modalType, feedType, feedSharedId, postUrl, closeModal, openModal } =

    useShareModal();

  const {

    control,

    formState: { errors, isSubmitting },

    handleSubmit,

    reset,

    watch

  } = useForm({

    defaultValues: {

      shared_with: 'p',

      description: ''

    }

  });

  const description = watch('description');

  const file = watch('file');

  const toggleConfirm = () => setShowConfirm(!showConfirm);

  const onSubmit = handleSubmit(async (feed) => {

    try {

      feed.posted_or_shared = modalType === shareModalTypes.SHARE ? 's' : 'p';

      await dispatch(addFeed(postUrl, feed, feedSharedId));

      dispatch(

        addNotification({

          style: 'success',

          msg: 'Post publicado correctamente'

        })

      );

      reset();

      closeModal();

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    }

  });

  const handleClose = () => {

    if (description || file) toggleConfirm();

    closeModal();

  };

  const handleConfirm = () => {

    reset();

    toggleConfirm();

    closeModal();

  };

  const handleCancel = () => {

    toggleConfirm();

    openModal({ url: postUrl, modalType, feedType });

  };

  return (

    <>

      <Modal

        show={show}

        title={labels.share_a_post}

        labelAccept={labels.send}

        labelReject={labels.cancel}

        loading={isSubmitting}

        onClose={handleClose}

        formId='share_modal-form'

      >

        <Form onSubmit={onSubmit} id='share_modal-form'>

          {feedType === feedTypes.DASHBOARD && (

            <Select

              name='shared_with'

              defaultValue='p'

              control={control}

              options={[

                { label: labels.public, value: 'p' },

                { label: labels.connections, value: 'c' }

              ]}

            />

          )}

          <Ckeditor

            name='description'

            control={control}

            rules={{ required: 'La descripción es requerida' }}

            error={errors.description?.message}

          />

          {![shareModalTypes.POST, shareModalTypes.SHARE].includes(modalType) && (

            <Controller

              name='file'

              control={control}

              rules={{ required: 'El archivo es requerido' }}

              render={({ field: { value, onChange }, fieldState: { error } }) => (

                <>

                  <DropzoneComponent

                    type={modalType}

                    onUploaded={onChange}

                    settedFile={value}

                    recomendationText={recomendationText[modalType] ?? ''}

                  />

                  {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}

                </>

              )}

            />

          )}

        </Form>

      </Modal>

      <ConfirmModal

        show={showConfirm}

        onAccept={handleConfirm}

        onClose={handleCancel}

        message='¿Estás seguro de que quieres salir sin publicar tu post?'

      />

    </>

  );

};

export default ShareModal;