EMFXD-1836: Create a watermark tool (#27) (#28)

* feat: ✨ add a way to create a watermark images to post on artists RRSS

* fix: ⚡ update unhandled methods on unused parts of the dashboard

package.json

@@ -65,6 +65,6 @@
     "prettier": "^2.8.1",
     "react-draft-wysiwyg": "^1.15.0",
     "react-svg-to-image": "^3.0.0",
-    "typescript": "4.9.4"
+    "typescript": "4.9.5"
   }
 }

src/common/hooks/useImageHandler.tsx

@@ -2,26 +2,39 @@ import { useState } from "react";
 
 const useImageHandler = () => {
   const [selectedImage, setSelectedImage] = useState<string | any>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
 
-  const imageHandler = (event: Event | null) => {
+  const imageHandler = (event: React.ChangeEvent<HTMLInputElement> | null) => {
     if (event === null) {
       setSelectedImage(null);
       return;
     }
+    const file = event.target.files && event.target.files[0];
+    if (file) {
+      setImageFile(file);
 
-    const reader = new FileReader();
-    reader.onload = function (e: any) {
-      setSelectedImage(e.target.result);
-    };
+      const reader = new FileReader();
+      reader.onload = function (e: any) {
+        setSelectedImage(e.target.result);
+      };
 
-    if (event.target instanceof HTMLInputElement && event.target.files) {
-      if (!event.target.files[0]) return;
+      const fileNameWithoutExtension = file.name.split('.').slice(0, -1).join('.');
+      setFileName(fileNameWithoutExtension);
 
-      reader.readAsDataURL(event.target.files[0]);
+      if (event.target instanceof HTMLInputElement && event.target.files) {
+        if (!event.target.files[0]) return;
+
+        reader.readAsDataURL(event.target.files[0]);
+      }
+    } else {
+      setSelectedImage(null);
+      setImageFile(null); // Reset the watermarked image state when the image is deleted
+      setFileName(null);
     }
   };
 
-  return { selectedImage, imageHandler };
+  return { imageFile, fileName, selectedImage, imageHandler };
 };
 
 export default useImageHandler;

src/features/Backoffice/Newcard.tsx

@@ -48,15 +48,12 @@ export default function CardCRUD() {
   /* const { users, getUsers, deleteUser, totalCount } = useUsers(); */
 
   const toast = useToast();
-
   const [page, setPage] = useState(1);
-
   const [user, setUser] = useState(null);
-
   const [valueSearch, setValueSearch] = useState('');
-
   const [isOpenFormModal, setIsOpenFormModal] = useState(false);
 
+  const [cards, setCards] = useState([]);
 
   const isLgVerison = useBreakpointValue({
     base: false,
@@ -111,6 +108,67 @@ export default function CardCRUD() {
     }
   } */
 
+  const fetchData = async () => {
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+
+    const graphql = JSON.stringify({
+      query: `
+      query Cards {
+        cards {
+          name
+          description
+          descriptionPretty
+          settings {
+            rarity {
+              name
+            }
+            type {
+              name
+            }
+            stats {
+              health
+              attack
+              mana
+            }
+            faction {
+              name
+            }
+            skills {
+              name
+            }
+          }
+          art {
+            imageRoute
+          }
+          createdAt
+          updatedAt
+        }
+      }`,
+      variables: {}
+    });
+
+    const requestOptions: RequestInit = {
+      method: 'POST',
+      headers: myHeaders,
+      body: graphql,
+      redirect: 'follow'
+    };
+
+    try {
+      const response = await fetch("http://localhost:3000/graphql", requestOptions);
+      const result = await response.text();
+      setCards(JSON.parse(result).data.cards);
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  // Call the fetchData function within your useEffect hook
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <Flex
       w="100%"
@@ -222,25 +280,25 @@ export default function CardCRUD() {
               </Tr>
             </Thead>
             <Tbody>
-              {cardData.map((card, id) => {
+              {cards.map((card: any, id) => {
                 return (
                   <Tr key={id}>
                     <Td borderColor={borderColor}>
                       <Tooltip variant="unestyled" label={
-                         <Image src={card.image} height="200px" />
+                        <Image src={card?.art?.imageRoute} height="200px" />
                       }>
 
-                        <Image src={card.image} height="40px" />
+                        <Image src={card.art.imageRoute} height="40px" />
                       </Tooltip>
                     </Td>
                     <Td borderColor={borderColor}>{id}</Td>
-                    {isMdVerison && <Td borderColor={borderColor}>{card.name}</Td>}
-                    {isLgVerison && <Td borderColor={borderColor}>{card.stats.attack}</Td>}
-                    {isLgVerison && <Td borderColor={borderColor}>{card.stats.mana}</Td>}
-                    {isLgVerison && <Td borderColor={borderColor}>{card.stats.health}</Td>}
-                    {isLgVerison && <Td borderColor={borderColor}>{card.faction}</Td>}
-                    {isLgVerison && <Td borderColor={borderColor}>{card.description.substring(0, 10)}...</Td>}
-                    {isLgVerison && <Td borderColor={borderColor}>{card.description.substring(0, 10)}...</Td>}
+                    {isMdVerison && <Td borderColor={borderColor}>{card?.name}</Td>}
+                    {isLgVerison && <Td borderColor={borderColor}>{card?.settings?.stats?.attack}</Td>}
+                    {isLgVerison && <Td borderColor={borderColor}>{card?.settings?.stats?.mana}</Td>}
+                    {isLgVerison && <Td borderColor={borderColor}>{card?.settings?.stats?.health}</Td>}
+                    {isLgVerison && <Td borderColor={borderColor}>{card?.settings?.faction?.name}</Td>}
+                    {isLgVerison && <Td borderColor={borderColor}>{card?.description.substring(0, 10)}...</Td>}
+                    {isLgVerison && <Td borderColor={borderColor}>{card?.description.substring(0, 10)}...</Td>}
                     <Td borderColor={borderColor}>
                       <Button
                         onClick={() => handleUpdateUser(card)}

src/features/Home/Tools.tsx

@@ -36,6 +36,13 @@ const Tools = () => {
           color="red"
           text="WIP"
         />
+        <CardBoxElement
+          identifier="Generadores"
+          link="/generators/watermark"
+          title="Marca de agua"
+          color="purple"
+          text="Beta"
+        />
       </Flex>
     </Section>
   );

src/pages/generators/watermark.tsx

@@ -0,0 +1,145 @@
+import { PlusSquareIcon } from '@chakra-ui/icons';
+import { Box, Button, Flex, Image, Input } from '@chakra-ui/react';
+import useImageHandler from 'common/hooks/useImageHandler';
+import { captureHtmlAndSavePng } from 'common/utils';
+import React, { useState } from 'react';
+import { AiOutlineClose } from 'react-icons/ai';
+
+const WatermarkComponent: React.FC = () => {
+
+  const { selectedImage, fileName, imageHandler } = useImageHandler();
+
+  return (
+    <Flex
+      gap="4"
+      mt="10px"
+      width="100%"
+      maxWidth="1280px"
+      minH={{ lg: "777px", "2xl": "900px" }}
+      mx="auto"
+      direction={{ base: "column-reverse", md: "column" }}
+      px={{ base: 4, md: 4 }}
+      alignItems="center"
+    >
+      <Box
+        w={{ base: "100%", md: "75%" }}
+        height="100%"
+        bg="whiteAlpha.100"
+        p="20px"
+        borderRadius={8}
+      >
+        <Flex gap={2}>
+          <Box
+            as="label"
+            className="custom-file-upload"
+            htmlFor="image-importer"
+            h="auto"
+          >
+            <Flex>
+              <Box
+                bg="whiteAlpha.200"
+                px={2}
+                py={3}
+                borderRadius="6px 0px 0px 6px"
+                _hover={{
+                  bg: "whiteAlpha.300",
+                }}
+              >
+                <PlusSquareIcon /> Subir imagen
+                <Input
+                  id="image-importer"
+                  key={selectedImage ? fileName : 'input'}
+                  type="file"
+                  onChange={(e: any) => {
+                    imageHandler(e);
+                  }}
+                ></Input>
+              </Box>
+
+              <Button
+                borderRadius="0px 6px 6px 0px"
+                h="auto"
+                onClick={() => imageHandler(null)}
+                disabled={!selectedImage}
+              >
+                <AiOutlineClose />
+              </Button>
+            </Flex>
+          </Box>
+
+          <Button
+            ml={4}
+            h="auto"
+            onClick={() => {
+              if (!fileName) return;
+              captureHtmlAndSavePng({
+                id: "watermark_image",
+                name: fileName,
+                quality: 5
+              })
+            }
+            }
+          >
+            Guardar imagen
+          </Button>
+        </Flex>
+        <Box
+          mt="5"
+          height="500px"
+          width="100%"
+          bg="whiteAlpha.100"
+          borderRadius={8}
+          display="flex"
+          gap={3}
+          p={5}
+          backgroundImage="/images/generators/partnership/partnership_background.png"
+
+        >
+          <Box mx="auto" height="100%" width="auto">
+
+            <svg
+              style={{
+                width: "100%",
+                height: "100%",
+                userSelect: "none",
+                transition: "all .5s ease-in-out",
+              }}
+              id="watermark_image"
+              viewBox="60 0 649 1120"
+            >
+              {selectedImage ?
+                <>
+                  <g>
+                    <image
+                      type="MSBitmapLayer"
+                      x={0}
+                      y={0}
+                      width={769}
+                      height={1120}
+                      href={selectedImage}
+                    />
+                  </g>
+                  <g>
+                    <image
+                      type="MSBitmapLayer"
+                      alignmentBaseline='middle'
+                      x={490}
+                      y={520}
+                      width={200}
+                      height={1100}
+                      href="/images/fxd_logo.svg"
+                      opacity={0.7}
+                    />
+                  </g>
+                </>
+                : null}
+            </svg>
+          </Box>
+        </Box>
+      </Box>
+
+    </Flex>
+  );
+};
+
+export default WatermarkComponent;

yarn.lock

@@ -9872,10 +9872,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-[email protected].4:
-  version "4.9.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
-  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
+[email protected].5:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 ua-parser-js@^0.7.18:
   version "0.7.32"