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={{ display: 'grid', placeItems: '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>

  )

}