Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Avatar, Box, 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 response = await getOnRoom()
      const onRoomUrl = new URL(response.url)
      Object.keys(response).forEach((key) => {
        if (key === 'url') return
        onRoomUrl.searchParams.set(key, response[key])
      })

      setTimeout(() => {
        window.open(onRoomUrl.toString(), '_blank')
      }, 0)
    } catch (error) {
      addNotification({ style: 'danger', msg: error.message })
    } finally {
      setLoading(false)
    }
  }

  return (
    <Widget>
      <Widget.Body styles={{ textAlign: 'center' }}>
        {loading && (
          <Box
            sx={{
              position: 'absolute',
              width: '100%',
              height: '100%',
              display: 'grid',
              placeItems: 'center',
              zIndex: 50
            }}
          >
            <Spinner />
          </Box>
        )}

        <Avatar
          sx={{ cursor: 'pointer' }}
          src={moodle.image}
          alt={moodle.name}
          onClick={() => handleOnRoom()}
        />
        <Typography variant='body2'>{moodle.name}</Typography>
      </Widget.Body>
    </Widget>
  )
}