Merge pull request #45 from joaom00/feature/raid-button

Feature/raid button

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!`);
+    });
+  });
+});

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 (
     <Box
       {...(!isMosaicMode && {
@@ -124,18 +152,34 @@ export default function Card({
               src={channel.profile_image_url}
               alt={channel.user_name}
             />
-            <Box>
-              <Text
-                color={"gray.500"}
-                fontWeight={"semibold"}
-                mt={-1}
-                _hover={{
-                  color: "gray.200",
-                  textDecoration: "underline",
-                }}
-              >
-                {channel.user_login}
-              </Text>
+            <Box flex="1">
+              <HStack mb="3">
+                <Text
+                  color={"gray.500"}
+                  fontWeight={"semibold"}
+                  mt={-1}
+                  _hover={{
+                    color: "gray.200",
+                    textDecoration: "underline",
+                  }}
+                >
+                  {channel.user_login}
+                </Text>
+                <Spacer />
+                <Button
+                  data-test="raid-button"
+                  size="xs"
+                  rounded="sm"
+                  onClick={copyToClipboard}
+                  bgColor="primary.500"
+                  color="secondary.800"
+                  _hover={{
+                    bgColor: "primary.700",
+                  }}
+                >
+                  Raid
+                </Button>
+              </HStack>
 
               <Text color={"gray.100"} fontSize={"sm"} mt={-1}>
                 {channel.title}