Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";
import { axios } from "../../../utils";
import { addNotification } from "../../../redux/notification/notification.actions";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";

import EmptySection from "../../UI/EmptySection";
import WidgetLayout from "../WidgetLayout";

import { device } from "../../../styles/MediaQueries";

const StyledContainer = styled(WidgetLayout)`
  .widget-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    span {
      cursor: pointer;
    }
  }
`;

const StyledSuggestList = styled.div`
  max-height: 265px;
  overflow: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  @media ${device.tabletL} {
    flex-direction: column;
    &::-webkit-scrollbar-thumb {
      visibility: visible;
    }
  }
`;

const PeopleYouMayKnow = () => {
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
  const [lookMore, setLookMore] = useState(false);
  const labels = useSelector(({ intl }) => intl.labels);
  const dispatch = useDispatch();

  const handleConnect = (url) => {
    axios.post(url).then(({ data }) => {
      if (!data.success) {
        return dispatch(
          addNotification({
            style: "danger",
            msg:
              typeof data.data === "string"
                ? data.data
                : "Ha ocurrido un error",
          })
        );
      }

      dispatch(
        addNotification({
          style: "success",
          msg: data.data,
        })
      );
      return getSuggestion();
    });
  };

  const getSuggestion = async (url = "/helpers/people-you-may-know") => {
    try {
      const { data: response } = await axios.get(url);
      if (response.success) setPeopleYouMayKnow(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  const dataSlice = () => {
    let infoFollows = [...peopleYouMayKnow];
    if (!lookMore) {
      infoFollows = infoFollows.slice(0, 3);
    }
    return infoFollows;
  };

  useEffect(() => {
    getSuggestion();
  }, []);

  return (
    <StyledContainer>
      <div className="widget-header">
        <h3>{`${labels.connect_with}:`}</h3>
        {peopleYouMayKnow.length >= 4 && (
          <span onClick={() => setLookMore(!lookMore)}>
            {lookMore ? labels.view_less : labels.view_more}
          </span>
        )}
      </div>
      <StyledSuggestList>
        {peopleYouMayKnow.length ? (
          dataSlice().map(
            ({ id, image, link_cancel, link_request, name, profile }) => (
              <div className="user" key={id}>
                <div
                  className="w-100 d-flex align-items-center"
                  style={{ gap: ".5rem" }}
                >
                  <a href={profile} target="_blank" rel="noreferrer">
                    <img src={image} alt={`${name} profile image`} />
                  </a>
                  <h4 className="break-ellipsis">{name}</h4>
                </div>
                {link_request && (
                  <button
                    className="btn btn-primary"
                    onClick={() => handleConnect(link_request)}
                  >
                    {labels.connect}
                  </button>
                )}
                {link_cancel && (
                  <button
                    className="btn btn-secondary"
                    onClick={() => handleConnect(link_cancel)}
                  >
                    {labels.cancel}
                  </button>
                )}
              </div>
            )
          )
        ) : (
          <EmptySection align="left" message={labels?.datatable_empty} />
        )}
      </StyledSuggestList>
    </StyledContainer>
  );
};

export default PeopleYouMayKnow;