From 6292d4372b15cf6d046d765b9df687465a16df39 Mon Sep 17 00:00:00 2001
From: Wesleyjan Lacerda <74305459+WesleyjanLacerda@users.noreply.github.com>
Date: Fri, 7 Oct 2022 15:29:06 -0300
Subject: [PATCH] Create ModalImage.js

---
 .../components/ContactDrawer/ModalImage.js    | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 frontend/src/components/ContactDrawer/ModalImage.js

diff --git a/frontend/src/components/ContactDrawer/ModalImage.js b/frontend/src/components/ContactDrawer/ModalImage.js
new file mode 100644
index 00000000..dd22ba40
--- /dev/null
+++ b/frontend/src/components/ContactDrawer/ModalImage.js
@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import ModalImage from "react-modal-image";
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	messageMedia: {
+		objectFit: "cover",
+		margin: 15,
+		width: 160,
+		height: 160,
+		borderRadius: 10,
+	},
+}));
+ 
+const ModalImageContatc = ({ imageUrl }) => {
+	const classes = useStyles();
+	const [fetching, setFetching] = useState(true);
+	const [blobUrl, setBlobUrl] = useState("");
+
+	useEffect(() => {
+		if (!imageUrl) return;
+		const fetchImage = async () => {
+			const { data, headers } = await api.get(imageUrl, {
+				responseType: "blob",
+			});
+			const url = window.URL.createObjectURL(
+				new Blob([data], { type: headers["content-type"] })
+			);
+			setBlobUrl(url);
+			setFetching(false);
+		};
+		fetchImage();
+	}, [imageUrl]);
+
+	return (
+		<ModalImage
+			className={classes.messageMedia}
+			smallSrcSet={fetching ? imageUrl : blobUrl}
+			medium={fetching ? imageUrl : blobUrl}
+			large={fetching ? imageUrl : blobUrl}
+			showRotate="true"
+			alt="image"
+		/>
+	);
+};
+
+
+export default ModalImageContatc;