diff --git a/ui2/src/cconstants.ts b/ui2/src/cconstants.ts index ea9756a3e..1d0c89dac 100644 --- a/ui2/src/cconstants.ts +++ b/ui2/src/cconstants.ts @@ -43,3 +43,4 @@ export const STORAGE_KEY_PAGINATION_MITEMS_PER_PAGE = "mitems_per_page" export const STORAGE_KEY_PAGINATION_SITEMS_PER_PAGE = "sitems_per_page" export const PAGINATION_PAGE_SIZES = ["5", "10", "15", "25", "50"] +export const INITIAL_PAGE_SIZE = 5 diff --git a/ui2/src/components/users/List.tsx b/ui2/src/components/users/List.tsx index 60fb3ff43..cce243551 100644 --- a/ui2/src/components/users/List.tsx +++ b/ui2/src/components/users/List.tsx @@ -50,7 +50,7 @@ export default function UsersList() { Username Email - UUID + ID {groupRows} diff --git a/ui2/src/components/users/Pagination.tsx b/ui2/src/components/users/Pagination.tsx index 2bb071196..0a619534d 100644 --- a/ui2/src/components/users/Pagination.tsx +++ b/ui2/src/components/users/Pagination.tsx @@ -1,12 +1,13 @@ import {Pagination, Skeleton, Group, Select} from "@mantine/core" import {useDispatch, useSelector} from "react-redux" -import {selectPagination, fetchUsers} from "@/slices/users" +import {selectPagination, fetchUsers, selectLastPageSize} from "@/slices/users" import classes from "./Pagination.module.css" import {PAGINATION_PAGE_SIZES} from "@/cconstants" export default function UserPagination() { const dispatch = useDispatch() const pagination = useSelector(selectPagination) + const lastPageSize = useSelector(selectLastPageSize) const onPageNumberChange = (page: number) => { dispatch(fetchUsers({pageNumber: page, pageSize: pagination?.pageSize})) @@ -26,6 +27,7 @@ export default function UserPagination() { className={classes.select} value={`${pagination.pageSize}`} onChange={onPageSizeChange} + defaultValue={`${lastPageSize}`} data={PAGINATION_PAGE_SIZES} /> diff --git a/ui2/src/pages/users/List.tsx b/ui2/src/pages/users/List.tsx index 56aeae1a3..d4d64ab8d 100644 --- a/ui2/src/pages/users/List.tsx +++ b/ui2/src/pages/users/List.tsx @@ -7,7 +7,11 @@ export default function UsersListPage() { } export async function loader() { - await store.dispatch(fetchUsers({pageNumber: 1})) + const state = store.getState() + + await store.dispatch( + fetchUsers({pageNumber: 1, pageSize: state.users.lastPageSize}) + ) return null } diff --git a/ui2/src/slices/users.ts b/ui2/src/slices/users.ts index 38d8e77fa..5695a49b8 100644 --- a/ui2/src/slices/users.ts +++ b/ui2/src/slices/users.ts @@ -8,8 +8,8 @@ import axios from "@/httpClient" import {RootState} from "@/app/types" import type {CreateUser, User, UserDetails, Paginated} from "@/types" - import type {SliceStateStatus, SliceStateError} from "@/types" +import {INITIAL_PAGE_SIZE} from "@/cconstants" export type Pagination = { numPages: number @@ -22,17 +22,17 @@ export type ExtraStateType = { error: SliceStateError selectedIds: Array pagination: Pagination | null + lastPageSize: number } export const extraState: ExtraStateType = { status: "idle", error: null, selectedIds: [], - pagination: null + pagination: null, + lastPageSize: INITIAL_PAGE_SIZE } -export const INITIAL_PAGE_SIZE = 5 - const usersAdapter = createEntityAdapter({ selectId: (user: User) => user.id, sortComparer: (u1, u2) => u1.username.localeCompare(u2.username) @@ -66,6 +66,7 @@ const usersSlice = createSlice({ pageNumber: action.payload.page_number, pageSize: action.payload.page_size } + state.lastPageSize = action.payload.page_size }) builder.addCase(fetchUser.fulfilled, (state, action) => { const newUser = action.payload @@ -175,3 +176,7 @@ export const selectUsersByIds = (state: RootState, userIds: string[]) => { export const selectPagination = (state: RootState): Pagination | null => { return state.users.pagination } + +export const selectLastPageSize = (state: RootState): number => { + return state.users.lastPageSize +}