Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
3506 stevensc 1
/* eslint-disable react/prop-types */
1 www 2
import React from "react";
3
import { useEffect, useState } from "react";
2443 stevensc 4
import { axios } from "../../../utils";
1 www 5
 
3894 stevensc 6
const CompanyFollowers = ({ companyId }) => {
1 www 7
 
8
  const [companyFollowers, setCompanyFollowers] = useState([]);
3894 stevensc 9
  const [showFollowersModal, setShowFollowersModal] = useState(false);
1696 steven 10
  const [lookMore, setLookMore] = useState(false);
3506 stevensc 11
 
1 www 12
  useEffect(() => {
3506 stevensc 13
    axios.get(`/helpers/company-follower/${companyId}`)
14
      .then(({ data }) => {
15
        if (data.success) setCompanyFollowers(data.data)
16
      })
1 www 17
  }, []);
1696 steven 18
 
19
  const getData = () => {
20
    let infoFollows = [...companyFollowers]
2443 stevensc 21
    if (!lookMore) {
2943 stevensc 22
      infoFollows = infoFollows.slice(0, 3);
1696 steven 23
    }
24
    return infoFollows
25
  }
3892 stevensc 26
 
1 www 27
  return (
3894 stevensc 28
    <>
29
      <div className="peopleYouMayKnow">
30
        <div className="sd-title d-flex align-items-center justify-content-between">
31
          <h3>Seguidores:</h3>
3895 stevensc 32
          <span onClick={() => setLookMore(!lookMore)}>
3894 stevensc 33
            {lookMore ? 'Ver menos' : 'Ver mas'}
3895 stevensc 34
          </span>
3894 stevensc 35
        </div>
36
        <div className="suggest-list">
37
          {companyFollowers.length
38
            ? getData().map((follower) =>
39
              <CompanyFollowers.Template
40
                key={follower.id}
41
                follower={follower}
42
              />
43
            )
44
            : <div className="view-more">Sin seguidores</div>
45
          }
46
        </div>
47
      </div>
48
      <button
49
        onClick={() => setShowFollowersModal(!showFollowersModal)}
50
        className="btn btn-primary btn-sm w-100 d-md-none"
51
      >
52
        Ver seguidores
53
      </button>
54
      <CompanyFollowers.Modal
55
        isShow={showFollowersModal}
56
        companyFollowers={() => getData()}
57
        handleClose={() => setShowFollowersModal(false)}
58
      />
59
    </>
60
  );
61
};
62
 
63
 
64
const Template = ({ follower }) => {
65
  const { name, image, profile } = follower
66
 
67
  return (
68
    <div className='user'>
69
      <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
70
        <a href={profile} target="_blank" rel="noreferrer">
71
          <img src={image} alt={`${name} profile image`} />
72
        </a>
73
        <h4>{name}</h4>
74
      </div>
75
      <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '.5rem' }}>
76
        <a
77
          href={profile}
78
          className="btn btn-primary"
79
          target='_blank'
80
          rel="noreferrer"
2945 stevensc 81
        >
3894 stevensc 82
          Ver perfil
2945 stevensc 83
        </a>
2443 stevensc 84
      </div>
3894 stevensc 85
    </div>
86
  )
87
}
88
 
89
const Modal = ({
90
  isShow = false,
91
  handleClose = function () { },
92
  companyFollowers = []
93
}) => {
94
  return (
95
    <Modal show={isShow} onHide={handleClose}>
96
      <Modal.Header closeButton>
97
        <h3>Seguidores</h3>
98
      </Modal.Header>
99
      <Modal.Body>
2443 stevensc 100
        {companyFollowers.length
3894 stevensc 101
          ? companyFollowers.map((follower) =>
102
            <CompanyFollowers.Template
103
              key={follower.id}
104
              follower={follower}
105
            />
106
          )
2443 stevensc 107
          : <div className="view-more">Sin seguidores</div>
108
        }
3894 stevensc 109
      </Modal.Body>
110
    </Modal>
111
  )
112
}
1 www 113
 
3894 stevensc 114
CompanyFollowers.Template = Template
115
CompanyFollowers.Modal = Modal
116
 
117
export default CompanyFollowers;