Groups CRUD works!

ui2/src/components/users/EditUserModal.tsx

@@ -18,7 +18,7 @@ import {selectUserDetails} from "@/slices/userDetails"
 
 import {RootState} from "@/app/types"
 import type {SliceState, SliceStateStatus, UserDetails} from "@/types"
-import {selectAllGroups, selectAllGroupsStatus} from "@/features/groups/slice"
+import {selectAllGroups} from "@/features/groups/slice"
 
 type GenericModalArgs = {
   userId: string
@@ -36,9 +36,9 @@ export default function EditUserModal({
     selectUserDetails
   ) as SliceState<UserDetails>
   const allGroups = useSelector<RootState>(selectAllGroups) as Array<GroupType>
-  const allGroupsStatus = useSelector<RootState>(
-    selectAllGroupsStatus
-  ) as SliceStateStatus
+  //const allGroupsStatus = useSelector<RootState>(
+  //  selectAllGroupsStatus
+  //) as SliceStateStatus
 
   const [show, setShow] = useState<boolean>(true)
   const [groups, setGroups] = useState<string[]>(
@@ -74,10 +74,10 @@ export default function EditUserModal({
       group_ids: group_ids
     }
 
-    const response = await dispatch(updateUser(updatedData))
-    const userDetailsData = response.payload as UserDetails
+    //const response = await dispatch(updateUser(updatedData))
+    //const userDetailsData = response.payload as UserDetails
 
-    onOK(userDetailsData)
+    //onOK(userDetailsData)
     setShow(false)
   }
   const onClose = () => {
@@ -88,7 +88,7 @@ export default function EditUserModal({
   return (
     <Modal title={"Edit User"} opened={show} onClose={onClose}>
       <LoadingOverlay
-        visible={data == null || allGroupsStatus == "loading"}
+        visible={false}
         zIndex={1000}
         overlayProps={{radius: "sm", blur: 2}}
       />

ui2/src/components/users/NewUserModal.tsx

@@ -17,7 +17,7 @@ import {UserEditableFields, Group as GroupType} from "@/types"
 
 import {RootState} from "@/app/types"
 import type {SliceStateStatus, UserDetails} from "@/types"
-import {selectAllGroups, selectAllGroupsStatus} from "@/features/groups/slice"
+import {selectAllGroups} from "@/features/groups/slice"
 import {makeRandomString} from "@/utils"
 import {emailValidator, usernameValidator} from "./validators"
 
@@ -29,9 +29,9 @@ type GenericModalArgs = {
 export default function NewUserModal({onOK, onCancel}: GenericModalArgs) {
   const dispatch = useDispatch()
   const allGroups = useSelector<RootState>(selectAllGroups) as Array<GroupType>
-  const allGroupsStatus = useSelector<RootState>(
-    selectAllGroupsStatus
-  ) as SliceStateStatus
+  //const allGroupsStatus = useSelector<RootState>(
+  //    selectAllGroupsStatus
+  //  ) as SliceStateStatus
 
   const [show, setShow] = useState<boolean>(true)
   const [groups, setGroups] = useState<string[]>([])
@@ -58,10 +58,10 @@ export default function NewUserModal({onOK, onCancel}: GenericModalArgs) {
       group_ids: group_ids
     }
 
-    const response = await dispatch(addUser(newUserData))
-    const userDetailsData = response.payload as UserDetails
+    //const response = await dispatch(addUser(newUserData))
+    //const userDetailsData = response.payload as UserDetails
 
-    onOK(userDetailsData)
+    //onOK(userDetailsData)
     setShow(false)
   }
   const onClose = () => {
@@ -72,7 +72,7 @@ export default function NewUserModal({onOK, onCancel}: GenericModalArgs) {
   return (
     <Modal title={"New User"} opened={show} onClose={onClose}>
       <LoadingOverlay
-        visible={allGroupsStatus == "loading"}
+        visible={false}
         zIndex={1000}
         overlayProps={{radius: "sm", blur: 2}}
       />

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, GroupUpdate, Paginated} from "@/types"
+import type {Group, GroupUpdate, Paginated, NewGroup} from "@/types"
 import type {RootState} from "@/app/types"
 
 type GetGroupsArgs = {
@@ -68,16 +68,36 @@ export const apiSlice = createApi({
       query: groupID => `/groups/${groupID}`,
       providesTags: (result, error, arg) => [{type: "Group", id: arg}]
     }),
+    addNewGroup: builder.mutation<Group, NewGroup>({
+      query: group => ({
+        url: "/groups/",
+        method: "POST",
+        body: group
+      }),
+      invalidatesTags: ["Group"]
+    }),
     editGroup: builder.mutation<Group, GroupUpdate>({
       query: group => ({
         url: `groups/${group.id}`,
         method: "PATCH",
         body: group
       }),
       invalidatesTags: (result, error, arg) => [{type: "Group", id: arg.id}]
+    }),
+    deleteGroup: builder.mutation<void, string>({
+      query: groupID => ({
+        url: `groups/${groupID}`,
+        method: "DELETE"
+      }),
+      invalidatesTags: (result, error, id) => [{type: "Group", id: id}]
     })
   })
 })
 
-export const {useGetGroupsQuery, useGetGroupQuery, useEditGroupMutation} =
-  apiSlice
+export const {
+  useGetGroupsQuery,
+  useGetGroupQuery,
+  useEditGroupMutation,
+  useDeleteGroupMutation,
+  useAddNewGroupMutation
+} = apiSlice

ui2/src/features/groups/components/DeleteButton.tsx

@@ -50,13 +50,10 @@ export function DeleteGroupButton({groupId}: {groupId: string}) {
 export function DeleteGroupsButton() {
   const dispatch = useDispatch()
   const selectedIds = useSelector(selectSelectedIds)
-  const groups = useSelector<RootState>(state =>
-    selectGroupsByIds(state, selectedIds)
-  ) as Array<Group>
 
   const onClick = () => {
-    openModal<Group[], {groups: Array<Group>}>(RemoveGroupsModal, {
-      groups: groups
+    openModal<Group[], {groupIds: Array<string>}>(RemoveGroupsModal, {
+      groupIds: selectedIds
     })
       .then(() => {
         dispatch(clearSelection())

ui2/src/features/groups/components/DeleteModal.tsx

@@ -1,27 +1,28 @@
 import {useState} from "react"
 import {store} from "@/app/store"
-import {removeGroups} from "@/features/groups/slice"
 import GenericModal from "@/components/modals/Generic"
 import type {Group} from "@/types"
+import {useDeleteGroupMutation} from "@/features/api/slice"
 
 type RemoveGroupsModalArgs = {
-  groups: Group[]
+  groupIds: string[]
   onOK: (value: Group[]) => void
   onCancel: (reason?: any) => void
 }
 
 /* Removes multiple groups */
 export function RemoveGroupsModal({
-  groups,
+  groupIds,
   onOK,
   onCancel
 }: RemoveGroupsModalArgs) {
   const [errorMessage, setErrorMessage] = useState("")
-  const groupNames = groups.map(g => g.name).join(",")
+  const [deletedGroup] = useDeleteGroupMutation()
+  //const groupNames = groups.map(g => g.name).join(",")
 
   const handleSubmit = async () => {
-    store.dispatch(removeGroups(groups.map(g => g.id)))
-    onOK(groups)
+    await Promise.all(groupIds.map(i => deletedGroup(i)))
+    onOK([])
     return true
   }
   const handleCancel = () => {
@@ -38,15 +39,15 @@ export function RemoveGroupsModal({
       submit_button_title="Remove"
       submit_button_color="red"
     >
-      <p>Are you sure you want to delete following groups: {groupNames}?</p>
+      <p>Are you sure you want to delete selected groups?</p>
       {errorMessage}
     </GenericModal>
   )
 }
 
 type RemoveGroupModalArgs = {
-  groupId: number
-  onOK: (value: number) => void
+  groupId: string
+  onOK: (value: string) => void
   onCancel: (reason?: any) => void
 }
 
@@ -57,9 +58,10 @@ export function RemoveGroupModal({
   onCancel
 }: RemoveGroupModalArgs) {
   const [errorMessage, setErrorMessage] = useState("")
-
+  const [deletedGroup] = useDeleteGroupMutation()
   const handleSubmit = async () => {
-    await store.dispatch(removeGroups([groupId]))
+    //await store.dispatch(removeGroups([groupId]))
+    await deletedGroup(groupId)
 
     onOK(groupId)
     return true

ui2/src/features/groups/components/NewButton.tsx

@@ -1,21 +1,13 @@
-import {useDispatch} from "react-redux"
 import {Button} from "@mantine/core"
 import {IconPlus} from "@tabler/icons-react"
 
 import {openModal} from "@/components/modals/Generic"
-import {updateGroupDetails} from "@/slices/groupDetails"
+
 import NewGroupModal from "./NewGroupModal"
-import type {GroupDetails} from "@/types"
 
 export default function NewButton() {
-  const dispatch = useDispatch()
-
   const onClick = () => {
     openModal<any, {groupId: number}>(NewGroupModal)
-      .then((group: GroupDetails) => {
-        //dispatch(updateGroupDetails(group))
-      })
-      .catch(() => {})
   }
   return (
     <Button leftSection={<IconPlus />} onClick={onClick} variant="default">

ui2/src/features/groups/components/NewGroupModal.tsx

@@ -10,16 +10,16 @@ import {
   Tooltip
 } from "@mantine/core"
 
-import {addGroup} from "@/features/groups/slice"
 import type {GroupDetails} from "@/types"
+import {useAddNewGroupMutation} from "@/features/api/slice"
 
 type Args = {
   onOK: (value: GroupDetails) => void
   onCancel: (reason?: any) => void
 }
 
 export default function NewGroupModal({onOK, onCancel}: Args) {
-  const dispatch = useDispatch()
+  const [addNewGroup, isLoading] = useAddNewGroupMutation()
   const [show, setShow] = useState<boolean>(true)
   const [name, setName] = useState<string>()
   const [scopes, setScopes] = useState<Record<string, boolean>>({
@@ -34,10 +34,9 @@ export default function NewGroupModal({onOK, onCancel}: Args) {
       scopes: Object.keys(scopes),
       name: name!
     }
-    const response = await dispatch(addGroup(updatedData))
-    const groupDetailsData = response.payload as GroupDetails
-
-    onOK(groupDetailsData)
+    //const response = await dispatch(addGroup(updatedData))
+    //const groupDetailsData = response.payload as GroupDetails
+    await addNewGroup(updatedData).unwrap()
     setShow(false)
   }