Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1173 | | 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";
6 
import {axios} from "../../../../../utils";
7 
import FormErrorFeedback from "../../../../../shared/form-error-feedback/FormErrorFeedback";
8 
import Spinner from "../../../../../shared/loading-spinner/Spinner";
9 
 
10 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
12 
  left: 0;
13 
  top: 0;
14 
  width: 100%;
15 
  height: 100%;
16 
  background: rgba(255, 255, 255, 0.4);
17 
  display: flex;
18 
  justify-content: center;
19 
  align-items: center;
20 
  z-index: 300;
21 
`;
22 
 
23 
const Website = (props) => {
24 
  // props destructuring
25 
  const { groupId, website, addNotification } = props;
26 
  // react hook form
27 
  const {
28 
    register,
29 
    errors,
30 
    handleSubmit,
31 
    setValue,
32 
    clearErrors,
33 
    getValues,
34 
    setError,
35 
  } = useForm();
36 
 
37 
  // states
38 
  const [isModalOpen, setIsModalOpen] = useState(false);
39 
  const [loading, setLoading] = useState(false);
40 
  const [settedWebsite, setSettedWebsite] = useState(website);
41 
 
42 
  const handleModalOpen = (event) => {
43 
    event && event.preventDefault();
44 
    setIsModalOpen(!isModalOpen);
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
54 
      .post(`/group/my-groups/website/${groupId}`, formData)
55 
      .then((response) => {
56 
        const resData = response.data;
57 
         (resData);
58 
        if (resData.success) {
59 
          setSettedWebsite(resData.data);
60 
          handleModalOpen();
61 
        } else {
62 
          const resError = resData.data;
63 
          if (resError.constructor.name === "Object") {
64 
            Object.entries(resError).map(([key, value]) => {
65 
              if (key in getValues()) {
66 
                setError(key, {
67 
                  type: "manual",
68 
                  message: Array.isArray(value) ? value[0] : value,
69 
                });
70 
              }
71 
            });
72 
          } else {
73 
            addNotification({
74 
              style: "danger",
75 
              msg: resError,
76 
            });
77 
          }
78 
        }
79 
      });
80 
    setLoading(false);
81 
  };
82 
  return (
83 
    <React.Fragment>
84 
      <div className="user-profile-extended-ov">
85 
        <h3>
86 
          Página web
87 
          <a
88 
            href="#"
89 
            title=""
90 
            className="btn-website-edit"
91 
            onClick={handleModalOpen}
92 
          >
93 
            <i className="fa fa-pencil"></i>
94 
          </a>
95 
        </h3>
96 
        <a
97 
          href={`http://${settedWebsite}`}
98 
          target="_blank"
99 
          id="overview-website"
100 
        >
101 
          {settedWebsite}
102 
        </a>
103 
      </div>
104 
 
105 
      {/* modal */}
106 
      <Modal
107 
        show={isModalOpen}
108 
        onHide={handleModalOpen}
109 
        style={{ overflowY: "scroll" }}
110 
      >
111 
        <Modal.Header closeButton>
1179 stevensc 112 
          <Modal.Title>Página web</Modal.Title>
1 www 113 
        </Modal.Header>
114 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
115 
          <Modal.Body>
116 
            <input
117 
              type="text"
118 
              name="website"
119 
              id="website"
120 
              ref={register}
121 
              defaultValue={settedWebsite}
122 
            />
123 
            {errors.website && (
124 
              <FormErrorFeedback>{errors.website.message}</FormErrorFeedback>
125 
            )}
126 
          </Modal.Body>
127 
          <Modal.Footer>
128 
            <Button type="submit">Enviar</Button>
129 
            <Button variant="danger" onClick={handleModalOpen}>
1173 stevensc 130 
              Cancelar
1 www 131 
            </Button>
132 
          </Modal.Footer>
133 
        </form>
134 
        {loading && (
135 
          <StyledSpinnerContainer>
136 
            <Spinner />
137 
          </StyledSpinnerContainer>
138 
        )}
139 
      </Modal>
140 
    </React.Fragment>
141 
  );
142 
};
143 
 
144 
export default Website;