ChoseRole.tsx

import React, { FC, useContext, useEffect, useState } from 'react';
import axios from 'axios';
import Button from '@material-ui/core/Button';
import { AuthContext } from '../AuthContext';

const choseAndForward = (e: unknown): void => {
  // Do nothing.
};

/**
 * Screen that let's users decide role between available roles.
 * This is intended to use when a user has more than one role.
 * @returns ChoseRole component.
 */
export const ChoseRole: FC = () => {
  const [userRoles, setUserRoles] = useState<Array<string>>(['']);

  useEffect(() => {
    const getUserRoles = async (): Promise<unknown> => {
      const response = await axios('/api/web/get_role');
      setUserRoles(response.data.token);
      return null;
    };
    getUserRoles();
  }, [userRoles]);

  const { role } = useContext(AuthContext);
  return (
    <div data-testid="ChoseRole">
      <Button
        variant="outlined"
        color="default"
        onClick={(e) => choseAndForward(e)}
      >
        {role}
      </Button>
    </div>
  );
};