Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 5 | Rev 43 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
42 stevensc 1 
import React, { useEffect, useState } from "react";
2 
import { axios } from "../../../utils";
3 
import { addNotification } from "../../../redux/notification/notification.actions";
4 
import { useDispatch, useSelector } from "react-redux";
5 
import styled from "styled-components";
5 stevensc 6 
 
42 stevensc 7 
import EmptySection from "../../UI/EmptySection";
8 
import WidgetLayout from "../WidgetLayout";
5 stevensc 9 
 
42 stevensc 10 
const StyledContainer = styled(WidgetLayout)`
11 
  .header {
12 
    align-items: center;
13 
    display: flex;
14 
    justify-content: space-between;
15 
    padding: 1rem;
16 
    span {
17 
      cursor: pointer;
18 
    }
19 
  }
5 stevensc 20 
 
42 stevensc 21 
  & > .suggest-list {
22 
    max-height: 265px;
23 
    overflow: auto;
24 
    width: 100%;
25 
    display: flex;
26 
    flex-direction: row;
27 
 
28 
    @include mixins.for-size(tablet-landscape) {
29 
      flex-direction: column;
30 
 
31 
      &::-webkit-scrollbar-thumb {
32 
        visibility: visible;
33 
      }
34 
    }
35 
  }
36 
`;
37 
 
5 stevensc 38 
const PeopleYouMayKnow = () => {
42 stevensc 39 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
40 
  const [lookMore, setLookMore] = useState(false);
41 
  const labels = useSelector(({ intl }) => intl.labels);
42 
  const dispatch = useDispatch();
5 stevensc 43 
 
44 
  const handleConnect = (url) => {
45 
    axios.post(url).then(({ data }) => {
46 
      if (!data.success) {
47 
        return dispatch(
48 
          addNotification({
42 stevensc 49 
            style: "danger",
5 stevensc 50 
            msg:
42 stevensc 51 
              typeof data.data === "string"
5 stevensc 52 
                ? data.data
42 stevensc 53 
                : "Ha ocurrido un error",
5 stevensc 54 
          })
42 stevensc 55 
        );
5 stevensc 56 
      }
57 
 
58 
      dispatch(
59 
        addNotification({
42 stevensc 60 
          style: "success",
5 stevensc 61 
          msg: data.data,
62 
        })
42 stevensc 63 
      );
64 
      return getSuggestion();
65 
    });
66 
  };
5 stevensc 67 
 
42 stevensc 68 
  const getSuggestion = async (url = "/helpers/people-you-may-know") => {
5 stevensc 69 
    try {
42 stevensc 70 
      const { data: response } = await axios.get(url);
71 
      if (response.success) setPeopleYouMayKnow(response.data);
5 stevensc 72 
    } catch (error) {
42 stevensc 73 
      console.log(error);
5 stevensc 74 
    }
42 stevensc 75 
  };
5 stevensc 76 
 
77 
  const dataSlice = () => {
42 stevensc 78 
    let infoFollows = [...peopleYouMayKnow];
5 stevensc 79 
    if (!lookMore) {
42 stevensc 80 
      infoFollows = infoFollows.slice(0, 3);
5 stevensc 81 
    }
42 stevensc 82 
    return infoFollows;
83 
  };
5 stevensc 84 
 
42 stevensc 85 
  useEffect(() => {
86 
    getSuggestion();
87 
  }, []);
88 
 
5 stevensc 89 
  return (
42 stevensc 90 
    <StyledContainer>
91 
      <div className="header">
5 stevensc 92 
        <h3>{`${labels.connect_with}:`}</h3>
93 
        {peopleYouMayKnow.length >= 4 && (
94 
          <span onClick={() => setLookMore(!lookMore)}>
95 
            {lookMore ? labels.view_less : labels.view_more}
96 
          </span>
97 
        )}
98 
      </div>
99 
      <div className="suggest-list">
100 
        {peopleYouMayKnow.length ? (
101 
          dataSlice().map(
102 
            ({ id, image, link_cancel, link_request, name, profile }) => (
103 
              <div className="user" key={id}>
104 
                <div
105 
                  className="w-100 d-flex align-items-center"
42 stevensc 106 
                  style={{ gap: ".5rem" }}
5 stevensc 107 
                >
108 
                  <a href={profile} target="_blank" rel="noreferrer">
109 
                    <img src={image} alt={`${name} profile image`} />
110 
                  </a>
111 
                  <h4 className="break-ellipsis">{name}</h4>
112 
                </div>
113 
                {link_request && (
114 
                  <button
115 
                    className="btn btn-primary"
116 
                    onClick={() => handleConnect(link_request)}
117 
                  >
118 
                    {labels.connect}
119 
                  </button>
120 
                )}
121 
                {link_cancel && (
122 
                  <button
123 
                    className="btn btn-secondary"
124 
                    onClick={() => handleConnect(link_cancel)}
125 
                  >
126 
                    {labels.cancel}
127 
                  </button>
128 
                )}
129 
              </div>
130 
            )
131 
          )
132 
        ) : (
133 
          <EmptySection align="left" message={labels?.datatable_empty} />
134 
        )}
135 
      </div>
42 stevensc 136 
    </StyledContainer>
137 
  );
138 
};
5 stevensc 139 
 
42 stevensc 140 
export default PeopleYouMayKnow;