Refactored common hooks to reduce api calls

src/pages/homepage/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { WeatherModal } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
@@ -10,11 +10,19 @@ function Header({
 	current,
 	setCurrent,
 	outlook,
+	weather,
+	basicWeather,
+	points,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
 }: any) {
-	const { isMobile, weather, basicWeather, personal } = useCommonHooks();
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+
+	const [personalData, setPersonalData] = useState<any>([]);
+	const { isMobile } = useCommonHooks();
 	const [time, setTime] = useState(new Date());
 	function fixDigits(k: any) {
 		if (k < 10) {
@@ -30,6 +38,12 @@ function Header({
 		}, 1000);
 	}, []);
 
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
+
 	useEffect(() => {
 		if (weather !== undefined && basicWeather !== undefined) {
 			setCurrent({
@@ -77,10 +91,10 @@ function Header({
 					fz={isMobile ? 24 : undefined}
 				>
 					{greet
-						.replace('$firstName', personal?.[0].firstName)
-						.replace('$lastName', personal?.[0].lastName)
-						.replace('$firstName!', personal?.[0].firstName.toUpperCase())
-						.replace('$lastName!', personal?.[0].lastName.toUpperCase())}
+						.replace('$firstName', personalData?.[0]?.firstName)
+						.replace('$lastName', personalData?.[0]?.lastName)
+						.replace('$firstName!', personalData?.[0]?.firstName.toUpperCase())
+						.replace('$lastName!', personalData?.[0]?.lastName.toUpperCase())}
 				</Text>
 			</Stack>
 			<Stack
@@ -150,6 +164,7 @@ function Header({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
+				points={points}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>