File size: 3,414 Bytes
e7abd9e c36214e e7abd9e c36214e e7abd9e c36214e e7abd9e c36214e e7abd9e c36214e e7abd9e c36214e e7abd9e c36214e e7abd9e 68a05b7 e7abd9e dd9222d 4cc78af e7abd9e dd9222d e7abd9e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import { useMemo, useRef, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import { useLeaderboard } from "../context/LeaderboardContext";
import { useDataProcessing } from "../components/Table/hooks/useDataProcessing";
export const useLeaderboardData = () => {
const queryClient = useQueryClient();
const [searchParams] = useSearchParams();
const isInitialLoadRef = useRef(true);
const { data, isLoading, error } = useQuery({
queryKey: ["leaderboard"],
queryFn: async () => {
console.log("🔄 Starting API fetch attempt...");
try {
console.log("🌐 Fetching from API...");
const response = await fetch("/api/leaderboard/formatted");
console.log("📡 API Response status:", response.status);
if (!response.ok) {
const errorText = await response.text();
console.error("🚨 API Error:", {
status: response.status,
statusText: response.statusText,
body: errorText,
});
throw new Error(`HTTP error! status: ${response.status}`);
}
const newData = await response.json();
console.log("📥 Received data size:", JSON.stringify(newData).length);
return newData;
} catch (error) {
console.error("🔥 Detailed error:", {
name: error.name,
message: error.message,
stack: error.stack,
});
throw error;
}
},
refetchOnWindowFocus: false,
enabled: isInitialLoadRef.current || !!searchParams.toString(),
});
useMemo(() => {
if (data && isInitialLoadRef.current) {
console.log("🎯 Initial load complete");
isInitialLoadRef.current = false;
}
}, [data]);
return {
data,
isLoading,
error,
refetch: () => queryClient.invalidateQueries(["leaderboard"]),
};
};
export const useLeaderboardProcessing = () => {
const { state, actions } = useLeaderboard();
const [sorting, setSorting] = useState([
{ id: "model.average_score", desc: true },
]);
const memoizedData = useMemo(() => state.models, [state.models]);
console.log({memoizedData});
const memoizedFilters = useMemo(
() => ({
search: state.filters.search,
paramsRange: state.filters.paramsRange,
booleanFilters: state.filters.booleanFilters,
isOfficialProviderActive: state.filters.isOfficialProviderActive,
}),
[
state.filters.search,
state.filters.paramsRange,
state.filters.booleanFilters,
state.filters.isOfficialProviderActive,
]
);
const {
table,
minAverage,
maxAverage,
getColorForValue,
processedData,
filteredData,
columns,
columnVisibility,
} = useDataProcessing(
memoizedData,
memoizedFilters.search,
memoizedFilters.paramsRange,
memoizedFilters.booleanFilters,
sorting,
state.display.rankingMode,
state.display.averageMode,
state.display.visibleColumns,
state.display.scoreDisplay,
state.pinnedModels,
actions.togglePinnedModel,
setSorting,
memoizedFilters.isOfficialProviderActive
);
return {
table,
minAverage,
maxAverage,
getColorForValue,
processedData,
filteredData,
columns,
columnVisibility,
loading: state.loading,
error: state.error,
};
};
|