From b592452557a3043547049de67c145e5f340585ce Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Sun, 2 Feb 2025 21:41:27 -0600
Subject: [PATCH] allow multiple uploads, show links in sidebar

---
 app/src/app/uploader/page.tsx | 123 ++++++++++++++++++----------------
 1 file changed, 66 insertions(+), 57 deletions(-)

diff --git a/app/src/app/uploader/page.tsx b/app/src/app/uploader/page.tsx
index 691901cd..1ace2ad7 100644
--- a/app/src/app/uploader/page.tsx
+++ b/app/src/app/uploader/page.tsx
@@ -6,10 +6,15 @@ import {GerryDBViewSelector} from '../components/sidebar/GerryDBViewSelector';
 import {useMapStore} from '@/app/store/mapStore';
 import {Assignment, createMapDocument, patchUpdateAssignments} from '@/app/utils/api/apiHandlers';
 
+type MapLink = {
+  document_id: string;
+  name: string;
+};
+
 export default function Uploader() {
-  const [progress, setProgress] = useState(0);
-  const [totalRows, setTotalRows] = useState(0);
-  const [mapLink, setMapLink] = useState('');
+  const [progress, setProgress] = useState<number>(0);
+  const [totalRows, setTotalRows] = useState<number>(0);
+  const [mapLinks, setMapLinks] = useState<MapLink[]>([]);
 
   const ROWS_PER_BATCH = 2000;
 
@@ -48,7 +53,7 @@ export default function Uploader() {
               setProgress(rowCursor + assignments.length);
               rowCursor += ROWS_PER_BATCH;
               if (rowCursor > results.data.length) {
-                setMapLink(document_id);
+                setMapLinks([...mapLinks, {document_id, name: file.name}]);
               } else {
                 setTimeout(partialUploadStep, 10);
               }
@@ -76,63 +81,67 @@ export default function Uploader() {
 
   return (
     <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
-      <div
-        className="w-96 h-96 border-2 border-dashed border-gray-400 rounded-lg flex flex-col items-center justify-center bg-white"
-        onDragOver={handleDragOver}
-        onDrop={handleDrop}
-      >
-        <ErrorNotification />
+      <div className="flex gap-4">
+        <div
+          className="w-96 h-96 border-2 border-dashed border-gray-400 rounded-lg flex flex-col items-center justify-center bg-white"
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+        >
+          <ErrorNotification />
 
-        {totalRows ? (
-          <div className="w-52 mb-4">
-            <div className="flex">
-              {progress === 0 ? 'Initializing map...' : null}
-              {mapLink !== '' ? (
-                <a
-                  className="text-blue-500 underline"
-                  href={`/map?document_id=${mapLink}`}
-                  target="_blank"
-                >
-                  Uploaded to {mapLink}
-                </a>
-              ) : null}
-            </div>
-            <div className="flex justify-between">
-              <span>
-                {progress}/{totalRows} rows
-              </span>
-              <span>{Math.round((progress / totalRows) * 100)}%</span>
+          {totalRows ? (
+            <div className="w-52 mb-4">
+              <div className="flex">{progress === 0 ? 'Initializing map...' : null}</div>
+              <div className="flex justify-between">
+                <span>
+                  {progress}/{totalRows} rows
+                </span>
+                <span>{Math.round((progress / totalRows) * 100)}%</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
+                <div
+                  className="bg-blue-500 h-2 rounded-full"
+                  style={{width: `${(progress / totalRows) * 100}%`}}
+                ></div>
+              </div>
             </div>
-            <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
-              <div
-                className="bg-blue-500 h-2 rounded-full"
-                style={{width: `${(progress / totalRows) * 100}%`}}
-              ></div>
-            </div>
-          </div>
-        ) : null}
+          ) : null}
 
-        <h3 className="text-lg font-semibold text-gray-700 mb-4">Upload CSV</h3>
-        <label className="px-4 py-2 rounded cursor-pointer hover:bg-blue-600">
-          Choose the map table
-        </label>
-        <div className="mb-3">
-          <GerryDBViewSelector />
+          <h3 className="text-lg font-semibold text-gray-700 mb-4">Upload CSV</h3>
+          <label className="px-4 py-2 rounded">Choose the map table</label>
+          <div className="mb-3 border-2 p-1">
+            <GerryDBViewSelector />
+          </div>
+          <input
+            type="file"
+            name="uploader"
+            className="hidden"
+            id="file-input"
+            onChange={handleFileSelected}
+          />
+          <label
+            htmlFor="file-input"
+            className="bg-blue-500 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-600"
+          >
+            Choose a file
+          </label>
+          <p className="text-gray-500 mt-2">Or drag and drop a file here</p>
         </div>
-        <input
-          type="file"
-          name="uploader"
-          className="hidden"
-          id="file-input"
-          onChange={handleFileSelected}
-        />
-        <label
-          htmlFor="file-input"
-          className="bg-blue-500 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-600"
-        >
-          Choose a file
-        </label>
-        <p className="text-gray-500 mt-2">Or drag and drop a file here</p>
+        {mapLinks.length > 0 ? (
+          <div className="w-45 h-96 border-2 border-gray-400 rounded-lg flex flex-col items-center p-4 bg-white">
+            <h3>Uploads</h3>
+            {mapLinks.map(map => (
+              <a
+                className="text-blue-500 underline"
+                href={`/map?document_id=${map.document_id}`}
+                key={map.document_id}
+                target="_blank"
+              >
+                {map.name}
+              </a>
+            ))}
+          </div>
+        ) : null}
       </div>
     </div>
   );