Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useDispatch } from 'react-redux'
import { Avatar, IconButton } from '@mui/material'
import { AddRounded, ArrowBackIos } from '@mui/icons-material'
import styled from 'styled-components'

import { axios } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'
import useFetch from '../../hooks/useFetch'

import Spinner from '../UI/Spinner'
import WidgetLayout from '../widgets/WidgetLayout'

const ContactContainer = styled(WidgetLayout)`
  padding: 1rem;
  position: relative;
  flex-grow: 1;
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow: auto;
    margin-top: 1rem;
  }
`

const ContactTemplate = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  .info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  h3 {
    font-size: 1rem;
    color: var(--subtitle-color);
    font-weight: 600;
  }
`

const AddMember = ({ group, changeTab }) => {
  const { url_add_user_to_group, url_get_contacts_availables_for_group } = group
  const {
    data: contacts,
    isLoading,
    refetch
  } = useFetch(url_get_contacts_availables_for_group, [])
  const dispatch = useDispatch()

  const handleAddMember = (id) => {
    const formData = new FormData()
    formData.append('uid', id)

    axios
      .post(url_add_user_to_group, formData)
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          throw new Error(data)
        }

        dispatch(addNotification({ style: 'success', msg: 'Usuario agregado' }))
        refetch()
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  return (
    <ContactContainer>
      <IconButton onClick={() => changeTab('DEFAULT')}>
        <ArrowBackIos />
      </IconButton>

      <ul>
        {contacts.map((member) => (
          <li key={member.id}>
            <AddMember.Item
              {...member}
              onClick={() => handleAddMember(member.id)}
            />
          </li>
        ))}
      </ul>

      {isLoading && <Spinner />}
    </ContactContainer>
  )
}

const Item = ({ image, name, onClick }) => {
  return (
    <ContactTemplate>
      <div className='info'>
        <Avatar src={image} alt={`user_${name}-image`} />
        <h3>{name}</h3>
      </div>
      <IconButton onClick={onClick}>
        <AddRounded />
      </IconButton>
    </ContactTemplate>
  )
}

AddMember.Item = Item

export default AddMember