@material-ui/core#SvgIcon JavaScript Examples

function CloseIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={{fontSize: '22px'}}>
      <path
        fill={ color }
        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
      />
    </SvgIcon>
  );
}

function WarningIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={iconStyle}>
      <path
        fill={color}
        d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
      />
    </SvgIcon>
  );
}

FacebookIcon = ({ color }) => {
  const styles = useStyles();
  return (
    <SvgIcon className={styles.icon} viewBox='0 0 40 40' fill='none'>
      <g clipPath='url(#clip0_9251_208)'>
        <path
          d='M17.2977 29V20.5539H15.0002V17.5129H17.2977V14.9154C17.2977 12.8744 18.6549 11 21.782 11C23.0481 11 23.9843 11.118 23.9843 11.118L23.9105 13.9578C23.9105 13.9578 22.9557 13.9487 21.9138 13.9487C20.7861 13.9487 20.6054 14.4539 20.6054 15.2924V17.5129H24.0002L23.8525 20.5539H20.6054V29H17.2977Z'
          fill={color}
        />
      </g>
      <circle opacity='0.3' cx='20' cy='20' r='19.6' stroke={color} strokeWidth='0.8' />
      <defs>
        <clipPath id='clip0_9251_208'>
          <rect width='9' height='18' fill={color} transform='translate(15 11)' />
        </clipPath>
      </defs>
    </SvgIcon>
  );
}

ErrorPage = ({ errorMsg }) => {
  const isNotFoundError =
    errorMsg.includes('does not exist') || errorMsg.includes('Malformatted');

  return (
    <div style={{ textAlign: 'center', marginTop: '20%' }}>
      {isNotFoundError ? (
        <SvgIcon
          color="primary"
          style={{ fontSize: '8em', marginBottom: '0.5em' }}
        >
          <Error404 />
        </SvgIcon>
      ) : (
        <ErrorOutlineIcon
          color="primary"
          style={{ fontSize: '8em', marginBottom: '0.5em' }}
        />
      )}
      <Typography color="secondary" variant="h4">
        {isNotFoundError ? `404 Not Found` : 'Error'}
      </Typography>
      <Typography color="secondary" variant="h6">
        {errorMsg}
      </Typography>
    </div>
  );
}

function SuccessIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={iconStyle}>
      <path
        fill={ color }
        d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM10.75,16.518,6.25,12.2l1.4-1.435L10.724,13.7l6.105-6.218L18.25,8.892Z"
      />
    </SvgIcon>
  );
}

function CloseIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={{fontSize: '22px'}}>
      <path
        fill={ color }
        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
      />
    </SvgIcon>
  );
}

function ErrorIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={iconStyle}>
      <path
        fill={color}
        d="M16.971,0H7.029L0,7.029V16.97L7.029,24H16.97L24,16.971V7.029L16.971,0Zm-1.4,16.945-3.554-3.521L8.5,16.992,7.079,15.574l3.507-3.566L7,8.536,8.418,7.119,12,10.577l3.539-3.583,1.431,1.431-3.535,3.568L17,15.515Z"
      />
    </SvgIcon>
  );
}

NotFoundPage = () => {
  const classes = useNotFoundPageStyles();

  return (
    <Container disableGutters>
      <Paper variant="outlined" className={classes.mainPaper}>
        <div className={classes.textWrapper}>
          <SvgIcon color="primary" className={classes.icon}>
            <Error404 />
          </SvgIcon>
          <Typography color="secondary" variant="h4">
            Page Not Found
          </Typography>
          <Typography color="secondary" variant="h6">
            The page you requested does not exist
          </Typography>
        </div>
      </Paper>
    </Container>
  );
}

AcceptAnswerButton = ({ checked, handleAcceptAns }) => {
  const classes = useQuesPageStyles();

  return (
    <Checkbox
      checked={checked}
      icon={
        <SvgIcon className={classes.acceptIcon}>
          <AcceptedIcon />
        </SvgIcon>
      }
      checkedIcon={
        <SvgIcon className={classes.checkedAcceptIcon}>
          <AcceptedIcon />
        </SvgIcon>
      }
      onChange={handleAcceptAns}
    />
  );
}

function CloseIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={{fontSize: '22px'}}>
      <path
        fill={ color }
        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
      />
    </SvgIcon>
  );
}

function CDPIconSelected(props) {
  const { color, altColor, className } = props;
  return (
    <div
      style={{
        background: color,
        borderRadius: '30px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: '12px',
      }}
    >
      <SvgIcon viewBox="0, 0, 24, 24" className={className}>
        <path fill={altColor} d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
      </SvgIcon>
    </div>
  );
}

function SuccessIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={iconStyle}>
      <path
        fill={ color }
        d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM10.75,16.518,6.25,12.2l1.4-1.435L10.724,13.7l6.105-6.218L18.25,8.892Z"
      />
    </SvgIcon>
  );
}

FacebookSvg = props => (
  <SvgIcon {...props}>
    <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
  </SvgIcon>
)

function SuccessIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={iconStyle}>
      <path fill={color} d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM10.75,16.518,6.25,12.2l1.4-1.435L10.724,13.7l6.105-6.218L18.25,8.892Z" />
    </SvgIcon>
  );
}

GithubSvg = props => (
  <SvgIcon {...props}>
    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
  </SvgIcon>
)

