[Task 3] Format

task_3_react/src/client/App.tsx

@@ -1,83 +1,101 @@
-import "./css/App.css";
+import './css/App.css';
 import '@fortawesome/fontawesome-free/css/all.css';
-import { CSV_Data, fileInfo, responseObject } from './types';
-import { readCSV, convertCSVtoJSON } from './csv';
+import {
+    CSV_Data, fileInfo, responseObject
+} from './types';
+import React, {
+    useEffect, useRef, useState
+} from 'react';
+import {
+    convertCSVtoJSON, readCSV
+} from './csv';
+import CSVCard from './components/CSVCard';
+import DataTable from './components/DataTable';
+import FileCard from './components/FileCard';
+import InfoCard from './components/InfoCard';
+import Layout from './components/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 );
+    const [
+        info,
+        setInfo
+    ] = useState( {
+        'filename': 'None',
+        'filetype': 'None',
+        'filesize': 'None',
+        'rowcount': 0
+    } );
+    const [
+        fileList,
+        setFileList
+    ] = useState( null as responseObject | null );
 
-function App() {
-  const [data, setData] = useState([] as CSV_Data);
-  const [info, setInfo] = useState({
-    filename: "None",
-    filetype: "None",
-    filesize: "None",
-    rowcount: 0
-  });
+    // 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 [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 );
 
-  const formRef = useRef(null);
+    // This is triggered in CSVCard
+    const handleFileUpload = async ( e: React.ChangeEvent<HTMLInputElement> ): Promise<void> => {
+        const file = e.target.files?.[0];
 
-  // This is triggered in CSVCard
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
-    const file = e.target.files?.[0];
-    if (!file) throw new Error("No file received");
+        if ( !file ) throw new Error( 'No file received' );
 
-    const data = await readCSV(e);
+        const data = await readCSV( e );
+        const newFileInfo: fileInfo = {
+            'filename': file.name,
+            'filetype': '.csv', // file.type delivers weird name
+            'filesize': String( file.size ) + 'B',
+            'rowcount': data.length
+        };
 
-    const newFileInfo: fileInfo = {
-      filename: file.name,
-      filetype: ".csv", // file.type delivers weird name
-      filesize: String(file.size) + "B",
-      rowcount: data.length
-    }
-    setInfo(newFileInfo);
-    setData(data);
+        setInfo( newFileInfo );
+        setData( data );
 
-    if (formRef.current) {
-      // Upload to server
-      const formData = new FormData(formRef.current);
-      await fetch("/upload", {
-        method: "POST",
-        body: formData
-      });
-    }
-  }
+        if ( formRef.current ) {
+            // Upload to server
+            const formData = new FormData( formRef.current );
 
-  const handleFileChange = async (fileName: string) => {
-    const response = await fetch(`/download/${fileName}`);
-    const blob = await response.blob();
-    const text = await blob.text();
+            await fetch( '/upload', {
+                'method': 'POST',
+                'body': formData
+            } );
+        }
+    };
 
-    if (!response) throw new Error("No file received");
+    const handleFileChange = async ( fileName: string ) => {
+        const response = await fetch( `/download/${ fileName }` );
+        const blob = await response.blob();
+        const text = await blob.text();
 
-    const data = await convertCSVtoJSON(text);
-    
-    // Updating fileInfo requires more effort since blob doesn't have the metadata
+        if ( !response ) throw new Error( 'No file received' );
 
-    setData(data);
-  }
+        const data = await convertCSVtoJSON( text );
 
-  return (
-      <Layout>
-        <CSVCard handleChange={handleFileUpload} formRef={formRef}></CSVCard>
-        <FileCard fileList={fileList as responseObject} fileChangeHandle={handleFileChange}></FileCard>
-        <InfoCard info={info}></InfoCard>
-        <DataTable data={data}></DataTable>
-      </Layout>
-  );
+        // Updating fileInfo requires more effort since blob doesn't have the metadata
+
+        setData( data );
+    };
+
+    return (
+        <Layout>
+            <CSVCard handleChange={handleFileUpload} formRef={formRef}></CSVCard>
+            <FileCard fileList={fileList as responseObject} fileChangeHandle={handleFileChange}></FileCard>
+            <InfoCard info={info}></InfoCard>
+            <DataTable data={data}></DataTable>
+        </Layout>
+    );
 }
 
 export default App;