Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 876 Rev 1516
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react'
2 
import { axios } from '../../../utils'
 - 
 
3 
import { addNotification } from '../../../redux/notification/notification.actions'
 - 
 
4 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux'
- 
 
 3 
import {
- 
 
 4 
  Avatar,
- 
 
 5 
  Box,
- 
 
 6 
  List,
- 
 
 7 
  ListItem,
- 
 
 8 
  ListItemAvatar,
- 
 
 9 
  ListItemButton,
- 
 
 10 
  ListItemText,
- 
 
 11 
  Typography
5 
import styled from 'styled-components'
 12 
} from '@mui/material'
Línea 6... Línea 13...
6 
 
 13 
 
7 
import EmptySection from '../../UI/EmptySection'
 14 
import { axios } from '../../../utils'
8 
import WidgetLayout from '../WidgetLayout'
 - 
 
9 
 
 15 
import { addNotification } from '../../../redux/notification/notification.actions'
10 
const StyledContainer = styled(WidgetLayout)`
 - 
 
11 
  .widget-header {
 - 
 
12 
    align-items: center;
 - 
 
13 
    display: flex;
 - 
 
14 
    justify-content: space-between;
 - 
 
15 
    padding: 10px;
 - 
 
16 
    span {
 - 
 
17 
      cursor: pointer;
 - 
 
18 
    }
 - 
 
19 
  }
 - 
 
Línea 20... Línea 16...
20 
`
 16 
import useFetch from '../../../hooks/useFetch'
21 
 
 - 
 
22 
const StyledSuggestList = styled.div`
 - 
 
23 
  max-height: 265px;
 - 
 
24 
  overflow: auto;
 - 
 
25 
  width: 100%;
 17 
 
26 
  display: flex;
 - 
 
Línea 27... Línea 18...
27 
  flex-direction: column;
 18 
import WidgetWrapper from '../WidgetLayout'
28 
`
 19 
import { ButtonPrimary, ButtonSecondary } from '@buttons'
- 
 
 20 
 
- 
 
 21 
const PeopleYouMayKnow = () => {
- 
 
 22 
  const { data: peopleYouMayKnow, refetch } = useFetch(
29 
 
 23 
    '/helpers/people-you-may-know',
30 
const PeopleYouMayKnow = () => {
 24 
    []
31 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([])
 25 
  )
Línea -... Línea 26...
- 
 
 26 
  const [lookMore, setLookMore] = useState(false)
- 
 
 27 
  const labels = useSelector(({ intl }) => intl.labels)
- 
 
 28 
  const dispatch = useDispatch()
- 
 
 29 
 
- 
 
 30 
  const users = useMemo(
32 
  const [lookMore, setLookMore] = useState(false)
 31 
    () => (lookMore ? peopleYouMayKnow : [...peopleYouMayKnow].slice(0, 3)),
33 
  const labels = useSelector(({ intl }) => intl.labels)
 32 
    []
34 
  const dispatch = useDispatch()
 33 
  )
35 
 
 34 
 
36 
  const handleConnect = (url) => {
 35 
  const handleConnect = (url) => {
Línea 50... Línea 49...
50 
        addNotification({
 49 
        addNotification({
51 
          style: 'success',
 50 
          style: 'success',
52 
          msg: data.data
 51 
          msg: data.data
53 
        })
 52 
        })
54 
      )
 53 
      )
55 
      getSuggestion()
 54 
      refetch()
56 
    })
 55 
    })
57 
  }
 56 
  }
Línea 58... Línea -...
58 
 
 - 
 
59 
  const getSuggestion = async (url = '/helpers/people-you-may-know') => {
 - 
 
60 
    try {
 - 
 
61 
      const { data: response } = await axios.get(url)
 - 
 
62 
      if (response.success) setPeopleYouMayKnow(response.data)
 - 
 
63 
    } catch (error) {
 - 
 
64 
      console.log(error)
 - 
 
65 
    }
 - 
 
66 
  }
 - 
 
67 
 
 - 
 
68 
  const dataSlice = () => {
 - 
 
69 
    let infoFollows = [...peopleYouMayKnow]
 - 
 
70 
    if (!lookMore) {
 - 
 
71 
      infoFollows = infoFollows.slice(0, 3)
 - 
 
72 
    }
 - 
 
73 
    return infoFollows
 - 
 
74 
  }
 - 
 
