diff --git a/package-lock.json b/package-lock.json index 3927809..51a183f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,8 +18,8 @@ "@tanstack/react-query-persist-client": "^5.83.0", "idb-keyval": "^6.2.2", "jotai": "^2.12.5", - "react": "^19.1.0", - "react-dom": "^19.1.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "react-icons": "^5.5.0", "react-router-dom": "^7.7.1", "recharts": "^3.1.0" @@ -3562,24 +3562,24 @@ "license": "MIT" }, "node_modules/react": { - "version": "19.1.0", - "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", - "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", + "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.1.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", - "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", + "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "license": "MIT", "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { - "react": "^19.1.0" + "react": "^19.1.1" } }, "node_modules/react-icons": { diff --git a/package.json b/package.json index 791baa6..2279c56 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "@tanstack/react-query-persist-client": "^5.83.0", "idb-keyval": "^6.2.2", "jotai": "^2.12.5", - "react": "^19.1.0", - "react-dom": "^19.1.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "react-icons": "^5.5.0", "react-router-dom": "^7.7.1", "recharts": "^3.1.0" diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index a7b62b0..f31c8ce 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/src/pages/homepage/Homepage.tsx @@ -19,6 +19,25 @@ import Search from './components/Search/Search'; import SettingsButton from './components/SettingsButton/SettingsButton'; export function Homepage() { + const { + appFilter, + bookmarkFilter, + isMobile, + setCurrentUser, + currentLocation, + setCurrentLocation, + } = useCommonHooks(); + const dateOptions: Intl.DateTimeFormatOptions = !isMobile + ? { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + } + : {}; + + const date = new Date().toLocaleDateString('en-US', dateOptions); + const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({ endpoint: 'api/personalData', }); @@ -29,58 +48,6 @@ export function Homepage() { } = useQueryAPI({ endpoint: 'api/displayedGreeting', }); - const { - appFilter, - bookmarkFilter, - isMobile, - setCurrentUser, - currentLocation, - setCurrentLocation, - } = useCommonHooks(); - const [personal, setPersonal] = useState(); - const [message, setMessage] = useState(); - const [displayedGreeting, setDisplayedGreeting] = useState(''); - const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] = - useDisclosure(false); - const dateOptions: Intl.DateTimeFormatOptions = !isMobile - ? { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric', - } - : {}; - const date = new Date().toLocaleDateString('en-US', dateOptions); - useEffect(() => { - if (messageData && isMessagesFetched) { - setMessage(messageData[0]); - } - }, [messageData, isMessagesFetched]); - useEffect(() => { - if (personalData && personalIsFetched) { - setCurrentUser(personalData[0]); - setPersonal(personalData[0]); - } - }, [personalData, personalIsFetched]); - useEffect(() => { - if (personal) { - setDisplayedGreeting(() => { - if (Math.floor(Math.random() * 100) > 10 || message === undefined) { - switch (Math.floor(new Date().getHours() / 6)) { - case 0: - return `Good night, ${personal?.firstName}!`; - case 1: - return `Good morning, ${personal?.firstName}!`; - case 2: - return `Good afternoon, ${personal?.firstName}!`; - case 3: - return `Good evening, ${personal?.firstName}!`; - } - } - return message?.message; - }); - } - }, [message, personal, isMessagesFetching]); const { data: weatherMetadata } = useOSMAPI({ address: personalData?.[0]?.physicalAddress, }); @@ -112,6 +79,10 @@ export function Homepage() { x: points?.properties.gridX ?? currentLocation.x, y: points?.properties.gridY ?? currentLocation.y, }); + + const [personal, setPersonal] = useState(); + const [message, setMessage] = useState(); + const [displayedGreeting, setDisplayedGreeting] = useState(''); const [current, setCurrent] = useState({ icon: '', textDescription: '', @@ -126,7 +97,6 @@ export function Homepage() { windDirection: 0, pressure: 0, }); - const [extendedForecast, setExtendedForecast] = useState([ { detailedForecast: '', @@ -137,6 +107,39 @@ export function Homepage() { temperatureUnit: 'F', }, ]); + const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] = + useDisclosure(false); + + useEffect(() => { + if (messageData && isMessagesFetched) { + setMessage(messageData[0]); + } + }, [messageData, isMessagesFetched]); + useEffect(() => { + if (personalData && personalIsFetched) { + setCurrentUser(personalData[0]); + setPersonal(personalData[0]); + } + }, [personalData, personalIsFetched]); + useEffect(() => { + if (personal) { + setDisplayedGreeting(() => { + if (Math.floor(Math.random() * 100) > 10 || message === undefined) { + switch (Math.floor(new Date().getHours() / 6)) { + case 0: + return `Good night, ${personal?.firstName}!`; + case 1: + return `Good morning, ${personal?.firstName}!`; + case 2: + return `Good afternoon, ${personal?.firstName}!`; + case 3: + return `Good evening, ${personal?.firstName}!`; + } + } + return message?.message; + }); + } + }, [message, personal, isMessagesFetching]); useEffect(() => { if (weather !== undefined && basicWeather !== undefined) { setCurrent({ @@ -221,9 +224,6 @@ export function Homepage() { greet={displayedGreeting} date={date} current={current} - setCurrent={setCurrent} - weather={weather} - basicWeather={basicWeather} openWeatherModal={openWeatherModal} /> @@ -232,13 +232,7 @@ export function Homepage() { ) : ( <> - + diff --git a/src/pages/homepage/components/Applications/Applications.tsx b/src/pages/homepage/components/Applications/Applications.tsx index 9622558..6bb76f8 100644 --- a/src/pages/homepage/components/Applications/Applications.tsx +++ b/src/pages/homepage/components/Applications/Applications.tsx @@ -15,29 +15,35 @@ function Applications({ contentType }: { contentType: string[] }) { useEffect(() => { if (applicationData && !isApplicationDataFetching) { setApplications( - applicationData.sort((a: Application, b: Application) => { - switch (appSort) { - case 'A>Z': - return a.name > b.name ? 1 : -1; - case 'Z>A': - return a.name < b.name ? 1 : -1; - case 'Newest': - if (a.id && b.id) { - return a.id < b.id ? 1 : -1; - } - return -1; - case 'Oldest': - if (a.id && b.id) { - return a.id > b.id ? 1 : -1; - } - return -1; - case 'Custom': - return a.index > b.index ? 1 : -1; - } - }), + applicationData + .sort((a: Application, b: Application) => { + switch (appSort) { + case 'A>Z': + return a.name > b.name ? 1 : -1; + case 'Z>A': + return a.name < b.name ? 1 : -1; + case 'Newest': + if (a.id && b.id) { + return a.id < b.id ? 1 : -1; + } + return -1; + case 'Oldest': + if (a.id && b.id) { + return a.id > b.id ? 1 : -1; + } + return -1; + case 'Custom': + return a.index > b.index ? 1 : -1; + } + }) + ?.filter( + (application: Application) => + contentType.includes(application.filterName) || contentType.includes('All'), + ), ); } - }, [applicationData, isApplicationDataFetching, appSort]); + }, [applicationData, isApplicationDataFetching, appSort, contentType]); + return ( <> {applications.length > 0 && contentType.length > 0 && ( @@ -60,25 +66,19 @@ function Applications({ contentType }: { contentType: string[] }) { gridTemplateColumns: `repeat(${appDensity}, 1fr)`, }} > - {applications - ?.filter( - (application: Application) => - contentType.includes(application.filterName) || - contentType.includes('All'), - ) - .map((application: Application) => { - return ( - - ); - })} + {applications.map((application: Application) => { + return ( + + ); + })} )} diff --git a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx index 8b00401..f8857bf 100644 --- a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx @@ -28,29 +28,34 @@ function Bookmarks({ contentType }: { contentType: string[] }) { return category; }); setGroups( - groupList.sort((a: BookmarkGroup, b: BookmarkGroup) => { - switch (bookmarkSort) { - case 'A>Z': - return a.categoryName > b.categoryName ? 1 : -1; - case 'Z>A': - return a.categoryName < b.categoryName ? 1 : -1; - case 'Newest': - if (a.id && b.id) { - return a.id < b.id ? 1 : -1; - } - return -1; - case 'Oldest': - if (a.id && b.id) { - return a.id > b.id ? 1 : -1; - } - return -1; - case 'Custom': - return a.categoryIndex > b.categoryIndex ? 1 : -1; - } - }), + groupList + .sort((a: BookmarkGroup, b: BookmarkGroup) => { + switch (bookmarkSort) { + case 'A>Z': + return a.categoryName > b.categoryName ? 1 : -1; + case 'Z>A': + return a.categoryName < b.categoryName ? 1 : -1; + case 'Newest': + if (a.id && b.id) { + return a.id < b.id ? 1 : -1; + } + return -1; + case 'Oldest': + if (a.id && b.id) { + return a.id > b.id ? 1 : -1; + } + return -1; + case 'Custom': + return a.categoryIndex > b.categoryIndex ? 1 : -1; + } + }) + ?.filter( + (category: BookmarkGroup) => + contentType.includes(category.filterName) || contentType.includes('All'), + ), ); } - }, [groupData, groupsIsFetched, bookmarkSort]); + }, [groupData, groupsIsFetched, bookmarkSort, contentType]); return ( <> @@ -79,26 +84,18 @@ function Bookmarks({ contentType }: { contentType: string[] }) { gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`, }} > - {groups - ?.filter( - (category: BookmarkGroup) => - contentType.includes(category.filterName) || - contentType.includes('All'), - ) - - .map((category: BookmarkGroup) => { - return ( - - bookmark.category === category.categoryName, - )} - bookmarkScale={bookmarkScale} - /> - ); - })} + {groups.map((category: BookmarkGroup) => { + return ( + bookmark.category === category.categoryName, + )} + bookmarkScale={bookmarkScale} + /> + ); + })} )} diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx index 6d7d45e..25932e2 100644 --- a/src/pages/homepage/components/Header/Header.tsx +++ b/src/pages/homepage/components/Header/Header.tsx @@ -8,17 +8,11 @@ function Header({ greet, date, current, - setCurrent, - weather, - basicWeather, openWeatherModal, }: { greet: string | undefined; date: string; current: CurrentWeather; - setCurrent: (current: CurrentWeather) => void; - weather: any; - basicWeather: any; openWeatherModal: () => void; }) { const [time, setTime] = useState(new Date()); @@ -30,43 +24,6 @@ function Header({ setTime(newDate); }, 1000); }, []); - useEffect(() => { - if (weather !== undefined && basicWeather !== undefined) { - setCurrent({ - icon: weather.features[0]?.properties.icon?.replace('medium', 'large') ?? '', - textDescription: weather.features[0]?.properties.textDescription, - temperature: Math.round( - (weather.features[0]?.properties.temperature.value * 9) / 5 + 32, - ), - highTemp: Math.round( - (basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32, - ), - lowTemp: Math.round( - (basicWeather.properties.minTemperature.values[0].value * 9) / 5 + 32, - ), - precipitation: - weather.features[0]?.properties.precipitationLastHour.value ?? 'N/A', - humidity: Math.round(weather.features[0]?.properties.relativeHumidity.value), - heatIndex: - basicWeather.properties.heatIndex?.values[0].value === null - ? null - : Math.round( - (basicWeather.properties.heatIndex.values[0].value * 9) / 5 + 32, - ), - windChill: - basicWeather.properties.windChill?.values[0].value === null - ? null - : Math.round( - (basicWeather.properties.windChill.values[0].value * 9) / 5 + 32, - ), - windSpeed: Math.round(weather.features[0]?.properties.windSpeed.value / 1.60934), - windDirection: weather.features[0]?.properties.windDirection.value, - pressure: Math.round( - weather.features[0]?.properties.barometricPressure.value / 3386.38, - ), - }); - } - }, [weather, basicWeather]); return ( void; -}) { +function LargeHeader({ greet, date }: { greet: string | undefined; date: string }) { const [time, setTime] = useState(new Date()); const { isMobile, currentUser, fixDigits, theme } = useCommonHooks(); @@ -27,44 +14,6 @@ function LargeHeader({ }, 1000); }, []); - useEffect(() => { - if (weather !== undefined && basicWeather !== undefined) { - setCurrent({ - icon: weather.features[0]?.properties.icon?.replace('medium', 'large') ?? '', - textDescription: weather.features[0]?.properties.textDescription, - temperature: Math.round( - (weather.features[0]?.properties.temperature.value * 9) / 5 + 32, - ), - highTemp: Math.round( - (basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32, - ), - lowTemp: Math.round( - (basicWeather.properties.minTemperature.values[0].value * 9) / 5 + 32, - ), - precipitation: - weather.features[0]?.properties.precipitationLastHour.value ?? 'N/A', - humidity: Math.round(weather.features[0]?.properties.relativeHumidity.value), - heatIndex: - basicWeather.properties.heatIndex?.values[0].value === null - ? null - : Math.round( - (basicWeather.properties.heatIndex.values[0].value * 9) / 5 + 32, - ), - windChill: - basicWeather.properties.windChill?.values[0].value === null - ? null - : Math.round( - (basicWeather.properties.windChill.values[0].value * 9) / 5 + 32, - ), - windSpeed: Math.round(weather.features[0]?.properties.windSpeed.value / 1.60934), - windDirection: weather.features[0]?.properties.windDirection.value, - pressure: Math.round( - weather.features[0]?.properties.barometricPressure.value / 3386.38, - ), - }); - } - }, [weather, basicWeather]); - return ( - - - + + + + + diff --git a/src/pages/settings/components/Theming/Themes/ThemeModal/index.ts b/src/pages/settings/components/Theming/Themes/ThemeModal/index.ts new file mode 100644 index 0000000..242699d --- /dev/null +++ b/src/pages/settings/components/Theming/Themes/ThemeModal/index.ts @@ -0,0 +1 @@ +export { ThemeModal } from './ThemeModal'; diff --git a/src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx b/src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx index aab6d36..a4e8108 100644 --- a/src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx +++ b/src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx @@ -2,7 +2,7 @@ import { Group, Overlay, Popover } from '@mantine/core'; import { useLongPress } from '@mantine/hooks'; import { useState } from 'react'; import { ThemeMiniCard } from './ThemeMiniCard'; -import { ThemeModalContent } from './ThemeModalContent'; +import { ThemeModalContent } from './ThemeModal/components/ThemeModalContent'; export function ThemePreviewMiddleware({ newThemeList, diff --git a/src/pages/settings/components/Theming/Themes/Themes.tsx b/src/pages/settings/components/Theming/Themes/Themes.tsx index 1bd5cfb..67b1345 100644 --- a/src/pages/settings/components/Theming/Themes/Themes.tsx +++ b/src/pages/settings/components/Theming/Themes/Themes.tsx @@ -20,7 +20,7 @@ import { switchClasses, textClasses } from 'styles'; import type { Theme, ThemePlaylist } from 'types'; import { BackgroundModal } from '../Backgrounds'; import { ThemeCard } from './ThemeCard'; -import { ThemeModal } from './ThemeModal/ThemeModal'; +import { ThemeModal } from './ThemeModal'; export function Themes() { const backgroundsEndpoint = 'api/backgrounds'; diff --git a/src/pages/settings/components/Theming/Themes/index.ts b/src/pages/settings/components/Theming/Themes/index.ts index cddff64..4a3d1c0 100644 --- a/src/pages/settings/components/Theming/Themes/index.ts +++ b/src/pages/settings/components/Theming/Themes/index.ts @@ -1,12 +1,3 @@ -export { MiniAppItem } from './MiniAppItem'; -export { MiniGroupItem } from './MiniGroupItem'; -export { ThemeCard } from './ThemeCard'; -export { ThemeExampleApp } from './ThemeExampleApp'; -export { ThemeManagementPill } from './ThemeManagementPill'; export { ThemeMiniCard } from './ThemeMiniCard'; -export { ThemeModal } from './ThemeModal/ThemeModal'; -export { ThemeModalContent } from './ThemeModalContent'; export { ThemePreviewMiddleware } from './ThemePreviewMiddleware'; -export { ThemeSelect } from './ThemeSelect'; export { Themes } from './Themes'; -export { TimeOfDay } from './TimeOfDay';