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.background.primary,

        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>

  );

}