Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { useNavigate } from 'react-router-dom'

import { useDispatch } from 'react-redux'

import { Box, Button } from '@mui/material'

import { getOnRoom } from '@services/onRoom'

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

import colors from '@styles/colors'

import Spinner from '@components/UI/Spinner'

export default function AppsNavigation() {

  const [loading, setLoading] = useState(false)

  const dispatch = useDispatch()

  const navigate = useNavigate()

  const handleOnRoom = async () => {

    try {

      setLoading(true)

      const onRoomUrl = await getOnRoom()

      window.open(onRoomUrl, '_blank')

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }))

    } finally {

      setLoading(false)

    }

  }

  return (

    <Box

      sx={{

        position: 'fixed',

        top: 0,

        left: 0,

        height: '100vh',

        width: '100%',

        backgroundColor: colors.main,

        zIndex: 999,

        display: 'flex',

        flexDirection: 'column',

        placeContent: 'center',

        gap: '0.5rem',

        padding: '1rem'

      }}

    >

      {loading && <Spinner absolute />}

      <Button color='primary' onClick={() => navigate('/microlearning')}>

        Micro Aprendizaje

      </Button>

      <Button color='primary' onClick={handleOnRoom}>

        On room

      </Button>

      <Button color='primary' onClick={() => navigate('/habits')}>

        Hábitos y competencias

      </Button>

      <Button color='primary' onClick={() => navigate('/dashboard')}>

        Ir al inicio

      </Button>

    </Box>

  )

}