Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3730 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3730 Rev 5566
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from "react";
 2 
import React from 'react'
3 
import { useState } from "react";
 3 
import { useState } from 'react'
4 
import { useForm } from "react-hook-form";
 4 
import { useForm } from 'react-hook-form'
5 
import { axios } from "../../../../../utils";
 5 
import { axios } from '../../../../../utils'
6 
import Spinner from "../../../../loading-spinner/Spinner";
 6 
import Spinner from '../../../../loading-spinner/Spinner'
7 
import { profileTypes } from "../../../Profile.types";
 7 
import { profileTypes } from '../../../Profile.types'
8 
import { Button, Modal } from "react-bootstrap";
 8 
import { Button, Modal } from 'react-bootstrap'
9 
import styled from "styled-components";
 9 
import styled from 'styled-components'
10 
import { addNotification } from "../../../../../redux/notification/notification.actions";
 10 
import { addNotification } from '../../../../../redux/notification/notification.actions'
Línea 11... Línea 11...
11 
 
 11 
 
12 
const StyledSpinnerContainer = styled.div`
 12 
const StyledSpinnerContainer = styled.div`
13 
  position: absolute;
 13 
  position: absolute;
14 
  left: 0;
 14 
  left: 0;
Línea 18... Línea 18...
18 
  background: rgba(255, 255, 255, 0.4);
 18 
  background: rgba(255, 255, 255, 0.4);
19 
  display: flex;
 19 
  display: flex;
20 
  justify-content: center;
 20 
  justify-content: center;
21 
  align-items: center;
 21 
  align-items: center;
22 
  z-index: 300;
 22 
  z-index: 300;
23 
`;
 23 
`
Línea 24... Línea 24...
24 
 
 24 
 
