fix: clicking "download" in an image modal opens image in new tab

frontend/src/components/ModalImageCors/index.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",
+		width: 250,
+		height: 200,
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 8,
+		borderBottomRightRadius: 8,
+	},
+}));
+
+const ModalImageCors = ({ imageUrl }) => {
+	const classes = useStyles();
+	const [fetching, setFetching] = useState(true);
+	const [url, setUrl] = useState("");
+
+	useEffect(() => {
+		if (!imageUrl) return;
+		const fetchImage = async () => {
+			const { data, headers } = await api.get(imageUrl, {
+				responseType: "blob",
+			});
+			const blobUrl = window.URL.createObjectURL(
+				new Blob([data], { type: headers["content-type"] })
+			);
+			setUrl(blobUrl);
+			setFetching(false);
+		};
+		fetchImage();
+	}, [imageUrl]);
+
+	return (
+		<ModalImage
+			className={classes.messageMedia}
+			smallSrcSet={fetching ? imageUrl : url}
+			medium={fetching ? imageUrl : url}
+			large={fetching ? imageUrl : url}
+			alt="image"
+		/>
+	);
+};
+
+export default ModalImageCors;