Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState, useCallback, useEffect } from "react";
import { useDropzone } from "react-dropzone";
import { shareModalTypes } from "../../redux/share-modal/shareModal.types";
import FormErrorFeedback from "../form-error-feedback/FormErrorFeedback";
const areEqual = (prevProps, nextProps) => {
  return prevProps.settedFile === nextProps.settedFile ? true : false;
};

const DropzoneComponent = (props) => {
  const { modalType, onUploaded, settedFile, recomendationText } = props;

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

  const onDropRejected = useCallback((rejectedFiles) => {
    rejectedFiles.map((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;
      }
    });
  }, []);

  useEffect(() => {
    if (settedFile) setFiles([settedFile]);
  }, [settedFile]);

  const acceptedMimeTypes = () => {
    switch (modalType) {
      case shareModalTypes.IMAGE:
        return "image/jpeg, image/png, image/jpg";
      case shareModalTypes.FILE:
        return "application/pdf";
      case shareModalTypes.VIDEO:
        return "video/mp4, video/mpeg, video/webm";
      case shareModalTypes.CHAT:
        return "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
      default:
        return null;
    }
  };

  const {
    getRootProps,
    getInputProps,
    acceptedFiles,
    fileRejections,
  } = useDropzone({
    accept: acceptedMimeTypes(),
    multiple: false,
    onDrop: (acceptedFiles) => {
      onUploaded(acceptedFiles[0]);
      setFiles(acceptedFiles.map((file) => file));
    },
    onDropRejected,
    onDropAccepted: () => {
      setErrors([]);
    },
    maxFiles: 1,
  });
  const thumbStyle = {
    display: "inline-flex",
    borderRadius: "2px",
    border: "1px solid #eaeaea",
    marginBottom: "8px",
    marginRight: "8px",
    width: "150px",
    height: "150px",
    padding: "4px",
    boxSizing: "border-box",
    position: "relative",
    zIndex: "100",
  };
  const thumbInnerStyle = {
    display: "flex",
    minWidth: 0,
    overflow: "hidden",
    marginRight: "1.5rem",
  };
  const imgStyle = {
    display: "block",
    width: "auto",
    height: "100%",
    objectFit: "contain",
  };

  const onDeleteFileHandler = (index) => {
    const newFiles = files.filter((_, id) => id !== index);
    onUploaded("");
    setFiles(newFiles);
  };

  const CloseButtonContainer = {
    width: "20px",
    height: "20px",
    position: "absolute",
    top: "5px",
    right: "0px",
    cursor: "pointer",
    zIndex: "200",
  };

  const filePreviewTest = (file, id) => {
    console.log(file)
    console.log(id)
    console.log(shareModalTypes)
    switch (modalType) {
      case shareModalTypes.IMAGE:
        return (
          <div style={thumbStyle} key={file.name}>
            <div style={thumbInnerStyle}>
              <img src={URL.createObjectURL(file)} style={imgStyle} />
            </div>
            <div
              style={CloseButtonContainer}
              onClick={() => onDeleteFileHandler(id)}
            >
              <img
                src="/css/icons/x-circle-fill.svg"
                alt="close-button"
                style={{ width: "100%", height: "100%" }}
              />
            </div>
          </div>
        );
      case shareModalTypes.FILE:
        return (
          <div
            style={{ ...thumbStyle, width: "90%", height: "auto", margin: 'auto' }}
            key={file.name}
          >
            <div style={thumbInnerStyle}>
              <object
                data={URL.createObjectURL(file)}
                type="application/pdf"
                width="400"
                height="200"
              ></object>
            </div>
            <div
              style={CloseButtonContainer}
              onClick={() => onDeleteFileHandler(id)}
            >
              <img
                src="/css/icons/x-circle-fill.svg"
                alt="close-button"
                style={{ width: "100%", height: "100%" }}
              />
            </div>
          </div>
        );
      case shareModalTypes.VIDEO:
        return (
          <div
            style={{ ...thumbStyle, width: "auto", height: "auto" }}
            key={file.name}
          >
            <div style={thumbInnerStyle}>
              <video
                src={URL.createObjectURL(file)}
                width="400"
                height="300"
                controls
                autoPlay
                muted
              ></video>
            </div>
            <div
              style={CloseButtonContainer}
              onClick={() => onDeleteFileHandler(id)}
            >
              <img
                src="/css/icons/x-circle-fill.svg"
                alt="close-button"
                style={{ width: "100%", height: "100%" }}
              />
            </div>
          </div>
        );
      case shareModalTypes.CHAT:
        switch (file.type) {
          case "video/mp4":
          case "video/mpeg":
          case "video/webm":
            return (
              <div
                style={{ ...thumbStyle, width: "90%", height: "auto", margin: 'auto' }}
                key={file.name}
              >
                <div style={thumbInnerStyle}>
                  <video
                    src={URL.createObjectURL(file)}
                    width="400"
                    height="300"
                    controls
                    autoPlay
                    muted
                  ></video>
                </div>
                <div
                  style={CloseButtonContainer}
                  onClick={() => onDeleteFileHandler(id)}
                >
                  <img
                    src="/css/icons/x-circle-fill.svg"
                    alt="close-button"
                    style={{ width: "100%", height: "100%" }}
                  />
                </div>
              </div>
            );
          case "image/jpeg":
          case "image/png":
          case "image/jpg":
            return (
              <div style={thumbStyle} key={file.name}>
                <div style={thumbInnerStyle}>
                  <img src={URL.createObjectURL(file)} style={imgStyle} />
                </div>
                <div
                  style={CloseButtonContainer}
                  onClick={() => onDeleteFileHandler(id)}
                >
                  <img
                    src="/css/icons/x-circle-fill.svg"
                    alt="close-button"
                    style={{ width: "100%", height: "100%" }}
                  />
                </div>
              </div>
            );
          case "application/pdf":
            return (
              <div
                style={{ ...thumbStyle, width: "90%", height: "auto", margin: 'auto' }}
                key={file.name}
              >
                <div style={thumbInnerStyle}>
                  <object
                    data={URL.createObjectURL(file)}
                    type="application/pdf"
                    width="400"
                    height="200"
                  ></object>
                </div>
                <div
                  style={CloseButtonContainer}
                  onClick={() => onDeleteFileHandler(id)}
                >
                  <img
                    src="/css/icons/x-circle-fill.svg"
                    alt="close-button"
                    style={{ width: "100%", height: "100%" }}
                  />
                </div>
              </div>
            );
          default:
            break;
        }
        break;
      default:
        break;
    }
  };

  const thumbsContainerStyle = {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: 16,
    position: "relative",
    justifyContent: "center",
  };

  const baseStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "2rem 0",
    borderWidth: 2,
    borderRadius: 2,
    borderColor: "#eeeeee",
    borderStyle: "dashed",
    backgroundColor: "#fafafa",
    color: "#bdbdbd",
    outline: "none",
    transition: "border .24s ease-in-out",
    marginTop: "1rem",
    cursor: "pointer",
  };

  return (
    <div>
      {
        !files.length
        &&
        <div {...getRootProps({ className: "dropzone", style: baseStyle })}>
          <input {...getInputProps()} />
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
          {recomendationText}
        </div>
      }
      <aside>
        <div style={thumbsContainerStyle}>
          {
            files.map((file, id) => filePreviewTest(file, id))
          }
        </div>
        {errors.map((error, index) => (
          <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
        ))}
      </aside>
    </div>
  );
};

export default React.memo(DropzoneComponent, areEqual);