add search stats

src/app/ui/search/search-stats.tsx

@@ -1,4 +1,26 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query';
+import { getSearchStats } from '@/app/actions/searchActions';
+import { useEffect } from 'react';
+
 export function SearchStats() {
+	const {
+		data: userSearchData,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userSearchData'],
+		queryFn: () => {
+			return getSearchStats();
+		},
+	});
+
+	useEffect(() => {
+		console.log(userSearchData);
+	}, [userSearchData]);
+
 	return (
 		<div className="stats-search">
 			<div className="stats-title">
@@ -7,23 +29,37 @@ export function SearchStats() {
 
 			<div className="stat-item">
 				<span className="stat-label">Изображения</span>
-				<span className="stat-value">0</span>
+				<span className="stat-value">
+					{userSearchData?.image?.count ? userSearchData?.image?.count : 0}
+				</span>
 			</div>
+
 			<div className="stat-item">
 				<span className="stat-label">Видео</span>
-				<span className="stat-value">0</span>
+				<span className="stat-value">
+					{userSearchData?.video?.count ? userSearchData?.video?.count : 0}
+				</span>
 			</div>
+
 			<div className="stat-item">
 				<span className="stat-label">Аудио</span>
-				<span className="stat-value">0</span>
+				<span className="stat-value">
+					{userSearchData?.audio?.count ? userSearchData?.audi?.count : 0}
+				</span>
 			</div>
+
 			<div className="stat-item">
 				<span className="stat-label">Документы</span>
-				<span className="stat-value">0</span>
+				<span className="stat-value">
+					{userSearchData?.document?.count ? userSearchData?.document?.count : 0}
+				</span>
 			</div>
+
 			<div className="stat-item">
 				<span className="stat-label">Всего поисков</span>
-				<span className="stat-value">0</span>
+				<span className="stat-value">
+					{userSearchData?.allCountForPeriod ? userSearchData?.allCountForPeriod : 0}
+				</span>
 			</div>
 		</div>
 	)