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>
     );
 }