add loading icon and fix cors

src/components/Accuracy.css

@@ -26,4 +26,26 @@
 
 .end-date {
     margin: 10px;
+}
+
+.download-row {
+    flex-direction: row;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1.5rem;
+}
+
+.loading-icon {
+    animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
 }

src/components/Accuracy.js

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { FaInfoCircle } from "react-icons/fa";
+import { AiOutlineLoading } from "react-icons/ai";
 import DatePicker from "react-datepicker";
 import moment from 'moment';
+import axios from 'axios';
 
 import "react-datepicker/dist/react-datepicker.css";
 import './Accuracy.css';
@@ -10,10 +12,62 @@ function Accuracy({ show }) {
     const [showCardInfo, setShowCardInfo] = useState(false);
     const [startDate, setStartDate] = useState("");
     const [endDate, setEndDate] = useState("");
+    const [selectedFile, setSelectedFile] = useState(null);
+    const [loading, setLoading] = useState(false);
 
-    const fetchFile = (start_date, end_date) => {
-        window.location.href = `https://asia-south1-hpos-qa.cloudfunctions.net/performance?start_date=${moment(startDate).format("YYYY-MM-DD")}&end_date=${moment(endDate).format("YYYY-MM-DD")}`;
-    }
+    const handleFileChange = (event) => {
+        setSelectedFile(event.target.files[0]);
+    };
+
+
+    const fetchFile = async (start_date, end_date) => {
+        try {
+            setLoading(true);
+
+            if (selectedFile) {
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+
+                const queryString = `start_date=${moment(startDate).format(
+                    'YYYY-MM-DD'
+                )}&end_date=${moment(endDate).format('YYYY-MM-DD')}`;
+
+                const url = `https://asia-south1-hpos-qa.cloudfunctions.net/performance?${queryString}`;
+
+                // Make a POST request using the Fetch API
+                const response = await fetch(url, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        // Add any necessary headers
+                        // 'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
+                    },
+                });
+
+                // Check if the request was successful (status code 2xx)
+                if (response.ok) {
+                    // Create a blob from the response data
+                    const blob = await response.blob();
+
+                    // Create a download link and trigger a click to download the file
+                    const link = document.createElement('a');
+                    link.href = window.URL.createObjectURL(blob);
+                    link.download = 'autoanlysis.xlsx'; // Set the desired file name
+                    document.body.appendChild(link);
+                    link.click();
+
+                    // Clean up
+                    document.body.removeChild(link);
+                } else {
+                    console.error('Error downloading file:', response.statusText);
+                }
+            }
+        } catch (error) {
+            console.error('Error downloading file:', error);
+        } finally {
+            setLoading(false); // Set loading back to false when the request completes
+        }
+    };
 
 
     return (
@@ -21,13 +75,22 @@ function Accuracy({ show }) {
             <h1>Auto Analysis</h1>
             <div>Maintain correct formatting while taking the readings for this to work</div>
             <div className='dates'>
+                <input type="file" onChange={handleFileChange} />
                 <div className='start-date'>
                     <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} placeholderText='start date' />
                 </div>
                 <div className='end-date'>
                     <DatePicker selected={endDate} onChange={(date) => setEndDate(date)} placeholderText='end date' />
                 </div>
-                <div className='button' onClick={() => fetchFile(startDate, endDate)}>Download Excel</div>
+            </div>
+            <div className='download-row'>
+                <div className='button' onClick={() => fetchFile(startDate, endDate)}>
+                    {loading ? (
+                        <AiOutlineLoading className="loading-icon" />
+                    ) : (
+                        'Download Excel'
+                    )}
+                </div>
             </div>
         </div>
     );