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/config/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>
  );
}