New released adding new features

HectorSaldes · Dec 31, 2021 · f03c740 · f03c740
1 parent 8130028
commit f03c740
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,7 @@ These are two mockups developed in this web page
 ## Roadmap
 
 -   [v1.1.0] First launch to the web application with images pages working
+-   [v2.3.0] Secong launch now you can download icons or emojis on SVG format
 
 See the [open issues](https://github.com/HectorSaldes/liber/issues) for a full list of proposed features (and known issues).
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "liber",
-  "version": "1.1.0",
+  "version": "2.3.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.1",

diff --git a/src/components/IconCard.jsx b/src/components/IconCard.jsx
@@ -1,42 +1,10 @@
-import React, { useRef, useState } from "react";
-import IconsService from "../service/IconsService";
+import React from "react";
 import { Card } from "primereact/card";
 import { Button } from "primereact/button";
 
-export default function IconCard({ payload, messages }) {
-	let dofileDownload = useRef(null);
-	const [fileDownloadUrl, setFileDownloadUrl] = useState(null);
+export default function IconCard({ payload, getIconToDownload }) {
 	const { name, commonName, platform, id } = payload;
 
-	const getIconToDownload = () => {
-		try {
-			IconsService.getIcon(id)
-				.then(
-					({
-						data: {
-							icon: { svg },
-						},
-					}) => {
-						let decode = atob(svg);
-						const blob = new Blob([decode]);
-						const fileDownloadUrl = URL.createObjectURL(blob);
-						setFileDownloadUrl(fileDownloadUrl);
-						dofileDownload.click();
-						URL.revokeObjectURL(fileDownloadUrl);
-					}
-				)
-				.catch((err) => {
-					messages("error", "Ocurrió un error en el servidor");
-				});
-		} catch (error) {
-			messages(
-				"error",
-				"Ocurrió un error al esperar al servidor",
-				"Vuelve a intentarlo un poco más tarde"
-			);
-		}
-	};
-
 	const header = () => (
 		<div className="p-d-flex p-jc-center p-pt-2">
 			<img
@@ -54,18 +22,12 @@ export default function IconCard({ payload, messages }) {
 				title={name}
 				header={header}
 				footer={
-					<a
-						ref={dofileDownload}
-						href={fileDownloadUrl}
-						download={`${commonName}.svg`}
-					>
-						<Button
-							label="SVG"
-							icon="pi pi-download"
-							className="p-button p-button-warning"
-							onClick={getIconToDownload}
-						/>
-					</a>
+					<Button
+						label="SVG"
+						icon="pi pi-download"
+						className="p-button p-button-warning"
+						onClick={() => getIconToDownload(id, commonName)}
+					/>
 				}
 			/>
 		</div>

diff --git a/src/pages/Icons.jsx b/src/pages/Icons.jsx
@@ -31,16 +31,18 @@ export default function Icons() {
 			);
 	};
 
-	const searchIcons = () => {
+	const searchIcons = (e) => {
 		try {
-			if (valueSelected) {
-				getAllIcons();
-			} else {
-				messages(
-					"info",
-					"Debes colocar alguna palabra",
-					"Dentro del cuadro de texto"
-				);
+			if (e === "Enter") {
+				if (valueSelected) {
+					getAllIcons();
+				} else {
+					messages(
+						"info",
+						"Debes colocar alguna palabra",
+						"Dentro del cuadro de texto"
+					);
+				}
 			}
 		} catch (error) {
 			messages(
@@ -56,6 +58,33 @@ export default function Icons() {
 		setListOfIcons(allIcons);
 	};
 
+	const getIconToDownload = async (id, commonName) => {
+		try {
+			await IconsService.getIcon(id).then(({ data }) => {
+				convertSvgToFileAndDownload(data.icon.svg, commonName);
+			});
+		} catch (error) {
+			messages(
+				"error",
+				"Ocurrió un error al esperar al servidor",
+				"Vuelve a intentarlo un poco más tarde"
+			);
+		}
+	};
+
+	const convertSvgToFileAndDownload = (svg, name) => {
+		let decode = atob(svg);
+		const blob = new Blob([decode]);
+		const fileUrl = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = fileUrl;
+		link.setAttribute("download", `${name}.svg`);
+		document.body.appendChild(link);
+		link.click();
+		URL.revokeObjectURL(fileUrl);
+		link.parentNode.removeChild(link);
+	};
+
 	const messages = (severity, summary, detail) => {
 		toast.current.show({ severity, summary, detail, life: 3000 });
 	};
@@ -85,14 +114,15 @@ export default function Icons() {
 						completeMethod={searchWithText}
 						onChange={(e) => setValueSelected(e.value)}
 						inputStyle={{ fontSize: "25px" }}
+						onKeyPress={({ key }) => searchIcons(key)}
 					/>
 					<br />
 					<br />
 					<Button
 						label="Buscar"
 						icon="pi pi-search"
 						className="p-button-lg"
-						onClick={searchIcons}
+						onClick={() => searchIcons("Enter")}
 					/>
 				</div>
 				<div className="p-col">
@@ -105,7 +135,7 @@ export default function Icons() {
 								<IconCard
 									payload={i}
 									key={key}
-									messages={messages}
+									getIconToDownload={getIconToDownload}
 								/>
 							))
 						)}

diff --git a/src/pages/Images.jsx b/src/pages/Images.jsx
@@ -37,6 +37,11 @@ export default function Images() {
 			let imageTaken = e.files[0];
 			if (e.xhr.status === 201) {
 				if (batch.latency === 0) {
+					messages(
+						"info",
+						"Subiendo imagen",
+						"Esto tarda unos segundos"
+					);
 					let data = new FormData();
 					data.append("image", imageTaken, imageTaken.name);
 					let dataImage = await getImageUploaded(data, batch.id);
@@ -145,8 +150,8 @@ export default function Images() {
 		});
 	};
 
-	const messages = (severity, summary, detail) => {
-		toast.current.show({ severity, summary, detail, life: 3000 });
+	const messages = (severity, summary, detail, sticky = false) => {
+		toast.current.show({ severity, summary, detail, life: 3000, sticky });
 	};
 
 	return (