Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4322 Rev 4323
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/axios";
2 
import { useDispatch } from "react-redux";
 3 
import { useDispatch } from "react-redux";
3 
import { addNotification } from "../../../../redux/notification/notification.actions";
 4 
import { addNotification } from "../../../../redux/notification/notification.actions";
- 
 
 5 
import EastIcon from '@mui/icons-material/East';
4 
import { axios } from "../../../../utils/axios";
 6 
import EmptySection from "../../../../shared/empty-section/EmptySection";
- 
 
 7 
import './Widget.scss'
Línea 5... Línea 8...
5 
 
 8 
 
Línea 6... Línea 9...
6 
const PeopleYouMayKnow = () => {
 9 
const PeopleYouMayKnow = () => {
7 
 
 - 
 
8 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
 10 
 
9 
  const [lookMore, setLookMore] = useState(false);
 - 
 
10 
  const dispatch = useDispatch()
 - 
 
11 
 
 - 
 
12 
  const handleConnect = (url) => {
 - 
 
13 
    axios.post(url)
 - 
 
14 
      .then(({ data }) => {
 - 
 
15 
        if (!data.success) {
 - 
 
16 
          return dispatch(addNotification({
 - 
 
17 
            style: 'danger',
 - 
 
18 
            msg: typeof data.data === 'string'
 - 
 
19 
              ? data.data
 - 
 
20 
              : 'Ha ocurrido un error'
 - 
 
Línea -... Línea 11...
- 
 
 11 
    const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
- 
 
 12 
    const dispatch = useDispatch()
- 
 
 13 
 
- 
 
 14 
    const handleConnect = (url) => {
21 
          }))
 15 
        axios.post(url)
22 
        }
 16 
            .then(({ data }) => {
23 
 
 17 
                if (!data.success) {
24 
        dispatch(addNotification({
 18 
                    return dispatch(addNotification({
25 
          style: 'success',
 19 
                        style: 'danger',
26 
          msg: data.data
 20 
                        msg: typeof data.data === 'string'
27 
        }))
 21 
                            ? data.data
28 
        return getSuggestion()
 22 
                            : 'Ha ocurrido un error'
29 
      })
 23 
                    }))
30 
  }
 - 
 
31 
 
 24 
                }
32 
  const getSuggestion = async (url = `/helpers/people-you-may-know`) => {
 25 
 
33 
    try {
 26 
                dispatch(addNotification({
34 
      const { data: response } = await axios.get(url)
 27 
                    style: 'success',
- 
 
 28 
                    msg: data.data
35 
      if (response.success) setPeopleYouMayKnow(response.data);
 29 
                }))
36 
    } catch (error) {
 - 
 
Línea 37... Línea -...
37 
      console.log(error);
 - 
 
38 
    }
 30 
                return getSuggestion()
39 
  }
 31 
            })
40 
 
 - 
 
41 
  useEffect(() => {
 32 
    }
42 
    getSuggestion()
 33 
 
43 
  }, []);
 34 
    const getSuggestion = async (url = `/helpers/people-you-may-know`) => {
44 
 
 35 
        try {
- 
 
 36 
            const { data: response } = await axios.get(url)
45 
  const dataSlice = () => {
 37 
            if (response.success) setPeopleYouMayKnow(response.data.slice(0, 3));
46 
    let infoFollows = [...peopleYouMayKnow]
 - 
 
47 
    if (!lookMore) {
 - 
 
Línea 48... Línea 38...
48 
      infoFollows = infoFollows.slice(0, 3)
 38 
        } catch (error) {
49 
    }
 - 
 
50 
    return infoFollows
 - 
 
51 
  }
 39 
            console.log(error);
52 
 
 40 
        }
53 
  return (
 - 
 
54 
    <div className='peopleYouMayKnow'>
 - 
 
55 
      <div className="sd-title d-flex align-items-center justify-content-between">
 - 
 
56 
        <h3>Conecta con:</h3>
 - 
 
57 
        {
 41 
    }
58 
          peopleYouMayKnow.length >= 4 &&
 42 
 
59 
          <label onClick={() => setLookMore(!lookMore)}>
 43 
    useEffect(() => {
60 
            {lookMore ? 'Ver menos' : 'Ver mas'}
 - 
 
61 
          </label>
 - 
 
62 
        }
 44 
        getSuggestion()
63 
      </div>
 - 
 
64 
      <div className='suggest-list'>
 - 
 
65 
        {peopleYouMayKnow.length
 - 
 
66 
          ? dataSlice().map(({ id, image, link_cancel, link_request, name, profile }) =>
 - 
 
67 
            <div className='user' key={id}>
 - 
 
68 
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
 - 
 
69 
                <a href={profile} target="_blank" rel="noreferrer">
 - 
 
70 
                  <img src={image} alt={`${name} profile image`} />
 - 
 
71 
                </a>
 - 
 
72 
                <h4 className="break-ellipsis">{name}</h4>
 - 
 
73 
              </div>
 - 
 
74 
              {link_request &&
 45 
    }, []);
75 
                <button
 - 
 
76 
                  className="btn btn-primary"
 - 
 
77 
                  onClick={() => handleConnect(link_request)}
 - 
 
78 
                >
 - 
 
79 
                  Conectar
 - 
 
80 
                </button>
 - 
 
81 
              }
 - 
 
82 
              {link_cancel &&
 - 
 
83 
                <button
 - 
 
84 
                  className="btn btn-secondary"
 - 
 
85 
                  onClick={() => handleConnect(link_cancel)}
 46 
 
- 
 
 47 
    return (
- 
 
 48 
        <div className='linked_widget'>
- 
 
 49 
            <div className="linked__widget-header">
- 
 
 50 
                <h3>Conecta con:</h3>
- 
 
 51 
            </div>
- 
 
 52 
            <div className='suggest-list'>
- 
 
 53 
                {peopleYouMayKnow.length
- 
 
 54 
                    ? peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, profile }) => {
- 
 
 55 
                        return (
- 
 
 56 
                            <div className="linked__widget-content" key={id}>
- 
 
 57 
                                <a href={profile} target="_blank" rel="noreferrer">
- 
 
 58 
                                    <img src={image} alt={`${name} profile image`} />
- 
 
 59 
                                </a>
- 
 
 60 
                                <div className="linked__widget-info">
- 
 
 61 
                                    <h4>{name}</h4>
- 
 
 62 
                                    {link_request &&
- 
 
 63 
                                        <button
- 
 
 64 
                                            className="btn btn-primary"
- 
 
 65 
                                            onClick={() => handleConnect(link_request)}
- 
 
 66 
                                        >
- 
 
 67 
                                            Conectar
- 
 
 68 
                                        </button>
- 
 
 69 
                                    }
- 
 
 70 
                                    {link_cancel &&
- 
 
 71 
                                        <button
- 
 
 72 
                                            className="btn btn-secondary"
- 
 
 73 
                                            onClick={() => handleConnect(link_cancel)}
- 
 
 74 
                                        >
- 
 
 75 
                                            Cancelar
86 
                >
 76 
                                        </button>
87 
                  Cancelar
 77 
                                    }
88 
                </button>
 78 
                                </div>
89 
              }
 79 
                            </div>
- 
 
 80 
                        )
- 
 
 81 
                    })
- 
 
 82 
                    : <EmptySection message="Sin sugerencias" />
- 
 
 83 
                }
90 
            </div>
 84 
            </div>
91 
          )
 85 
            <a href="/connection/people-you-may-know" target='_blank' >
92 
          : <div className="view-more">Sin sugerencias</div>
 86 
                Ver todas las recomendaciones
Línea 93... Línea 87...
93 
        }
 87 
                <EastIcon className="ml-2" />