Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Avatar, Typography } from '@mui/material'

import { getOnRoom } from '@services/onRoom'
import { addNotification } from '@store/notification/notification.actions'

import Widget from '@components/UI/Widget'
import Spinner from '@components/UI/Spinner'

export default function OnRoomWidget({ moodle }) {
  const [loading, setLoading] = useState(false)

  const handleOnRoom = async () => {
    try {
      setLoading(true)
      const onRoomUrl = await getOnRoom()
      window.open(onRoomUrl, '_blank')
    } catch (error) {
      addNotification({ style: 'danger', msg: error.message })
    } finally {
      setLoading(false)
    }
  }

  return (
    <Widget>
      <Widget.Body styles={{ display: 'grid', placeItems: 'center' }}>
        {loading && <Spinner absolute />}

        <Avatar
          sx={{ cursor: 'pointer' }}
          src={moodle.image}
          alt={moodle.name}
          onClick={() => handleOnRoom()}
        />
        <Typography variant='overline' textAlign='center'>
          Plataforma de Capacitación CESA ON ROOM
          {/* {moodle.name} */}
        </Typography>
      </Widget.Body>
    </Widget>
  )
}