Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 206 Rev 875
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from "../../../utils";
 2 
import { axios } from '../../../utils'
3 
import { addNotification } from "../../../redux/notification/notification.actions";
 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";
 5 
import styled from 'styled-components'
Línea 6... Línea 6...
6 
 
 6 
 
7 
import EmptySection from "../../UI/EmptySection";
 7 
import EmptySection from '../../UI/EmptySection'
8 
import WidgetLayout from "../WidgetLayout";
 - 
 
9 
 
 - 
 
Línea 10... Línea 8...
10 
import { device } from "../../../styles/MediaQueries";
 8 
import WidgetLayout from '../WidgetLayout'
11 
 
 9 
 
12 
const StyledContainer = styled(WidgetLayout)`
 10 
const StyledContainer = styled(WidgetLayout)`
13 
  .widget-header {
 11 
  .widget-header {
Línea 17... Línea 15...
17 
    padding: 1rem;
 15 
    padding: 1rem;
18 
    span {
 16 
    span {
19 
      cursor: pointer;
 17 
      cursor: pointer;
20 
    }
 18 
    }
21 
  }
 19 
  }
22 
`;
 20 
`
Línea 23... Línea 21...
23 
 
 21 
 
24 
const StyledSuggestList = styled.div`
 22 
const StyledSuggestList = styled.div`
25 
  max-height: 265px;
 23 
  max-height: 265px;
26 
  overflow: auto;
 24 
  overflow: auto;
27 
  width: 100%;
 25 
  width: 100%;
28 
  display: flex;
 26 
  display: flex;
29 
  flex-direction: column;
 27 
  flex-direction: column;
Línea 30... Línea 28...
30 
`;
 28 
`
31 
 
 29 
 