DollarIcon = (props) => (
  <SvgIcon viewBox='0 0 5 12' {...props}>
    <path d='M6.22852 7.3457C6.22852 7.91211 6.02148 8.37891 5.60742 8.74609C5.19336 9.11328 4.5957 9.33984 3.81445 9.42578V10.6973H3.03516V9.46094C2.06641 9.44531 1.27148 9.29688 0.650391 9.01562V7.7793C0.986328 7.94336 1.37891 8.08203 1.82812 8.19531C2.27734 8.30469 2.67969 8.36133 3.03516 8.36523V6.17383L2.54297 5.99219C1.90234 5.74609 1.43359 5.45312 1.13672 5.11328C0.84375 4.76953 0.697266 4.3457 0.697266 3.8418C0.697266 3.30273 0.90625 2.85938 1.32422 2.51172C1.74609 2.16406 2.31641 1.95312 3.03516 1.87891V0.894531H3.81445V1.86133C4.60742 1.88867 5.35938 2.04883 6.07031 2.3418L5.64258 3.41406C5.0293 3.17188 4.41992 3.02734 3.81445 2.98047V5.11328L4.25977 5.2832C5.00195 5.56836 5.51562 5.86914 5.80078 6.18555C6.08594 6.50195 6.22852 6.88867 6.22852 7.3457ZM4.8457 7.43359C4.8457 7.20703 4.76562 7.02148 4.60547 6.87695C4.44922 6.72852 4.18555 6.58594 3.81445 6.44922V8.31836C4.50195 8.21289 4.8457 7.91797 4.8457 7.43359ZM2.07422 3.83008C2.07422 4.05273 2.14258 4.23828 2.2793 4.38672C2.41992 4.53516 2.67188 4.68164 3.03516 4.82617V3.00391C2.72266 3.05078 2.48438 3.14648 2.32031 3.29102C2.15625 3.43555 2.07422 3.61523 2.07422 3.83008Z' />
  </SvgIcon>
)

function CloseIcon(props) {
  const { color } = props;
  return (
    <SvgIcon style={{ fontSize: '22px' }}>
      <path fill={color} d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
    </SvgIcon>
  );
}

export default function Github(props) {
  return (
    <SvgIcon {...props}>
      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
    </SvgIcon>
  );
}

