add reference file input and loader

src/components/Accuracy.css

@@ -12,6 +12,18 @@
     margin: 15px;
 }
 
+.file-row {
+    flex-direction: row;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1.5rem;
+}
+
+.file-label {
+    margin: 10px;
+}
+
 .dates {
     flex-direction: row;
     display: flex;

src/components/Accuracy.js

@@ -14,6 +14,7 @@ function Accuracy({ show }) {
     const [endDate, setEndDate] = useState("");
     const [selectedFile, setSelectedFile] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null); // New state for handling errors
 
     const handleFileChange = (event) => {
         setSelectedFile(event.target.files[0]);
@@ -23,6 +24,7 @@ function Accuracy({ show }) {
     const fetchFile = async (start_date, end_date) => {
         try {
             setLoading(true);
+            setError(null); // Reset error state before making a new request
 
             if (selectedFile) {
                 const formData = new FormData();
@@ -60,10 +62,14 @@ function Accuracy({ show }) {
                     document.body.removeChild(link);
                 } else {
                     console.error('Error downloading file:', response.statusText);
+                    setError('Error downloading file. Please try again.'); // Set error message
                 }
+            } else {
+                setError("Select file from reference device");
             }
         } catch (error) {
             console.error('Error downloading file:', error);
+            setError('Error downloading file. Please try again.'); // Set error message
         } finally {
             setLoading(false); // Set loading back to false when the request completes
         }
@@ -73,9 +79,11 @@ function Accuracy({ show }) {
     return (
         <div>
             <h1>Auto Analysis</h1>
-            <div>Maintain correct formatting while taking the readings for this to work</div>
-            <div className='dates'>
+            <div className='file-row'>
+                <div className='file-label'>Reference file</div>
                 <input type="file" onChange={handleFileChange} />
+            </div>
+            <div className='dates'>
                 <div className='start-date'>
                     <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} placeholderText='start date' />
                 </div>
@@ -92,6 +100,7 @@ function Accuracy({ show }) {
                     )}
                 </div>
             </div>
+            {error && <div className="error-message">{error}</div>} {/* Display error message if there's an error */}
         </div>
     );
 }

src/components/Help.js

@@ -85,7 +85,7 @@ function Help({ url, show }) {
                     Registration
                     </Typography>
                     <Typography sx={{ color: 'text.secondary' }}>
-                        Create and clears entries for taking readings in devices
+                        Create and clear entries for taking readings in devices
                     </Typography>
                 </AccordionSummary>
                 <AccordionDetails>