diff --git a/cypress/integration/home/raid.spec.js b/cypress/integration/home/raid.spec.js
new file mode 100644
index 0000000..113a746
--- /dev/null
+++ b/cypress/integration/home/raid.spec.js
@@ -0,0 +1,51 @@
+import { streamsRegex, tagsRegex, vodsRegex } from "../../consts/urlRegexes";
+
+describe("Home > Raid", () => {
+ it("Copy raid command to clipboard", () => {
+ const COPIED_TEXT = "/raid emersongarrido";
+
+ cy.intercept(streamsRegex, {
+ statusCode: 200,
+ fixture: "streams",
+ }).as("streams");
+ cy.intercept(tagsRegex, {
+ statusCode: 200,
+ fixture: "tags",
+ }).as("tags");
+ cy.intercept(vodsRegex, {
+ statusCode: 200,
+ fixture: "vods",
+ }).as("vods");
+
+ // use the Chrome debugger protocol to grant the current browser window
+ // access to the clipboard from the current origin
+ // https://chromedevtools.github.io/devtools-protocol/tot/Browser/#method-grantPermissions
+ // We are using cy.wrap to wait for the promise returned
+ // from the Cypress.automation call, so the test continues
+ // after the clipboard permission has been granted
+ cy.wrap(
+ Cypress.automation("remote:debugger:protocol", {
+ command: "Browser.grantPermissions",
+ params: {
+ permissions: ["clipboardReadWrite", "clipboardSanitizedWrite"],
+ origin: window.location.origin,
+ },
+ }),
+ );
+
+ cy.visit(Cypress.env("hostUrl"))
+ .its("navigator.permissions")
+ .invoke("query", { name: "clipboard-read" })
+ .its("state")
+ .should("equal", "granted");
+
+ cy.wait(["@streams", "@tags", "@vods"]);
+
+ cy.getByData("raid-button").first().click();
+ cy.window().its("navigator.clipboard").invoke("readText").should("equal", COPIED_TEXT);
+
+ cy.get(".chakra-alert").within(() => {
+ cy.get(".chakra-alert__title").contains(`Comando "${COPIED_TEXT}" copiado!`);
+ });
+ });
+});
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 82959d3..37279b9 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -5,14 +5,17 @@ import { ViewIcon } from "@chakra-ui/icons";
import { FaDiscord, FaGithub, FaInstagram, FaLinkedin, FaTwitter } from "react-icons/fa";
import {
Box,
+ Button,
HStack,
Icon,
Image,
Link,
+ Spacer,
Tag,
TagLabel,
TagLeftIcon,
Text,
+ useToast,
VisuallyHidden,
} from "@chakra-ui/react";
@@ -35,9 +38,34 @@ export default function Card({
handleChannelToMosaic = () => null,
"data-test": dataTest,
}: Props) {
+ const toast = useToast();
+
const [showPreview, setShowPreview] = useState(false);
const [isSelected, setIsSelected] = useState(false);
+ const copyToClipboard = async (event: React.MouseEvent) => {
+ event.preventDefault();
+
+ try {
+ await navigator.clipboard.writeText(`/raid ${channel.user_login}`);
+ toast({
+ title: `Comando "/raid ${channel.user_login}" copiado!`,
+ status: "success",
+ isClosable: true,
+ position: "top",
+ variant: "left-accent",
+ });
+ } catch (error) {
+ toast({
+ title: "Não foi possível copiar o comando",
+ status: "error",
+ isClosable: true,
+ position: "top",
+ variant: "left-accent",
+ });
+ }
+ };
+
return (
-
-
- {channel.user_login}
-
+
+
+
+ {channel.user_login}
+
+
+
+
{channel.title}