From d92545f0fda412d9370b3f4400138a8b7e4aaf21 Mon Sep 17 00:00:00 2001 From: Eugen Ciur Date: Sat, 31 Aug 2024 07:51:44 +0200 Subject: [PATCH] Groups query works! --- ui2/src/components/users/EditButton.tsx | 4 +- ui2/src/components/users/NewButton.tsx | 4 +- ui2/src/features/api/slice.ts | 17 +++++- ui2/src/features/groups/components/List.tsx | 66 +++++++++++++-------- ui2/src/features/groups/slice.ts | 60 ++++++++----------- 5 files changed, 85 insertions(+), 66 deletions(-) diff --git a/ui2/src/components/users/EditButton.tsx b/ui2/src/components/users/EditButton.tsx index 81f559579..d30778562 100644 --- a/ui2/src/components/users/EditButton.tsx +++ b/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(EditUserModal, { userId: userId! diff --git a/ui2/src/components/users/NewButton.tsx b/ui2/src/components/users/NewButton.tsx index c9588fcbc..da80afb3f 100644 --- a/ui2/src/components/users/NewButton.tsx +++ b/ui2/src/components/users/NewButton.tsx @@ -4,7 +4,7 @@ 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" @@ -12,7 +12,7 @@ export default function NewButton() { const dispatch = useDispatch() const onClick = () => { - dispatch(fetchGroups({pageNumber: 1, pageSize: 999})) + //dispatch(fetchGroups({pageNumber: 1, pageSize: 999})) openModal(NewUserModal) .then((user: UserDetails) => { diff --git a/ui2/src/features/api/slice.ts b/ui2/src/features/api/slice.ts index 0848f9c7e..63f4c60a5 100644 --- a/ui2/src/features/api/slice.ts +++ b/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({ - query: () => "/groups/" + getGroups: builder.query, GetGroupsArgs | void>({ + query: ({ + page_number = 1, + page_size = PAGINATION_DEFAULT_ITEMS_PER_PAGES + }: GetGroupsArgs) => + `/groups/?page_number=${page_number}&page_size=${page_size}` }) }) }) diff --git a/ui2/src/features/groups/components/List.tsx b/ui2/src/features/groups/components/List.tsx index 087d0aaf2..efac70a74 100644 --- a/ui2/src/features/groups/components/List.tsx +++ b/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,22 +16,26 @@ 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(1) + const [pageSize, setPageSize] = useState(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()) @@ -40,16 +43,30 @@ export default function GroupsList() { } 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 ( + + +
+ +
+ + ) + } + + if (data.items.length == 0) { return (
@@ -58,9 +75,7 @@ export default function GroupsList() { ) } - return <>Groups - /* - const groupRows = groups.map(g => ) + const groupRows = data.items.map(g => ) return ( @@ -70,7 +85,7 @@ export default function GroupsList() { onCheckAll(e.currentTarget.checked)} /> @@ -80,14 +95,17 @@ export default function GroupsList() { {groupRows} ) - */ } function Empty() { diff --git a/ui2/src/features/groups/slice.ts b/ui2/src/features/groups/slice.ts index 5bcede6fc..66b2d9c11 100644 --- a/ui2/src/features/groups/slice.ts +++ b/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) => { + 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, 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 = 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 - return data + ) } -) +}) export const fetchGroup = createAsyncThunk( "groups/fetchGroup", @@ -138,8 +123,13 @@ export const removeGroups = createAsyncThunk( } ) -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} =