remember last page number (#397)

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

ui2/src/components/users/List.tsx

@@ -50,7 +50,7 @@ export default function UsersList() {
             </Table.Th>
             <Table.Th>Username</Table.Th>
             <Table.Th>Email</Table.Th>
-            <Table.Th>UUID</Table.Th>
+            <Table.Th>ID</Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>{groupRows}</Table.Tbody>

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}
         />
       </Group>

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
 }

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<string>
   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
+}