{"size": 1034, "ext": "js", "max_stars_repo_path": "frontend/src/components/buttons/boardHeader/UnblurCardsButton.js", "max_stars_repo_name": "fawwaz/retro", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/src/components/buttons/boardHeader/UnblurCardsButton.js", "max_issues_repo_name": "fawwaz/retro", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/components/buttons/boardHeader/UnblurCardsButton.js", "max_forks_repo_name": "fawwaz/retro", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.9459459459, "max_line_length": 65, "alphanum_fraction": 0.6537717602}
import React, { useContext } from "react";
import UnblurIcon from "@material-ui/icons/BlurOff";
import { Button } from "@material-ui/core";

import { UNBLUR_CARDS } from "../../../constants/eventNames";
import { UNBLUR_CARDS_BUTTON } from "../../../constants/testIds";
import { ROLE_MODERATOR } from "../../../utils/userUtils";
import { BoardContext } from "../../../context/BoardContext";
import { UserContext } from "../../../context/UserContext";

function UnblurCardsButton() {
  const { boardId, socket } = useContext(BoardContext);
  const { userState } = useContext(UserContext);

  function unblur() {
    socket.emit(UNBLUR_CARDS, boardId);
  }

  return (
    <Button
      size="small"
      variant="outlined"
      aria-label="Unblur Cards"
      color="primary"
      onClick={unblur}
      disabled={userState.role !== ROLE_MODERATOR}
      data-testid={UNBLUR_CARDS_BUTTON}
      fullWidth
    >
      <UnblurIcon style={{ marginRight: 5 }} />
      Toggle Blur
    </Button>
  );
}

export default UnblurCardsButton;
