Smooth analytics page reloads
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 34s
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 34s
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user