25 
const SocialNetworks = ({
 25 
const SocialNetworks = ({
26 
  facebook = '',
 26 
  facebook = '',
27 
  twitter = '',
 27 
  twitter = '',
28 
  instagram = '',
 28 
  instagram = '',
29 
  profileId = '',
 29 
  profileId = '',
30 
  profileType = ''
 30 
  profileType = '',
31 
}) => {
 - 
 
32 
 
 - 
 
33 
  const { register, handleSubmit, setValue, getValues, setError } = useForm();
 31 
}) => {
34 
  const [isModalOpen, setIsModalOpen] = useState(false);
 - 
 
35 
  const [modalLoading, setModalLoading] = useState(false);
 32 
  const [isModalOpen, setIsModalOpen] = useState(false)
36 
  const [settedFacebook, setSettedtedFacebook] = useState(facebook);
 33 
  const [settedFacebook, setSettedtedFacebook] = useState(facebook)
37 
  const [settedTwitter, setSettedTwitter] = useState(twitter);
 34 
  const [settedTwitter, setSettedTwitter] = useState(twitter)
38 
  const [settedInstagram, setSettedInstagram] = useState(instagram);
 35 
  const [settedInstagram, setSettedInstagram] = useState(instagram)
39 
 
 36 
 
40 
  const handleModalOpen = (event) => {
 - 
 
41 
    event && event.preventDefault();
 37 
  const toggleModal = () => {
42 
    setIsModalOpen(!isModalOpen);
 38 
    setIsModalOpen(!isModalOpen)
43 
  };
 39 
  }
44 
 
 40 
 
45 
  const handleEdit = (event) => {
 - 
 
46 
    event.preventDefault();
 - 
 
47 
    handleModalOpen();
 - 
 
48 
    setValue("facebook", settedFacebook);
 - 
 
49 
    setValue("twitter", settedTwitter);
 - 
 
50 
    setValue("instagram", settedInstagram);
 - 
 
51 
  };
 - 
 
52 
 
 - 
 
53 
  const onSubmitHandler = async (data) => {
 - 
 
54 
    setModalLoading(true);
 - 
 
55 
    let postPath = "";
 - 
 
56 
    switch (profileType) {
 - 
 
57 
      case profileTypes.USER:
 - 
 
58 
        postPath = `/profile/my-profiles/social-network/${profileId}`;
 - 
 
59 
        break;
 - 
 
60 
      case profileTypes.COMPANY:
 - 
 
61 
        postPath = `/my-company/${profileId}/profile/social-network`;
 - 
 
62 
        break;
 - 
 
63 
      default:
 - 
 
64 
        break;
 - 
 
65 
    }
 - 
 
66 
    const formData = new FormData();
 - 
 
67 
    Object.entries(data).map(([key, value]) => {
 - 
 
68 
      formData.append(key, value);
 - 
 
69 
    });
 - 
 
70 
    await axios.post(postPath, formData).then((response) => {
 - 
 
71 
      const resData = response.data;
 - 
 
72 
      (resData);
 - 
 
73 
      if (resData.success) {
 41 
  const handleEdit = (rrss) => {
74 
        setSettedtedFacebook(resData.data.facebook);
 42 
    setSettedtedFacebook(rrss.facebook)
75 
        setSettedTwitter(resData.data.twitter);
 43 
    setSettedTwitter(rrss.twitter)
76 
        setSettedInstagram(resData.data.instagram);
 - 
 
77 
        setIsModalOpen();
 - 
 
78 
      } else {
 - 
 
79 
        const resError = resData.data;
 - 
 
80 
        if (resError.constructor.name === "Object") {
 - 
 
81 
          Object.entries(resError).map(([key, value]) => {
 - 
 
82 
            if (key in getValues()) {
 - 
 
83 
              setError(key, {
 - 
 
84 
                type: "manual",
 - 
 
85 
                message: Array.isArray(value) ? value[0] : value,
 - 
 
86 
              });
 - 
 
87 
            }
 - 
 
88 
          });
 - 
 
89 
        } else {
 - 
 
90 
          addNotification({
 - 
 
91 
            style: "danger",
 - 
 
92 
            msg: resError,
 - 
 
93 
          });
 - 
 
94 
        }
 - 
 
95 
      }
 - 
 
96 
    });
 - 
 
97 
    setModalLoading(false);
 44 
    setSettedInstagram(rrss.instagram)
Línea 98... Línea 45...
98 
  };
 45 
  }
99 
 
 46 
 
100 
  return (
 47 
  return (
101 
    <React.Fragment>
 48 
    <>
102 
      <div className="user-social-network-ov">
 49 
      <div className="user-social-network-ov">
103 
        <h3>
 50 
        <h3>
104 
          Redes Sociales
 51 
          Redes Sociales
105 
          <a
 52 
          <a
106 
            href="#"
 53 
            href="#"
107 
            title=""
 54 
            title=""
108 
            className="btn-social-network-edit"
 55 
            className="btn-social-network-edit"
109 
            onClick={handleEdit}
 56 
            onClick={toggleModal}
110 
          >
 57 
          >
111 
            <i className="fa fa-pencil"></i>
 58 
            <i className="fa fa-pencil"></i>
112 
          </a>
 59 
          </a>
Línea 113... Línea 60...
113 
        </h3>
 60 
        </h3>
114 
      </div>
 61 
      </div>
115 
 
 62 
 
116 
      <ul id="social-networks" className="social_links">
 63 
      <ul id="social-networks" className="social_links">
117 
        {settedFacebook && (
 64 
        {settedFacebook && (
118 
          <li>
 65 
          <li>
119 
            <a href={settedFacebook} target="_blank" title="" rel="noreferrer">
 66 
            <a href={settedFacebook} target="_blank" title="" rel="noreferrer">
120 
              <i className="fa fa-facebook-square"></i>{" "}
 67 
              <i className="fa fa-facebook-square"></i>
121 
              {settedFacebook.length > 32
 68 
              {settedFacebook.length > 32
122 
                ? `${settedFacebook.substr(0, 32)}...`
 69 
                ? `${settedFacebook.substr(0, 32)}...`
Línea 135... Línea 82...
135 
          </li>
 82 
          </li>
136 
        )}
 83 
        )}
137 
        {settedInstagram && (
 84 
        {settedInstagram && (
138 
          <li>
 85 
          <li>
139 
            <a href={settedInstagram} target="_blank" title="" rel="noreferrer">
 86 
            <a href={settedInstagram} target="_blank" title="" rel="noreferrer">
140 
              <i className="fa fa-instagram"></i>{" "}
 87 
              <i className="fa fa-instagram"></i>
141 
              {settedInstagram.length > 32
 88 
              {settedInstagram.length > 32
142 
                ? `${settedInstagram.substr(0, 32)}...`
 89 
                ? `${settedInstagram.substr(0, 32)}...`
143 
                : settedInstagram}
 90 
                : settedInstagram}
144 
            </a>
 91 
            </a>
145 
          </li>
 92 
          </li>
146 
        )}
 93 
        )}
147 
      </ul>
 94 
      </ul>
Línea 148... Línea 95...
148 
 
 95 
 
149 
      {/* modal */}
 - 
 
150 
      <Modal
 - 
 
151 
        show={isModalOpen}
 - 
 
152 
        onHide={handleModalOpen}
 - 
 
153 
        style={{ overflowY: "scroll" }}
 96 
      {/* modal */}
154 
      >
 - 
 
155 
        <Modal.Header closeButton>
 - 
 
156 
          <Modal.Title>Redes Sociales</Modal.Title>
 - 
 
157 
        </Modal.Header>
 - 
 
158 
        <form onSubmit={handleSubmit(onSubmitHandler)}>
 - 
 
159 
          <Modal.Body>
 - 
 
160 
            <div className="form-group">
 - 
 
161 
              <input
 - 
 
162 
                type="text"
 - 
 
163 
                name="facebook"
 - 
 
164 
                placeholder="Perfil de Facebook"
 - 
 
165 
                ref={register}
 - 
 
166 
                defaultValue={settedFacebook}
 - 
 
167 
              />
 - 
 
168 
            </div>
 - 
 
169 
            <div className="form-group">
 - 
 
170 
              <input
 - 
 
171 
                type="text"
 - 
 
172 
                name="twitter"
 - 
 
173 
                placeholder="Perfil de Twitter"
 - 
 
174 
                ref={register}
 - 
 
175 
                defaultValue={settedTwitter}
 - 
 
176 
              />
 - 
 
177 
            </div>
 - 
 
178 
            <div className="form-group">
 - 
 
179 
              <input
 - 
 
180 
                type="text"
 - 
 
181 
                name="instagram"
 - 
 
182 
                placeholder="Perfil de Instagram"
 - 
 
183 
                ref={register}
 - 
 
184 
                defaultValue={settedInstagram}
 - 
 
185 
              />
 - 
 
186 
            </div>
 - 
 
187 
          </Modal.Body>
 - 
 
188 
          <Modal.Footer>
 - 
 
189 
            <Button type="submit">Enviar</Button>
 - 
 
190 
            <Button variant="danger" onClick={handleModalOpen}>
 - 
 
191 
              Cancelar
 - 
 
192 
            </Button>
 - 
 
193 
          </Modal.Footer>
 - 
 
194 
        </form>
 - 
 
195 
        {modalLoading && (
 - 
 
196 
          <StyledSpinnerContainer>
 - 
 
197 
            <Spinner />
 - 
 
198 
          </StyledSpinnerContainer>
 - 
 
199 
        )}
 - 
 
200 
      </Modal>
 - 
 
201 
    </React.Fragment>
 97 
    </>
202 
  );
 98 
  )
Línea 203... Línea 99...
203 
};
 99 
}