Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2924 | Rev 2926 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useEffect, useState } from "react";
2248 stevensc 3 
import { axios } from "../../../utils";
2925 stevensc 4 
import styles from "../people-you-may-know/peopleYouMayKnow.module.scss";
1 www 5 
 
6 
const SuggestedGroupsHelper = (props) => {
7 
  // props destructuring
8 
  const { groupId } = props;
9 
 
10 
  // states
11 
  const [suggestedGroups, setSuggestedGroups] = useState([]);
1773 steven 12 
  const [lookMore, setLookMore] = useState(false);
1 www 13 
  useEffect(() => {
2924 stevensc 14 
    const url = groupId ? `/helpers/groups-suggestion/${groupId}` : '/helpers/groups-suggestion'
2925 stevensc 15 
 
2924 stevensc 16 
    axios.get(url)
17 
      .then(({ data }) => {
18 
        if (data.success) {
19 
          setSuggestedGroups(data.data);
20 
        }
21 
      });
1 www 22 
  }, []);
1773 steven 23 
 
24 
  const getData = () => {
25 
    let infoFollows = [...suggestedGroups]
2248 stevensc 26 
    if (!lookMore) {
1773 steven 27 
      infoFollows = infoFollows.slice(0, 5);
28 
    }
29 
    return infoFollows
30 
  }
1 www 31 
  return (
2434 stevensc 32 
    <div className="right-sidebar border-radius border-gray p-3" style={{ maxHeight: "450px" }}>
2248 stevensc 33 
      <div className="sd-title">
34 
        <h3>Grupos Similares</h3>
35 
      </div>
1 www 36 
      <div
2249 stevensc 37 
        className="mb-2"
1 www 38 
        id="suggestions-similar-groups"
2248 stevensc 39 
        style={{ height: "80%", overflowY: "auto" }}
1 www 40 
      >
41 
        {suggestedGroups.length ? (
1773 steven 42 
          getData().map(({ id, name, image, profile }) => (
2925 stevensc 43 
            <div className={styles.user} key={id}>
44 
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
45 
                <a href={profile} target="_blank">
46 
                  <img src={image} alt={`${name} profile image`} />
47 
                </a>
48 
                <h4>{name}</h4>
49 
              </div>
50 
              <div className="w-100 d-flex align-items-center justify-content-center" style={{ gap: '.5rem' }}>
51 
                <a
52 
                  className="btn btn-primary"
53 
                  href={profile}
1 www 54 
                >
2925 stevensc 55 
                  Conectar
56 
                </a>
1 www 57 
              </div>
58 
            </div>
59 
          ))
60 
        ) : (
61 
          <div className="view-more">Sin sugerencias</div>
62 
        )}
63 
      </div>
2248 stevensc 64 
      {
65 
        suggestedGroups.length >= 5 && (
66 
          <div className="w-100 text-center">
67 
            <button className="btn btn-primary" onClick={() => setLookMore(!lookMore)}>
68 
              {lookMore ? 'Ver menos' : 'Ver mas'}
69 
            </button>
70 
          </div>
71 
        )
72 
      }
73 
    </div>
1 www 74 
  );
75 
};
76 
 
77 
export default SuggestedGroupsHelper;