WIP

ui2/src/app/store.ts

@@ -8,7 +8,6 @@ import tagsReducer from "@/slices/tags"
 import groupsReducer from "@/features/groups/slice"
 import usersReducer from "@/slices/users"
 import tagDetailsReducer from "@/slices/tagDetails"
-import groupDetailsReducer from "@/slices/groupDetails"
 import userDetailsReducer from "@/slices/userDetails"
 import {uploaderReducer} from "@/slices/uploader"
 import sizesSliceReducer from "@/slices/sizes"
@@ -24,7 +23,6 @@ export const store = configureStore({
     groups: groupsReducer,
     users: usersReducer,
     tagDetails: tagDetailsReducer,
-    groupDetails: groupDetailsReducer,
     userDetails: userDetailsReducer,
     uploader: uploaderReducer,
     sizes: sizesSliceReducer,

ui2/src/features/api/slice.ts

@@ -54,8 +54,11 @@ export const apiSlice = createApi({
         page_size = PAGINATION_DEFAULT_ITEMS_PER_PAGES
       }: GetGroupsArgs) =>
         `/groups/?page_number=${page_number}&page_size=${page_size}`
+    }),
+    getGroup: builder.query<Group, string>({
+      query: groupID => `/groups/${groupID}`
     })
   })
 })
 
-export const {useGetGroupsQuery} = apiSlice
+export const {useGetGroupsQuery, useGetGroupQuery} = apiSlice

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

@@ -17,7 +17,7 @@ import type {Group} from "@/types"
 import {RemoveGroupModal, RemoveGroupsModal} from "./DeleteModal"
 import {RootState} from "@/app/types"
 
