Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 2931 Rev 3506
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from "react";
2 
import { useDispatch } from "react-redux";
 2 
import { useDispatch } from "react-redux";
3 
import { addNotification } from "../../../redux/notification/notification.actions";
 3 
import { addNotification } from "../../../redux/notification/notification.actions";
4 
import { axios } from "../../../utils";
 4 
import { axios } from "../../../utils";
Línea 5... Línea -...
5 
 
 - 
 
6 
import styles from "./peopleYouMayKnow.module.scss";
 - 
 
7 
 
 5 
 
8 
const PeopleYouMayKnow = () => {
 6 
const PeopleYouMayKnow = () => {
9 
  // states
 7 
  // states
10 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
 8 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
11 
  const [error, setError] = useState("");
 9 
  const [error, setError] = useState("");
Línea 29... Línea 27...
29 
        }))
 27 
        }))
30 
        return getSuggestion()
 28 
        return getSuggestion()
31 
      })
 29 
      })
32 
  }
 30 
  }
Línea 33... Línea 31...
33 
 
 31 
 
34 
  const getSuggestion = (url) => {
 32 
  const getSuggestion = (url = `/helpers/people-you-may-know`) => {
35 
    axios.get(`/helpers/people-you-may-know`)
 33 
    axios.get(url)
36 
      .then(({ data }) => {
 34 
      .then(({ data }) => {
37 
        const resData = [...data.data].slice(0, 3);
 - 
 
38 
        if (data.success) {
 35 
        const resData = [...data.data].slice(0, 3);
39 
          setPeopleYouMayKnow(resData);
 - 
 
40 
        } else {
 - 
 
41 
          // alert error
 - 
 
42 
        }
 36 
        if (data.success) setPeopleYouMayKnow(resData);
43 
      });
 37 
      });
Línea 44... Línea -...
44 
  }
 - 
 
45 
 
 38 
  }
46 
  useEffect(() => {
 - 
 
Línea 47... Línea 39...
47 
    getSuggestion()
 39 
 
48 
  }, []);
 40 
  useEffect(() => getSuggestion(), []);
49 
 
 41 
 
50 
  return (
 42 
  return (
51 
    <div className={styles.peopleYouMayKnow} id="suggestions-list-people-you-may-know">
 - 
 
52 
      <div className="sd-title d-flex align-items-center justify-content-between">
 43 
    <div className='peopleYouMayKnow' id="suggestions-list-people-you-may-know">
53 
        <h3>Conecta con:</h3>
 44 
      <div className="sd-title d-flex align-items-center justify-content-between">
54 
        {
 45 
        <h3>Conecta con:</h3>
55 
          !error && (
 46 
        {!error &&
56 
            <a href="/connection/people-you-may-know" target="_blank">
 - 
 
57 
              Ver más
 47 
          <a href="/connection/people-you-may-know" target="_blank">
58 
            </a>
 48 
            Ver más
59 
          )
 49 
          </a>
60 
        }
 50 
        }
61 
      </div>
 51 
      </div>
62 
      <div className={styles.suggestionList}>
 52 
      <div className='suggestionList'>
63 
        {peopleYouMayKnow.length ? (
 53 
        {peopleYouMayKnow.length
64 
          <React.Fragment>
 - 
 
65 
            {error ? (
 54 
          ? <React.Fragment>
66 
              <div className="suggestion-usd"> Ha ocurrido un error :( </div>
 55 
            {error
67 
            ) : (
 56 
              ? <div className="suggestion-usd"> Ha ocurrido un error</div>
68 
              peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, profile, relation }) => (
 57 
              : peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, profile, relation }) =>
69 
                <div className={styles.user} key={id}>
 58 
                <div className='user' key={id}>
70 
                  <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
 59 
                  <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
71 
                    <a href={profile} target="_blank">
 60 
                    <a href={profile} target="_blank" rel="noreferrer">
72 
                      <img src={image} alt={`${name} profile image`} />
 61 
                      <img src={image} alt={`${name} profile image`} />
73 
                    </a>
 62 
                    </a>
74 
                    <h4>{name}</h4>
 - 
 
75 
                  </div>
 63 
                    <h4>{name}</h4>
76 
                  <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '.5rem' }}>
 - 
 
77 
                    {
 64 
                  </div>
78 
                      link_request
 65 
                  <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '.5rem' }}>
79 
                      &&
 66 
                    {link_request &&
80 
                      <button
 67 
                      <button
81 
                        className="btn btn-primary"
 68 
                        className="btn btn-primary"
82 
                        onClick={() => handleConnect(link_request)}
 69 
                        onClick={() => handleConnect(link_request)}
83 
                      >
 70 
                      >
84 
                        Conectar
 - 
 
85 
                      </button>
 71 
                        Conectar
86 
                    }
 - 
 
87 
                    {
 72 
                      </button>
88 
                      link_cancel
 73 
                    }
89 
                      &&
 74 
                    {link_cancel &&
90 
                      <button
 75 
                      <button
91 
                        className="btn btn-secondary"
 76 
                        className="btn btn-secondary"
92 
                        onClick={() => handleConnect(link_cancel)}
 77 
                        onClick={() => handleConnect(link_cancel)}
93 
                      >
 78 
                      >
94 
                        Cancelar
 79 
                        Cancelar
95 
                      </button>
 80 
                      </button>
96 
                    }
 81 
                    }
97 
                  </div>
 82 
                  </div>
98 
                </div>
 - 
 
99 
              ))
 83 
                </div>
100 
            )}
 - 
 
101 
 
 84 
              )
102 
          </React.Fragment>
 85 
            }
103 
        ) : (
 86 
          </React.Fragment>
104 
          <div className="view-more">Sin sugerencias</div>
 87 
          : <div className="view-more">Sin sugerencias</div>
105 
        )}
 88 
        }
106 
      </div>
 89 
      </div>