Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3416 Rev 3432
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'
Línea 3... Línea 3...
3 
 
 3 
 
4 
import { useFetch } from "@hooks";
 4 
import { useFetch } from '@hooks'
Línea 5... Línea 5...
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'
Línea 8... Línea 8...
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',
Línea 13... Línea 13...
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,
Línea 21... Línea 21...
21 
  onClose,
 21 
  onClose
22 
}) {
 22 
}) {
23 
  const { data: users, loading } = 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 
    () =>
 27 
    () =>
Línea 28... Línea 28...
28 
      REACTIONS.filter(({ type }) =>
 28 
      REACTIONS.filter(({ type }) =>
29 
        reactions.some(({ reaction }) => type === reaction)
 29 
        reactions.some(({ reaction }) => type === reaction)
30 
      ),
 30 
      ),
31 
    [reactions]
 31 
    [reactions]
Línea 32... Línea 32...
32 
  );
 32 
  )
33 
 
 33 
 
34 
  const filteredUsers = useMemo(
 34 
  const filteredUsers = useMemo(
35 
    () => (reaction ? users.filter((u) => u.reaction === reaction) : users),
 35 
    () => (reaction ? users.filter((u) => u.reaction === reaction) : users),
36 
    [reaction, users]
 36 
    [reaction, users]
37 
  );
 37 
  )
38 
 
 38 
 
39 
  return (
 39 
  return (
40 
    <Modal
 40 
    <Modal
41 
      show={show}
 41 
      show={show}
42 
      title="Personas que reaccionaron"
 42 
      title='Personas que reaccionaron'
43 
      onClose={onClose}
 43 
      onClose={onClose}
44 
      showFooter={false}
 44 
      showFooter={false}
45 
    >
 45 
    >
46 
      <Tabs
 46 
      <Tabs
47 
        value={reaction}
 47 
        value={reaction}
48 
        onChange={(e, newValue) => setReaction(newValue)}
 48 
        onChange={(e, newValue) => setReaction(newValue)}
49 
        sx={{
 49 
        sx={{
50 
          width: "100%",
 50 
          width: '100%',
Línea 51... Línea 51...
51 
          minHeight: "auto",
 51 
          minHeight: 'auto',
52 
          "& .MuiTabs-indicator": {
 52 
          '& .MuiTabs-indicator': {
53 
            backgroundColor: "var(--font-color)",
 53 
            backgroundColor: 'var(--font-color)'
54 
          },
 54 
          }
Línea 65... Línea 65...
65 
            disableRipple
 65 
            disableRipple
66 
          />
 66 
          />
67 
        ))}
 67 
        ))}
68 
      </Tabs>
 68 
      </Tabs>
Línea 69... Línea 69...
69 
 
 69 
 
70 
      {loading ? <Spinner /> : <UsersList users={filteredUsers} />}
 70 
      {isLoading ? <Spinner /> : <UsersList users={filteredUsers} />}
71 
    </Modal>
 71 
    </Modal>
72 
  );
 72 
  )