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>
  )
}