Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'

import { axios } from '../../utils'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../redux/notification/notification.actions'

import styled from 'styled-components'

import Avatar from '@mui/material/Avatar'

import IconButton from '@mui/material/IconButton'

import AddRounded from '@mui/icons-material/AddRounded'

import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'

import Spinner from '../UI/Spinner'

import LoaderContainer from '../UI/LoaderContainer'

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 [contacts, setContacts] = useState([])

  const [loading, setLoading] = useState(false)

  const dispatch = useDispatch()

  const getContacts = () => {

    setLoading(true)

    axios

      .get(url_get_contacts_availables_for_group)

      .then(({ data: responseData }) => {

        const { data, success } = responseData

        if (!success) {

          dispatch(addNotification({ style: 'danger', msg: data }))

          return

        }

        setContacts(data)

      })

      .catch((err) => {

        dispatch(addNotification({ style: 'danger', msg: err.message }))

      })

      .finally(() => setLoading(false))

  }

  const handleAddMember = (id) => {

    setLoading(true)

    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: data }))

        getContacts()

      })

      .catch((err) => {

        dispatch(addNotification({ style: 'danger', msg: err.message }))

      })

      .finally(() => setLoading(false))

  }

  useEffect(() => {

    getContacts()

  }, [])

  return (

    <ContactContainer>

      <IconButton onClick={() => changeTab('DEFAULT')}>

        <ArrowBackIosIcon />

      </IconButton>

      <ul>

        {contacts.map((member) => (

          <li key={member.id}>

            <AddMember.Item

              {...member}

              onClick={() => handleAddMember(member.id)}

            />

          </li>

        ))}

      </ul>

      {loading && (

        <LoaderContainer>

          <Spinner />

        </LoaderContainer>

      )}

    </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