From 14aab045f9624c468de90f2f0b6fdcc27c36853b Mon Sep 17 00:00:00 2001
From: Kristopher Santos <topers1820@gmail.com>
Date: Fri, 28 Mar 2025 22:36:59 +0800
Subject: [PATCH] FIX: FE Role Validation

- Disabled tool bar for Viewer
- Disabled version control for Viewer
- Display save button on role change
---
 src/components/modals/ShareModal.tsx | 37 +++++++++++++++++++++++++++-
 src/layouts/BottomMiddleBar.tsx      |  6 ++---
 src/layouts/TopRightBar.tsx          |  3 ++-
 src/pages/editor/index.tsx           |  1 -
 4 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/ShareModal.tsx b/src/components/modals/ShareModal.tsx
index 4b90670..dca300b 100644
--- a/src/components/modals/ShareModal.tsx
+++ b/src/components/modals/ShareModal.tsx
@@ -60,6 +60,7 @@ function ShareModal({ context, id }: ContextModalProps) {
   // useState to keep track project members locally.
   const [localMembers, setLocalMembers] = useState<IProjectMembers[]>([]);
   const [localRemovedMembers, setLocalRemovedMembers] = useState<IProjectMembers[]>([]);
+  const [localUpdatedMembers, setLocalUpdatedMembers] = useState<IProjectMembers[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>("");
 
   const currentUserRole = useMemo(() => {
@@ -157,6 +158,35 @@ function ShareModal({ context, id }: ContextModalProps) {
   };
 
   const handleUpdateRole = (memberId: string, newRole: string) => {
+    const updateMember = localMembers.find(member => member.id === memberId)
+    if (!updateMember) return
+
+    if (localUpdatedMembers.some(member => member.id === memberId)) {
+      if(selectedProject && selectedProject.id && 
+        newRole === projectMembers[selectedProject.id].find(origMem => origMem.id === memberId)?.role
+      ) {
+        setLocalUpdatedMembers(
+          localUpdatedMembers.filter((member) =>
+            member.id !== memberId
+          )
+        )
+      } else {
+        setLocalUpdatedMembers(
+          localUpdatedMembers.map((member) =>
+            member.id === memberId ? { ...member, role: newRole } : member
+          )
+        )
+      }
+    } else {
+      setLocalUpdatedMembers([
+        ...localUpdatedMembers,
+        {
+          ...updateMember,
+          role: newRole
+        }
+      ])
+    }
+
     setLocalMembers((prev) =>
       prev.map((member) =>
         member.id === memberId ? { ...member, role: newRole } : member
@@ -207,6 +237,7 @@ function ShareModal({ context, id }: ContextModalProps) {
 
       await fetchProjectMembers(selectedProject.id);
       setLocalRemovedMembers([])
+      setLocalUpdatedMembers([])
 
       showNotification({
         color: "green",
@@ -383,7 +414,11 @@ function ShareModal({ context, id }: ContextModalProps) {
       </ScrollArea.Autosize>
 
       {(currentUserRole === "Owner" || currentUserRole === "Admin")
-        && (members.some((member) => member.id.startsWith("temp-")) || localRemovedMembers.length > 0) && (
+        && (
+          members.some((member) => member.id.startsWith("temp-")) || 
+          localRemovedMembers.length > 0 ||
+          localUpdatedMembers.length > 0
+      ) && (
         <Button
           variant="filled"
           fullWidth={true}
diff --git a/src/layouts/BottomMiddleBar.tsx b/src/layouts/BottomMiddleBar.tsx
index 13d56f3..faa58a2 100644
--- a/src/layouts/BottomMiddleBar.tsx
+++ b/src/layouts/BottomMiddleBar.tsx
@@ -13,7 +13,7 @@ import useToolbarRepo from "../data/repo/useToolbarRepo";
 function BottomMiddleBar() {
   const isDarkMode = useIsDarkMode();
 
-  const { selectedProject } = useProjectRepo();
+  const { selectedProject, validateRole } = useProjectRepo();
   const isButtonDisabled = !selectedProject;
 
   const currentTool = useToolbarStore(state => state.currentTool)
@@ -43,7 +43,7 @@ function BottomMiddleBar() {
               variant="subtle"
               size="md"
               radius="sm"
-              disabled={isButtonDisabled}
+              disabled={isButtonDisabled || !validateRole()}
               active={currentTool == "table"}
               onClick={() => changeTool("table")}
             />
@@ -67,7 +67,7 @@ function BottomMiddleBar() {
               variant="subtle"
               size="md"
               radius="sm"
-              disabled={isButtonDisabled}
+              disabled={isButtonDisabled || !validateRole()}
               active={currentTool == "note"}
               onClick={() => changeTool("note")}
             />
diff --git a/src/layouts/TopRightBar.tsx b/src/layouts/TopRightBar.tsx
index 8768137..88f3a35 100644
--- a/src/layouts/TopRightBar.tsx
+++ b/src/layouts/TopRightBar.tsx
@@ -67,6 +67,7 @@ function ActionButtons({
   const navigate = useNavigate();
 
   const { logoutUser } = useUserRepo();
+  const { validateRole } = useProjectRepo();
   const { selectedProject } = useProjectStore();
   const isButtonDisabled = !selectedProject;
 
@@ -102,7 +103,7 @@ function ActionButtons({
         size="lg"
         radius="xl"
         onClick={toggleDrawer}
-        disabled={isButtonDisabled}
+        disabled={isButtonDisabled || !validateRole()}
       />
       <Popover
         position="bottom-end"
diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx
index 833b72c..3bbb92a 100644
--- a/src/pages/editor/index.tsx
+++ b/src/pages/editor/index.tsx
@@ -32,7 +32,6 @@ import "../../css/react-flow.css"
 function Editor() {
   const { moveNode, addNode, addEdge, changeEdge, deleteEdge } = useEditorRepo();
   const { validateRole } = useProjectRepo()
-  //const { currentProjectAccess } = useMemberStore()
   
   const nodeTypes: NodeTypes = useMemo(
     () => ({