Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3069 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3069 stevensc 1 
/* eslint-disable react/prop-types */
1 www 2 
import React from "react";
3 
import { useState, useEffect } from "react";
4 
import { Button, Modal } from "react-bootstrap";
5 
import { useForm } from "react-hook-form";
6 
import styled from "styled-components";
2243 stevensc 7 
import { axios } from "../../../../../utils";
8 
import { CKEditor } from "ckeditor4-react";
1 www 9 
import FormErrorFeedback from "../../../../../shared/form-error-feedback/FormErrorFeedback";
10 
import Spinner from "../../../../../shared/loading-spinner/Spinner";
2243 stevensc 11 
import { CKEDITOR_OPTIONS } from "../../../../../utils";
1 www 12 
import parse from "html-react-parser";
13 
 
14 
const StyledSpinnerContainer = styled.div`
15 
  position: absolute;
16 
  left: 0;
17 
  top: 0;
18 
  width: 100%;
19 
  height: 100%;
20 
  background: rgba(255, 255, 255, 0.4);
21 
  display: flex;
22 
  justify-content: center;
23 
  align-items: center;
24 
  z-index: 300;
25 
`;
26 
 
3069 stevensc 27 
const Overview = ({ groupId, overview, addNotification }) => {
28 
 
1 www 29 
  // react hook form
30 
  const {
31 
    register,
32 
    errors,
33 
    handleSubmit,
34 
    setValue,
35 
    clearErrors,
36 
    getValues,
37 
    setError,
38 
  } = useForm();
39 
 
233 steven 40 
 
41 
 
1 www 42 
  // states
43 
  const [isModalOpen, setIsModalOpen] = useState(false);
44 
  const [loading, setLoading] = useState(false);
45 
  const [settedOverview, setSettedOverview] = useState(overview);
46 
 
47 
  useEffect(() => {
48 
    register("description", {
49 
      required: "Este campo es requerido",
50 
    });
51 
    setValue("description", settedOverview);
52 
  }, []);
53 
 
54 
  const handleModalOpen = (event) => {
55 
    event && event.preventDefault();
56 
    setIsModalOpen(!isModalOpen);
57 
  };
58 
 
59 
  const onSubmitHandler = async (data) => {
60 
    setLoading(true);
61 
    const formData = new FormData();
2243 stevensc 62 
    (data);
1 www 63 
    Object.entries(data).map(([key, value]) => {
64 
      formData.append(key, value);
65 
    });
66 
    await axios
67 
      .post(`/group/my-groups/extended/${groupId}`, formData)
68 
      .then((response) => {
69 
        const resData = response.data;
2243 stevensc 70 
        (resData);
1 www 71 
        if (resData.success) {
72 
          setSettedOverview(resData.data);
73 
          handleModalOpen();
74 
        } else {
75 
          const resError = resData.data;
76 
          if (resError.constructor.name === "Object") {
77 
            Object.entries(resError).map(([key, value]) => {
78 
              if (key in getValues()) {
79 
                setError(key, {
80 
                  type: "manual",
81 
                  message: Array.isArray(value) ? value[0] : value,
82 
                });
83 
              }
84 
            });
85 
          } else {
86 
            addNotification({
87 
              style: "danger",
88 
              msg: resError,
89 
            });
90 
          }
91 
        }
92 
      });
93 
    setLoading(false);
94 
  };
95 
 
96 
  return (
97 
    <React.Fragment>
98 
      <div className="user-profile-extended-ov">
99 
        <h3>
230 steven 100 
          Visión general
1 www 101 
          <a
102 
            href="#"
103 
            title=""
104 
            className="btn-extended-edit"
105 
            onClick={handleModalOpen}
106 
          >
107 
            <i className="fa fa-pencil"></i>
108 
          </a>
109 
        </h3>
110 
        <span id="overview-description">{parse(`${settedOverview}`)}</span>
111 
      </div>
112 
 
113 
      <Modal
114 
        show={isModalOpen}
115 
        onHide={handleModalOpen}
116 
        style={{ overflowY: "scroll" }}
117 
      >
118 
        <Modal.Header closeButton>
233 steven 119 
          <Modal.Title>Visión general</Modal.Title>
1 www 120 
        </Modal.Header>
121 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
122 
          <Modal.Body>
123 
            <CKEditor
124 
              onChange={(e) => {
3070 stevensc 125 
                setValue("description", e.editor.getData());
126 
                if (errors.description) clearErrors("description");
1 www 127 
              }}
3070 stevensc 128 
              onInstanceReady={(e) => e.editor.setData(settedOverview)}
2044 steven 129 
              config={CKEDITOR_OPTIONS}
1 www 130 
              name="description"
131 
            />
132 
            {errors.description && (
133 
              <FormErrorFeedback>
134 
                {errors.description.message}
135 
              </FormErrorFeedback>
136 
            )}
137 
          </Modal.Body>
138 
          <Modal.Footer>
139 
            <Button type="submit">Enviar</Button>
140 
            <Button variant="danger" onClick={handleModalOpen}>
1206 stevensc 141 
              Cancelar
1 www 142 
            </Button>
143 
          </Modal.Footer>
144 
        </form>
145 
        {loading && (
146 
          <StyledSpinnerContainer>
147 
            <Spinner />
148 
          </StyledSpinnerContainer>
149 
        )}
150 
      </Modal>
151 
    </React.Fragment>
152 
  );
153 
};
154 
 
155 
export default Overview;