Smooth analytics page reloads
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 34s

This commit is contained in:
Cauê Faleiros
2026-06-23 14:45:21 -03:00
parent 335d231903
commit 7d60073757
7 changed files with 233 additions and 126 deletions

View File

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { Search, ChevronRight, Filter, ChevronLeft, X } from 'lucide-react';
import type { ClientAnalyticsItem, ClientFilterOptions, ClientMetadataFilters, DateRange, RfmAnalytics, RfmClient } from '../types';
import { fetchClientAnalytics, fetchClientFilterOptions, fetchRfmAnalytics } from '../dataService';
import { fetchClientAnalytics, fetchClientFilterOptions, fetchRfmAnalytics, getCachedClientAnalytics, getCachedClientFilterOptions, getCachedRfmAnalytics } from '../dataService';
import { endOfLocalDay, formatDateParam, parseLocalDateInput, rangeForDay, rangeForLastDays, rangeForPreviousDay, startOfLocalDay } from '../dateRanges';
import type { ClientSortOption, ClientSummary } from '../analytics/clients';
@@ -114,11 +114,14 @@ const Clients = () => {
const [sortBy, setSortBy] = useState<ClientSortOption>('recent');
const [clientTypeFilter, setClientTypeFilter] = useState('all');
const [metadataFilters, setMetadataFilters] = useState<ClientMetadataFilters>(emptyClientFilters);
const [filterOptions, setFilterOptions] = useState<ClientFilterOptions>(emptyClientFilterOptions);
const initialFilterOptions = getCachedClientFilterOptions(dateRange);
const initialClientAnalytics = getCachedClientAnalytics(dateRange, emptyClientFilters);
const initialRfmAnalytics = getCachedRfmAnalytics(dateRange, emptyClientFilters);
const [filterOptions, setFilterOptions] = useState<ClientFilterOptions>(initialFilterOptions || emptyClientFilterOptions);
const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
const filterMenuRef = useRef<HTMLDivElement>(null);
const [rfmAnalytics, setRfmAnalytics] = useState<RfmAnalytics | null>(null);
const [clientAnalytics, setClientAnalytics] = useState<ClientAnalyticsItem[]>([]);
const [rfmAnalytics, setRfmAnalytics] = useState<RfmAnalytics | null>(initialRfmAnalytics || null);
const [clientAnalytics, setClientAnalytics] = useState<ClientAnalyticsItem[]>(initialClientAnalytics || []);
// Pagination state
const [currentPage, setCurrentPage] = useState(1);
@@ -128,15 +131,27 @@ const Clients = () => {
let isMounted = true;
const loadClients = async () => {
const options = await fetchClientFilterOptions(dateRange);
const clientsData = await fetchClientAnalytics(dateRange, metadataFilters);
const cachedOptions = getCachedClientFilterOptions(dateRange);
const cachedClients = getCachedClientAnalytics(dateRange, metadataFilters);
const cachedRfm = getCachedRfmAnalytics(dateRange, metadataFilters);
if (isMounted) {
if (cachedOptions) setFilterOptions(cachedOptions);
if (cachedClients) setClientAnalytics(cachedClients);
setRfmAnalytics(cachedRfm || null);
}
const filterOptionsPromise = fetchClientFilterOptions(dateRange);
const clientsPromise = fetchClientAnalytics(dateRange, metadataFilters);
const rfmPromise = fetchRfmAnalytics(dateRange, metadataFilters);
const [options, clientsData] = await Promise.all([filterOptionsPromise, clientsPromise]);
if (isMounted) {
setFilterOptions(options);
setClientAnalytics(clientsData);
setRfmAnalytics(null);
}
const rfmData = await fetchRfmAnalytics(dateRange, metadataFilters);
const rfmData = await rfmPromise;
if (isMounted) {
setRfmAnalytics(rfmData);
}