75 
 
 - 
 
76 
  useEffect(() => {
 - 
 
77 
    getSuggestion()
 - 
 
78 
  }, [])
 - 
 
79 
 
 57 
 
80 
  return (
 58 
  return (
- 
 
 59 
    <WidgetWrapper>
- 
 
 60 
      <Box
- 
 
 61 
        display='flex'
81 
    <StyledContainer>
 62 
        alignItems='baseline'
- 
 
 63 
        justifyContent='space-between'
- 
 
 64 
        padding={1}
82 
      <div className='widget-header'>
 65 
      >
- 
 
 66 
        <Typography variant='h3'>{`${labels.connect_with}:`}</Typography>
83 
        <h3>{`${labels.connect_with}:`}</h3>
 67 
 
84 
        {peopleYouMayKnow.length >= 4 && (
 68 
        {peopleYouMayKnow.length >= 4 && (
85 
          <span onClick={() => setLookMore(!lookMore)}>
 69 
          <span onClick={() => setLookMore(!lookMore)}>
86 
            {lookMore ? labels.view_less : labels.view_more}
 70 
            {lookMore ? labels.view_less : labels.view_more}
87 
          </span>
 71 
          </span>
88 
        )}
 72 
        )}
89 
      </div>
 - 
 
- 
 
 73 
      </Box>
90 
      <StyledSuggestList>
 74 
 
91 
        {peopleYouMayKnow.length ? (
 75 
      <List sx={{ width: '100%', maxHeight: 300, overflow: 'auto' }}>
92 
          dataSlice().map(
 76 
        {users.map(
93 
            ({ id, image, link_cancel, link_request, name, profile }) => (
 77 
          ({ id, image, link_cancel, link_request, name, profile }) => {
94 
              <div className='user' key={id}>
 78 
            return (
95 
                <div className='d-inline-flex align-items-center gap-2'>
 79 
              <ListItem
96 
                  <a href={profile} target='_blank' rel='noreferrer'>
 80 
                key={id}
97 
                    <img src={image} alt={`${name} profile image`} />
 81 
                disablePadding
98 
                  </a>
 82 
                disableRipple
99 
                  <h4 className='break-ellipsis'>{name}</h4>
 83 
                secondaryAction={
100 
                </div>
 84 
                  <>
101 
                {link_request && (
 85 
                    {link_request && (
102 
                  <button
 86 
                      <ButtonPrimary
103 
                    className='btn btn-primary'
 87 
                        label={labels.connect}
104 
                    onClick={() => handleConnect(link_request)}
 88 
                        onClick={() => handleConnect(link_request)}
105 
                  >
 - 
 
106 
                    {labels.connect}
 - 
 
107 
                  </button>
 89 
                      />
108 
                )}
 90 
                    )}
109 
                {link_cancel && (
 91 
                    {link_cancel && (
110 
                  <button
 92 
                      <ButtonSecondary
111 
                    className='btn btn-secondary'
 93 
                        label={labels.cancel}
112 
                    onClick={() => handleConnect(link_cancel)}
 94 
                        onClick={() => handleConnect(link_cancel)}
113 
                  >
 95 
                      />
114 
                    {labels.cancel}
 96 
                    )}
115 
                  </button>
 97 
                  </>
116 
                )}
 98 
                }
- 
 
 99 
              >
- 
 
 100 
                <ListItemButton disableRipple>
- 
 
 101 
                  <ListItemAvatar>
- 
 
 102 
                    <Avatar alt={`${name} image`} src={image} />
- 
 
 103 
                  </ListItemAvatar>
- 
 
 104 
 
- 
 
 105 
                  <ListItemText primary={name} />
- 
 
 106 
                </ListItemButton>
117 
              </div>
 107 
              </ListItem>
118 
            )
 108 
            )
119 
          )
 - 
 
120 
        ) : (
 - 
 
121 
          <EmptySection align='left' message={labels?.datatable_empty} />
 109 
          }
122 
        )}
 110 
        )}
123 
      </StyledSuggestList>
 111 
      </List>
124 
    </StyledContainer>
 112 
    </WidgetWrapper>
125 
  )
 113 
  )
Línea 126... Línea 114...
126 
}
 114 
}