Groups query works!

ui2/src/components/users/EditButton.tsx

@@ -3,7 +3,7 @@ import {Button} from "@mantine/core"
 import {IconEdit} from "@tabler/icons-react"
 
 import {openModal} from "@/components/modals/Generic"
-import {fetchGroups} from "@/features/groups/slice"
+//import {fetchGroups} from "@/features/groups/slice"
 import {
   fetchUserDetails,
   selectUserDetails,
@@ -37,7 +37,7 @@ export default function EditButton({userId}: {userId?: string}) {
     if (userId && missingUserDetails(userId)) {
       dispatch(fetchUserDetails(userId!))
     }
-    dispatch(fetchGroups({pageNumber: 1, pageSize: 999}))
+    //dispatch(fetchGroups({pageNumber: 1, pageSize: 999}))
 
     openModal<any, {userId: string}>(EditUserModal, {
       userId: userId!

ui2/src/components/users/NewButton.tsx

@@ -4,15 +4,15 @@ import {IconPlus} from "@tabler/icons-react"
 
 import {openModal} from "@/components/modals/Generic"
 import {updateUserDetails} from "@/slices/userDetails"
-import {fetchGroups} from "@/features/groups/slice"
+//import {fetchGroups} from "@/features/groups/slice"
 import NewUserModal from "./NewUserModal"
 import type {UserDetails} from "@/types"
 
 export default function NewButton() {
   const dispatch = useDispatch()
 
   const onClick = () => {
-    dispatch(fetchGroups({pageNumber: 1, pageSize: 999}))
+    //dispatch(fetchGroups({pageNumber: 1, pageSize: 999}))
 
     openModal<any, {userId: string}>(NewUserModal)
       .then((user: UserDetails) => {

ui2/src/features/api/slice.ts

@@ -1,9 +1,15 @@
 import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react"
 import {getBaseURL} from "@/utils"
+import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
 
-import type {Group} from "@/types"
+import type {Group, Paginated} from "@/types"
 import type {RootState} from "@/app/types"
 
+type GetGroupsArgs = {
+  page_number?: number
+  page_size?: number
+}
+
 const baseQuery = fetchBaseQuery({
   baseUrl: `${getBaseURL()}api`,
   prepareHeaders: (headers, {getState}) => {
@@ -40,9 +46,14 @@ const baseQuery = fetchBaseQuery({
 export const apiSlice = createApi({
   reducerPath: "api",
   baseQuery: baseQuery,
+  keepUnusedDataFor: 60,
   endpoints: builder => ({
-    getGroups: builder.query<Group[], void>({
-      query: () => "/groups/"
+    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}`
     })
   })
 })

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

@@ -1,13 +1,12 @@
-import {Center, Stack, Table, Checkbox} from "@mantine/core"
+import {useState} from "react"
+import {Center, Stack, Table, Checkbox, Loader} from "@mantine/core"
 import {useDispatch, useSelector} from "react-redux"
 import {
-  selectAllGroups,
   selectionAddMany,
   selectSelectedIds,
   clearSelection,
-  fetchGroups,
-  selectPagination,
-  selectLastPageSize
+  selectLastPageSize,
+  lastPageSizeUpdate
 } from "@/features/groups/slice"
 import {useGetGroupsQuery} from "@/features/api/slice"
 
@@ -17,39 +16,57 @@ import ActionButtons from "./ActionButtons"
 
 export default function GroupsList() {
   const selectedIds = useSelector(selectSelectedIds)
-  //const groups = useSelector(selectAllGroups)
-  const {
-    data: groups = [],
-    isLoading,
-    isSuccess,
-    isError,
-    error
-  } = useGetGroupsQuery()
   const dispatch = useDispatch()
-  const pagination = useSelector(selectPagination)
   const lastPageSize = useSelector(selectLastPageSize)
+  //const pag = useSelector(selectPagination)
+  const [page, setPage] = useState<number>(1)
+  const [pageSize, setPageSize] = useState<number>(lastPageSize)
+
+  const {data, isLoading, isSuccess, isError, error} = useGetGroupsQuery({
+    page_number: page,
+    page_size: pageSize
+  })
 
   const onCheckAll = (checked: boolean) => {
+    if (!data) {
+      console.log(`undefined data`)
+      return
+    }
+
     if (checked) {
       // check all/select all group items
-      dispatch(selectionAddMany(groups.map(i => i.id)))
+      dispatch(selectionAddMany(data.items.map(i => i.id)))
     } else {
       // uncheck all/unselect all group items
       dispatch(clearSelection())
     }
   }
 
   const onPageNumberChange = (page: number) => {
-    dispatch(fetchGroups({pageNumber: page, pageSize: pagination?.pageSize}))
+    setPage(page)
   }
 
   const onPageSizeChange = (value: string | null) => {
     if (value) {
-      dispatch(fetchGroups({pageNumber: 1, pageSize: parseInt(value)}))
+      const pageSize = parseInt(value)
+
+      dispatch(lastPageSizeUpdate(pageSize))
+      setPageSize(pageSize)
     }
   }
 
-  if (groups.length == 0) {
+  if (isLoading || !data) {
+    return (
+      <Stack>
+        <ActionButtons />
+        <Center>
+          <Loader type="bars" />
+        </Center>
+      </Stack>
+    )
+  }
+
+  if (data.items.length == 0) {
     return (
       <div>
         <ActionButtons />
@@ -58,9 +75,7 @@ export default function GroupsList() {
     )
   }
 
-  return <>Groups</>
-  /*
-  const groupRows = groups.map(g => <GroupRow key={g.id} group={g} />)
+  const groupRows = data.items.map(g => <GroupRow key={g.id} group={g} />)
 
   return (
     <Stack>
@@ -70,7 +85,7 @@ export default function GroupsList() {
           <Table.Tr>
             <Table.Th>
               <Checkbox
-                checked={groups.length == selectedIds.length}
+                checked={data.items.length == selectedIds.length}
                 onChange={e => onCheckAll(e.currentTarget.checked)}
               />
             </Table.Th>
@@ -80,14 +95,17 @@ export default function GroupsList() {
         <Table.Tbody>{groupRows}</Table.Tbody>
       </Table>
       <Pagination
-        pagination={pagination}
+        pagination={{
+          pageNumber: page,
+          pageSize: pageSize,
+          numPages: data.num_pages
+        }}
         onPageNumberChange={onPageNumberChange}
         onPageSizeChange={onPageSizeChange}
         lastPageSize={lastPageSize}
       />
     </Stack>
   )
-    */
 }
 
 function Empty() {

ui2/src/features/groups/slice.ts

@@ -9,7 +9,8 @@ import axios from "@/httpClient"
 import {RootState} from "@/app/types"
 import type {NewGroup, Group, Paginated, PaginationType} from "@/types"
 import type {SliceStateStatus, SliceStateError} from "@/types"
-import {INITIAL_PAGE_SIZE} from "@/cconstants"
+import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
+import {apiSlice} from "../api/slice"
 
 export type ExtraStateType = {
   status: SliceStateStatus
@@ -24,7 +25,7 @@ export const extraState: ExtraStateType = {
   error: null,
   selectedIds: [],
   pagination: null,
-  lastPageSize: INITIAL_PAGE_SIZE
+  lastPageSize: PAGINATION_DEFAULT_ITEMS_PER_PAGES
 }
 
 const groupsAdapter = createEntityAdapter({
@@ -50,18 +51,12 @@ const groupsSlice = createSlice({
     },
     clearSelection: state => {
       state.selectedIds = []
+    },
+    lastPageSizeUpdate: (state, action: PayloadAction<number>) => {
+      state.lastPageSize = action.payload
     }
   },
   extraReducers(builder) {
-    builder.addCase(fetchGroups.fulfilled, (state, action) => {
-      groupsAdapter.setAll(state, action.payload.items)
-      state.pagination = {
-        numPages: action.payload.num_pages,
-        pageNumber: action.payload.page_number,
-        pageSize: action.payload.page_size
-      }
-      state.lastPageSize = action.payload.page_size
-    })
     builder.addCase(fetchGroup.fulfilled, (state, action) => {
       const newGroup = action.payload
       const newGroupID = action.payload.id
@@ -73,30 +68,20 @@ const groupsSlice = createSlice({
       state.entities[group.id] = group
     })
     builder.addCase(removeGroups.fulfilled, groupsAdapter.removeMany)
-  }
-})
-
-type fetchGroupsArgs = {
-  pageNumber?: number
-  pageSize?: number
-}
-
-export const fetchGroups = createAsyncThunk<Paginated<Group>, fetchGroupsArgs>(
-  "groups/fetchGroups",
-  async (args: fetchGroupsArgs) => {
-    const pageNumber = args.pageNumber || 1
-    const pageSize = args.pageSize || INITIAL_PAGE_SIZE
-
-    const response = await axios.get("/api/groups/", {
-      params: {
-        page_size: pageSize,
-        page_number: pageNumber
+    builder.addMatcher(
+      apiSlice.endpoints.getGroups.matchFulfilled,
+      (state, action) => {
+        const payload: Paginated<Group> = action.payload
+        state.pagination = {
+          pageNumber: payload.page_number,
+          pageSize: payload.page_size,
+          numPages: payload.num_pages
+        }
+        state.lastPageSize = payload.page_size
       }
-    })
-    const data = response.data as Paginated<Group>
-    return data
+    )
   }
-)
+})
 
 export const fetchGroup = createAsyncThunk<Group, number>(
   "groups/fetchGroup",
@@ -138,8 +123,13 @@ export const removeGroups = createAsyncThunk<number[], number[]>(
   }
 )
 
-export const {selectionAdd, selectionAddMany, selectionRemove, clearSelection} =
-  groupsSlice.actions
+export const {
+  selectionAdd,
+  selectionAddMany,
+  selectionRemove,
+  clearSelection,
+  lastPageSizeUpdate
+} = groupsSlice.actions
 export default groupsSlice.reducer
 
 export const {selectAll: selectAllGroups} =