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>
  );
}