Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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