MapPopup = memo(({ anchorEl, regionName, handleClose, elevation, ...popupProps }) => {
  const classes = useMapPopupStyles();
  const { region, needs } = mockData;

  const calculateProgressBarWidth = (mainParameter, ...other) => `${mainParameter} * (100% - 12px) / (${mainParameter} + ${other[0]} + ${other[1]})`

  return (
    <Popover
      className={classes.root}
      anchorEl={anchorEl}
      open={!!anchorEl}
      getContentAnchorEl={null}
      onClose={handleClose}
      elevation={0}
      anchorOrigin={{
        vertical: 'center',
        horizontal: 'center',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      {...popupProps}
    >
      <Box display='flex' flexDirection='column' p={2}>
        <Box display='flex' justifyContent='space-between' minWidth='200px' >
          <Typography className={classes.heading}>{regionName || '-'}</Typography>
          <Box ml={2}>
            <Typography className={classes.heading}>{region?.cases || '-'}</Typography>
          </Box>
        </Box>
        <Box display='flex' height='34px' width='100%' py={1.75}>
          <Box height='6px' width={`calc(${calculateProgressBarWidth(region?.cases, region?.recovered, region?.deaths)})`} mr={0.75} borderRadius={18} bgcolor='#FEAA53' />
          <Box height='6px' width={`calc(${calculateProgressBarWidth(region?.recovered, region?.cases, region?.deaths)})`} mr={0.75} borderRadius={18} bgcolor='#2ED47A' />
          <Box height='6px' width={`calc(${calculateProgressBarWidth(region?.deaths, region?.cases, region?.recovered)})`} borderRadius={18} bgcolor='#707683' />
        </Box>
        <Box>
          <List disablePadding>
            <ListItem disableGutters className={classes.casesListItem}>
              <Box height='8px' width='8px' mr={1} borderRadius='50%' bgcolor='#FEAA53' />
              <ListItemText disableTypography className={classes.casesListItemText}>{mapPopup.cases}</ListItemText>
              <ListItemText disableTypography className={classes.casesListItemTextCount}>{region?.cases || '-'}</ListItemText>
            </ListItem>
            <ListItem disableGutters className={classes.casesListItem}>
              <Box height='8px' width='8px' mr={1} borderRadius='50%' bgcolor='#2ED47A' />
              <ListItemText disableTypography className={classes.casesListItemText}>{mapPopup.recovered}</ListItemText>
              <ListItemText disableTypography className={classes.casesListItemTextCount}>{region?.recovered || '-'}</ListItemText>
            </ListItem>
            <ListItem disableGutters className={classes.casesListItem}>
              <Box height='8px' width='8px' mr={1} borderRadius='50%' bgcolor='#707683' />
              <ListItemText disableTypography className={classes.casesListItemText}>{mapPopup.deaths}</ListItemText>
              <ListItemText disableTypography className={classes.casesListItemTextCount}>{region?.deaths || '-'}</ListItemText>
            </ListItem>
          </List>
        </Box>
        <Divider className={classes.divider} />
        <Box>
          <List className={classes.medicineList} disablePadding>
            {needs?.map(item => (
              <ListItem key={item?.id || item?.type + item?.count} disableGutters>
                <SvgIcon viewBox='0 0 36 36' className={classes.listItemIcon}>
                  <path d={medicineIcons[item?.type.toLowerCase()] || medicineIcons.other} fill="white" />
                </SvgIcon>
                <ListItemText
                  primary={medicine[item?.type.toLowerCase()] || item?.type}
                  secondary={item?.count}
                  primaryTypographyProps={{ style: primaryTypographyStyle }}
                  secondaryTypographyProps={{ style: secondaryTypographyStyle }} />
              </ListItem>
            ))}
          </List>
        </Box>
      </Box>
    </Popover >
  );
})

PromoIcon = (props) => (
  <SvgIcon viewBox='0 0 22 16' {...props}>
    <path d='M22 6V2C22 0.89 21.01 0 19.8 0H2.2C0.99 0 0.011 0.89 0.011 2V6C1.221 6 2.2 6.9 2.2 8C2.2 9.1 1.221 10 0 10V14C0 15.1 0.99 16 2.2 16H19.8C21.01 16 22 15.1 22 14V10C20.79 10 19.8 9.1 19.8 8C19.8 6.9 20.79 6 22 6ZM12.1 13.5H9.9V11.5H12.1V13.5ZM12.1 9H9.9V7H12.1V9ZM12.1 4.5H9.9V2.5H12.1V4.5Z' />
  </SvgIcon>
)

function CDPIcon(props) {
  const { color, altColor, className } = props;
  return (
    <SvgIcon viewBox="0, 0, 24, 24" className={className}>
      <path fill={color} d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
    </SvgIcon>
  );
}

LoadMoreCommentsIcon = (props) => (
  <SvgIcon {...props}>
    <svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
      <path d='M15.834 12.5L14.659 11.325L10.834 15.1417V1.66667H9.16732V15.1417L5.34232 11.3167L4.16732 12.5L10.0007 18.3333L15.834 12.5Z' />
    </svg>
  </SvgIcon>
)

BBBSvg = props => (
  <SvgIcon {...props} viewBox="0 0 267.34 369.6">
    <path d="M185.12 231.48H43.87l-5.13 16.88h37.64l7.19 23.29h61.88l7.16-23.29h37.64l-5.13-16.88zm-118.2-94.86a33.38 33.38 0 0 0 7.43 46.63l33.8 24.56a8.37 8.37 0 0 1 1.86 11.69l5.09 3.68 17.86-24.68a33.18 33.18 0 0 0 6.37-19.54 33.78 33.78 0 0 0-.42-5.32 33.2 33.2 0 0 0-13.41-21.74l-33.8-24.56a8.3 8.3 0 0 1-3.35-5.45 8.78 8.78 0 0 1-.11-1.34 8.24 8.24 0 0 1 1.59-4.88l-5.08-3.69zm20.37-98.73a48.08 48.08 0 0 0-9.23 28.34 49.2 49.2 0 0 0 .61 7.71 48.13 48.13 0 0 0 19.41 31.56l42.49 30.77a25.8 25.8 0 0 1 10.4 16.93 26.4 26.4 0 0 1 .33 4.12 25.76 25.76 0 0 1-5 15.19l4.1 2.99 33.48-46.27A48.41 48.41 0 0 0 173.1 61.6l-51.3-37.29a14.94 14.94 0 0 1-3.3-20.86L114.4.5zM.5 285.75h38.7c9.53 0 17 2.62 21.79 7.38a19.11 19.11 0 0 1 5.71 14.17v.2c0 9.41-5 14.65-11 18 9.64 3.7 15.6 9.29 15.6 20.49v.24c0 15.24-12.38 22.86-31.2 22.86H.5zm34.77 33.7c8.1 0 13.22-2.62 13.22-8.81v-.24c0-5.48-4.29-8.57-12-8.57H18.36v17.62zm4.88 33.58c8.1 0 13-2.86 13-9v-.24c0-5.6-4.17-9-13.58-9H18.36v18.33zm39.17-67.28h38.7c9.53 0 17 2.62 21.79 7.38a19.13 19.13 0 0 1 5.69 14.17v.2c0 9.41-5 14.65-11 18 9.65 3.7 15.6 9.29 15.6 20.49v.24c0 15.24-12.38 22.86-31.2 22.86H79.32zm34.77 33.7c8.1 0 13.22-2.62 13.22-8.81v-.24c0-5.48-4.29-8.57-12-8.57H97.19v17.62zm4.88 33.58c8.1 0 13-2.86 13-9v-.24c0-5.6-4.17-9-13.57-9H97.19v18.33zm39.18-67.28h38.7c9.53 0 17 2.62 21.79 7.38a19.12 19.12 0 0 1 5.71 14.17v.2c0 9.41-5 14.65-11 18 9.65 3.7 15.6 9.29 15.6 20.49v.24c0 15.24-12.39 22.86-31.2 22.86h-39.6zm34.77 33.7c8.1 0 13.22-2.62 13.22-8.81v-.24c0-5.48-4.29-8.57-12-8.57h-18.1v17.62zm4.88 33.58c8.1 0 13-2.86 13-9v-.24c0-5.6-4.17-9-13.58-9h-21.2v18.33zm35.07-1.35v-.09a17 17 0 0 1 34-.09v.09a17 17 0 0 1-34 .09zm32-.09v-.09a15 15 0 1 0-30 .09v.09a15 15 0 1 0 30-.09zm-22-9.52h8a7.62 7.62 0 0 1 5.58 2 5.43 5.43 0 0 1 1.5 3.94v.09a5.61 5.61 0 0 1-3.9 5.58l4.41 6.47h-4.65l-3.85-5.82h-3.14v5.82h-4zm8 8.82c2 0 3.1-1.08 3.1-2.58v-.09c0-1.73-1.22-2.63-3.19-2.63h-3.9v5.3z" />
  </SvgIcon>
)

QuesAnsDetails = ({
  quesAns,
  upvoteQuesAns,
  downvoteQuesAns,
  editQuesAns,
  deleteQuesAns,
  addComment,
  editComment,
  deleteComment,
  acceptAnswer,
  isAnswer,
  acceptedAnswer,
  quesAuthor,
}) => {
  const {
    id,
    author,
    body,
    tags,
    comments,
    points,
    upvotedBy,
    downvotedBy,
    createdAt,
    updatedAt,
  } = quesAns;

  const classes = useQuesPageStyles();
  const { user } = useAuthContext();
  const [editAnsOpen, setEditAnsOpen] = useState(false);
  const [editedAnswerBody, setEditedAnswerBody] = useState(body);

  useEffect(() => {
    if (isAnswer) {
      setEditedAnswerBody(body);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [body]);

  const openEditInput = () => {
    setEditAnsOpen(true);
  };

  const closeEditInput = () => {
    setEditAnsOpen(false);
  };

  const handleAnswerEdit = (e) => {
    e.preventDefault();
    editQuesAns(editedAnswerBody, id);
    closeEditInput();
  };

  return (
    <div className={classes.quesAnsWrapper}>
      <div className={classes.voteColumn}>
        {user ? (
          <UpvoteButton
            checked={user ? upvotedBy.includes(user.id) : false}
            user={user}
            handleUpvote={upvoteQuesAns}
          />
        ) : (
          <AuthFormModal buttonType="upvote" />
        )}
        <Typography variant="h6" color="secondary">
          {points}
        </Typography>
        {user ? (
          <DownvoteButton
            checked={user ? downvotedBy.includes(user.id) : false}
            user={user}
            handleDownvote={downvoteQuesAns}
          />
        ) : (
          <AuthFormModal buttonType="downvote" />
        )}
        {isAnswer && user && user.id === quesAuthor.id && (
          <AcceptAnswerButton
            checked={acceptedAnswer === id}
            handleAcceptAns={acceptAnswer}
          />
        )}
        {isAnswer &&
          acceptedAnswer === id &&
          (!user || user.id !== quesAuthor.id) && (
            <SvgIcon className={classes.checkedAcceptIcon}>
              <AcceptedIcon />
            </SvgIcon>
          )}
      </div>
      <div className={classes.quesBody}>
        {!editAnsOpen ? (
          <Typography variant="body1" style={{ wordWrap: 'anywhere' }}>
            {body}
          </Typography>
        ) : (
          <form className={classes.smallForm} onSubmit={handleAnswerEdit}>
            <TextField
              value={editedAnswerBody}
              required
              fullWidth
              onChange={(e) => setEditedAnswerBody(e.target.value)}
              type="text"
              placeholder="Enter at least 30 characters"
              variant="outlined"
              size="small"
              multiline
              rows={4}
            />
            <div className={classes.submitCancelBtns}>
              <Button
                type="submit"
                size="small"
                variant="contained"
                color="primary"
                style={{ marginRight: 9 }}
              >
                Update Answer
              </Button>
              <Button
                size="small"
                variant="outlined"
                color="primary"
                onClick={() => setEditAnsOpen(false)}
              >
                Cancel
              </Button>
            </div>
          </form>
        )}
        {tags && (
          <div className={classes.tagsWrapper}>
            {tags.map((t) => (
              <Chip
                key={t}
                label={t}
                variant="outlined"
                color="primary"
                size="small"
                component={RouterLink}
                to={`/tags/${t}`}
                className={classes.tag}
                clickable
              />
            ))}
          </div>
        )}
        <div className={classes.bottomWrapper}>
          {!editAnsOpen && (
            <div className={classes.btnsWrapper}>
              {user && user.id === author.id && (
                <Button
                  size="small"
                  color="primary"
                  variant="contained"
                  style={{ marginRight: 6 }}
                  className={classes.bottomBtns}
                  onClick={isAnswer ? openEditInput : editQuesAns}
                >
                  Edit
                </Button>
              )}
              {user && (user.id === author.id || user.role === 'ADMIN') && (
                <DeleteDialog
                  bodyType={isAnswer ? 'answer' : 'question'}
                  handleDelete={deleteQuesAns}
                />
              )}
            </div>
          )}
          <PostedByUser
            username={author.username}
            userId={author.id}
            createdAt={createdAt}
            updatedAt={updatedAt}
            filledVariant={true}
            isAnswer={isAnswer}
          />
        </div>
        <CommentSection
          user={user}
          comments={comments}
          addComment={addComment}
          editComment={editComment}
          deleteComment={deleteComment}
          quesAnsId={id}
        />
      </div>
    </div>
  );
}

SortTabBar = ({ sortBy, handleTabChange, subscribedTab, user }) => {
  const classes = useSortTabStyles();

  return (
    <Paper variant="outlined" className={classes.mainPaper}>
      <Tabs
        value={sortBy}
        onChange={handleTabChange}
        indicatorColor="primary"
        textColor="primary"
        variant="scrollable"
        scrollButtons="auto"
      >
        <Tab
          icon={
            <SvgIcon fontSize="small">
              <Hot />
            </SvgIcon>
          }
          label="Hot"
          value="hot"
        />
        {subscribedTab && user && (
          <Tab
            icon={
              <SvgIcon fontSize="small">
                <Subscribed />
              </SvgIcon>
            }
            label="Subscribed"
            value="subscribed"
          />
        )}
        <Tab
          icon={
            <SvgIcon fontSize="small">
              <Best />
            </SvgIcon>
          }
          label="Best"
          value="best"
        />
        <Tab
          icon={
            <SvgIcon fontSize="small">
              <New />
            </SvgIcon>
          }
          label="New"
          value="new"
        />
        <Tab
          icon={
            <SvgIcon fontSize="small">
              <Top />
            </SvgIcon>
          }
          label="Top"
          value="top"
        />
        <Tab
          icon={
            <SvgIcon fontSize="small">
              <Controversial />
            </SvgIcon>
          }
          label="Controversial"
          value="controversial"
        />
        <Tab
          icon={
            <SvgIcon fontSize="small">
              <Old />
            </SvgIcon>
          }
          label="Old"
          value="old"
        />
      </Tabs>
    </Paper>
  );
}

IncomeView = ({
  coachIdentifier
}) => {

  const classes = useStyles();
  const isMobile = useIsMediumMobile();

  const [fromDate, setFromDate] = useState(getDefaultTimezoneDateTime(moment.tz()));
  const [toDate, setToDate] = useState(getDefaultTimezoneDateTime(moment.tz()
    .add(1, "month")));

  // region Code with queries to API

  const appointments = useFetchAppointmentsCoachWithFilter(
    coachIdentifier,
    displayDateWithDash(fromDate),
    displayDateWithDash(toDate),
    {
      select: (data) => {
        if (data === undefined || !data.appointments) {
          return [];
        }

        let totalPending = 0;
        let totalAccepted = 0;
        let totalMoney = 0.0;

        const appointmentsTable = data.appointments.map((item) => {
            const date = displayDateWithSlash(moment.tz(item.dttmStarts, defaultTimezone));

            if (item.incomeStatus === "ACCEPTED") {
              totalAccepted++;
              totalMoney = totalMoney + item.price;
            }

            if (item.incomeStatus === "PENDING") {
              totalPending++;
            }

            return [date, `${item.client.firstName} ${item.client.lastName}`, `${item.price} £`, item.incomeStatus, item];
          }
        );

        return {
          appointments: appointmentsTable,
          totalPending: totalPending,
          totalAccepted: totalAccepted,
          totalMoney: totalMoney
        };
      }
    }
  );

  const editAppointment = useEditAppointmentClient();

  // endregion

  // region General methods

  const updateAppointmentStatus = (value, status) => {
    editAppointment.mutate({
        appointmentIdentifier: value.identifier,
        appointment: {
          "dttmStarts": convertDateToTimezoneInstance(value.dttmStarts),
          "dttmEnds": convertDateToTimezoneInstance(value.dttmEnds),
          resource: {
            "price": value.price,
            "notes": value.notes
          },
          "incomeStatus": status
        }
      }, {
        onSuccess: () => {
          appointments.refetch();
        },
        onError: (error) => {
          logError("Appointments", "useMutation editAppointment", "Error Details:", error.response.data.detail);
        }
      }
    );
  };

  const columns = [
    "Date",
    "Appointment",
    "Price",
    "Status",
    {
      label: "Actions",
      options: {
        filter: false,
        sort: false,
        setCellHeaderProps: () => {
          return {
            className: clsx({
              [classes.rightTableHead]: true
            })
          };
        },
        // eslint-disable-next-line react/display-name
        customBodyRender: (value) => {
          return (
            <Grid
              container
              justifyContent={isMobile ? "flex-start" : "flex-end"}
              spacing={1}
              className={clsx({
                [classes.actionColumnTable]: true
              })}
            >
              <Grid item>
                <Button
                  className={classes.acceptButton}
                  variant="contained"
                  disabled={value.incomeStatus === "ACCEPTED"}
                  onClick={() => updateAppointmentStatus(value, "ACCEPTED")}
                >
                  <SvgIcon
                    fontSize="small"
                    color="inherit"
                  >
                    <AcceptIcon />
                  </SvgIcon>
                </Button>
              </Grid>
              <Grid item>
                <Button
                  className={classes.rejectButton}
                  variant="contained"
                  disabled={value.incomeStatus === "REJECTED"}
                  onClick={() => updateAppointmentStatus(value, "REJECTED")}
                >
                  <SvgIcon
                    fontSize="small"
                    color="inherit"
                  >
                    <RejectIcon />
                  </SvgIcon>
                </Button>
              </Grid>
            </Grid>
          );
        }
      }
    }
  ];

  // endregion

  return (
    <Page
      title="Income"
      isError={appointments.isError}
      isLoading={false}>
      <Grid
        direction="row"
        container
        spacing={1}
      >
        <Grid item xs={12} md={9} lg={9}>
          <LoadingBox isLoading={appointments.isFetching}>
            <Table
              title="Income Status"
              data={appointments.data?.appointments}
              columns={columns}
              options={options}
            />
          </LoadingBox>
        </Grid>
        <Grid item xs={12} md={3} lg={3}>
          <Grid
            direction="row"
            container
            spacing={1}
          >
            <Grid item xs={12}>
              <Card>
                <CardContent>
                  <Typography component="h2" variant="h5" gutterBottom>
                    Filter
                  </Typography>
                  <Box>
                    <KeyboardDatePicker
                      autoOk
                      allowKeyboardControl={false}
                      fullWidth
                      helperText="from"
                      margin="dense"
                      format="YYYY/MM/DD"
                      value={fromDate}
                      placeholder={displayDateWithSlash(fromDate)}
                      onChange={(date) => {
                        if (date !== null) {
                          setFromDate(date);
                        }
                      }}
                    />
                  </Box>
                  <Box>
                    <KeyboardDatePicker
                      autoOk
                      allowKeyboardControl={false}
                      fullWidth
                      helperText="to"
                      margin="dense"
                      format="YYYY/MM/DD"
                      value={toDate}
                      placeholder={displayDateWithSlash(toDate)}
                      onChange={(date) => {
                        if (date !== null) {
                          setToDate(date);
                        }
                      }}
                    />
                  </Box>
                  <Box
                    display="flex"
                    flexDirection="column"
                    justifyContent="flex-end"
                    textAlign="right"
                  >
                    <Box>
                      Income Accepted: {appointments.data?.totalAccepted}
                    </Box>
                    <Box>
                      Income Pending: {appointments.data?.totalPending}
                    </Box>
                    <Typography component="h2" variant="h5" gutterBottom>
                      Total: {appointments.data?.totalMoney}£
                    </Typography>
                  </Box>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Page>
  );

}

render() {
		if (this.state.game) {
			return (
				<React.Fragment>
					<AppBar
						key="app-bar"
						position="fixed"
						color={this.state.laboratoryMode ? "secondary" : "primary"}
					>
						<Toolbar>
							{!this.state.laboratoryMode ? (
								<IconButton
									onClick={this.props.close}
									key="close"
									edge="start"
									color="secondary"
								>
									<CloseIcon />
								</IconButton>
							) : (
								<IconButton
									onClick={(_) => {
										this.setState(
											{
												moreMenuAnchorEl: null,
												laboratoryMode: !this.state.laboratoryMode,
											},
											(_) => {
												if (!this.state.laboratoryMode) {
													this.loadGame();
												} else {
													gtag("event", "enable_lab_mode");
												}
											}
										);
									}}
									key="close"
									edge="start"
									color="primary"
								>
									<CloseIcon />
								</IconButton>
							)}
							{!this.state.laboratoryMode &&
							this.state.activePhase &&
							this.state.activePhase.Properties.PhaseOrdinal > 1 ? (
								<IconButton
									onClick={this.phaseJumper(-1)}
									key="previous"
									edge="start"
									color="secondary"
								>
									<PreviousIcon />
								</IconButton>
							) : !this.state.laboratoryMode ? (
								<Box key="prev-spacer"></Box>
							) : (
								""
							)}

							{this.state.laboratoryMode ? (
								<Typography variant="h6" style={{ marginRight: "8px" }}>
									Sandbox
								</Typography>
							) : (
								""
							)}
							{this.state.activePhase ? (
								<Select
									/* TODO: This might be a stretch, but Laboratory mode has SOME "real" and some "fake" turns. E.g. in spring 1902 I can move back to Spring 1901 and create an "alternative" 1901 and commit that. 
                  Is it possible to make all the "hypothetical" phases to change color? Maybe let me know in the Discord chat and we can discuss more. */
									/*
									 * Yes it is - 'real' phases have .Properties.ID, while fake phases don't (IIRC).
									 */
									style={
										this.state.laboratoryMode
											? {
													width: "100%",
													minWidth: "0",
													borderBottom: "1px solid rgba(253, 226, 181, 0.7)",
													color: "rgb(40, 26, 26)",
											  }
											: {
													width: "100%",
													minWidth: "0",
													borderBottom: "1px solid rgba(253, 226, 181, 0.7)",
													color: "#FDE2B5",
											  }
									}
									key="phase-select"
									value={this.state.activePhase.Properties.PhaseOrdinal}
									onChange={this.changePhase}
									label={helpers.phaseName(this.state.activePhase)}
								>
									{this.state.phases.map((phase) => {
										return (
											<MenuItem
												key={phase.Properties.PhaseOrdinal}
												style={{
													textOverflow: "ellipsis",
												}}
												value={phase.Properties.PhaseOrdinal}
											>
												{helpers.phaseName(phase)}
												{!this.state.game.Properties.Started ||
												phase.Properties.Resolved ? (
													""
												) : (
													<span
														dataat={
															new Date().getTime() +
															phase.Properties.NextDeadlineIn * 1e-6
														}
														style={{
															position: "relative",
															top: "-6px",
															fontSize: "xx-small",
															left: "-5px",
															zIndex: "1",
															backgroundColor: "red",
															borderRadius: "7px",
															padding: "0 2px 1px 2px",
														}}
													>
														{helpers.minutesToDuration(
															(phase.Properties.NextDeadlineIn * 1e-9) / 60.0,
															true
														)}
													</span>
												)}
											</MenuItem>
										);
									})}
								</Select>
							) : !this.state.laboratoryMode ? (
								<Box key="curr-spacer" width="100%"></Box>
							) : (
								""
							)}
							{this.state.activePhase &&
							this.state.activePhase.Properties.PhaseOrdinal <
								this.state.phases[this.state.phases.length - 1].Properties
									.PhaseOrdinal ? (
								<IconButton
									onClick={this.phaseJumper(1)}
									edge="end"
									key="next"
									color="secondary"
								>
									<NextIcon />
								</IconButton>
							) : !this.state.laboratoryMode ? (
								<Box key="next-spacer"></Box>
							) : (
								""
							)}

							{!this.state.laboratoryMode ? (
								<IconButton
									edge="end"
									key="more-icon"
									color="secondary"
									onClick={(ev) => {
										this.setState({
											moreMenuAnchorEl: ev.currentTarget,
										});
									}}
								>
									<SettingsIcon />
								</IconButton>
							) : (
								""
							)}
							<Menu
								anchorEl={this.state.moreMenuAnchorEl}
								anchorOrigin={{
									vertical: "top",
									horizontal: "right",
								}}
								transformOrigin={{
									vertical: "top",
									horizontal: "right",
								}}
								onClose={(_) => {
									this.setState({ moreMenuAnchorEl: null });
								}}
								open={!!this.state.moreMenuAnchorEl}
							>
								<MenuItem
									key="game-metadata"
									onClick={(_) => {
										this.setState({
											moreMenuAnchorEl: null,
										});
										if (this.state.game.Properties.Started) {
											this.gamePlayersDialog.setState({
												open: true,
											});
										} else {
											this.metadataDialog.setState({
												open: true,
											});
										}
									}}
								>
									Game & player info
								</MenuItem>
								{this.state.game.Properties.Started
									? [
											<MenuItem
												key="scores"
												onClick={(_) => {
													this.setState({
														moreMenuAnchorEl: null,
													});
													this.preliminaryScores.setState({
														open: true,
													});
												}}
											>
												Scores
											</MenuItem>,
											this.state.game.Properties.Finished ? (
												<MenuItem
													key="results"
													onClick={(_) => {
														this.setState({
															moreMenuAnchorEl: null,
														});
														this.gameResults.setState({
															open: true,
														});
													}}
												>
													Results
												</MenuItem>
											) : (
												""
											),
									  ]
									: ""}
								<Divider />
								<MenuItem key="game-id" onClick={this.shareNative}>
									{this.state.game.Properties.Started
										? "Share game"
										: "Invite players"}
								</MenuItem>

								<MenuItem
									key="download-map"
									onClick={(_) => {
										this.setState({
											moreMenuAnchorEl: null,
										});
										this.dip_map.downloadMap();
										gtag("event", "download_map");
									}}
								>
									Download map
								</MenuItem>
								<MenuItem
									key="laboratory-mode"
									onClick={(_) => {
										this.setState(
											{
												moreMenuAnchorEl: null,
												laboratoryMode: !this.state.laboratoryMode,
											},
											(_) => {
												if (!this.state.laboratoryMode) {
													this.loadGame();
												} else {
													gtag("event", "enable_lab_mode");
												}
											}
										);
									}}
								>
									{this.state.laboratoryMode
										? "Turn off sandbox mode"
										: "Sandbox mode"}
								</MenuItem>
								<Divider />
								<MenuItem
									key="How to play"
									onClick={(_) => {
										window.open(
											"https://diplicity.notion.site/How-to-play-39fbc4d1f1924c928c3953095062a983",
											"_blank"
										);
									}}
								>
									How to play
								</MenuItem>
								<MenuItem
									key="debug-data"
									onClick={(_) => {
										helpers
											.copyToClipboard(JSON.stringify(this.debugCounters))
											.then((_) => {
												this.setState({
													moreMenuAnchorEl: null,
												});
												helpers.snackbar("Debug data copied to clipboard");
											});
									}}
								>
									Debug
								</MenuItem>
							</Menu>
							{this.state.laboratoryMode ? (
								<React.Fragment>
									<IconButton
										onClick={(_) => {
											this.dip_map.downloadMap();
											gtag("event", "download_map");
										}}
										color="primary"
										edge="end"
										style={{ marginLeft: "auto" }}
									>
										<DownloadIcon />
									</IconButton>
									<IconButton
										onClick={(_) => {
											this.dip_map.labShare();
										}}
										color="primary"
										edge="end"
										style={{ marginLeft: "auto" }}
									>
										<ShareIcon />
									</IconButton>
								</React.Fragment>
							) : (
								""
							)}
						</Toolbar>
						{!this.state.laboratoryMode ? (
							<React.Fragment>
								{!this.state.game.Properties.Started ||
								this.state.game.Links.find((l) => {
									return l.Rel === "join";
								}) ? (
									<Toolbar
										style={{
											display: "flex",
											justifyContent: "space-between",
											minHeight: "53px",
										}}
									>
										<div>
											{this.state.game.Links.find((l) => {
												return l.Rel === "join";
											}) ? (
												<Button
													variant="outlined"
													color="secondary"
													key="join"
													onClick={this.join}
												>
													Join
												</Button>
											) : (
												""
											)}
											{this.state.game.Links.find((l) => {
												return l.Rel === "leave";
											}) ? (
												<Button
													variant="outlined"
													color="secondary"
													key="leave"
													onClick={this.leave}
												>
													Leave
												</Button>
											) : (
												""
											)}
										</div>
										<div
											style={{
												display: "flex",
												alignItems: "center",
											}}
										>
											<NumMembersIcon />{" "}
											<Typography
											//TODO: Change this to not NMembers but Nmembers - replaceable.
												variant="body2"
												style={{ paddingLeft: "2px" }}
											>
												{this.state.game.Properties.NMembers}/
												{this.state.variant.Properties.Nations.length}{" "}
											</Typography>
										</div>
									</Toolbar>
								) : (
									""
								)}
								<Tabs
									key="tabs"
									value={this.state.activeTab}
									onChange={this.changeTab}
									display="flex"
									variant="fullWidth"
								>
									<Tab value="map" icon={<MapIcon />} />
									<Tab
										value="chat"
										icon={
											this.state.member && this.state.unreadMessages > 0 ? (
												<Badge badgeContent={this.state.unreadMessages}>
													<ChatIcon />
												</Badge>
											) : (
												<ChatIcon />
											)
										}
									/>
									{this.state.game.Properties.Started ? (
										this.state.member &&
										!this.state.activePhase.Properties.Resolved ? (
											this.state.member.NewestPhaseState.OnProbation ||
											!this.state.member.NewestPhaseState.ReadyToResolve ? (
												<Tab
													value="orders"
													icon={
														<SvgIcon>
															<path
																d="M9,0 C10.3,0 11.4,0.84 11.82,2 L11.82,2 L16,2 C17.1045695,2 18,2.8954305 18,4 L18,4 L18,18 C18,19.1045695 17.1045695,20 16,20 L16,20 L2,20 C0.8954305,20 0,19.1045695 0,18 L0,18 L0,4 C0,2.8954305 0.8954305,2 2,2 L2,2 L6.18,2 C6.6,0.84 7.7,0 9,0 Z M5,14 L3,14 L3,16 L5,16 L5,14 Z M15,14 L7,14 L7,16 L15,16 L15,14 Z M5,6 L3,6 L3,12 L5,12 L5,6 Z M15,10 L7,10 L7,12 L15,12 L15,10 Z M15,6 L7,6 L7,8 L15,8 L15,6 Z M9,2 C8.44771525,2 8,2.44771525 8,3 C8,3.55228475 8.44771525,4 9,4 C9.55228475,4 10,3.55228475 10,3 C10,2.44771525 9.55228475,2 9,2 Z"
																id="order_open"
															></path>
														</SvgIcon>
													}
												/>
											) : (
												<Tab
													value="orders"
													icon={
														<SvgIcon>
															<path
																d="M9,0 C10.3,0 11.4,0.84 11.82,2 L11.82,2 L16,2 C17.1045695,2 18,2.8954305 18,4 L18,4 L18,18 C18,19.1045695 17.1045695,20 16,20 L16,20 L2,20 C0.8954305,20 0,19.1045695 0,18 L0,18 L0,4 C0,2.8954305 0.8954305,2 2,2 L2,2 L6.18,2 C6.6,0.84 7.7,0 9,0 Z M13.4347826,7 L7.70608696,12.7391304 L4.56521739,9.60869565 L3,11.173913 L7.70608696,15.8695652 L15,8.56521739 L13.4347826,7 Z M9,2 C8.44771525,2 8,2.44771525 8,3 C8,3.55228475 8.44771525,4 9,4 C9.55228475,4 10,3.55228475 10,3 C10,2.44771525 9.55228475,2 9,2 Z"
																id="order_confirmed"
															></path>
														</SvgIcon>
													}
												/>
											)
										) : (
											<Tab value="orders" icon={<EventIcon />} />
										)
									) : (
										""
									)}
								</Tabs>
							</React.Fragment>
						) : (
							<Toolbar>
								<Typography variant="body1" style={{ marginRight: "8px" }}>
									Edit
								</Typography>
								<FormControlLabel
									key="edit-mode"
									control={
										<Switch
											onChange={(ev) => {
												this.setState({
													labEditMode: !ev.target.checked,
												});
												this.dip_map.setState({
													labEditMode: !ev.target.checked,
												});
											}}
											color="primary"
											checked={!this.state.labEditMode}
										/>
									}
									label="Play as"
								/>
								{!this.state.labEditMode ? (
									<FormControl
										key="play-as"
										style={{
											flexGrow: 1,
										}}
									>
										<Select
											value={this.state.labPlayAs}
											onChange={(ev) => {
												this.setState({
													labPlayAs: ev.target.value,
												});
												this.dip_map.setState({
													labPlayAs: ev.target.value,
												});
											}}
											style={{
												width: "100%",
												minWidth: "0",
												borderBottom: "1px solid rgba(253, 226, 181, 0.7)",
												color: "rgb(40, 26, 26)",
											}}
										>
											{this.state.variant.Properties.Nations.map((nation) => {
												return (
													<MenuItem key={nation} value={nation}>
														{nation}
													</MenuItem>
												);
											})}
										</Select>
									</FormControl>
								) : (
									""
								)}

								<IconButton
									edge="end"
									onClick={(ev) => {
										this.dip_map.labResolve();
									}}
									style={{
										marginLeft: "auto",
										color: "rgb(40, 26, 26)",
									}}
								>
									<FastForwardIcon />
								</IconButton>
							</Toolbar>
						)}
					</AppBar>

					<div
						key="map-container"
						style={
							this.state.laboratoryMode
								? {
										marginTop: "" + this.state.marginTop + "px",
										height: "calc(100% - " + this.state.marginTop + "px)",
										backgroundColor: "black",
										display: this.state.activeTab === "map" ? "block" : "none",
								  }
								: {
										marginTop: "" + this.state.marginTop + "px",
										height: "calc(100% - " + this.state.marginTop + "px)",
										backgroundColor: "black",
										display: this.state.activeTab === "map" ? "block" : "none",
								  }
						}
					>
						<DipMap
							parentCB={(c) => {
								this.dip_map = c;
							}}
							onLeaveProbation={(_) => {
								this.loadGame();
							}}
							debugCount={this.debugCount}
							labPhaseResolve={this.labPhaseResolve}
							serializePhaseState={this.serializePhaseState}
							laboratoryMode={this.state.laboratoryMode}
							isActive={this.state.activeTab === "map"}
							game={this.state.game}
							phase={this.state.activePhase}
							corroborateSubscriber={this.receiveCorroboration}
							variant={this.state.variant}
						/>
					</div>
					<React.Fragment>
						<div
							key="chat-container"
							style={{
								marginTop: "" + this.state.marginTop + "px",
								height: "calc(100% - " + this.state.marginTop + "px)",
								display: this.state.activeTab === "chat" ? "block" : "none",
							}}
						>
							<ChatMenu
								onNewGameState={this.onNewGameState}
								gameState={
									this.state.member && this.state.gameStates
										? this.state.gameStates.find((gs) => {
												return (
													gs.Properties.Nation === this.state.member.Nation
												);
										  })
										: null
								}
								isActive={this.state.activeTab === "chat"}
								unreadMessages={this.setUnreadMessages}
								phases={this.state.phases}
								game={this.state.game}
								parent={this}
							/>
						</div>
						{this.state.game.Properties.Started ? (
							<div
								key="orders-container"
								style={{
									marginTop: "" + this.state.marginTop + "px",
									height: "calc(100% - " + this.state.marginTop + "px)",
									display: this.state.activeTab === "orders" ? "flex" : "none",
									flexDirection: "column",
									justifyContent: "space-between",
								}}
							>
								<OrderList
									isActive={this.state.activeTab === "orders"}
									member={this.state.member}
									phase={this.state.activePhase}
									corroboration={this.state.corroboration}
									newPhaseStateHandler={(phaseState) => {
										this.setState((state, props) => {
											state = Object.assign({}, state);
											state.member.NewestPhaseState = phaseState.Properties;
											return state;
										});
										if (this.props.onChangeReady) {
											this.props.onChangeReady();
										}
									}}
									variant={this.state.variant}
								/>
							</div>
						) : (
							""
						)}
						<GamePlayers
							gameStates={this.state.gameStates}
							game={this.state.game}
							variant={this.state.variant}
							onNewGameState={this.onNewGameState}
							parentCB={(c) => {
								this.gamePlayersDialog = c;
							}}
						/>
						<PreliminaryScores
							phases={this.state.phases}
							variant={this.state.variant}
							parentCB={(c) => {
								this.preliminaryScores = c;
							}}
						/>
					</React.Fragment>
					{!this.state.game.Properties.Started ? (
						<React.Fragment>
							<NationPreferencesDialog
								parentCB={(c) => {
									this.nationPreferencesDialog = c;
								}}
								onSelected={null}
							/>
							<MetadataDialog
								game={this.state.game}
								parentCB={(c) => {
									this.metadataDialog = c;
								}}
							/>
						</React.Fragment>
					) : (
						""
					)}
					{!this.state.member ||
					!this.state.game.Properties.Started ||
					this.state.game.Properties.Mustered ? (
						""
					) : (
						<MusteringPopup
							viewOrders={(_) => {
								this.setState({
									activeTab: "orders",
									readyReminder: false,
								});
							}}
						/>
					)}
					<GameResults
						onNewGameState={this.onNewGameState}
						gameState={
							this.state.member && this.state.gameStates
								? this.state.gameStates.find((gs) => {
										return gs.Properties.Nation === this.state.member.Nation;
								  })
								: null
						}
						game={this.state.game}
						variant={this.state.variant}
						parentCB={(c) => {
							this.gameResults = c;
						}}
					/>
					<Snackbar
						anchorOrigin={{
							vertical: "bottom",
							horizontal: "center",
						}}
						open={this.state.readyReminder}
						autoHideDuration={30000}
						onClose={(_) => {
							this.setState({ readyReminder: false });
						}}
						message={[
							<Typography key="ready-warning">
								You haven't confirmed your orders yet.
								{this.state.game.Properties.Mustered
									? ""
									: " For the game to start, all players have to confirm as ready to play."}
							</Typography>,
						].concat(
							this.state.phaseMessages.map((m) => {
								return <Typography key={m}>{m}</Typography>;
							})
						)}
						action={
							<React.Fragment>
								<Button
									color="secondary"
									size="small"
									onClick={(_) => {
										this.setState({
											activeTab: "orders",
											readyReminder: false,
										});
									}}
								>
									View orders
								</Button>
								<IconButton
									size="small"
									aria-label="close"
									color="inherit"
									onClick={(_) => {
										this.setState({ readyReminder: false });
									}}
								>
									<CloseIcon />
								</IconButton>
							</React.Fragment>
						}
					/>
				</React.Fragment>
			);
		} else {
			return "";
		}
	}