add curve fit image api

src/components/CurveFit.js

@@ -1,14 +1,55 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FaInfoCircle } from "react-icons/fa";
+import axios from 'axios';
 
 import './CurveFit.css';
+import ImageDownloader from './ImageDownloader';
 
 function CurveFit({ show }) {
     const [showCardInfo, setShowCardInfo] = useState(false);
+    const [svgData, setSvgData] = useState(null);
+
+    const fetchSvg = () => {
+        axios({
+            method: 'get',
+            url: "https://asia-south1-hpos-qa.cloudfunctions.net/curvefit",
+            data: {
+                "_id": "id",
+                "underMedication": false,
+                "underTransfusion": false,
+                "userImageURL": "https://hpos-prod.web.app/logo.png"
+            },
+            withCredentials: false,
+            secure: false,
+            headers: {
+                "Content-Type": "application/json",
+                // "x-client": "e16a1bd15af2ee640f5a7a18c8d8333f5f01f7c66e003bbc21ee52870f1bce27",
+            },
+        })
+            .then(response => response.data)
+            .then((data) => {
+                // setMessage(`${id} is being created`);
+                // setSvgData(data?.plot?.replace('\"', '').replace('\n', '').replace('"', "'"));
+            })
+            .catch((err) => {
+                console.log(err);
+                // setMessage(`error: ${err?.message}`);
+            });
+    }
+
+    useEffect(() => {
+        if (!svgData) {
+            // fetchSvg();
+        }
+    }, []);
 
     return (
         <div>
             <h1>Curve Fit</h1>
+            {/* <img alt='' src={ svgData }/>; */}
+            <img src="https://asia-south1-hpos-qa.cloudfunctions.net/curvefit" width="450" height="340" />
+
+            {/* <ImageDownloader /> */}
         </div>
     );
 }

src/components/ImageDownloader.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+
+const ImageDownloader = () => {
+  const [imageUrl, setImageUrl] = useState('');
+  const [imageData, setImageData] = useState(null);
+
+  const handleInputChange = (e) => {
+    setImageUrl(e.target.value);
+  };
+
+  const handleFetchImage = async () => {
+    try {
+      const response = await fetch(imageUrl, { mode: 'no-cors'});
+      const blob = await response.blob();
+      console.log(blob);
+      setImageData(URL.createObjectURL(blob));
+    } catch (error) {
+      console.error('Error fetching image:', error);
+    }
+  };
+
+  const handleDownloadImage = () => {
+    const link = document.createElement('a');
+    link.href = imageData;
+    link.download = 'downloaded_image';
+    link.click();
+  };
+
+  return (
+    <div>
+      <label>
+        Image URL:
+        <input type="text" value={imageUrl} onChange={handleInputChange} />
+      </label>
+      <button onClick={handleFetchImage}>Fetch Image</button>
+
+      {imageData && (
+        <div>
+          <img src={imageData} alt="Downloadable" style={{ maxWidth: '100%' }} />
+          <button onClick={handleDownloadImage}>Download Image</button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageDownloader;