Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 5 | Rev 43 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5 Rev 42
Línea 1... Línea -...
1 
/* eslint-disable camelcase */
 - 
 
2 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from "react";
3 
import { axios } from '../../../utils'
 2 
import { axios } from "../../../utils";
- 
 
 3 
import { addNotification } from "../../../redux/notification/notification.actions";
4 
import { useDispatch, useSelector } from 'react-redux'
 4 
import { useDispatch, useSelector } from "react-redux";
- 
 
 5 
import styled from "styled-components";
- 
 
 6 
 
- 
 
 7 
import EmptySection from "../../UI/EmptySection";
- 
 
 8 
import WidgetLayout from "../WidgetLayout";
- 
 
 9 
 
- 
 
 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 
  }
Línea -... Línea 20...
- 
 
 20 
 
- 
 
 21 
  & > .suggest-list {
- 
 
 22 
    max-height: 265px;
- 
 
 23 
    overflow: auto;
- 
 
 24 
    width: 100%;
5 
 
 25 
    display: flex;
Línea 6... Línea 26...
6 
import { addNotification } from '../../../redux/notification/notification.actions'
 26 
    flex-direction: row;
- 
 
 27 
 
Línea 7... Línea 28...
7 
 
 28 
    @include mixins.for-size(tablet-landscape) {
8 
import EmptySection from '../../UI/EmptySection'
 29 
      flex-direction: column;
9 
 
 - 
 
10 
const PeopleYouMayKnow = () => {
 30 
 
- 
 
 31 
      &::-webkit-scrollbar-thumb {
- 
 
 32 
        visibility: visible;
- 
 
 33 
      }
Línea -... Línea 34...
- 
 
 34 
    }
- 
 
 35 
  }
- 
 
 36 
`;
- 
 
 37 
 
11 
  const labels = useSelector(({ intl }) => intl.labels)
 38 
const PeopleYouMayKnow = () => {
Línea 12... Línea 39...
12 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([])
 39 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
13 
  const [lookMore, setLookMore] = useState(false)
 40 
  const [lookMore, setLookMore] = useState(false);
14 
 
 41 
  const labels = useSelector(({ intl }) => intl.labels);
15 
  const dispatch = useDispatch()
 42 
  const dispatch = useDispatch();
16 
 
 43 
 
17 
  const handleConnect = (url) => {
 44 
  const handleConnect = (url) => {
18 
    axios.post(url).then(({ data }) => {
 45 
    axios.post(url).then(({ data }) => {
19 
      if (!data.success) {
 46 
      if (!data.success) {
20 
        return dispatch(
 47 
        return dispatch(
21 
          addNotification({
 48 
          addNotification({
22 
            style: 'danger',
 49 
            style: "danger",
23 
            msg:
 50 
            msg:
24 
              typeof data.data === 'string'
 51 
              typeof data.data === "string"
Línea 25... Línea 52...
25 
                ? data.data
 52 
                ? data.data
26 
                : 'Ha ocurrido un error',
 53 
                : "Ha ocurrido un error",
27 
          })
 54 
          })
28 
        )
 55 
        );
29 
      }
 56 
      }
30 
 
 57 
 
31 
      dispatch(
 58 
      dispatch(
32 
        addNotification({
 59 
        addNotification({
33 
          style: 'success',
 60 
          style: "success",
Línea 34... Línea 61...
34 
          msg: data.data,
 61 
          msg: data.data,
35 
        })
 62 
        })
36 
      )
 63 
      );
37 
      return getSuggestion()
 64 
      return getSuggestion();
38 
    })
 65 
    });
39 
  }
 66 
  };
40 
 
 67 
 
41 
  const getSuggestion = async (url = '/helpers/people-you-may-know') => {
 68 
  const getSuggestion = async (url = "/helpers/people-you-may-know") => {
42 
    try {
 - 
 
43 
      const { data: response } = await axios.get(url)
 - 
 
44 
      if (response.success) setPeopleYouMayKnow(response.data)
 - 
 
45 
    } catch (error) {
 - 
 
Línea 46... Línea 69...
46 
      console.log(error)
 69 
    try {
47 
    }
 70 
      const { data: response } = await axios.get(url);
48 
  }
 71 
      if (response.success) setPeopleYouMayKnow(response.data);
49 
 
 72 
    } catch (error) {
50 
  useEffect(() => {
 73 
      console.log(error);
51 
    getSuggestion()
 74 
    }
52 
  }, [])
 75 
  };
- 
 
 76 
 
- 
 
 77 
  const dataSlice = () => {
- 
 
 78 
    let infoFollows = [...peopleYouMayKnow];
- 
 
 79 
    if (!lookMore) {
Línea 53... Línea 80...
53 
 
 80 
      infoFollows = infoFollows.slice(0, 3);
54 
  const dataSlice = () => {
 81 
    }
55 
    let infoFollows = [...peopleYouMayKnow]
 82 
    return infoFollows;
56 
    if (!lookMore) {
 83 
  };
57 
      infoFollows = infoFollows.slice(0, 3)
 84 
 
58 
    }
 85 
  useEffect(() => {
59 
    return infoFollows
 86 
    getSuggestion();
60 
  }
 87 
  }, []);
Línea 74... Línea 101...
74 
          dataSlice().map(
 101 
          dataSlice().map(
75 
            ({ id, image, link_cancel, link_request, name, profile }) => (
 102 
            ({ id, image, link_cancel, link_request, name, profile }) => (
76 
              <div className="user" key={id}>
 103 
              <div className="user" key={id}>
77 
                <div
 104 
                <div
78 
                  className="w-100 d-flex align-items-center"
 105 
                  className="w-100 d-flex align-items-center"
79 
                  style={{ gap: '.5rem' }}
 106 
                  style={{ gap: ".5rem" }}
80 
                >
 107 
                >
81 
                  <a href={profile} target="_blank" rel="noreferrer">
 108 
                  <a href={profile} target="_blank" rel="noreferrer">
82 
                    <img src={image} alt={`${name} profile image`} />
 109 
                    <img src={image} alt={`${name} profile image`} />
83 
                  </a>
 110 
                  </a>
84 
                  <h4 className="break-ellipsis">{name}</h4>
 111 
                  <h4 className="break-ellipsis">{name}</h4>
Línea 104... Línea 131...
104 
          )
 131 
          )
105 
        ) : (
 132 
        ) : (
106 
          <EmptySection align="left" message={labels?.datatable_empty} />
 133 
          <EmptySection align="left" message={labels?.datatable_empty} />
107 
        )}
 134 
        )}
108 
      </div>
 135 
      </div>
109 
    </div>
 136 
    </StyledContainer>
110 
  )
 137 
  );
111 
}
 138 
};
Línea 112... Línea 139...
112 
 
 139