Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1291 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1291 Rev 5916
Línea 1... Línea -...
1 
import React from "react";
 - 
 
2 
import { useState, useEffect } from "react";
 1 
import React, { useState } from 'react'
3 
import { Button, Modal } from "react-bootstrap";
 2 
import { Button, Modal } from 'react-bootstrap'
4 
import { useForm } from "react-hook-form";
 - 
 
5 
import styled from "styled-components";
 - 
 
6 
import { axios } from "../../../../utils";
 - 
 
7 
import Spinner from "../../../../shared/loading-spinner/Spinner";
 3 
import { shareModalTypes } from '../../../../redux/share-modal/shareModal.types'
- 
 
 4 
 
8 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
 5 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
9 
import { shareModalTypes } from "../../../../redux/share-modal/shareModal.types";
 6 
import DropzoneComponent from '../../../../shared/dropzone/DropzoneComponent'
10 
import DropzoneComponent from "../../../../shared/dropzone/DropzoneComponent";
 7 
import Spinner from '../../../../shared/loading-spinner/Spinner'
11 
 
 8 
 
12 
const StyledSpinnerContainer = styled.div`
 9 
const SendFileModal = ({ isShow, onHide, onComplete, loading }) => {
13 
  /* position: absolute; */
 - 
 
14 
  left: 0;
 - 
 
15 
  top: 0;
 - 
 
16 
  width: 100%;
 - 
 
17 
  height: 100%;
 - 
 
18 
  background: rgba(255, 255, 255, 0.4);
 10 
  const [selectedFile, setSelectedFile] = useState(null)
19 
  display: flex;
 - 
 
20 
  justify-content: center;
 11 
  const [error, setError] = useState(false)
21 
  align-items: center;
 - 
 
22 
  z-index: 300;
 - 
 
23 
`;
 - 
 
24 
 
 12 
 
25 
const SendFileModal = (props) => {
 13 
  const onUpload = (file) => {
26 
  // props destructuring
 - 
 
27 
  const { show, onHide, urlUpload } = props;
 - 
 
28 
 
 - 
 
29 
  // react hook form
 - 
 
30 
  const {
 - 
 
31 
    register,
 - 
 
32 
    errors,
 - 
 
33 
    handleSubmit,
 - 
 
34 
    setValue,
 14 
    setSelectedFile(file)
35 
    getValues,
 - 
 
36 
    clearErrors,
 - 
 
37 
  } = useForm();
 - 
 
38 
 
 15 
  }
39 
  // states
 - 
 
40 
  const [loading, setLoading] = useState(false);
 - 
 
41 
 
 16 
 
42 
  const onUploadedHandler = (files) => {
 17 
  const onClose = () => {
43 
    setValue("file", files);
 18 
    setSelectedFile(null)
44 
    clearErrors("file");
 19 
    onHide()
45 
  };
 20 
  }
46 
 
 21 
 
47 
  const onSubmitHandler = async (data) => {
 22 
  const handleSubmit = () => {
48 
    setLoading(true);
 - 
 
49 
    const formData = new FormData();
 - 
 
50 
    Object.entries(data).map(([key, value]) => {
 - 
 
51 
      formData.append(key, value);
 - 
 
52 
    });
 - 
 
53 
    await axios.post(urlUpload, formData).then((response) => {
 - 
 
54 
      const resData = response.data;
 - 
 
55 
      if (resData.success) {
 23 
    if (!selectedFile) {
56 
        onHide();
 24 
      setError(true)
57 
      }
 25 
      return
58 
    });
 26 
    }
59 
    setLoading(false);
 - 
 
60 
  };
 - 
 
61 
 
 27 
 
62 
  useEffect(() => {
 - 
 
63 
    register("file", {
 28 
    onComplete(selectedFile)
64 
      required: "Por favor seleccione un archivo",
 - 
 
65 
    });
 29 
  }
66 
  }, []);
 - 
 
Línea 67... Línea 30...
67 
 
 30 
 
68 
  return (
 31 
  return (
69 
    <Modal show={show} onHide={onHide} style={{ overflowY: "scroll" }}>
 - 
 
70 
      <Modal.Header closeButton>
 - 
 
71 
        <Modal.Title>Compartir un documento</Modal.Title>
 - 
 
72 
      </Modal.Header>
 - 
 
73 
      <form
 - 
 
74 
        encType="multipart/form-data"
 - 
 
75 
        onSubmit={handleSubmit(onSubmitHandler)}
 - 
 
76 
      >
 32 
    <Modal show={isShow} onHide={onClose}>
77 
        <Modal.Body>
 - 
 
78 
          {
 33 
      <Modal.Body>
79 
            loading
 - 
 
80 
              ?
 - 
 
81 
              <StyledSpinnerContainer>
 34 
        {loading ? (
82 
                <Spinner />
 - 
 
83 
              </StyledSpinnerContainer>
 35 
          <Spinner />
84 
              :
 36 
        ) : (
85 
              <DropzoneComponent
 37 
          <DropzoneComponent
86 
                modalType={shareModalTypes.CHAT}
 38 
            modalType={shareModalTypes.CHAT}
- 
 
 39 
            onUploaded={onUpload}
87 
                onUploaded={onUploadedHandler}
 40 
            settedFile={selectedFile}
88 
                recomendationText={
 41 
            recomendationText={
89 
                  <p style={{ textAlign: "center" }}>
 42 
              <p className="text-center">
90 
                    Imagenes: png, jpg, jpeg
 43 
                Imagenes: png, jpg, jpeg
91 
                    <br />
 44 
                <br />
92 
                    Videos: mp4, mpeg, webm
 45 
                Videos: mp4, mpeg, webm
93 
                    <br />
 46 
                <br />
94 
                    Archivos: pdf
 47 
                Archivos: pdf
95 
                  </p>
 48 
              </p>
96 
                }
 - 
 
97 
              />
 49 
            }
98 
          }
 50 
          />
99 
          {
 - 
 
100 
            errors.file
 51 
        )}
101 
            &&
 52 
        {error && (
102 
            <FormErrorFeedback>{errors.file.message}</FormErrorFeedback>
 53 
          <FormErrorFeedback>Por favor seleccione un archivo</FormErrorFeedback>
103 
          }
 54 
        )}
104 
        </Modal.Body>
 55 
      </Modal.Body>
105 
        <Modal.Footer>
 - 
 
106 
          <Button
 - 
 
107 
            type="submit"
 56 
      <Modal.Footer>
108 
            disabled={loading}
 - 
 
109 
          >
 57 
        <Button variant="primary" onClick={handleSubmit} disabled={loading}>
110 
            Enviar
 58 
          Enviar
111 
          </Button>
 59 
        </Button>
112 
          <Button variant="danger" onClick={onHide}>
 60 
        <Button variant="danger" onClick={onClose}>
113 
            Cancelar
 61 
          Cancelar
114 
          </Button>
 62 
        </Button>
115 
        </Modal.Footer>
 - 
 
116 
      </form>
 63 
      </Modal.Footer>
117 
    </Modal>
 64 
    </Modal>
118 
  );
 65 
  )
Línea 119... Línea 66...
119 
};
 66 
}