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>

  )

}