Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { useI18n } from '@/modules/i18n/i18n.provider';
import { useConfirmModal } from '@/modules/shared/confirm';
import { useI18nApiErrors } from '@/modules/shared/http/composables/i18n-api-errors';
import { createParamSynchronizedPagination } from '@/modules/shared/pagination/query-synchronized-pagination';
import { buildLocalStorageKey } from '@/modules/shared/signals/persistence/persistence.models';
import { queryClient } from '@/modules/shared/query/query-client';
import { Button } from '@/modules/ui/components/button';
import {
Expand All @@ -34,7 +35,9 @@ export const DocumentViewPage: Component = () => {
const { t } = useI18n();
const { confirm } = useConfirmModal();
const { getErrorMessage } = useI18nApiErrors({ t });
const [getPagination, setPagination] = createParamSynchronizedPagination();
const [getPagination, setPagination] = createParamSynchronizedPagination({
localStorageKey: buildLocalStorageKey('document-views', 'pageSize'),
});
const [getIsUpdateOpen, setIsUpdateOpen] = createSignal(false);

const deleteDocumentViewConfirm = async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useConfirmModal } from '@/modules/shared/confirm';
import { createParamSynchronizedPagination } from '@/modules/shared/pagination/query-synchronized-pagination';
import { queryClient } from '@/modules/shared/query/query-client';
import { createParamSynchronizedSignal } from '@/modules/shared/signals/params';
import { buildLocalStorageKey } from '@/modules/shared/signals/persistence/persistence.models';
import { resolveSetterValue } from '@/modules/shared/signals/setters';
import { cn } from '@/modules/shared/style/cn';
import { useDebounce } from '@/modules/shared/utils/timing';
Expand Down Expand Up @@ -44,7 +45,9 @@ export const DocumentsPage: Component = () => {
defaultValue: '',
});
const debouncedSearchQuery = useDebounce(getSearchQuery, 300);
const [getPagination, setPagination] = createParamSynchronizedPagination();
const [getPagination, setPagination] = createParamSynchronizedPagination({
localStorageKey: buildLocalStorageKey('documents', 'pageSize'),
});
const [getRowSelection, setRowSelection] = createSignal<RowSelectionState>({});
const [getSelectAllMatchingQuery, setSelectAllMatchingQuery] = createSignal(false);
const [getTagDialogOpen, setTagDialogOpen] = createSignal(false);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
} from '@/modules/documents/documents.services';
import { useI18n } from '@/modules/i18n/i18n.provider';
import { createParamSynchronizedPagination } from '@/modules/shared/pagination/query-synchronized-pagination';
import { buildLocalStorageKey } from '@/modules/shared/signals/persistence/persistence.models';
import { Button } from '@/modules/ui/components/button';

