diff --git a/experiments/test-axios-params.js b/experiments/test-axios-params.js new file mode 100644 index 0000000..01a9148 --- /dev/null +++ b/experiments/test-axios-params.js @@ -0,0 +1,91 @@ +// Test script to understand how axios handles empty parameters + +// Simulate the filters object from TasksPage +const filters = { + search: '', + status: '', + recurrence: '', + task_type: '', + response_type: '', + date_range: 'all', + dealership_id: null, + tags: [], +}; + +// Simulate what happens when first dealership is selected (id: 1) +const filtersWithFirstDealership = { + ...filters, + dealership_id: 1, +}; + +// Simulate what happens when dealership_id || undefined is used +const filtersWithUndefined = { + ...filters, + dealership_id: filters.dealership_id || undefined, +}; + +console.log('=== Original filters ==='); +console.log(JSON.stringify(filters, null, 2)); + +console.log('\n=== Filters with first dealership (id: 1) ==='); +console.log(JSON.stringify(filtersWithFirstDealership, null, 2)); + +console.log('\n=== Filters with dealership_id || undefined ==='); +console.log(JSON.stringify(filtersWithUndefined, null, 2)); + +// Create a mock request to see what URL would be generated +const testUrl = 'http://localhost:8000/api/v1/tasks'; + +console.log('\n=== Testing URL generation ==='); + +// Test with axios URLSearchParams +const params1 = new URLSearchParams(); +Object.entries(filters).forEach(([key, value]) => { + if (value !== null && value !== undefined && value !== '') { + if (Array.isArray(value)) { + value.forEach(v => params1.append(key, v)); + } else { + params1.append(key, value.toString()); + } + } +}); + +console.log('URL with filtered params:', `${testUrl}?${params1.toString()}`); + +// Test with all params (including empty) +const params2 = new URLSearchParams(); +Object.entries(filtersWithFirstDealership).forEach(([key, value]) => { + if (value !== null && value !== undefined) { + if (Array.isArray(value)) { + if (value.length > 0) { + value.forEach(v => params2.append(key, v)); + } + } else { + params2.append(key, value.toString()); + } + } +}); + +console.log('URL with dealership_id=1 (filtered):', `${testUrl}?${params2.toString()}`); + +// Test what axios actually sends +console.log('\n=== What axios would send (raw params) ==='); +console.log('With empty strings:', filtersWithFirstDealership); + +// Helper function to clean params +function cleanParams(params) { + const cleaned = {}; + Object.entries(params).forEach(([key, value]) => { + if (value !== null && value !== undefined && value !== '') { + if (Array.isArray(value) && value.length > 0) { + cleaned[key] = value; + } else if (!Array.isArray(value)) { + cleaned[key] = value; + } + } + }); + return cleaned; +} + +console.log('\n=== Cleaned params ==='); +console.log('Cleaned filters:', cleanParams(filtersWithFirstDealership)); diff --git a/src/pages/TasksPage.tsx b/src/pages/TasksPage.tsx index dd48983..301804d 100644 --- a/src/pages/TasksPage.tsx +++ b/src/pages/TasksPage.tsx @@ -44,10 +44,33 @@ export const TasksPage: React.FC = () => { const { data: tasksData, isLoading, error } = useQuery({ queryKey: ['tasks', filters], - queryFn: () => tasksApi.getTasks({ - ...filters, - dealership_id: filters.dealership_id || undefined, - }), + queryFn: () => { + // Clean filters: remove empty strings, null values, and empty arrays + const cleanedFilters: { + search?: string; + status?: string; + recurrence?: string; + task_type?: string; + response_type?: string; + date_range?: string; + dealership_id?: number; + tags?: string[]; + } = {}; + + Object.entries(filters).forEach(([key, value]) => { + if (value !== null && value !== undefined && value !== '') { + if (Array.isArray(value)) { + if (value.length > 0) { + cleanedFilters[key as keyof typeof cleanedFilters] = value as never; + } + } else { + cleanedFilters[key as keyof typeof cleanedFilters] = value as never; + } + } + }); + + return tasksApi.getTasks(cleanedFilters); + }, refetchInterval: 30000, });