32 
const PeopleYouMayKnow = () => {
 30 
const PeopleYouMayKnow = () => {
33 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
 31 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([])
34 
  const [lookMore, setLookMore] = useState(false);
 32 
  const [lookMore, setLookMore] = useState(false)
Línea 35... Línea 33...
35 
  const labels = useSelector(({ intl }) => intl.labels);
 33 
  const labels = useSelector(({ intl }) => intl.labels)
36 
  const dispatch = useDispatch();
 34 
  const dispatch = useDispatch()
37 
 
 35 
 
38 
  const handleConnect = (url) => {
 36 
  const handleConnect = (url) => {
39 
    axios.post(url).then(({ data }) => {
 37 
    axios.post(url).then(({ data }) => {
40 
      if (!data.success) {
 38 
      if (!data.success) {
41 
        dispatch(
 39 
        dispatch(
42 
          addNotification({
 40 
          addNotification({
43 
            style: "danger",
 - 
 
44 
            msg:
 - 
 
45 
              typeof data.data === "string"
 41 
            style: 'danger',
46 
                ? data.data
 42 
            msg:
47 
                : "Ha ocurrido un error",
 43 
              typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
48 
          })
 44 
          })
Línea 49... Línea 45...
49 
        );
 45 
        )
50 
        return;
 46 
        return
51 
      }
 47 
      }
52 
 
 48 
 
53 
      dispatch(
 49 
      dispatch(
54 
        addNotification({
 50 
        addNotification({
55 
          style: "success",
 51 
          style: 'success',
56 
          msg: data.data,
 - 
 
57 
        })
 52 
          msg: data.data
58 
      );
 53 
        })
Línea 59... Línea 54...
59 
      getSuggestion();
 54 
      )
60 
      return;
 55 
      getSuggestion()
61 
    });
 56 
    })
62 
  };
 57 
  }
63 
 
 58 
 
64 
  const getSuggestion = async (url = "/helpers/people-you-may-know") => {
 59 
  const getSuggestion = async (url = '/helpers/people-you-may-know') => {
65 
    try {
 60 
    try {
66 
      const { data: response } = await axios.get(url);
 61 
      const { data: response } = await axios.get(url)
Línea 67... Línea 62...
67 
      if (response.success) setPeopleYouMayKnow(response.data);
 62 
      if (response.success) setPeopleYouMayKnow(response.data)
68 
    } catch (error) {
 63 
    } catch (error) {
69 
      console.log(error);
 64 
      console.log(error)
70 
    }
 65 
    }
71 
  };
 66 
  }
72 
 
 67 
 
73 
  const dataSlice = () => {
 68 
  const dataSlice = () => {
Línea 74... Línea 69...
74 
    let infoFollows = [...peopleYouMayKnow];
 69 
    let infoFollows = [...peopleYouMayKnow]
75 
    if (!lookMore) {
 70 
    if (!lookMore) {
76 
      infoFollows = infoFollows.slice(0, 3);
 71 
      infoFollows = infoFollows.slice(0, 3)
Línea 77... Línea 72...
77 
    }
 72 
    }
78 
    return infoFollows;
 73 
    return infoFollows
79 
  };
 74 
  }
80 
 
 75 
 
81 
  useEffect(() => {
 76 
  useEffect(() => {
82 
    getSuggestion();
 77 
    getSuggestion()
83 
  }, []);
 78 
  }, [])
84 
 
 79 
 
Línea 94... Línea 89...
94 
      </div>
 89 
      </div>
95 
      <StyledSuggestList>
 90 
      <StyledSuggestList>
96 
        {peopleYouMayKnow.length ? (
 91 
        {peopleYouMayKnow.length ? (
97 
          dataSlice().map(
 92 
          dataSlice().map(
98 
            ({ id, image, link_cancel, link_request, name, profile }) => (
 93 
            ({ id, image, link_cancel, link_request, name, profile }) => (
99 
              <div className="user" key={id}>
 94 
              <div className='user' key={id}>
100 
                <div
 - 
 
101 
                  className="w-100 d-flex align-items-center"
 95 
                <div className='d-inline-flex align-items-center gap-2'>
102 
                  style={{ gap: ".5rem" }}
 - 
 
103 
                >
 - 
 
104 
                  <a href={profile} target="_blank" rel="noreferrer">
 96 
                  <a href={profile} target='_blank' rel='noreferrer'>
105 
                    <img src={image} alt={`${name} profile image`} />
 97 
                    <img src={image} alt={`${name} profile image`} />
106 
                  </a>
 98 
                  </a>
107 
                  <h4 className="break-ellipsis">{name}</h4>
 99 
                  <h4 className='break-ellipsis'>{name}</h4>
108 
                </div>
 100 
                </div>
109 
                {link_request && (
 101 
                {link_request && (
110 
                  <button
 102 
                  <button
111 
                    className="btn btn-primary"
 103 
                    className='btn btn-primary'
112 
                    onClick={() => handleConnect(link_request)}
 104 
                    onClick={() => handleConnect(link_request)}
113 
                  >
 105 
                  >
114 
                    {labels.connect}
 106 
                    {labels.connect}
115 
                  </button>
 107 
                  </button>
116 
                )}
 108 
                )}
117 
                {link_cancel && (
 109 
                {link_cancel && (
118 
                  <button
 110 
                  <button
119 
                    className="btn btn-secondary"
 111 
                    className='btn btn-secondary'
120 
                    onClick={() => handleConnect(link_cancel)}
 112 
                    onClick={() => handleConnect(link_cancel)}
121 
                  >
 113 
                  >
122 
                    {labels.cancel}
 114 
                    {labels.cancel}
123 
                  </button>
 115 
                  </button>
124 
                )}
 116 
                )}
125 
              </div>
 117 
              </div>
126 
            )
 118 
            )
127 
          )
 119 
          )
128 
        ) : (
 120 
        ) : (
129 
          <EmptySection align="left" message={labels?.datatable_empty} />
 121 
          <EmptySection align='left' message={labels?.datatable_empty} />
130 
        )}
 122 
        )}
131 
      </StyledSuggestList>
 123 
      </StyledSuggestList>
132 
    </StyledContainer>
 124 
    </StyledContainer>
133 
  );
 125 
  )
134 
};
 126 
}
Línea 135... Línea 127...
135 
 
 127