Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useCallback, useEffect, useRef } from 'react';

import { useDropzone } from 'react-dropzone';

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

import Close from '@mui/icons-material/Close';

import { useMobile } from '@hooks';

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

import FormErrorFeedback from '../UI/form/FormErrorFeedback';

const DragAndDropContainer = styled('div')`

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 2rem 0;

  border: 2px dashed #eee;

  border-radius: 2;

  background-color: #fafafa;

  color: #bdbdbd;

  outline: none;

  transition: border 0.24s ease-in-out;

  text-align: center;

  cursor: pointer;

`;

const PreviewContainer = styled('div')`

  display: flex;

  position: relative;

  justify-content: center;

  img,

  video,

  object {

    width: 80%;

    max-height: 200px;

    max-width: 350px;

    object-fit: contain;

    display: block;

    margin: 0 auto;

  }

`;

const CloseButton = styled(IconButton)`

  position: absolute;

  background-color: #000;

  color: #fff;

  right: 1rem;

  svg {

    font-size: 1rem;

  }

`;

const DropzoneComponent = ({ type, onUploaded, settedFile, recomendationText }) => {

  const [errors, setErrors] = useState([]);

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

  const mobileFileInputRef = useRef();

  const isMobile = useMobile();

  const acceptedMimeTypes = (type = '') => {

    switch (type) {

      case shareModalTypes.IMAGE:

        return 'image/jpeg, image/png, image/jpg';

      case shareModalTypes.FILE:

        return 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation';

      case shareModalTypes.VIDEO:

        return 'video/mp4, video/mpeg, video/webm, video/quicktime';

      case shareModalTypes.CHAT:

        return 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg';

      default:

        return null;

    }

  };

  const onDropRejected = useCallback((rejectedFiles) => {

    rejectedFiles.forEach((fileRejection) => {

      switch (fileRejection.errors[0].code) {

        case 'too-many-files':

          setErrors([...errors, 'solo puedes agregar 1 archivo']);

          break;

        case 'file-invalid-type':

          setErrors([...errors, 'por favor seleccione un archivo valido']);

          break;

        default:

          setErrors(errors);

          break;

      }

    });

  }, []);

  const onDropAccepted = useCallback((acceptedFiles) => {

    onUploaded(acceptedFiles[0]);

    setFiles(acceptedFiles.map((file) => file));

  }, []);

  const { getRootProps, getInputProps } = useDropzone({

    accept: acceptedMimeTypes(type),

    multiple: false,

    onDrop: onDropAccepted,

    onDropRejected,

    onDropAccepted: () => {

      setErrors([]);

    },

    maxFiles: 1

  });

  const onDeleteFileHandler = () => {

    setFiles([]);

    onUploaded('');

  };

  useEffect(() => {

    if (!settedFile) return;

    setFiles([settedFile]);

  }, [settedFile]);

  const filePreviewTest = (file) => {

    switch (type) {

      case shareModalTypes.IMAGE:

        return <img src={URL.createObjectURL(file)} />;

      case shareModalTypes.VIDEO:

        return <video src={URL.createObjectURL(file)} width='400' height='300' controls muted />;

      case shareModalTypes.CHAT:

        switch (file.type) {

          case 'video/mp4':

          case 'video/mpeg':

          case 'video/webm':

            return (

              <video src={URL.createObjectURL(file)} width='400' height='300' controls muted />

            );

          case 'image/jpeg':

          case 'image/png':

          case 'image/jpg':

            return <img src={URL.createObjectURL(file)} />;

          case 'application/pdf':

            return (

              <object

                data={URL.createObjectURL(file)}

                type='application/pdf'

                width='400'

                height='200'

              />

            );

          default:

            break;

        }

        break;

      case shareModalTypes.FILE:

        switch (file.type) {

          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':

            return (

              <iframe

                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(

                  file

                )}`}

                width='100%'

                height='600px'

              />

            );

          case 'application/pdf':

            return <object data={URL.createObjectURL(file)} type='application/pdf' />;

          default:

            break;

        }

    }

  };

  if (files.length) {

    return (

      <PreviewContainer>

        {files.map((file) => filePreviewTest(file))}

        <CloseButton onClick={() => onDeleteFileHandler()}>

          <Close />

        </CloseButton>

      </PreviewContainer>

    );

  }

  return (

    <>

      {isMobile ? (

        <DragAndDropContainer onClick={() => mobileFileInputRef.current.click()}>

          <input

            accept={acceptedMimeTypes(type)}

            ref={mobileFileInputRef}

            onChange={(e) => onDropAccepted(e.target.files)}

            type='file'

            hidden

          />

          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>

          {recomendationText}

        </DragAndDropContainer>

      ) : (

        <DragAndDropContainer {...getRootProps()}>

          <input {...getInputProps()} />

          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>

          {recomendationText}

        </DragAndDropContainer>

      )}

      {errors.map((error, index) => (

        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>

      ))}

    </>

  );

};

const areEqual = (prevProps, nextProps) => {

  return prevProps.settedFile === nextProps.settedFile;

};

export default React.memo(DropzoneComponent, areEqual);