Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3379 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3379 Rev 3719
Línea 1... Línea 1...
1 
import React, { useMemo, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react';
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux';
3 
import {
 - 
 
4 
  Avatar,
 - 
 
5 
  List,
 - 
 
6 
  ListItemAvatar,
 - 
 
7 
  ListItemButton,
 - 
 
8 
  ListItemText,
 - 
 
9 
  Typography
 - 
 
10 
} from '@mui/material'
 3 
import { Avatar, List, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material';
11 
 
 4 
 
12 
import { axios } from '@utils'
 5 
import { axios } from '@utils';
13 
import { useFetch } from '@hooks'
 6 
import { useFetch } from '@hooks';
14 
import { addNotification } from '@store/notification/notification.actions'
 7 
import { addNotification } from '@store/notification/notification.actions';
15 
 
 8 
 
16 
import Widget from '@components/UI/Widget'
 9 
import Widget from '@components/UI/Widget';
17 
import Button from '@components/UI/buttons/Buttons'
 10 
import Button from '@components/UI/buttons/Buttons';
18 
 
 11 
 
19 
const PeopleYouMayKnow = () => {
 12 
const PeopleYouMayKnow = () => {
20 
  const { data: peopleYouMayKnow, refetch } = useFetch(
 13 
  const { data: peopleYouMayKnow, refetch } = useFetch('/helpers/people-you-may-know', []);
21 
    '/helpers/people-you-may-know',
 - 
 
22 
    []
 - 
 
23 
  )
 - 
 
24 
  const [lookMore, setLookMore] = useState(false)
 14 
  const [lookMore, setLookMore] = useState(false);
25 
  const labels = useSelector(({ intl }) => intl.labels)
 15 
  const labels = useSelector(({ intl }) => intl.labels);
26 
  const dispatch = useDispatch()
 16 
  const dispatch = useDispatch();
27 
 
 17 
 
28 
  const users = useMemo(
 18 
  const users = useMemo(
29 
    () => (lookMore ? peopleYouMayKnow : [...peopleYouMayKnow].slice(0, 3)),
 19 
    () => (lookMore ? peopleYouMayKnow : [...peopleYouMayKnow].slice(0, 3)),
30 
    [peopleYouMayKnow, lookMore]
 20 
    [peopleYouMayKnow, lookMore]
31 
  )
 21 
  );
32 
 
 22 
 
33 
  const handleConnect = (url) => {
 23 
  const handleConnect = (url) => {
34 
    axios.post(url).then(({ data }) => {
 24 
    axios.post(url).then(({ data }) => {
35 
      if (!data.success) {
 25 
      if (!data.success) {
36 
        dispatch(
 26 
        dispatch(
37 
          addNotification({
 27 
          addNotification({
38 
            style: 'danger',
 28 
            style: 'danger',
39 
            msg:
 - 
 
40 
              typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
 29 
            msg: typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
41 
          })
 30 
          })
42 
        )
 31 
        );
43 
        return
 32 
        return;
44 
      }
 33 
      }
45 
 
 34 
 
46 
      dispatch(
 35 
      dispatch(
47 
        addNotification({
 36 
        addNotification({
48 
          style: 'success',
 37 
          style: 'success',
49 
          msg: data.data
 38 
          msg: data.data
50 
        })
 39 
        })
51 
      )
 40 
      );
52 
      refetch()
 41 
      refetch();
53 
    })
 42 
    });
54 
  }
 43 
  };
55 
 
 44 
 
56 
  if (!users.length) {
 45 
  if (!users.length) {
57 
    return null
 46 
    return null;
58 
  }
 47 
  }
59 
 
 48 
 
60 
  return (
 49 
  return (
61 
    <Widget>
 50 
    <Widget>
62 
      <Widget.Header
 51 
      <Widget.Header
63 
        title={labels.connect_with + ':'}
 52 
        title={labels.connect_with + ':'}
64 
        renderAction={() =>
 53 
        renderAction={() =>
65 
          peopleYouMayKnow.length > 4 && (
 54 
          peopleYouMayKnow.length > 4 && (
66 
            <Button onClick={() => setLookMore(!lookMore)}>
 55 
            <Button onClick={() => setLookMore(!lookMore)}>
67 
              {lookMore ? labels.view_less : labels.view_more}
 56 
              {lookMore ? labels.view_less : labels.view_more}
68 
            </Button>
 57 
            </Button>
69 
          )
 58 
          )
70 
        }
 59 
        }
71 
      />
 60 
      />
72 
 
 61 
 
73 
      <Widget.Body>
 62 
      <Widget.Body>
74 
        <List sx={{ width: '100%', maxHeight: 200, overflow: 'auto' }}>
 63 
        <List sx={{ width: '100%', maxHeight: 200, overflow: 'auto' }}>
75 
          {users.map(
 - 
 
76 
            ({ id, image, link_cancel, link_request, name, profile }) => (
 64 
          {users.map(({ id, image, link_cancel, link_request, name }) => (
77 
              <ListItemButton key={id}>
 65 
            <ListItemButton key={id}>
78 
                <ListItemAvatar>
 66 
              <ListItemAvatar>
79 
                  <Avatar alt={`${name} image`} src={image} />
 67 
                <Avatar alt={`${name} image`} src={image} />
80 
                </ListItemAvatar>
 68 
              </ListItemAvatar>
81 
 
 69 
 
82 
                <ListItemText primary={name} />
 70 
              <ListItemText primary={name} />
83 
 
 71 
 
84 
                {link_request && (
 72 
              {link_request && (
85 
                  <Button
 - 
 
86 
                    color='primary'
 - 
 
87 
                    onClick={() => handleConnect(link_request)}
 73 
                <Button color='primary' onClick={() => handleConnect(link_request)}>
88 
                  >
 - 
 
89 
                    {labels.connect}
 74 
                  {labels.connect}
90 
                  </Button>
 75 
                </Button>
91 
                )}
 76 
              )}
92 
                {link_cancel && (
 77 
              {link_cancel && (
93 
                  <Button
 - 
 
94 
                    color='secondary'
 - 
 
95 
                    onClick={() => handleConnect(link_cancel)}
 78 
                <Button color='secondary' onClick={() => handleConnect(link_cancel)}>
96 
                  >
 - 
 
97 
                    {labels.cancel}
 79 
                  {labels.cancel}
98 
                  </Button>
 80 
                </Button>
99 
                )}
 81 
              )}
100 
              </ListItemButton>
 82 
            </ListItemButton>
101 
            )
 - 
 
102 
          )}
 83 
          ))}
103 
        </List>
 84 
        </List>
104 
      </Widget.Body>
 85 
      </Widget.Body>
105 
    </Widget>
 86 
    </Widget>
106 
  )
 87 
  );
107 
}
 88 
};
108 
 
 89 
 
109 
export default PeopleYouMayKnow
 90 
export default PeopleYouMayKnow;