Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 42 | Rev 205 | 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 
 
43 stevensc 10 
import { device } from "../../../styles/MediaQueries";
11 
 
42 stevensc 12 
const StyledContainer = styled(WidgetLayout)`
43 stevensc 13 
  .widget-header {
42 stevensc 14 
    align-items: center;
15 
    display: flex;
16 
    justify-content: space-between;
17 
    padding: 1rem;
18 
    span {
19 
      cursor: pointer;
20 
    }
21 
  }
43 stevensc 22 
`;
5 stevensc 23 
 
43 stevensc 24 
const StyledSuggestList = styled.div`
25 
  max-height: 265px;
26 
  overflow: auto;
27 
  width: 100%;
28 
  display: flex;
29 
  flex-direction: row;
30 
  @media ${device.tabletL} {
31 
    flex-direction: column;
32 
    &::-webkit-scrollbar-thumb {
33 
      visibility: visible;
42 stevensc 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>
43 stevensc 91 
      <div className="widget-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>
43 stevensc 99 
      <StyledSuggestList>
5 stevensc 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 
        )}
43 stevensc 135 
      </StyledSuggestList>
42 stevensc 136 
    </StyledContainer>
137 
  );
138 
};
5 stevensc 139 
 
42 stevensc 140 
export default PeopleYouMayKnow;