Added localstorage data

src/components/WeatherModal/WeatherModal.tsx

@@ -3,37 +3,33 @@ import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
 import SmallWeatherCard from './SmallWeatherCard';
 
-import { useCommonHooks, useQueryAPI, useWeatherAPI } from 'hooks';
+import { useCommonHooks, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import HourlyCard from './HourlyCard';
 
 export function WeatherModal({
 	current,
 	outlook,
-	points,
 	closeWeatherModal,
 	weatherModalOpened,
 }: any) {
-	const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({
-		endpoint: 'api/personalData',
-	});
+	const {
+		theme,
+		isMobile,
+		setProviderLabel,
+		setSearchValue,
+		setProviderURL,
+		currentUser,
+		currentLocation,
+	} = useCommonHooks();
 	const { data: hourly } = useWeatherAPI({
 		endpoint: 'hourly',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
+		office: currentLocation.office,
+		x: currentLocation.x,
+		y: currentLocation.y,
 	});
-	const [personal, setPersonal] = useState<any>([]);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
 	const [sunset, setSunset] = useState(100);
-	const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } =
-		useCommonHooks();
-
-	useEffect(() => {
-		if (personalData && personalIsFetched) {
-			setPersonal(personalData);
-		}
-	}, [personalData, personalIsFetched]);
 
 	useEffect(() => {
 		if (hourly) {
@@ -87,7 +83,7 @@ export function WeatherModal({
 								Weather Forecast for{' '}
 							</Text>
 							<Text fz={18} fw={600}>
-								{personal?.[0]?.physicalAddress}
+								{currentUser.physicalAddress}
 							</Text>
 						</Group>
 					</Modal.Title>

src/hooks/useCommonHooks.ts

@@ -25,6 +25,24 @@ export function useCommonHooks() {
 	const [searchValue, setSearchValue] = useState('');
 	const [providerLabel, setProviderLabel] = useState('Google Search');
 	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
+	const [currentUser, setCurrentUser] = useLocalStorage<any>({
+		key: 'user',
+		defaultValue: {
+			firstName: 'First',
+			lastName: 'Last',
+		},
+	});
+	const [currentLocation, setCurrentLocation] = useLocalStorage<any>({
+		key: 'location',
+		defaultValue: {
+			office: 'HGX',
+			station: 'KHOU',
+			x: 65,
+			y: 96,
+			lat: 29.750950134386066,
+			lon: -95.36220654860034,
+		},
+	});
 
 	const handleThemeChange = (themes: any, save: any) => {
 		const enabled = themes
@@ -59,5 +77,9 @@ export function useCommonHooks() {
 		setProviderLabel,
 		providerURL,
 		setProviderURL,
+		currentUser,
+		setCurrentUser,
+		currentLocation,
+		setCurrentLocation,
 	};
 }

src/pages/homepage/Homepage.tsx

@@ -26,7 +26,14 @@ export function Homepage() {
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);
-	const { appFilter, bookmarkFilter, isMobile } = useCommonHooks();
+	const {
+		appFilter,
+		bookmarkFilter,
+		isMobile,
+		setCurrentUser,
+		currentLocation,
+		setCurrentLocation,
+	} = useCommonHooks();
 	const dateOptions: Intl.DateTimeFormatOptions = !isMobile
 		? {
 				weekday: 'long',
@@ -36,7 +43,6 @@ export function Homepage() {
 			}
 		: {};
 	const date = new Date().toLocaleDateString('en-US', dateOptions);
-
 	useEffect(() => {
 		if (messageData && isMessagesFetched) {
 			setMessages(messageData);
@@ -44,6 +50,7 @@ export function Homepage() {
 	}, [messageData, isMessagesFetched]);
 	useEffect(() => {
 		if (personal && personalIsFetched) {
+			setCurrentUser(personal[0]);
 			setPersonalData(personal);
 		}
 	}, [personal, personalIsFetched]);
@@ -71,30 +78,31 @@ export function Homepage() {
 	const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress });
 	const { data: points } = useWeatherAPI({
 		endpoint: 'points',
-		lat: weatherMetadata?.[0].lat || 0,
-		lon: weatherMetadata?.[0].lon || 0,
+		lat: weatherMetadata?.[0].lat || currentLocation.lat,
+		lon: weatherMetadata?.[0].lon || currentLocation.lon,
 	});
 	const { data: basicWeather } = useWeatherAPI({
 		endpoint: 'baseline',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
+		office: points?.properties.gridId || currentLocation.office,
+		x: points?.properties.gridX || currentLocation.x,
+		y: points?.properties.gridY || currentLocation.y,
 	});
 	const { data: stations } = useWeatherAPI({
 		endpoint: 'stations',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
+		office: points?.properties.gridId || currentLocation.office,
+		x: points?.properties.gridX || currentLocation.x,
+		y: points?.properties.gridY || currentLocation.y,
 	});
 	const { data: weather } = useWeatherAPI({
 		endpoint: 'current',
-		station: stations?.features[0].properties.stationIdentifier,
+		station:
+			stations?.features[0].properties.stationIdentifier || currentLocation.station,
 	});
 	const { data: forecast } = useWeatherAPI({
 		endpoint: 'forecast',
-		office: points?.properties.gridId,
-		x: points?.properties.gridX,
-		y: points?.properties.gridY,
+		office: points?.properties.gridId || currentLocation.office,
+		x: points?.properties.gridX || currentLocation.x,
+		y: points?.properties.gridY || currentLocation.y,
 	});
 	const [current, setCurrent] = useState<CurrentWeather>({
 		icon: '',
@@ -145,7 +153,6 @@ export function Homepage() {
 			});
 		}
 	}, [weather, basicWeather]);
-
 	useEffect(() => {
 		if (forecast) {
 			setOutlook([
@@ -172,9 +179,16 @@ export function Homepage() {
 					windDirection: forecast.properties.periods[1].windDirection,
 				},
 			]);
+			setCurrentLocation({
+				office: points?.properties.gridId,
+				station: stations?.features[0].properties.stationIdentifier,
+				x: points?.properties.gridX,
+				y: points?.properties.gridY,
+				lat: weatherMetadata?.[0].lat,
+				lon: weatherMetadata?.[0].lon,
+			});
 		}
 	}, [forecast]);
-
 	return (
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search
@@ -182,7 +196,6 @@ export function Homepage() {
 				outlook={outlook}
 				weather={weather}
 				basicWeather={basicWeather}
-				points={points}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}
@@ -195,7 +208,6 @@ export function Homepage() {
 				outlook={outlook}
 				weather={weather}
 				basicWeather={basicWeather}
-				points={points}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}

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

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

src/pages/homepage/components/Search/Search.tsx

@@ -8,7 +8,6 @@ import { textInputClasses } from 'styles';
 export default function Search({
 	current,
 	outlook,
-	points,
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
@@ -132,7 +131,6 @@ export default function Search({
 			<WeatherModal
 				current={current}
 				outlook={outlook}
-				points={points}
 				closeWeatherModal={closeWeatherModal}
 				weatherModalOpened={weatherModalOpened}
 			/>