multi-downloader-nx_mirror/gui/react/src/components/LogoutButton.tsx

import { ExitToApp } from '@mui/icons-material';
import { Button } from '@mui/material';
import React from 'react';
import useStore from '../hooks/useStore';
import { messageChannelContext } from '../provider/MessageChannel';
import Require from './Require';

const LogoutButton: React.FC = () => {
    const messageChannel = React.useContext(messageChannelContext);
    const [, dispatch] = useStore();

    const logout = async () => {
        if (await messageChannel?.isDownloading())
            return alert('You are currently downloading. Please finish the download first.');
        if (await messageChannel?.logout())
            dispatch({
                type: 'service',
                payload: undefined
            });
        else 
            alert('Unable to change service');
    };

    return <Require value={messageChannel}>
        <Button
            startIcon={<ExitToApp />}
            variant='contained'
            onClick={logout}
            sx={{ maxHeight: '2.3rem' }}
        >
      Service select
        </Button>
    </Require>;

};

export default LogoutButton;