Proyectos de Subversion LeadersLinked - SPA

import { styled } from 'styled-components'
import React, { useState } from 'react'
import { axios } from '../../../utils'
import { useSelector } from 'react-redux'

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

import Spinner from '../../UI/EmptySection'
import WidgetWrapper from '../WidgetLayout'

const StyledSocialNetworks = styled(WidgetWrapper)`
  padding: 10px;
  picture {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
`

const SocialNetworks = ({ moodle, microlearning }) => {
  const [loading, setLoading] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const handleOnRoom = async () => {
    try {
      setLoading(true)
      const response = await axios.post('/moodle')

      if (response.data.success) {
        const form = document.createElement('form')
        form.setAttribute('method', 'post')
        form.setAttribute('action', response.data.data.url)
        form.setAttribute('target', '_blank')
        Object.keys(response.data.data).forEach((key) => {
          if (key !== 'url') {
            const value = response.data.data[key]
            const hiddenField = document.createElement('input')
            hiddenField.setAttribute('type', 'hidden')
            hiddenField.setAttribute('name', key)
            hiddenField.setAttribute('value', value)
            form.appendChild(hiddenField)
          }
        })
        document.body.appendChild(form)
        form.submit()
      }
    } catch (error) {
      console.log('>>: error > ', error)
      addNotification({
        style: 'danger',
        msg: 'Ha ocurrido un error en la comunicacion con ON ROOM'
      })
    } finally {
      setLoading(false)
    }
  }

  return (
    <StyledSocialNetworks>
      {loading && <Spinner />}
      <div className='d-flex flex-column align-items-center gap-2'>
        <picture className='cursor-pointer' onClick={() => handleOnRoom()}>
          <img src={moodle.image} alt={moodle.name} />
        </picture>
        <span>{moodle.name}</span>
      </div>
      <div className='d-flex align-items-center justify-content-center gap-2'>
        <a href={microlearning.playStore} target='_blank' rel='noreferrer'>
          <picture>
            <img src='/images/logo-2getskillsa-apple.jpeg' alt='' />
          </picture>
        </a>
        <a href={microlearning.appStore} target='_blank' rel='noreferrer'>
          <picture>
            <img src='/images/logo-2getskills-android.jpeg' alt='' />
          </picture>
        </a>
      </div>
      <span>{labels.micro_learning}</span>
    </StyledSocialNetworks>
  )
}

export default SocialNetworks