Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';

import { styled, Typography } from '@mui/material';

import ReactionsIcons from './reactions-icons';

import ReactionsModal from './reactions-modal';

const Row = styled('div')(() => ({

  display: 'flex',

  alignItems: 'center',

  gap: 0.5,

  cursor: 'pointer'

}));

export default function Reactions({ reactions = [], reactionsUrl = '' }) {

  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => setShowModal((prevState) => !prevState);

  const totalReactions = useMemo(

    () => reactions.reduce((acc, r) => acc + parseInt(r.total), 0),

    [reactions]

  );

  return (

    <Row onClick={toggleModal}>

      <ReactionsIcons reactions={reactions} />

      {totalReactions ? (

        <Typography variant='overline'>{`${totalReactions} reacciones`}</Typography>

      ) : null}

      <ReactionsModal

        show={showModal}

        onClose={toggleModal}

        reactions={reactions}

        reactionsUsersUrl={reactionsUrl}

      />

    </Row>

  );

}