Dev

src/App.tsx

@@ -7,6 +7,7 @@ import DropZone from './components/DropZone';
 import { Button } from './components/ui/button';
 import { Context } from './Context';
 import { processDataShopData } from './lib/dataProcessingUtils';
+import Loading from './components/Loading';
 
 function App() {
 
@@ -46,14 +47,9 @@ function App() {
         </Button>
 
         <div className=" flex items-center justify-center pt-20">
-
           {
             loading ?
-              <div className="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 flex items-center justify-center">
-                <div className="bg-white p-4 rounded-lg">
-                  <p>Loading...</p>
-                </div>
-              </div>
+              <Loading />
               :
               (
                 showDropZone && (

src/components/Debug.tsx

@@ -1,7 +1,22 @@
-export default function Debug(){
-    return(
+import { GlobalDataType } from "@/lib/types";
+import { useState } from "react";
+import DropZone from "./DropZone";
+
+export default function Debug() {
+    const [data, setData] = useState<GlobalDataType[]>([])
+    const handleData = (data: GlobalDataType[]) => {
+        setData(data)
+        console.log("Data from file: ", data);
+
+    }
+
+    const handleLoading = (loading: boolean) => {
+    }
+
+    return (
         <>
-        Debug Page
+
+            <DropZone afterDrop={handleData} onLoadingChange={handleLoading} />
         </>
     )
 }

src/components/DropZone.tsx

@@ -44,7 +44,7 @@ export default function DropZone({ afterDrop, onLoadingChange }: DropZoneProps)
                         break;
                 }
                 const array: GlobalDataType[] | null = parseData(textStr, delimiter);
-                console.log("Array: ", array);
+                console.log("Array from file: ", array);
                 // array is null when there is an error in the file structure or content
                 if (!array) {
 
@@ -71,8 +71,10 @@ export default function DropZone({ afterDrop, onLoadingChange }: DropZoneProps)
     }, [fileType, afterDrop, onLoadingChange]);
 
     const acceptedFileTypes: Accept = {
-        'text/plain': ['.txt', '.csv', '.tsv', '.json', '.tsv', '.pipe'],
-    }
+        'text/tab-separated-values': ['.tsv'],
+        'text/csv': ['.csv'],
+        'text/plain': ['.txt', '.csv', '.tsv', '.json', '.pipe']
+    };
 
 
 

src/components/Loading.tsx

@@ -0,0 +1,9 @@
+export default function Loading() {
+    return (
+        <div className="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 flex items-center justify-center">
+            <div className="bg-white p-4 rounded-lg">
+                <p>Loading...</p>
+            </div>
+        </div>
+    )
+}

src/lib/routes.tsx

@@ -0,0 +1,13 @@
+import App from "@/App";
+import Debug from "@/components/Debug";
+
+export const routes = [
+    {
+      path: "/",
+      element: <App />,
+    },
+    {
+      path: "/debug",
+      element: <Debug />
+    }
+  ]

src/main.tsx

@@ -12,19 +12,10 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
-import Debug from './components/Debug.tsx'
+import { routes } from './lib/routes.tsx'
 const queryClient = new QueryClient()
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-  {
-    path: "/debug",
-    element: <Debug />
-  }
-])
+const router = createBrowserRouter(routes)
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>