Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2917 Rev 3719
Línea 1... Línea 1...
1 
import React, { useMemo, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react';
2 
import { styled, Typography } from '@mui/material'
 2 
import { styled, Typography } from '@mui/material';
3 
 
 3 
 
4 
import ReactionsIcons from './reactions-icons'
 4 
import ReactionsIcons from './reactions-icons';
5 
import ReactionsModal from './reactions-modal'
 5 
import ReactionsModal from './reactions-modal';
6 
 
 6 
 
7 
const Row = styled('div')(() => ({
 7 
const Row = styled('div')(() => ({
8 
  display: 'flex',
 8 
  display: 'flex',
9 
  alignItems: 'center',
 9 
  alignItems: 'center',
10 
  gap: 0.5,
 10 
  gap: 0.5,
11 
  cursor: 'pointer'
 11 
  cursor: 'pointer'
12 
}))
 12 
}));
13 
 
 13 
 
14 
export default function Reactions({ reactions = [], reactionsUrl = '' }) {
 14 
export default function Reactions({ reactions = [], reactionsUrl = '' }) {
15 
  const [showModal, setShowModal] = useState(false)
 15 
  const [showModal, setShowModal] = useState(false);
16 
 
 16 
 
17 
  const toggleModal = () => setShowModal((prevState) => !prevState)
 17 
  const toggleModal = () => setShowModal((prevState) => !prevState);
18 
 
 18 
 
19 
  const totalReactions = useMemo(
 19 
  const totalReactions = useMemo(
20 
    () => reactions.reduce((acc, r) => acc + parseInt(r.total), 0),
 20 
    () => reactions.reduce((acc, r) => acc + parseInt(r.total), 0),
21 
    [reactions]
 21 
    [reactions]
22 
  )
 22 
  );
23 
 
 23 
 
24 
  return (
 24 
  return (
25 
    <Row onClick={toggleModal}>
 25 
    <Row onClick={toggleModal}>
26 
      <ReactionsIcons reactions={reactions} />
 26 
      <ReactionsIcons reactions={reactions} />
27 
      {totalReactions ? (
 27 
      {totalReactions ? (
28 
        <Typography variant='overline'>{`${totalReactions} reacciones`}</Typography>
 28 
        <Typography variant='overline'>{`${totalReactions} reacciones`}</Typography>
29 
      ) : null}
 29 
      ) : null}
30 
      <ReactionsModal
 30 
      <ReactionsModal
31 
        show={showModal}
 31 
        show={showModal}
32 
        onClose={toggleModal}
 32 
        onClose={toggleModal}
33 
        reactions={reactions}
 33 
        reactions={reactions}
34 
        reactionsUsersUrl={reactionsUrl}
 34 
        reactionsUsersUrl={reactionsUrl}
35 
      />
 35 
      />
36 
    </Row>
 36 
    </Row>
37 
  )
 37 
  );
38 
}
 38 
}