Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 43 | Rev 206 | 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) {
205 stevensc 47 
        dispatch(
5 stevensc 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 
        );
205 stevensc 56 
        return;
5 stevensc 57 
      }
58 
 
59 
      dispatch(
60 
        addNotification({
42 stevensc 61 
          style: "success",
5 stevensc 62 
          msg: data.data,
63 
        })
42 stevensc 64 
      );
205 stevensc 65 
      getSuggestion();
66 
      return;
42 stevensc 67 
    });
68 
  };
5 stevensc 69 
 
42 stevensc 70 
  const getSuggestion = async (url = "/helpers/people-you-may-know") => {
5 stevensc 71 
    try {
42 stevensc 72 
      const { data: response } = await axios.get(url);
73 
      if (response.success) setPeopleYouMayKnow(response.data);
5 stevensc 74 
    } catch (error) {
42 stevensc 75 
      console.log(error);
5 stevensc 76 
    }
42 stevensc 77 
  };
5 stevensc 78 
 
79 
  const dataSlice = () => {
42 stevensc 80 
    let infoFollows = [...peopleYouMayKnow];
5 stevensc 81 
    if (!lookMore) {
42 stevensc 82 
      infoFollows = infoFollows.slice(0, 3);
5 stevensc 83 
    }
42 stevensc 84 
    return infoFollows;
85 
  };
5 stevensc 86 
 
42 stevensc 87 
  useEffect(() => {
88 
    getSuggestion();
89 
  }, []);
90 
 
5 stevensc 91 
  return (
42 stevensc 92 
    <StyledContainer>
43 stevensc 93 
      <div className="widget-header">
5 stevensc 94 
        <h3>{`${labels.connect_with}:`}</h3>
95 
        {peopleYouMayKnow.length >= 4 && (
96 
          <span onClick={() => setLookMore(!lookMore)}>
97 
            {lookMore ? labels.view_less : labels.view_more}
98 
          </span>
99 
        )}
100 
      </div>
43 stevensc 101 
      <StyledSuggestList>
5 stevensc 102 
        {peopleYouMayKnow.length ? (
103 
          dataSlice().map(
104 
            ({ id, image, link_cancel, link_request, name, profile }) => (
105 
              <div className="user" key={id}>
106 
                <div
107 
                  className="w-100 d-flex align-items-center"
42 stevensc 108 
                  style={{ gap: ".5rem" }}
5 stevensc 109 
                >
110 
                  <a href={profile} target="_blank" rel="noreferrer">
111 
                    <img src={image} alt={`${name} profile image`} />
112 
                  </a>
113 
                  <h4 className="break-ellipsis">{name}</h4>
114 
                </div>
115 
                {link_request && (
116 
                  <button
117 
                    className="btn btn-primary"
118 
                    onClick={() => handleConnect(link_request)}
119 
                  >
120 
                    {labels.connect}
121 
                  </button>
122 
                )}
123 
                {link_cancel && (
124 
                  <button
125 
                    className="btn btn-secondary"
126 
                    onClick={() => handleConnect(link_cancel)}
127 
                  >
128 
                    {labels.cancel}
129 
                  </button>
130 
                )}
131 
              </div>
132 
            )
133 
          )
134 
        ) : (
135 
          <EmptySection align="left" message={labels?.datatable_empty} />
136 
        )}
43 stevensc 137 
      </StyledSuggestList>
42 stevensc 138 
    </StyledContainer>
139 
  );
140 
};
5 stevensc 141 
 
42 stevensc 142 
export default PeopleYouMayKnow;