diff --git a/src/components/WeatherModal/ExtendedForecastCard.tsx b/src/components/WeatherModal/ExtendedForecastCard.tsx index db4c5a9..b312925 100644 --- a/src/components/WeatherModal/ExtendedForecastCard.tsx +++ b/src/components/WeatherModal/ExtendedForecastCard.tsx @@ -1,5 +1,4 @@ -import { Group, Stack, Text } from '@mantine/core'; -import { useCommonHooks } from 'hooks'; +import { Group, SimpleGrid, Stack, Text } from '@mantine/core'; import { textClasses } from 'styles'; import type { ExtendedForecast } from 'types'; import WeatherIcon from './WeatherIcon'; @@ -9,8 +8,6 @@ export default function ExtendedForecastCard({ }: { forecast: ExtendedForecast[] }) { const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime); const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime); - - const { isMobile } = useCommonHooks(); return ( - + {day.map((item: ExtendedForecast, index: number) => { const short = item.shortForecast.includes('And') ? item.shortForecast.substring(0, item.shortForecast.indexOf('And')) @@ -43,7 +40,6 @@ export default function ExtendedForecastCard({ return ( ); })} - + ); } diff --git a/src/hooks/useAPI.ts b/src/hooks/useAPI.ts index 44f2bc9..7f39a13 100644 --- a/src/hooks/useAPI.ts +++ b/src/hooks/useAPI.ts @@ -127,10 +127,10 @@ export function useMutationAPI() { queryClient.refetchQueries({ queryKey: ['GET', endpoint], }); - endpoint === 'api/linkOrder' && - queryClient.refetchQueries({ queryKey: ['GET', 'api/links'] }); - endpoint === 'api/categoryOrder' && - queryClient.refetchQueries({ queryKey: ['GET', 'api/categories'] }); + endpoint === 'api/bookmarkOrder' && + queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] }); + endpoint === 'api/bookmarkCategoryOrder' && + queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] }); endpoint === 'api/applicationOrder' && queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] }); }, @@ -138,10 +138,10 @@ export function useMutationAPI() { queryClient.refetchQueries({ queryKey: ['GET', endpoint], }); - endpoint === 'api/linkOrder' && - queryClient.refetchQueries({ queryKey: ['GET', 'api/links'] }); - endpoint === 'api/categoryOrder' && - queryClient.refetchQueries({ queryKey: ['GET', 'api/categories'] }); + endpoint === 'api/bookmarkOrder' && + queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] }); + endpoint === 'api/bookmarkCategoryOrder' && + queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] }); endpoint === 'api/applicationOrder' && queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] }); }, diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index 62f9c7d..b2de6b7 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/src/pages/homepage/Homepage.tsx @@ -19,7 +19,7 @@ import Search from './components/Search/Search'; import SettingsButton from './components/SettingsButton/SettingsButton'; export function Homepage() { - const { data: personal, isFetched: personalIsFetched } = useQueryAPI({ + const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({ endpoint: 'api/personalData', }); const { @@ -27,7 +27,7 @@ export function Homepage() { isFetching: isMessagesFetching, isFetched: isMessagesFetched, } = useQueryAPI({ - endpoint: 'api/messages', + endpoint: 'api/displayedGreeting', }); const { appFilter, @@ -37,8 +37,8 @@ export function Homepage() { currentLocation, setCurrentLocation, } = useCommonHooks(); - const [personalData, setPersonalData] = useState(); - const [messages, setMessages] = useState([]); + const [personal, setPersonal] = useState(); + const [message, setMessage] = useState(); const [displayedGreeting, setDisplayedGreeting] = useState(''); const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] = useDisclosure(false); @@ -53,36 +53,36 @@ export function Homepage() { const date = new Date().toLocaleDateString('en-US', dateOptions); useEffect(() => { if (messageData && isMessagesFetched) { - setMessages(messageData); + setMessage(messageData[0]); } }, [messageData, isMessagesFetched]); useEffect(() => { - if (personal && personalIsFetched) { - setCurrentUser(personal[0]); - setPersonalData(personal[0]); + if (personalData && personalIsFetched) { + setCurrentUser(personalData[0]); + setPersonal(personalData[0]); } - }, [personal, personalIsFetched]); + }, [personalData, personalIsFetched]); useEffect(() => { - if (messages && personalData) { + if (message !== undefined && personal) { setDisplayedGreeting(() => { - if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) { + if (Math.floor(Math.random() * 100) > 10 || message === undefined) { switch (Math.floor(new Date().getHours() / 6)) { case 0: - return `Good night, ${personalData?.firstName}!`; + return `Good night, ${personal?.firstName}!`; case 1: - return `Good morning, ${personalData?.firstName}!`; + return `Good morning, ${personal?.firstName}!`; case 2: - return `Good afternoon, ${personalData?.firstName}!`; + return `Good afternoon, ${personal?.firstName}!`; case 3: - return `Good evening, ${personalData?.firstName}!`; + return `Good evening, ${personal?.firstName}!`; } } - return messages[Math.floor(Math.random() * messages.length)].message; + return message.message; }); } - }, [messages, personalData, isMessagesFetching]); + }, [message, personal, isMessagesFetching]); const { data: weatherMetadata } = useOSMAPI({ - address: personal?.[0]?.physicalAddress, + address: personalData?.[0]?.physicalAddress, }); const { data: points } = useWeatherAPI({ endpoint: 'points', diff --git a/src/pages/homepage/components/Applications/Applications.tsx b/src/pages/homepage/components/Applications/Applications.tsx index b36ed07..553bfe6 100644 --- a/src/pages/homepage/components/Applications/Applications.tsx +++ b/src/pages/homepage/components/Applications/Applications.tsx @@ -6,46 +6,42 @@ import type { Application } from 'types'; import AppItem from './AppItem'; function Applications({ contentType }: { contentType: string[] }) { - const { data: apps, isFetching: isAppsFetching } = useQueryAPI({ - endpoint: 'api/apps', + const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({ + endpoint: 'api/enabledApplications', }); const { isMobile, appSort, appDensity } = useCommonHooks(); - const [applicationData, setApplicationData] = useState([]); + const [applications, setApplications] = useState([]); useEffect(() => { - if (apps && !isAppsFetching) { - setApplicationData( - apps - .filter((a: Application) => a.enabled === 1) - .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; - } - }), + 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; + } + }), ); } - }, [apps, isAppsFetching, appSort]); + }, [applicationData, isApplicationDataFetching, appSort]); return ( <> - {applicationData.length > 0 && contentType.length > 0 && ( - + {applications.length > 0 && contentType.length > 0 && ( + Applications @@ -63,7 +59,7 @@ function Applications({ contentType }: { contentType: string[] }) { gridTemplateRows: '64px', }} > - {applicationData + {applications ?.filter( (application: Application) => contentType.includes(application.filterName) || diff --git a/src/pages/homepage/components/Bookmarks/LinkGroups.tsx b/src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx similarity index 53% rename from src/pages/homepage/components/Bookmarks/LinkGroups.tsx rename to src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx index 818b5ca..af4aba6 100644 --- a/src/pages/homepage/components/Bookmarks/LinkGroups.tsx +++ b/src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx @@ -1,9 +1,12 @@ import { Stack, Text } from '@mantine/core'; import { textClasses } from 'styles'; import type { Bookmark } from 'types'; -import LinkItem from './LinkItem'; +import BookmarkItem from './BookmarkItem'; -function LinkGroups({ links, category }: { links: Bookmark[]; category: string }) { +function BookmarkGroups({ + bookmarks, + category, +}: { bookmarks: Bookmark[]; category: string }) { return ( - + {category} - {links + {bookmarks ?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1)) - .map((link: Bookmark) => ( - + .map((bookmark: Bookmark) => ( + ))} ); } -export default LinkGroups; +export default BookmarkGroups; diff --git a/src/pages/homepage/components/Bookmarks/LinkItem.tsx b/src/pages/homepage/components/Bookmarks/BookmarkItem.tsx similarity index 53% rename from src/pages/homepage/components/Bookmarks/LinkItem.tsx rename to src/pages/homepage/components/Bookmarks/BookmarkItem.tsx index e2dbc8c..2df96d6 100644 --- a/src/pages/homepage/components/Bookmarks/LinkItem.tsx +++ b/src/pages/homepage/components/Bookmarks/BookmarkItem.tsx @@ -2,17 +2,17 @@ import { Text } from '@mantine/core'; import { textClasses } from 'styles'; import type { Bookmark } from 'types'; -function LinkItem({ link }: { link: Bookmark }) { +function BookmarkItem({ bookmark }: { bookmark: Bookmark }) { return ( - {link.name} + {bookmark.name} ); } -export default LinkItem; +export default BookmarkItem; diff --git a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx index 6a80c5b..df63b78 100644 --- a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx @@ -3,24 +3,24 @@ import { useCommonHooks, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; import { textClasses } from 'styles'; import type { Bookmark, BookmarkGroup } from 'types'; -import LinkGroups from './LinkGroups'; +import BookmarkGroups from './BookmarkGroups'; -function Links({ contentType }: { contentType: string[] }) { - const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({ - endpoint: 'api/links', +function Bookmarks({ contentType }: { contentType: string[] }) { + const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({ + endpoint: 'api/bookmarks', }); const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({ - endpoint: 'api/categories', + endpoint: 'api/bookmarkCategories', }); const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks(); - const [bookmarkData, setBookmarkData] = useState([]); + const [bookmarks, setBookmarks] = useState([]); const [groups, setGroups] = useState([]); useEffect(() => { - if (linkData && linksIsFetched) { - setBookmarkData(linkData); + if (bookmarkData && bookmarksIsFetched) { + setBookmarks(bookmarkData); } - }, [linksIsFetched, linkData]); + }, [bookmarksIsFetched, bookmarkData]); useEffect(() => { if (groupData && groupsIsFetched) { @@ -57,10 +57,10 @@ function Links({ contentType }: { contentType: string[] }) { return ( <> {groupsIsFetched && - linksIsFetched && + bookmarksIsFetched && groups?.length > 0 && contentType.length > 0 && ( - + Bookmarks @@ -85,10 +85,10 @@ function Links({ contentType }: { contentType: string[] }) { .map((category: BookmarkGroup) => { return ( - bookmark.category === category.categoryName, )} @@ -102,4 +102,4 @@ function Links({ contentType }: { contentType: string[] }) { ); } -export default Links; +export default Bookmarks; diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx index 404ad3c..f9efc7b 100644 --- a/src/pages/homepage/components/Header/Header.tsx +++ b/src/pages/homepage/components/Header/Header.tsx @@ -30,7 +30,6 @@ function Header({ setTime(newDate); }, 1000); }, []); - useEffect(() => { if (weather !== undefined && basicWeather !== undefined) { setCurrent({ @@ -92,7 +91,7 @@ function Header({ fz={isMobile ? 24 : undefined} > {greet - .replace('$firstName', currentUser.firstName) + ?.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 ae1ee29..6ba18b8 100644 --- a/src/pages/homepage/components/Search/Search.tsx +++ b/src/pages/homepage/components/Search/Search.tsx @@ -33,16 +33,17 @@ export default function Search({ closeWeatherModal: () => void; openWeatherModal: () => void; }) { - const { data: providers, isFetched: providersIsFetched } = useQueryAPI({ + const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({ endpoint: 'api/providers', }); - const [providerData, setProviderData] = useState([]); - const { data: apps, isFetching: isAppsFetching } = useQueryAPI({ - endpoint: 'api/apps', + const [providers, setProviders] = useState([]); + const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({ + endpoint: 'api/enabledApplications', }); - const [applicationData, setApplicationData] = useState([]); - const { data: history, isFetched: historyIsFetched } = useQueryAPI({ - endpoint: 'api/searchHistory', + const [applications, setApplications] = useState([]); + const searchEndpoint = 'api/searchHistory'; + const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({ + endpoint: searchEndpoint, }); const [searchHistory, setSearchHistory] = useState([]); const [filteredHistory, setFilteredHistory] = useState([]); @@ -69,7 +70,7 @@ export default function Search({ const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => { const url = - providers.find((provider: Provider) => provider.prefix === option.prefix)?.url ?? + providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ?? 'https://www.google.com/search?q='; open(`${url}${option.searchTerm}`, '_self'); }; @@ -99,7 +100,7 @@ export default function Search({ } else if (item.target.value.startsWith('/')) { mutateAsync({ method: 'POST', - endpoint: 'api/searchHistory', + endpoint: searchEndpoint, body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext }, }).then(() => { open(`${providerURL}${subtext}`, '_self'); @@ -107,7 +108,7 @@ export default function Search({ } else if (providerLabel === 'Show weather') { openWeatherModal(); } else if (providerLabel.startsWith('Launch')) { - const url = applicationData.find( + const url = applications.find( (app: Application) => app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1), )?.url; @@ -123,7 +124,7 @@ export default function Search({ } else { mutateAsync({ method: 'POST', - endpoint: 'api/searchHistory', + endpoint: searchEndpoint, body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext }, }).then(() => { open(`${providerURL}${subtext}`, '_self'); @@ -221,7 +222,7 @@ export default function Search({ setProviderURL('https://www.google.com/search?q='); setProviderPrefix('/g'); } else if (item.target.value.startsWith('/')) { - const provider = providerData?.find( + const provider = providers?.find( (p: Provider) => p.prefix === item.target.value.split(' ')[0], ); setProviderLabel(provider?.name ?? 'Invalid Search'); @@ -231,7 +232,7 @@ export default function Search({ if (item.target.value === '!w' || item.target.value === '!weather') { setProviderLabel('Show weather'); } else if ( - applicationData?.find( + applications?.find( (app: Application) => app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1), ) @@ -250,7 +251,7 @@ export default function Search({ const optionsFilter: OptionsFilter = ({ options, search }) => { const splittedSearch = search.toLowerCase().trim().split(' '); if (splittedSearch[0].startsWith('!')) { - return apps + return applicationData .filter((app: Application) => app.name.toLowerCase().includes(splittedSearch[0].substring(1).toLowerCase()), ) @@ -341,7 +342,7 @@ export default function Search({ e.stopPropagation(); mutateAsync({ method: 'DELETE', - endpoint: 'api/searchHistory', + endpoint: searchEndpoint, body: { id: item.option.id }, }); }} @@ -392,25 +393,25 @@ export default function Search({ } useEffect(() => { - if (providers && providersIsFetched) { - setProviderData(providers); + if (providerData && providerDataIsFetched) { + setProviders(providerData); } - }, [providers, providersIsFetched]); + }, [providerData, providerDataIsFetched]); useEffect(() => { - if (apps && !isAppsFetching) { - setApplicationData(apps); + if (applicationData && !isApplicationDataFetching) { + setApplications(applicationData); } - }, [apps, isAppsFetching]); + }, [applicationData, isApplicationDataFetching]); useEffect(() => { - if (history && historyIsFetched) { - setSearchHistory(history); + if (historyData && historyDataIsFetched) { + setSearchHistory(historyData); if (filteredHistory.length === 0) { - setFilteredHistory(history.slice(0, 10)); + setFilteredHistory(historyData.slice(0, 10)); } } - }, [history, historyIsFetched]); + }, [historyData, historyDataIsFetched]); useEffect(() => { if (dropdownOpened) { @@ -494,8 +495,8 @@ export default function Search({ setSearchValue={setSearchValue} setProviderLabel={setProviderLabel} setProviderURL={setProviderURL} - applicationData={applicationData} - providerData={providerData} + applicationData={applications} + providerData={providers} providerModalOpened={providerModalOpened} closeProviderModal={closeProviderModal} /> diff --git a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx index 6ee9acc..72556c6 100644 --- a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx +++ b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx @@ -31,21 +31,23 @@ import { import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types'; function SettingsButton() { - const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' }); - const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({ + const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({ + endpoint: 'api/appCategories', + }); + const { data: wolClientData, isFetched: wolClientDataIsFetched } = useQueryAPI({ endpoint: 'api/wolClients', }); - const [wolClientsData, setWolClientsData] = useState([]); - const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({ + const [wolClients, setWolClients] = useState([]); + const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({ endpoint: 'api/themes', }); - const { data: themePlaylists } = useQueryAPI({ + const { data: themePlaylistData } = useQueryAPI({ endpoint: 'api/themePlaylists', }); const { mutateAsync } = useMutationAPI(); - const [allThemeData, setAllThemeData] = useState([]); + const [allThemes, setAllThemes] = useState([]); const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]); - const [selectedClient, setSelectedClient] = useState(wolClients?.[0]); + const [selectedClient] = useState(wolClientData?.[0]); const [overlayOpened, setOverlayOpened] = useState(false); const navigate = useNavigate(); const notify = (notification: any) => toast(notification, { position: 'bottom-right' }); @@ -75,7 +77,7 @@ function SettingsButton() { mutateAsync({ method: 'POST', endpoint: 'api/wakeClient', - body: selectedClient || wolClients?.[0], + body: selectedClient || wolClientData?.[0], }); }; @@ -86,26 +88,26 @@ function SettingsButton() { }; useEffect(() => { - if (data) { - const list: [any] = data.map((category: AppCategory) => { + if (appCategoryData) { + const list: [any] = appCategoryData.map((category: AppCategory) => { return { value: category.filterName, label: category.filterName }; }); list.unshift({ value: 'All', label: 'All' }); setCategories(list); } - }, [data, isFetched]); + }, [appCategoryData, appCategoryDataIsFetched]); useEffect(() => { - if (wolClients && wolClientsIsFetched) { - setWolClientsData(wolClients); + if (wolClientData && wolClientDataIsFetched) { + setWolClients(wolClientData); } - }, [wolClients, wolClientsIsFetched]); + }, [wolClientData, wolClientDataIsFetched]); useEffect(() => { - if (allThemes && isAllThemesFetched) { - setAllThemeData(allThemes); + if (allThemeData && allThemeDataIsFetched) { + setAllThemes(allThemeData); } - }, [allThemes, isAllThemesFetched]); + }, [allThemeData, allThemeDataIsFetched]); return ( <> {overlayOpened && } @@ -146,7 +148,7 @@ function SettingsButton() {