From a3c7b3d04e7dd50457a37f591ba5592f0d803f61 Mon Sep 17 00:00:00 2001
From: Chris Carlon <cmcarleone@gmail.com>
Date: Thu, 6 Feb 2025 19:50:44 +0000
Subject: [PATCH] feat: added in new useFileUploader interface to improve file
 upload code - implementation tbc [2025-02-06]

---
 .../components/hooks/useFileUploader.ts       | 30 +++++++++++++++++
 .../[projectName]/components/mapClient.tsx    |  1 +
 .../components/viewMembersModal.tsx           | 33 ++++++++++---------
 .../[workspaceId]/workspaceProjectPage.tsx    |  1 +
 4 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/hooks/useFileUploader.ts

diff --git a/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/hooks/useFileUploader.ts b/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/hooks/useFileUploader.ts
new file mode 100644
index 0000000..6154cd8
--- /dev/null
+++ b/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/hooks/useFileUploader.ts
@@ -0,0 +1,30 @@
+// import { useCallback } from "react";
+// import { useSingleFileUploader, useShapefileUploader } from "./fileUpload";
+// import {
+//   getWorkspaceConnections,
+//   WorkspaceConnection,
+// } from "../actions/getSources";
+
+// interface UseFileUploaderProps {
+//   fileName: string;
+//   workspaceId: string;
+//   setUploadError: (error: string | null) => void;
+//   setUploadSuccess: (success: boolean) => void;
+//   setUploadProgress: (progress: number) => void;
+//   setIsUploading: (isUploading: boolean) => void;
+//   setWorkspaceConnections: (connections: any) => void;
+//   handleModalClose: () => void;
+// }
+
+// export const useFileUploader = ({
+//     fileName,
+//     workspaceId,
+//     setUploadError,
+//     setUploadSuccess,
+//     setUploadProgress,
+//     setIsUploading,
+//     setWorkspaceConnections,
+//     handleModalClose,
+//   }: UseFileUploaderProps) => {
+//     const { uploadSingleFile } = useSingleFileUploader();
+//     const { uploadShapefile } = useShapefileUploader();
diff --git a/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/mapClient.tsx b/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/mapClient.tsx
index 2b9e2fa..c399ea2 100644
--- a/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/mapClient.tsx
+++ b/gridwalk-ui/src/app/project/[workspaceId]/[projectName]/components/mapClient.tsx
@@ -100,6 +100,7 @@ export function MapClient({ apiUrl }: MapClientProps) {
     setUploadError(null);
   }, []);
 
+  // TODO move file uploader to a seperate component
   const { uploadSingleFile } = useSingleFileUploader();
   const { uploadShapefile } = useShapefileUploader();
   const handleFileUpload = useCallback(
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/components/viewMembersModal.tsx b/gridwalk-ui/src/app/workspace/[workspaceId]/components/viewMembersModal.tsx
index 2951215..8e62eac 100644
--- a/gridwalk-ui/src/app/workspace/[workspaceId]/components/viewMembersModal.tsx
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/components/viewMembersModal.tsx
@@ -6,14 +6,22 @@ import { removeWorkspaceMember } from "../actions/workspace/remove_members";
 import { useRouter } from "next/navigation";
 import { ViewWorkspaceMemberModalProps } from "../types";
 
+// TODO create a delete confirmation modal that can be reused for other modals
 type WorkspaceMember = {
   email: string;
   role: "Admin" | "Read";
 };
 
-export const ViewWorkspaceMemberModal: React.FC<
-  ViewWorkspaceMemberModalProps
-> = ({ isOpen, onClose, workspaceId }) => {
+const role_colors = {
+  Admin: "bg-blue-100 text-blue-800",
+  Read: "bg-gray-100 text-gray-800",
+} as const;
+
+export function ViewWorkspaceMemberModal({
+  isOpen,
+  onClose,
+  workspaceId,
+}: ViewWorkspaceMemberModalProps) {
   const [members, setMembers] = useState<WorkspaceMember[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -24,6 +32,7 @@ export const ViewWorkspaceMemberModal: React.FC<
   );
   const router = useRouter();
 
+  // When modal is opened, fetch members
   useEffect(() => {
     if (isOpen) {
       const fetchMembers = async () => {
@@ -79,16 +88,8 @@ export const ViewWorkspaceMemberModal: React.FC<
 
   if (!isOpen) return null;
 
-  const getRoleColor = (role: "Admin" | "Read") => {
-    switch (role) {
-      case "Admin":
-        return "bg-blue-100 text-blue-800";
-      case "Read":
-        return "bg-gray-100 text-gray-800";
-    }
-  };
-
   // Delete confirmation modal
+  // TODO move to a seperate component that can be reused for other modals
   const DeleteConfirmation = () => {
     if (!memberToDelete) return null;
 
@@ -219,9 +220,9 @@ export const ViewWorkspaceMemberModal: React.FC<
                           <div className="flex items-center">
                             <Shield className="h-4 w-4 text-gray-400 mr-2" />
                             <span
-                              className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getRoleColor(
-                                member.role
-                              )}`}
+                              className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                                role_colors[member.role]
+                              }`}
                             >
                               {member.role}
                             </span>
@@ -267,4 +268,4 @@ export const ViewWorkspaceMemberModal: React.FC<
       <DeleteConfirmation />
     </>
   );
-};
+}
diff --git a/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjectPage.tsx b/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjectPage.tsx
index 5cb330c..9e46eec 100644
--- a/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjectPage.tsx
+++ b/gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjectPage.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+
 import {
   Plus,
   UserPlus,