-export function DeleteGroupButton({groupId}: {groupId: number}) {
+export function DeleteGroupButton({groupId}: {groupId: string}) {
   const [redirect, setRedirect] = useState<boolean>(false)
   const navigate = useNavigate()
   const deletedGroup = useSelector<RootState>(state =>
@@ -31,7 +31,7 @@ export function DeleteGroupButton({groupId}: {groupId: number}) {
   }, [deletedGroup, redirect])
 
   const onClick = () => {
-    openModal<Group[], {groupId: number}>(RemoveGroupModal, {
+    openModal<Group[], {groupId: string}>(RemoveGroupModal, {
       groupId: groupId
     })
       .then(() => {

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

@@ -4,45 +4,41 @@ import {IconEdit} from "@tabler/icons-react"
 
 import {openModal} from "@/components/modals/Generic"
 
-import {
-  fetchGroupDetails,
-  selectGroupDetails,
-  updateGroupDetails
-} from "@/slices/groupDetails"
+import {useGetGroupQuery} from "@/features/api/slice"
 
 import EditGroupModal from "./EditGroupModal"
-import type {GroupDetails, SliceState} from "@/types"
+import type {GroupDetails} from "@/types"
 
-export default function EditButton({groupId}: {groupId?: number}) {
-  const dispatch = useDispatch()
-  const group = useSelector(selectGroupDetails) as SliceState<GroupDetails>
+interface Args {
+  groupId: string
+}
 
-  const missingGroupDetails = (groupId: number) => {
-    if (!group) {
-      return true
-    }
+export default function EditButton({groupId}: Args) {
+  const dispatch = useDispatch()
+  const {data, isLoading} = useGetGroupQuery(groupId)
 
-    if (!group.data) {
+  const missingGroupDetails = (groupId: string) => {
+    if (!data) {
       return true
     }
 
-    if (group.data.id != groupId) {
+    if (data.id != groupId) {
       return true
     }
 
     return false
   }
 
   const onClick = () => {
-    if (groupId && missingGroupDetails(groupId)) {
-      dispatch(fetchGroupDetails(groupId!))
-    }
+    // if (groupId && missingGroupDetails(data)) {
+    //dispatch(fetchGroupDetails(groupId!))
+    //}
 
-    openModal<any, {groupId: number}>(EditGroupModal, {
+    openModal<any, {groupId: string}>(EditGroupModal, {
       groupId: groupId!
     })
       .then((group: GroupDetails) => {
-        dispatch(updateGroupDetails(group))
+        //dispatch(updateGroupDetails(group))
       })
       .catch(() => {})
   }

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

@@ -12,9 +12,10 @@ import {
 } from "@mantine/core"
 
 import {updateGroup} from "@/features/groups/slice"
-import {selectGroupDetails} from "@/slices/groupDetails"
+//import {selectGroupDetails} from "@/slices/groupDetails"
 import {RootState} from "@/app/types"
 import type {GroupDetails, SliceState} from "@/types"
+import {useGetGroupQuery} from "@/features/api/slice"
 
 function initialScopesDict(initialScopes: string[]): Record<string, boolean> {
   let scopes: Record<string, boolean> = {
@@ -29,34 +30,32 @@ function initialScopesDict(initialScopes: string[]): Record<string, boolean> {
 }
 
 type Args = {
-  groupId: number
+  groupId: string
   onOK: (value: GroupDetails) => void
   onCancel: (reason?: any) => void
 }
 
 export default function EditGroupModal({groupId, onOK, onCancel}: Args) {
   const dispatch = useDispatch()
-  const {status, data} = useSelector<RootState>(
-    selectGroupDetails
-  ) as SliceState<GroupDetails>
+  const {data, isLoading} = useGetGroupQuery(groupId)
   const [show, setShow] = useState<boolean>(true)
-  const [name, setName] = useState<string>()
+  const [name, setName] = useState<string>("")
   const [scopes, setScopes] = useState<Record<string, boolean>>({})
 
   useEffect(() => {
     if (data) {
       setName(data.name)
       setScopes(initialScopesDict(data.scopes))
     }
-  }, [status])
+  }, [isLoading])
 
   const onSubmit = async () => {
     const updatedData = {
       id: groupId,
       scopes: Object.keys(scopes),
       name: name!
     }
-    await dispatch(updateGroup(updatedData))
+    //await dispatch(updateGroup(updatedData))
     onOK(updatedData)
     setShow(false)
   }
@@ -114,10 +113,6 @@ export default function EditGroupModal({groupId, onOK, onCancel}: Args) {
     }
   }
 
-  const onNameChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setName(e.currentTarget.value)
-  }
-
   return (
     <Modal title={"Edit Group"} opened={show} size="lg" onClose={onClose}>
       <LoadingOverlay
@@ -127,7 +122,7 @@ export default function EditGroupModal({groupId, onOK, onCancel}: Args) {
       />
       <TextInput
         value={name}
-        onChange={onNameChangeHandler}
+        onChange={e => setName(e.currentTarget.value)}
         label="Name"
         placeholder="Group name"
       />

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

@@ -1,21 +1,20 @@
-import {useSelector} from "react-redux"
 import {Link, useNavigation} from "react-router-dom"
 import {Breadcrumbs, Box, LoadingOverlay, Group, Loader} from "@mantine/core"
 
-import {selectGroupDetails} from "@/slices/groupDetails"
-
-import type {GroupDetails, SliceState} from "@/types"
-import type {RootState} from "@/app/types"
+import {useGetGroupQuery} from "@/features/api/slice"
+import type {GroupDetails} from "@/types"
 import GroupForm from "./GroupForm"
 import EditButton from "./EditButton"
 import {DeleteGroupButton} from "./DeleteButton"
 
-export default function GroupDetailsComponent() {
-  const {data} = useSelector<RootState>(
-    selectGroupDetails
-  ) as SliceState<GroupDetails>
+interface GroupDetailsArgs {
+  groupId: string
+}
+
+export default function GroupDetailsComponent({groupId}: GroupDetailsArgs) {
+  const {data, isLoading} = useGetGroupQuery(groupId)
 
-  if (data == null) {
+  if (isLoading || !data) {
     return (
       <Box pos="relative">
         <LoadingOverlay
@@ -54,10 +53,10 @@ function Path({group}: {group: GroupDetails | null}) {
   )
 }
 
-function ActionButtons({modelId}: {modelId?: number}) {
+function ActionButtons({modelId}: {modelId?: string}) {
   return (
     <Group>
-      <EditButton groupId={modelId} />
+      <EditButton groupId={modelId!} />
       <DeleteGroupButton groupId={modelId!} />
     </Group>
   )