Proyectos de Subversion LeadersLinked - SPA

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

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

import { useFetch } from '@hooks';

import { REACTIONS } from '@constants/feed';

import Modal from '@components/UI/modal/Modal';

import Spinner from '@components/UI/Spinner';

import UsersList from '@components/UI/UsersList';

const ReactionTab = styled(Tab)(() => ({

  minWidth: 'auto',

  minHeight: 'auto',

  padding: '0.5rem 1rem'

}));

export default function ReactionsModal({

  reactionsUsersUrl = '',

  reactions = [],

  show = false,

  onClose

}) {

  const { data: users, isLoading } = useFetch(show ? reactionsUsersUrl : '', []);

  const [reaction, setReaction] = useState('');

  const availableReactions = useMemo(

    () => REACTIONS.filter(({ type }) => reactions.some(({ reaction }) => type === reaction)),

    [reactions]

  );

  const filteredUsers = useMemo(

    () => (reaction ? users.filter((u) => u.reaction === reaction) : users),

    [reaction, users]

  );

  return (

    <Modal show={show} title='Personas que reaccionaron' onClose={onClose} showFooter={false}>

      <Tabs

        value={reaction}

        onChange={(e, newValue) => setReaction(newValue)}

        sx={{

          width: '100%',

          minHeight: 'auto',

          '& .MuiTabs-indicator': {

            backgroundColor: 'var(--font-color)'

          }

        }}

      >

        <ReactionTab value='' label='Todas' disableRipple />

        {availableReactions.map(({ name, icon: Icon, type, color }) => (

          <ReactionTab

            key={type}

            value={type}

            label={name}

            icon={<Icon style={{ color }} />}

            disableRipple

          />

        ))}

      </Tabs>

      {isLoading ? <Spinner /> : <UsersList users={filteredUsers} />}

    </Modal>

  );

}