feat: implement useUrlState hook for managing URL-based state in admin pages
- Refactor multiple admin pages (BlogsPage, ClinicsPage, DoctorsPage, etc.) to utilize the new useUrlState hook for managing pagination, search, and filter states via URL. - Ensure that the state persists in the URL, allowing users to return to the same state when navigating back from detail pages. - Update relevant components to handle state changes appropriately and maintain clean URLs by removing default values. - Add SlotPicker component for selecting appointment slots based on availability. - Create tests for useUrlState to validate its functionality and ensure correct behavior when interacting with the URL. - Update API documentation to reflect changes in appointment creation and slot selection processes.
This commit is contained in:
@@ -6,6 +6,7 @@ import {
|
||||
BanknotesIcon, ClockIcon, CreditCardIcon, ArrowDownTrayIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import { useUrlState, pageOf } from '../hooks/useUrlState';
|
||||
import type { PaginatedResponse } from '../lib/api';
|
||||
import type { Payment } from '../types';
|
||||
import { formatDate, formatRial, maskMobile } from '../lib/utils';
|
||||
@@ -24,9 +25,14 @@ const STATUS_FILTERS = [
|
||||
|
||||
export default function PaymentsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [page, setPage] = useState(1);
|
||||
const [search, setSearch] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
// وضعیت لیست در URL میماند تا «بازگشت» از صفحهٔ جزئیات، همین فیلترها و صفحه را برگرداند.
|
||||
const [urlState, setUrlState] = useUrlState({ page: '1', search: '', status: '' });
|
||||
const page = pageOf(urlState.page);
|
||||
const search = urlState.search;
|
||||
const statusFilter = urlState.status;
|
||||
const setPage = (p: number) => setUrlState({ page: String(p) });
|
||||
const setSearch = (v: string) => setUrlState({ search: v, page: '1' });
|
||||
const setStatusFilter = (v: string) => setUrlState({ status: v, page: '1' });
|
||||
const limit = 15;
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
|
||||
Reference in New Issue
Block a user