perf: improve page loading times by limiting user fetching
This commit is contained in:
@@ -36,11 +36,13 @@ const StatPage = () => {
|
|||||||
const [topUserData, setTopUserData] = useState<TopUser[]>([]);
|
const [topUserData, setTopUserData] = useState<TopUser[]>([]);
|
||||||
const [wordFrequencyData, setWordFrequencyData] = useState([]);
|
const [wordFrequencyData, setWordFrequencyData] = useState([]);
|
||||||
|
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const beforeDateRef = useRef<HTMLInputElement>(null);
|
||||||
|
const afterDateRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
const getStats = () => {
|
const getStats = () => {
|
||||||
setError("");
|
setError("");
|
||||||
//setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
Promise.all([
|
Promise.all([
|
||||||
axios.get("http://localhost:5000/stats/time"),
|
axios.get("http://localhost:5000/stats/time"),
|
||||||
@@ -49,11 +51,11 @@ const StatPage = () => {
|
|||||||
])
|
])
|
||||||
.then(([timeRes, userRes, wordsRes]) => {
|
.then(([timeRes, userRes, wordsRes]) => {
|
||||||
const eventsPerDay = Array.isArray(timeRes.data?.events_per_day)
|
const eventsPerDay = Array.isArray(timeRes.data?.events_per_day)
|
||||||
? timeRes.data.events_per_day
|
? timeRes.data.events_per_day.filter((d: any) => new Date(d.date) >= new Date("2026-01-10"))
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
const topUsers = Array.isArray(userRes.data?.top_users)
|
const topUsers = Array.isArray(userRes.data?.top_users)
|
||||||
? userRes.data.top_users
|
? userRes.data.top_users.slice(0, 100)
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
const weekdayHourHeatmap = Array.isArray(timeRes.data?.weekday_hour_heatmap)
|
const weekdayHourHeatmap = Array.isArray(timeRes.data?.weekday_hour_heatmap)
|
||||||
@@ -65,9 +67,7 @@ const StatPage = () => {
|
|||||||
: [];
|
: [];
|
||||||
|
|
||||||
setPostsPerDay(
|
setPostsPerDay(
|
||||||
eventsPerDay.filter(
|
eventsPerDay
|
||||||
(d: any) => new Date(d.date) >= new Date("2026-01-10")
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
setTopUserData(topUsers);
|
setTopUserData(topUsers);
|
||||||
@@ -78,22 +78,30 @@ const StatPage = () => {
|
|||||||
value: d.count,
|
value: d.count,
|
||||||
}))
|
}))
|
||||||
);
|
);
|
||||||
|
|
||||||
})
|
})
|
||||||
.catch((e) => setError("Failed to load statistics: " + String(e)))
|
.catch((e) => setError("Failed to load statistics: " + String(e)))
|
||||||
//.finally(() => setLoading(false));
|
.finally(() => setLoading(false));
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSearch = () => {
|
const onSubmitFilters = () => {
|
||||||
const query = inputRef.current?.value ?? "";
|
const query = searchInputRef.current?.value ?? "";
|
||||||
axios.post("http://localhost:5000/filter/search", {
|
const startDate = beforeDateRef.current?.value;
|
||||||
query: query
|
const endDate = afterDateRef.current?.value;
|
||||||
})
|
|
||||||
|
Promise.all([
|
||||||
|
axios.post("http://localhost:5000/filter/search", {
|
||||||
|
query: query
|
||||||
|
}),
|
||||||
|
//axios.post("http://localhost:5000/filter/time", {
|
||||||
|
//start: startDate,
|
||||||
|
//end: endDate
|
||||||
|
//})
|
||||||
|
])
|
||||||
.then(() => {
|
.then(() => {
|
||||||
getStats();
|
getStats();
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
setError(e);
|
setError("Failed to load filters: " + e.response);
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -108,6 +116,7 @@ const StatPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setError("");
|
||||||
getStats();
|
getStats();
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
@@ -121,12 +130,26 @@ return (
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="query"
|
id="query"
|
||||||
ref={inputRef}
|
ref={searchInputRef}
|
||||||
placeholder="Search events..."
|
placeholder="Search events..."
|
||||||
style={styles.input}
|
style={styles.input}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button onClick={onSearch} style={styles.buttonPrimary}>
|
<input
|
||||||
|
type="date"
|
||||||
|
ref={beforeDateRef}
|
||||||
|
placeholder="Search before date"
|
||||||
|
style={styles.input}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
ref={afterDateRef}
|
||||||
|
placeholder="Search before date"
|
||||||
|
style={styles.input}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button onClick={onSubmitFilters} style={styles.buttonPrimary}>
|
||||||
Search
|
Search
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user