Proyectos de Subversion LeadersLinked - SPA

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

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

import Spinner from '@app/components/UI/Spinner'
import WidgetWrapper from '../WidgetLayout'

const AppsWidget = ({ moodle, microlearning }) => {
  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) {
      console.log('>>: error > ', error)
      addNotification({ style: 'danger', msg: error.message })
    } finally {
      setLoading(false)
    }
  }

  return (
    <WidgetWrapper
      sx={{
        padding: 2,
        display: 'flex',
        flexDirection: 'column',
        alignItems: '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>

      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 1,
          mt: 1
        }}
      >
        <a href={microlearning.playStore} target='_blank' rel='noreferrer'>
          <Avatar
            src='/images/logo-leaderslinked-apple.png'
            sx={{ borderRadius: '0' }}
          />
        </a>

        <a href={microlearning.appStore} target='_blank' rel='noreferrer'>
          <Avatar
            src='/images/logo-leaderslinked-android.png'
            sx={{ borderRadius: '0' }}
          />
        </a>
      </Box>

      <Typography variant='body2' sx={{ textAlign: 'center' }}>
        {microlearning.name}
      </Typography>
    </WidgetWrapper>
  )
}

export default AppsWidget