Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1288 | Rev 1291 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useState, useEffect } from "react";
3 
import { Button, Modal } from "react-bootstrap";
4 
import { useForm } from "react-hook-form";
5 
import styled from "styled-components";
1288 stevensc 6 
import { axios } from "../../../../utils";
1 www 7 
import Spinner from "../../../../shared/loading-spinner/Spinner";
8 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
9 
import { shareModalTypes } from "../../../../redux/share-modal/shareModal.types";
10 
import DropzoneComponent from "../../../../shared/dropzone/DropzoneComponent";
11 
 
12 
const StyledSpinnerContainer = styled.div`
13 
  /* position: absolute; */
14 
  left: 0;
15 
  top: 0;
16 
  width: 100%;
17 
  height: 100%;
18 
  background: rgba(255, 255, 255, 0.4);
19 
  display: flex;
20 
  justify-content: center;
21 
  align-items: center;
22 
  z-index: 300;
23 
`;
24 
 
25 
const SendFileModal = (props) => {
26 
  // props destructuring
27 
  const { show, onHide, urlUpload } = props;
28 
 
29 
  // react hook form
30 
  const {
31 
    register,
32 
    errors,
33 
    handleSubmit,
34 
    setValue,
35 
    getValues,
36 
    clearErrors,
37 
  } = useForm();
38 
 
39 
  // states
40 
  const [loading, setLoading] = useState(false);
41 
 
42 
  const onUploadedHandler = (files) => {
43 
    setValue("file", files);
44 
    clearErrors("file");
45 
  };
46 
 
47 
  const onSubmitHandler = async (data) => {
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) {
56 
        onHide();
57 
      }
58 
    });
59 
    setLoading(false);
60 
  };
61 
 
62 
  useEffect(() => {
63 
    register("file", {
64 
      required: "Por favor seleccione un archivo",
65 
    });
66 
  }, []);
67 
 
68 
  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 
      >
77 
        <Modal.Body>
1288 stevensc 78 
          {
79 
            loading
80 
              ?
1289 stevensc 81 
              <StyledSpinnerContainer>
82 
                <Spinner />
83 
              </StyledSpinnerContainer>
1288 stevensc 84 
              :
85 
              <DropzoneComponent
86 
                modalType={shareModalTypes.CHAT}
87 
                onUploaded={onUploadedHandler}
88 
                recomendationText={
89 
                  <p style={{ textAlign: "center" }}>
90 
                    Imagenes: png, jpg, jpeg
91 
                    <br />
92 
                    Videos: mp4, mpeg, webm
93 
                    <br />
94 
                    Archivos: pdf
95 
                  </p>
96 
                }
97 
              />
98 
          }
99 
          {
100 
            errors.file
101 
            &&
1 www 102 
            <FormErrorFeedback>{errors.file.message}</FormErrorFeedback>
1288 stevensc 103 
          }
1 www 104 
        </Modal.Body>
105 
        <Modal.Footer>
1289 stevensc 106 
          <Button
107 
            type="submit"
108 
            disabled={loading}
109 
          >
110 
            Enviar
111 
          </Button>
1 www 112 
          <Button variant="danger" onClick={onHide}>
113 
            Cancel
114 
          </Button>
115 
        </Modal.Footer>
116 
      </form>
117 
    </Modal>
118 
  );
119 
};
120 
 
121 
export default SendFileModal;