From 5beef0be9e728157fdef2c672803b03aad9b4589 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Sat, 31 Aug 2024 09:30:59 +0200
Subject: [PATCH] edit groups - works!

---
 ui2/src/features/api/slice.ts                 | 27 +++++++++++++++---
 .../features/groups/components/EditButton.tsx | 28 -------------------
 .../groups/components/EditGroupModal.tsx      | 19 +++++++++----
 ui2/src/types.ts                              |  2 ++
 4 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/ui2/src/features/api/slice.ts b/ui2/src/features/api/slice.ts
index a577151fc..c9f1145dc 100644
--- a/ui2/src/features/api/slice.ts
+++ b/ui2/src/features/api/slice.ts
@@ -2,7 +2,7 @@ import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react"
 import {getBaseURL} from "@/utils"
 import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
 
-import type {Group, Paginated} from "@/types"
+import type {Group, GroupUpdate, Paginated} from "@/types"
 import type {RootState} from "@/app/types"
 
 type GetGroupsArgs = {
@@ -47,18 +47,37 @@ export const apiSlice = createApi({
   reducerPath: "api",
   baseQuery: baseQuery,
   keepUnusedDataFor: 60,
+  tagTypes: ["Group"],
   endpoints: builder => ({
     getGroups: builder.query<Paginated<Group>, GetGroupsArgs | void>({
       query: ({
         page_number = 1,
         page_size = PAGINATION_DEFAULT_ITEMS_PER_PAGES
       }: GetGroupsArgs) =>
-        `/groups/?page_number=${page_number}&page_size=${page_size}`
+        `/groups/?page_number=${page_number}&page_size=${page_size}`,
+      providesTags: (
+        result = {page_number: 1, page_size: 1, num_pages: 1, items: []},
+        error,
+        arg
+      ) => [
+        "Group",
+        ...result.items.map(({id}) => ({type: "Group", id}) as const)
+      ]
     }),
     getGroup: builder.query<Group, string>({
-      query: groupID => `/groups/${groupID}`
+      query: groupID => `/groups/${groupID}`,
+      providesTags: (result, error, arg) => [{type: "Group", id: arg}]
+    }),
+    editGroup: builder.mutation<Group, GroupUpdate>({
+      query: group => ({
+        url: `groups/${group.id}`,
+        method: "PATCH",
+        body: group
+      }),
+      invalidatesTags: (result, error, arg) => [{type: "Group", id: arg.id}]
     })
   })
 })
 
-export const {useGetGroupsQuery, useGetGroupQuery} = apiSlice
+export const {useGetGroupsQuery, useGetGroupQuery, useEditGroupMutation} =
+  apiSlice
diff --git a/ui2/src/features/groups/components/EditButton.tsx b/ui2/src/features/groups/components/EditButton.tsx
index f4bb7b137..a2f0d7eca 100644
--- a/ui2/src/features/groups/components/EditButton.tsx
+++ b/ui2/src/features/groups/components/EditButton.tsx
@@ -1,46 +1,18 @@
-import {useDispatch, useSelector} from "react-redux"
 import {Button} from "@mantine/core"
 import {IconEdit} from "@tabler/icons-react"
 
 import {openModal} from "@/components/modals/Generic"
-
-import {useGetGroupQuery} from "@/features/api/slice"
-
 import EditGroupModal from "./EditGroupModal"
-import type {GroupDetails} from "@/types"
 
 interface Args {
   groupId: string
 }
 
 export default function EditButton({groupId}: Args) {
-  const dispatch = useDispatch()
-  const {data, isLoading} = useGetGroupQuery(groupId)
-
-  const missingGroupDetails = (groupId: string) => {
-    if (!data) {
-      return true
-    }
-
-    if (data.id != groupId) {
-      return true
-    }
-
-    return false
-  }
-
   const onClick = () => {
-    // if (groupId && missingGroupDetails(data)) {
-    //dispatch(fetchGroupDetails(groupId!))
-    //}
-
     openModal<any, {groupId: string}>(EditGroupModal, {
       groupId: groupId!
     })
-      .then((group: GroupDetails) => {
-        //dispatch(updateGroupDetails(group))
-      })
-      .catch(() => {})
   }
 
   if (!groupId) {
diff --git a/ui2/src/features/groups/components/EditGroupModal.tsx b/ui2/src/features/groups/components/EditGroupModal.tsx
index e32365a99..4a8e286f5 100644
--- a/ui2/src/features/groups/components/EditGroupModal.tsx
+++ b/ui2/src/features/groups/components/EditGroupModal.tsx
@@ -8,14 +8,15 @@ import {
   TextInput,
   Table,
   Checkbox,
-  Tooltip
+  Tooltip,
+  Loader
 } from "@mantine/core"
 
 import {updateGroup} from "@/features/groups/slice"
 //import {selectGroupDetails} from "@/slices/groupDetails"
 import {RootState} from "@/app/types"
 import type {GroupDetails, SliceState} from "@/types"
-import {useGetGroupQuery} from "@/features/api/slice"
+import {useGetGroupQuery, useEditGroupMutation} from "@/features/api/slice"
 
 function initialScopesDict(initialScopes: string[]): Record<string, boolean> {
   let scopes: Record<string, boolean> = {
@@ -36,8 +37,9 @@ type Args = {
 }
 
 export default function EditGroupModal({groupId, onOK, onCancel}: Args) {
-  const dispatch = useDispatch()
   const {data, isLoading} = useGetGroupQuery(groupId)
+  const [updateGroup, {isLoading: isLoadingGroupUpdate}] =
+    useEditGroupMutation()
   const [show, setShow] = useState<boolean>(true)
   const [name, setName] = useState<string>("")
   const [scopes, setScopes] = useState<Record<string, boolean>>({})
@@ -55,7 +57,7 @@ export default function EditGroupModal({groupId, onOK, onCancel}: Args) {
       scopes: Object.keys(scopes),
       name: name!
     }
-    //await dispatch(updateGroup(updatedData))
+    await updateGroup(updatedData)
     onOK(updatedData)
     setShow(false)
   }
@@ -116,7 +118,7 @@ export default function EditGroupModal({groupId, onOK, onCancel}: Args) {
   return (
     <Modal title={"Edit Group"} opened={show} size="lg" onClose={onClose}>
       <LoadingOverlay
-        visible={data == null || status == "loading"}
+        visible={data == null || isLoading}
         zIndex={1000}
         overlayProps={{radius: "sm", blur: 2}}
       />
@@ -506,7 +508,12 @@ export default function EditGroupModal({groupId, onOK, onCancel}: Args) {
         <Button variant="default" onClick={onClose}>
           Cancel
         </Button>
-        <Button onClick={onSubmit}>Submit</Button>
+        <Group>
+          {isLoadingGroupUpdate && <Loader size="sm" />}
+          <Button disabled={isLoadingGroupUpdate} onClick={onSubmit}>
+            Update Group
+          </Button>
+        </Group>
       </Group>
     </Modal>
   )
diff --git a/ui2/src/types.ts b/ui2/src/types.ts
index 267d0cdf1..d03b5005b 100644
--- a/ui2/src/types.ts
+++ b/ui2/src/types.ts
@@ -176,6 +176,8 @@ export type GroupDetails = {
   scopes: Array<string>
 }
 
+export type GroupUpdate = Pick<Group, "id" | "name" | "scopes">
+
 export type FileItemStatus = "uploading" | "success" | "failure"
 
 export type FileItemType = {