Task 3: React Frontend

task_3_react/src/client/App.tsx

@@ -0,0 +1,47 @@
+import "./App.css";
+import '@fortawesome/fontawesome-free/css/all.css';
+import { readCSV } from './csv';
+import { CSV_Data, fileInfo } from './types';
+
+import React, { useState } from "react";
+import Layout from "./Layout";
+import CSVCard from "./components/CSVCard";
+import InfoCard from "./components/InfoCard";
+import DataTable from "./components/DataTable";
+
+function App() {
+  const [data, setData] = useState([] as CSV_Data);
+  const [info, setInfo] = useState({
+    filename: "None",
+    filetype: "None",
+    filesize: "None",
+    rowcount: 0
+  });
+
+  // This is triggered in CSVCard
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+    const file = e.target.files?.[0];
+    if (!file) throw new Error("No file received");
+
+    const data = await readCSV(e);
+
+    const newFileInfo: fileInfo = {
+      filename: file.name,
+      filetype: file.type,
+      filesize: String(file.size) + "B",
+      rowcount: data.length
+    }
+    setInfo(newFileInfo);
+    setData(data);
+  }
+
+  return (
+      <Layout>
+        <CSVCard handleChange={handleFileChange}></CSVCard>
+        <InfoCard info={info}></InfoCard>
+        <DataTable data={data}></DataTable>
+      </Layout>
+  );
+}
+
+export default App;