diff --git a/src/components/WeatherModal/WeatherModal.tsx b/src/components/WeatherModal/WeatherModal.tsx index 0e0078a..3741fa8 100644 --- a/src/components/WeatherModal/WeatherModal.tsx +++ b/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([]); const [hourlyForecast, setHourlyForecast] = useState([]); 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{' '} - {personal?.[0]?.physicalAddress} + {currentUser.physicalAddress} diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts index 7388a64..ba6a3d8 100644 --- a/src/hooks/useCommonHooks.ts +++ b/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({ + key: 'user', + defaultValue: { + firstName: 'First', + lastName: 'Last', + }, + }); + const [currentLocation, setCurrentLocation] = useLocalStorage({ + 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, }; } diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index 78a5fe5..9d650c4 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/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({ 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 ( ([]); 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())} diff --git a/src/pages/homepage/components/Search/Search.tsx b/src/pages/homepage/components/Search/Search.tsx index ad27062..d1dcd55 100644 --- a/src/pages/homepage/components/Search/Search.tsx +++ b/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({