Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2930 | Rev 2950 | 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) {
2926 stevensc 27 
      infoFollows = infoFollows.slice(0, 3);
1773 steven 28 
    }
29 
    return infoFollows
30 
  }
1 www 31 
  return (
2926 stevensc 32 
    <div className={styles.peopleYouMayKnow}>
2931 stevensc 33 
      <div className="sd-title d-flex align-items-center justify-content-between">
2926 stevensc 34 
        <h3>Grupos:</h3>
35 
        {
36 
          suggestedGroups.length >= 3 &&
37 
          <a
38 
            href="#"
39 
            onClick={(e) => {
40 
              e.preventDefault()
41 
              setLookMore(!lookMore)
42 
            }}
43 
          >
44 
            {lookMore ? 'Ver menos' : 'Ver mas'}
45 
          </a>
46 
        }
2248 stevensc 47 
      </div>
1 www 48 
      <div
2249 stevensc 49 
        className="mb-2"
1 www 50 
        id="suggestions-similar-groups"
2248 stevensc 51 
        style={{ height: "80%", overflowY: "auto" }}
1 www 52 
      >
53 
        {suggestedGroups.length ? (
1773 steven 54 
          getData().map(({ id, name, image, profile }) => (
2925 stevensc 55 
            <div className={styles.user} key={id}>
56 
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
57 
                <a href={profile} target="_blank">
58 
                  <img src={image} alt={`${name} profile image`} />
59 
                </a>
60 
                <h4>{name}</h4>
61 
              </div>
2927 stevensc 62 
              <div className="w-100 d-flex align-items-center justify-content-end" style={{ gap: '.5rem' }}>
2925 stevensc 63 
                <a
64 
                  className="btn btn-primary"
65 
                  href={profile}
1 www 66 
                >
2925 stevensc 67 
                  Conectar
68 
                </a>
1 www 69 
              </div>
70 
            </div>
71 
          ))
72 
        ) : (
73 
          <div className="view-more">Sin sugerencias</div>
74 
        )}
75 
      </div>
2248 stevensc 76 
    </div>
1 www 77 
  );
78 
};
79 
 
80 
export default SuggestedGroupsHelper;