export const OrganizationPage: Component = () => {
Expand All @@ -26,6 +27,7 @@ export const OrganizationPage: Component = () => {
const [getPagination, setPagination] = createParamSynchronizedPagination({
defaultPageSize: 100,
defaultPageIndex: 0,
localStorageKey: buildLocalStorageKey('organizations', 'pageSize'),
});

const documentsQuery = useQuery(() => ({
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
import { describe, expect, test, vi, beforeEach } from 'vitest';
import { createRoot } from 'solid-js';
import { createParamSynchronizedPagination } from './query-synchronized-pagination';

const searchParamsStore = { page: undefined as string | undefined, pageSize: undefined as string | undefined };
const setSearchParamsMock = vi.fn((params) => {
Object.assign(searchParamsStore, params);
});

const localStorageMock = (() => {
let store: Record<string, string> = {};
return {
getItem(key: string) {
return store[key] || null;
},
setItem(key: string, value: string) {
store[key] = value.toString();
},
clear() {
store = {};
},
removeItem(key: string) {
delete store[key];
},
};
})();
Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock });

vi.mock('@solidjs/router', () => ({
useSearchParams: () => [searchParamsStore, setSearchParamsMock],
}));

describe('createParamSynchronizedPagination', () => {
beforeEach(() => {
searchParamsStore.page = undefined;
searchParamsStore.pageSize = undefined;
localStorage.clear();
setSearchParamsMock.mockClear();
});

test('should return default values when URL and localStorage are empty', () => {
createRoot((dispose) => {
const [getPagination] = createParamSynchronizedPagination();
expect(getPagination()).toEqual({ pageIndex: 0, pageSize: 15 });
dispose();
});
});

test('should prioritize URL parameters over localStorage', () => {
localStorage.setItem('papra:documents:pageSize', '50');
searchParamsStore.pageSize = '100';

createRoot((dispose) => {
const [getPagination] = createParamSynchronizedPagination({
localStorageKey: 'papra:documents:pageSize',
});
expect(getPagination()).toEqual({ pageIndex: 0, pageSize: 100 });
dispose();
});
});

test('should fallback to localStorage when URL parameter is missing', () => {
localStorage.setItem('papra:documents:pageSize', '50');

return new Promise<void>((resolve) => {
createRoot((dispose) => {
const [getPagination] = createParamSynchronizedPagination({
localStorageKey: 'papra:documents:pageSize',
});
expect(getPagination()).toEqual({ pageIndex: 0, pageSize: 50 });

setTimeout(() => {
// Assert that the effect synchronizes this missing parameter back to the URL
expect(setSearchParamsMock).toHaveBeenCalledWith(
{
pageSize: '50',
},
{ replace: true }
);
dispose();
resolve();
}, 0);
});
});
});

test('should reject invalid values in localStorage and fallback to default', () => {
localStorage.setItem('papra:documents:pageSize', '-5');
createRoot((dispose) => {
const [getPagination] = createParamSynchronizedPagination({
localStorageKey: 'papra:documents:pageSize',
});
expect(getPagination()).toEqual({ pageIndex: 0, pageSize: 15 });
dispose();
});

localStorage.setItem('papra:documents:pageSize', 'abc');
createRoot((dispose) => {
const [getPagination] = createParamSynchronizedPagination({
localStorageKey: 'papra:documents:pageSize',
});
expect(getPagination()).toEqual({ pageIndex: 0, pageSize: 15 });
dispose();
});
});

test('should reject invalid URL parameters and fallback to localStorage/default', () => {
localStorage.setItem('papra:documents:pageSize', '50');
searchParamsStore.pageSize = '-100';

createRoot((dispose) => {
const [getPagination] = createParamSynchronizedPagination({
localStorageKey: 'papra:documents:pageSize',
});
expect(getPagination()).toEqual({ pageIndex: 0, pageSize: 50 });
dispose();
});
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.

test('should write to localStorage and URL when setPagination is called', () => {
createRoot((dispose) => {
const [_, setPagination] = createParamSynchronizedPagination({
localStorageKey: 'papra:documents:pageSize',
});

setPagination({ pageIndex: 1, pageSize: 50 });

expect(localStorage.getItem('papra:documents:pageSize')).toBe('50');
expect(setSearchParamsMock).toHaveBeenCalledWith(
{
page: 1,
pageSize: 50,
},
{ replace: true }
);
dispose();
});
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Accessor, Setter } from 'solid-js';
import { createEffect, type Accessor, type Setter } from 'solid-js';
import type { Pagination } from './pagination.types';
import { useSearchParams } from '@solidjs/router';
import { resolveSetterValue } from '../signals/setters';
Expand All @@ -9,24 +9,46 @@ export function createParamSynchronizedPagination({
defaultPageSize = 15,
pageIndexParamName = 'page',
pageSizeParamName = 'pageSize',
localStorageKey,
}: {
defaultPageIndex?: number;
defaultPageSize?: number;
pageIndexParamName?: string;
pageSizeParamName?: string;
localStorageKey?: string;
} = {}) {
const [searchParams, setSearchParams] = useSearchParams();

const getPagination: Accessor<Pagination> = () => {
const pageIndex = Number(asSingleParam(searchParams[pageIndexParamName]) ?? defaultPageIndex);
const pageSize = Number(asSingleParam(searchParams[pageSizeParamName]) ?? defaultPageSize);
const urlPageIndex = Number(asSingleParam(searchParams[pageIndexParamName]));
const pageIndex =
Number.isInteger(urlPageIndex) && urlPageIndex >= 0 ? urlPageIndex : defaultPageIndex;

let initialPageSize = defaultPageSize;
if (localStorageKey) {
const stored = localStorage.getItem(localStorageKey);
if (stored !== null) {
const parsed = Number(stored);
if (Number.isInteger(parsed) && parsed > 0) {
initialPageSize = parsed;
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}
}

const urlPageSize = Number(asSingleParam(searchParams[pageSizeParamName]));
const pageSize =
Number.isInteger(urlPageSize) && urlPageSize > 0 ? urlPageSize : initialPageSize;

return { pageIndex, pageSize };
};

const setPagination: Setter<Pagination> = (valueOrUpdater) => {
const value = resolveSetterValue(valueOrUpdater, getPagination());

if (localStorageKey) {
localStorage.setItem(localStorageKey, String(value.pageSize));
}

setSearchParams(
{
[pageIndexParamName]: value.pageIndex === defaultPageIndex ? undefined : value.pageIndex,
Expand All @@ -36,5 +58,29 @@ export function createParamSynchronizedPagination({
);
};

createEffect(() => {
const pageIndex = searchParams[pageIndexParamName];
const pageSize = searchParams[pageSizeParamName];

const currentPagination = getPagination();
const nextParams: Record<string, string | undefined> = {};
let needsUpdate = false;

if (pageIndex === undefined && currentPagination.pageIndex !== defaultPageIndex) {
nextParams[pageIndexParamName] = String(currentPagination.pageIndex);
needsUpdate = true;
}

if (pageSize === undefined && currentPagination.pageSize !== defaultPageSize) {
nextParams[pageSizeParamName] = String(currentPagination.pageSize);
needsUpdate = true;
}

if (needsUpdate) {
setSearchParams(nextParams, { replace: true });
}
});

return [getPagination, setPagination] as const;
}