Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | | 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 {axios} from "../../../../../utils";
6 
import styled from "styled-components";
7 
import DropzoneComponent from "../../../../../shared/dropzone/DropzoneComponent";
8 
import FormErrorFeedback from "../../../../../shared/form-error-feedback/FormErrorFeedback";
9 
import Spinner from "../../../../../shared/loading-spinner/Spinner";
10 
 
11 
const StyledSpinnerContainer = styled.div`
12 
  position: absolute;
13 
  left: 0;
14 
  top: 0;
15 
  width: 100%;
16 
  height: 100%;
17 
  background: rgba(255, 255, 255, 0.4);
18 
  display: flex;
19 
  justify-content: center;
20 
  align-items: center;
21 
  z-index: 300;
22 
`;
23 
 
24 
const Cover = (props) => {
25 
  // props destructuring
26 
  const { groupId, cover, addNotification, imageSizeCover } = props;
27 
 
28 
  // react hook form
29 
  const {
30 
    register,
31 
    errors,
32 
    handleSubmit,
33 
    setValue,
34 
    clearErrors,
35 
    setError,
36 
  } = useForm();
37 
 
38 
  // states
39 
  const [isModalOpen, setIsModalOpen] = useState(false);
40 
  const [loading, setLoading] = useState(false);
41 
  const [coverImg, setCoverImg] = useState({
42 
    path: `/storage/type/group-cover/code/${groupId}/${
43 
      cover && `filename/${cover}`
44 
    }`,
45 
    uid: Date.now(),
46 
  });
47 
 
48 
  useEffect(() => {
49 
    register("cover", {
50 
      required: { value: "true", message: "El campo es requerido" },
51 
    });
52 
    // setSettedCover(false);
53 
  }, []);
54 
 
55 
  const handleCoverSectionModalOpen = (event) => {
56 
    event && event.preventDefault();
57 
    setIsModalOpen(!isModalOpen);
58 
  };
59 
 
60 
  const onUploadedHandler = (files) => {
61 
    setValue("cover", files);
62 
    clearErrors("cover");
63 
  };
64 
 
65 
  const onSubmitHandler = async (data) => {
66 
    setLoading(true);
67 
    const formData = new FormData();
68 
    Object.entries(data).map(([key, value]) => {
69 
      formData.append(key, value);
70 
    });
71 
    await axios
72 
      .post(`/group/my-groups/cover/${groupId}/operation/upload`, formData)
73 
      .then((response) => {
74 
        const resData = response.data;
75 
         (resData);
76 
        if (resData.success) {
77 
          setLoading(false);
78 
          const newCoverImg = {
79 
            path: resData.data,
80 
            uid: Date.now(),
81 
          };
82 
          setCoverImg(newCoverImg);
83 
          setValue("cover", "");
84 
          handleCoverSectionModalOpen();
85 
        } else {
86 
          const resError = resData.data;
87 
          if (resError.constructor.name === "Object") {
88 
            Object.entries(resError).map(([key, value]) => {
89 
              if (key in getValues()) {
90 
                setError(key, {
91 
                  type: "manual",
92 
                  message: Array.isArray(value) ? value[0] : value,
93 
                });
94 
              }
95 
            });
96 
          } else {
97 
            addNotification({
98 
              style: "danger",
99 
              msg: resError,
100 
            });
101 
          }
102 
        }
103 
      });
104 
    setLoading(false);
105 
  };
106 
 
107 
  const dropZoneRender = () => (
108 
    <DropzoneComponent
109 
      modalType="IMAGE"
110 
      onUploaded={onUploadedHandler}
111 
      recomendationText={`Imágenes recomendadas de ${imageSizeCover}`}
112 
    />
113 
  );
114 
  return (
115 
    <React.Fragment>
116 
      <section className="cover-sec">
117 
        <img
118 
          id="user-cover-img"
119 
          // src={`${coverImg.path}?${coverImg.uid}`}
120 
          src={`${coverImg.path}`}
121 
          // src="<?php echo $this->url('storage', ['type' => 'group-cover', 'code' => $group_id_encrypted, 'filename' => $cover]) ?>"
122 
          alt="cover-image"
123 
        />
124 
        <div className="add-pic-box">
125 
          <div className="container">
126 
            <div className="row no-gutters">
127 
              <div className="col-lg-12 col-sm-12">
128 
                <a
129 
                  href="#"
130 
                  className="btn-cover-open"
131 
                  onClick={(e) => {
132 
                    e.preventDefault();
133 
                    handleCoverSectionModalOpen();
134 
                  }}
135 
                >
136 
                  Cambiar imagen
137 
                </a>
138 
              </div>
139 
            </div>
140 
          </div>
141 
        </div>
142 
      </section>
143 
 
144 
      {/* modal */}
145 
      <Modal
146 
        show={isModalOpen}
147 
        onHide={handleCoverSectionModalOpen}
148 
        style={{ overflowY: "scroll" }}
149 
      >
150 
        <Modal.Header closeButton>
151 
          <Modal.Title>Portada</Modal.Title>
152 
        </Modal.Header>
153 
        <form
154 
          encType="multipart/form-data"
155 
          onSubmit={handleSubmit(onSubmitHandler)}
156 
        >
157 
          <Modal.Body>
158 
            {dropZoneRender()}
159 
            {errors.cover && (
160 
              <FormErrorFeedback>{errors.cover.message}</FormErrorFeedback>
161 
            )}
162 
          </Modal.Body>
163 
          <Modal.Footer>
164 
            <Button type="submit">Enviar</Button>
165 
            <Button variant="danger" onClick={handleCoverSectionModalOpen}>
1206 stevensc 166 
              Cancelar
1 www 167 
            </Button>
168 
          </Modal.Footer>
169 
        </form>
170 
        {loading && (
171 
          <StyledSpinnerContainer>
172 
            <Spinner />
173 
          </StyledSpinnerContainer>
174 
        )}
175 
      </Modal>
176 
    </React.Fragment>
177 
  );
178 
};
179 
 
180 
export default Cover;