Task 3: File Selector

task_3_react/src/client/App.tsx

@@ -1,13 +1,14 @@
 import "./css/App.css";
 import '@fortawesome/fontawesome-free/css/all.css';
-import { readCSV } from './csv';
-import { CSV_Data, fileInfo } from './types';
+import { CSV_Data, fileInfo, responseObject } from './types';
+import { readCSV, convertCSVtoJSON } from './csv';
 
-import React, { useState, useRef } from "react";
-import Layout from "./Layout";
+import React, { useState, useRef, useEffect } from "react";
+import Layout from "./components/Layout";
 import CSVCard from "./components/CSVCard";
 import InfoCard from "./components/InfoCard";
 import DataTable from "./components/DataTable";
+import FileCard from "./components/FileCard";
 
 function App() {
   const [data, setData] = useState([] as CSV_Data);
@@ -18,10 +19,19 @@ function App() {
     rowcount: 0
   });
 
+  const [fileList, setFileList] = useState(null as responseObject | null);
+  // Effect has to be in top level of the component
+  useEffect(() => {
+    fetch("/status", { method: "GET" })
+      .then((response) => response.json())
+      .then((response) => setFileList(response))
+      .catch((error) => console.log(error));
+  });
+
   const formRef = useRef(null);
 
   // This is triggered in CSVCard
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
     const file = e.target.files?.[0];
     if (!file) throw new Error("No file received");
 
@@ -29,7 +39,7 @@ function App() {
 
     const newFileInfo: fileInfo = {
       filename: file.name,
-      filetype: file.type,
+      filetype: ".csv", // file.type delivers weird name
       filesize: String(file.size) + "B",
       rowcount: data.length
     }
@@ -39,18 +49,31 @@ function App() {
     if (formRef.current) {
       // Upload to server
       const formData = new FormData(formRef.current);
-      const res = await fetch("/upload", {
+      await fetch("/upload", {
         method: "POST",
         body: formData
       });
-      const result = await res.json();
-      console.log(result);
     }
   }
 
+  const handleFileChange = async (fileName: string) => {
+    const response = await fetch(`/download/${fileName}`);
+    const blob = await response.blob();
+    const text = await blob.text();
+
+    if (!response) throw new Error("No file received");
+
+    const data = await convertCSVtoJSON(text);
+    
+    // Updating fileInfo requires more effort since blob doesn't have the metadata
+
+    setData(data);
+  }
+
   return (
       <Layout>
-        <CSVCard handleChange={handleFileChange} formRef={formRef}></CSVCard>
+        <CSVCard handleChange={handleFileUpload} formRef={formRef}></CSVCard>
+        <FileCard fileList={fileList as responseObject} fileChangeHandle={handleFileChange}></FileCard>
         <InfoCard info={info}></InfoCard>
         <DataTable data={data}></DataTable>
       </Layout>