Added file error handling.

src/components/SingleFileUpload.jsx

@@ -2,16 +2,20 @@ import React, { useState, useEffect } from "react"
 import csv from "csvtojson"
 import PropTypes from "prop-types"
 
-export var fileContent = "{}"
+export var fileContent = "{}";
+var uploadFailed = false;
 
 function SingleFileUpload({ onFileUploaded }) {
   const [, setFile] = useState()
-  const [fileUploaded, setFileUploaded] = useState(false)
+  const [fileUploaded, setFileUploaded] = useState(false);
 
   useEffect(() => {
     if (fileUploaded) {
       onFileUploaded()
     }
+    if(uploadFailed && !fileUploaded) {
+      onFileUploaded();
+    }
   }, [fileUploaded])
 
   // Reads file.
@@ -19,16 +23,29 @@ function SingleFileUpload({ onFileUploaded }) {
     csv()
       .fromString(content)
       .preRawData((csvRawData) => {
-        csvRawData = csvRawData.replaceAll("Start Date", "Start_Date")
-        csvRawData = csvRawData.replaceAll("Start Time", "Start_Time")
-        csvRawData = csvRawData.replaceAll("End Date", "End_Date")
-        csvRawData = csvRawData.replaceAll("End Time", "End_Time")
-        csvRawData = csvRawData.replaceAll("Duration (decimal)", "Duration_Decimal")
+
+        if(!checkCSVValidity(csvRawData)) {
+          alert("Invalid CSV File");
+          uploadFailed = true;
+          setFileUploaded(false);
+          fileContent = {};
+          return "{}";
+        }
+
+        csvRawData = csvRawData.replaceAll("Start Date", "Start_Date");
+        csvRawData = csvRawData.replaceAll("Start Time", "Start_Time");
+        csvRawData = csvRawData.replaceAll("End Date", "End_Date");
+        csvRawData = csvRawData.replaceAll("End Time", "End_Time");
+        csvRawData = csvRawData.replaceAll("Duration (decimal)", "Duration_Decimal");
+        uploadFailed = false;
+
         return csvRawData
       })
       .then((csvRow) => {
-        fileContent = csvRow
-        setFileUploaded(true)
+        if(!uploadFailed) {
+          fileContent = csvRow;
+          setFileUploaded(true);
+        }
       })
   }
 
@@ -39,6 +56,12 @@ function SingleFileUpload({ onFileUploaded }) {
     const reader = new FileReader()
     reader.readAsText(changedFile)
     reader.onload = function (evt) {
+      var uploadedFile = document.getElementById('fileInput').files[0];
+      if (uploadedFile.type != "application/vnd.ms-excel") {
+        alert("Wrong file type");
+        fileContent = "{}";
+        return;
+      }
       readCallback(evt.target.result)
     }
   }
@@ -47,12 +70,27 @@ function SingleFileUpload({ onFileUploaded }) {
     <div className="App">
       <form>
         <h2>Upload file</h2>
-        <input type="file" accept=".csv" onChange={handleChange} />
+        <input id="fileInput" type="file" accept=".csv" onChange={handleChange} />
       </form>
     </div>
   )
 }
 
+function checkCSVValidity(rawCSV) {
+  const containsProjectKey = rawCSV.includes("\"Project\"");
+  const containsDescriptionKey = rawCSV.includes("\"Description\"");
+  const containsTaskKey = rawCSV.includes("\"Task\"");
+  const containsUserKey = rawCSV.includes("\"User\"");
+  const containsStartDateKey = rawCSV.includes("\"Start Date\"");
+  const containsStartTimeKey = rawCSV.includes("\"Start Time\"");
+  const containsEndDateKey = rawCSV.includes("\"End Date\"");
+  const containsEndTimeKey = rawCSV.includes("\"End Time\"");
+  const containsDurationHourKey = rawCSV.includes("\"Duration (h)\"");
+  const containsDurationDecimalKey = rawCSV.includes("\"Duration (decimal)\"");
+
+  return containsProjectKey && containsDescriptionKey && containsTaskKey && containsUserKey && containsStartDateKey && containsStartTimeKey && containsEndDateKey && containsEndTimeKey && containsDurationHourKey && containsDurationDecimalKey;
+}
+
 SingleFileUpload.propTypes = {
   onFileUploaded: PropTypes.func.isRequired,
 }

src/components/TimelineAreaChart.jsx

@@ -4,8 +4,8 @@ import HighchartsReact from "highcharts-react-official"
 import { fileContent } from "./SingleFileUpload"
 
 // Date, Map
-var projectDataMap = new Map()
-var allSeriesEnabled = false
+var projectDataMap = new Map();
+var allSeriesEnabled = true;
 
 export default function AreaChart() {
   const chartComponent = useRef(null)

src/index.js

@@ -3,14 +3,18 @@ import ReactDOM from "react-dom/client"
 import "./index.css"
 import TimelineAreaChart from "./components/TimelineAreaChart"
 import TotalPieChart from "./components/TotalPieChart"
-import SingleFileUploader from "./components/SingleFileUpload"
+import SingleFileUploader, {fileContent} from "./components/SingleFileUpload"
 import { GeistProvider, CssBaseline, Tabs } from "@geist-ui/core"
 
 export default function App() {
   const [fileUploaded, setFileUploaded] = useState(false)
 
   const handleUploadedFile = function () {
-    setFileUploaded(true)
+    if(Array.isArray(fileContent)) {
+      setFileUploaded(true);
+    } else {
+      setFileUploaded(false);
+    }
   }
 
   return (