✨ Added stats & SQL order by on get points

app/statistics/hooks/useData.ts

@@ -8,6 +8,12 @@ import { useEffect, useState } from 'react';
 
 export const useData = () => {
 	const [userData, setUserData] = useState(null);
+	const [stats, setStats] = useState({
+		year: '00',
+		month: '00',
+		week: '00',
+		total: '00',
+	});
 
 	useEffect(() => {
 		(async () => {
@@ -31,9 +37,30 @@ export const useData = () => {
 
 			setUserData(formattedResponse);
 		})();
+
+		(async () => {
+			const token = localStorage.getItem('token');
+
+			const request = await fetch('/api/stats', {
+				method: 'GET',
+				headers: {
+					Authorization: token,
+				},
+			});
+
+			const response = await request.json();
+
+			setStats({
+				year: `${response.year}`.padStart(2, '0'),
+				month: `${response.month}`.padStart(2, '0'),
+				week: `${response.week}`.padStart(2, '0'),
+				total: `${response.total}`.padStart(2, '0'),
+			});
+		})();
 	}, []);
 
 	return {
 		userData,
+		stats,
 	};
 };

app/statistics/page.tsx

@@ -22,7 +22,7 @@ import './styles.scss';
 
 const Statistics = () => {
 	const router = useRouter();
-	const { userData } = useData();
+	const { userData, stats } = useData();
 
 	const logout = () => {
 		localStorage.clear();
@@ -63,7 +63,7 @@ const Statistics = () => {
 					<div className='statistics'>
 						<div className='statistic'>
 							<SlotCounter
-								value={'00'}
+								value={stats.week}
 								startValue={'00'}
 								startValueOnce
 								dummyCharacterCount={10}
@@ -74,7 +74,7 @@ const Statistics = () => {
 						</div>
 						<div className='statistic'>
 							<SlotCounter
-								value={'00'}
+								value={stats.month}
 								startValue={'00'}
 								startValueOnce
 								dummyCharacterCount={10}
@@ -85,7 +85,7 @@ const Statistics = () => {
 						</div>
 						<div className='statistic'>
 							<SlotCounter
-								value={'00'}
+								value={stats.year}
 								startValue={'00'}
 								startValueOnce
 								dummyCharacterCount={10}
@@ -96,7 +96,7 @@ const Statistics = () => {
 						</div>
 						<div className='statistic'>
 							<SlotCounter
-								value={'00'}
+								value={stats.total}
 								startValue={'00'}
 								startValueOnce
 								dummyCharacterCount={10}