Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3719
Línea 1... Línea 1...
1 
import React, { useMemo, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react';
2 
import { Tab, Tabs, styled } from '@mui/material'
 2 
import { Tab, Tabs, styled } from '@mui/material';
3 
 
 3 
 
4 
import { useFetch } from '@hooks'
 4 
import { useFetch } from '@hooks';
5 
import { REACTIONS } from '@constants/feed'
 5 
import { REACTIONS } from '@constants/feed';
6 
 
 6 
 
7 
import Modal from '@components/UI/modal/Modal'
 7 
import Modal from '@components/UI/modal/Modal';
8 
import Spinner from '@components/UI/Spinner'
 8 
import Spinner from '@components/UI/Spinner';
9 
import UsersList from '@components/UI/UsersList'
 9 
import UsersList from '@components/UI/UsersList';
10 
 
 10 
 
11 
const ReactionTab = styled(Tab)(() => ({
 11 
const ReactionTab = styled(Tab)(() => ({
12 
  minWidth: 'auto',
 12 
  minWidth: 'auto',
13 
  minHeight: 'auto',
 13 
  minHeight: 'auto',
14 
  padding: '0.5rem 1rem'
 14 
  padding: '0.5rem 1rem'
15 
}))
 15 
}));
16 
 
 16 
 
17 
export default function ReactionsModal({
 17 
export default function ReactionsModal({
18 
  reactionsUsersUrl = '',
 18 
  reactionsUsersUrl = '',
19 
  reactions = [],
 19 
  reactions = [],
20 
  show = false,
 20 
  show = false,
21 
  onClose
 21 
  onClose
22 
}) {
 22 
}) {
23 
  const { data: users, isLoading } = useFetch(show ? reactionsUsersUrl : '', [])
 23 
  const { data: users, isLoading } = useFetch(show ? reactionsUsersUrl : '', []);
24 
  const [reaction, setReaction] = useState('')
 24 
  const [reaction, setReaction] = useState('');
25 
 
 25 
 
26 
  const availableReactions = useMemo(
 26 
  const availableReactions = useMemo(
27 
    () =>
 - 
 
28 
      REACTIONS.filter(({ type }) =>
 - 
 
29 
        reactions.some(({ reaction }) => type === reaction)
 27 
    () => REACTIONS.filter(({ type }) => reactions.some(({ reaction }) => type === reaction)),
30 
      ),
 - 
 
31 
    [reactions]
 28 
    [reactions]
32 
  )
 29 
  );
33 
 
 30 
 
34 
  const filteredUsers = useMemo(
 31 
  const filteredUsers = useMemo(
35 
    () => (reaction ? users.filter((u) => u.reaction === reaction) : users),
 32 
    () => (reaction ? users.filter((u) => u.reaction === reaction) : users),
36 
    [reaction, users]
 33 
    [reaction, users]
37 
  )
 34 
  );
38 
 
 35 
 
39 
  return (
 36 
  return (
40 
    <Modal
 - 
 
41 
      show={show}
 - 
 
42 
      title='Personas que reaccionaron'
 37 
    <Modal show={show} title='Personas que reaccionaron' onClose={onClose} showFooter={false}>
43 
      onClose={onClose}
 - 
 
44 
      showFooter={false}
 - 
 
45 
    >
 - 
 
46 
      <Tabs
 38 
      <Tabs
47 
        value={reaction}
 39 
        value={reaction}
48 
        onChange={(e, newValue) => setReaction(newValue)}
 40 
        onChange={(e, newValue) => setReaction(newValue)}
49 
        sx={{
 41 
        sx={{
50 
          width: '100%',
 42 
          width: '100%',
51 
          minHeight: 'auto',
 43 
          minHeight: 'auto',
52 
          '& .MuiTabs-indicator': {
 44 
          '& .MuiTabs-indicator': {
53 
            backgroundColor: 'var(--font-color)'
 45 
            backgroundColor: 'var(--font-color)'
54 
          }
 46 
          }
55 
        }}
 47 
        }}
56 
      >
 48 
      >
57 
        <ReactionTab value='' label='Todas' disableRipple />
 49 
        <ReactionTab value='' label='Todas' disableRipple />
58 
 
 50 
 
59 
        {availableReactions.map(({ name, icon: Icon, type, color }) => (
 51 
        {availableReactions.map(({ name, icon: Icon, type, color }) => (
60 
          <ReactionTab
 52 
          <ReactionTab
61 
            key={type}
 53 
            key={type}
62 
            value={type}
 54 
            value={type}
63 
            label={name}
 55 
            label={name}
64 
            icon={<Icon style={{ color }} />}
 56 
            icon={<Icon style={{ color }} />}
65 
            disableRipple
 57 
            disableRipple
66 
          />
 58 
          />
67 
        ))}
 59 
        ))}
68 
      </Tabs>
 60 
      </Tabs>
69 
 
 61 
 
70 
      {isLoading ? <Spinner /> : <UsersList users={filteredUsers} />}
 62 
      {isLoading ? <Spinner /> : <UsersList users={filteredUsers} />}
71 
    </Modal>
 63 
    </Modal>
72 
  )
 64 
  );
73 
}
 65 
}