Proyectos de Subversion LeadersLinked - SPA

Rev

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