From 2c3870f288a7328aaaee530192ca30865dec5a0c Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Thu, 30 Jan 2025 16:09:09 -0600 Subject: [PATCH] Refactored common hooks to reduce api calls --- src/App.tsx | 1 - src/components/DataTable/DataTable.tsx | 108 ++++++++-- src/components/WeatherModal/WeatherModal.tsx | 31 ++- src/dataTableStyles.css | 32 --- src/hooks/useCommonHooks.ts | 195 +----------------- src/index.css | 11 - src/pages/homepage/Homepage.tsx | 136 ++++++++---- .../components/Applications/Applications.tsx | 15 +- .../components/Bookmarks/Bookmarks.tsx | 34 ++- .../homepage/components/Header/Header.tsx | 27 ++- .../homepage/components/Search/Search.tsx | 20 +- .../homepage/components/SettingsButton.tsx | 35 +++- .../settings/components/Applications.tsx | 18 +- src/pages/settings/components/Bookmarks.tsx | 34 ++- src/pages/settings/components/Categories.tsx | 25 ++- src/pages/settings/components/Messages.tsx | 21 +- .../settings/components/Personalization.tsx | 21 +- .../settings/components/SearchProviders.tsx | 20 +- src/pages/settings/components/ThemeCard.tsx | 18 +- src/pages/settings/components/ThemeModal.tsx | 56 +++-- src/pages/settings/components/Themes.tsx | 25 ++- src/pages/settings/components/WolClients.tsx | 21 +- src/styles/ActionIcon.module.css | 19 +- src/styles/MultiSelect.module.css | 61 ++++++ src/styles/Select.module.css | 17 +- src/styles/TextInput.module.css | 22 ++ src/styles/index.ts | 2 + 27 files changed, 604 insertions(+), 421 deletions(-) delete mode 100644 src/dataTableStyles.css create mode 100644 src/styles/MultiSelect.module.css diff --git a/src/App.tsx b/src/App.tsx index 4aea686..b6c76d1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -60,7 +60,6 @@ function App() { fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif', }); const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); - return ( <> {theme && ( diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx index 9743bc3..a09b59a 100644 --- a/src/components/DataTable/DataTable.tsx +++ b/src/components/DataTable/DataTable.tsx @@ -1,3 +1,8 @@ +import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core'; +import { modals } from '@mantine/modals'; +import { IconEdit, IconTrash } from '@tabler/icons-react'; +import { ThemeProvider } from 'components/ThemeProvider'; +import { useCommonHooks, useMutationAPI } from 'hooks'; import { type MRT_Row, type MRT_TableOptions, @@ -5,13 +10,8 @@ import { useMantineReactTable, } from 'mantine-react-table'; import { memo } from 'react'; -import '../../../src/dataTableStyles.css'; -import { ActionIcon, Button, Flex, Text } from '@mantine/core'; -import { modals } from '@mantine/modals'; -import { IconEdit, IconTrash } from '@tabler/icons-react'; -import { useCommonHooks, useMutationAPI } from 'hooks'; import { FiPlus } from 'react-icons/fi'; -import { actionIconClasses, buttonClasses } from 'styles'; +import { actionIconClasses, buttonClasses, textInputClasses } from 'styles'; export function DataTableComponent({ tableName, @@ -48,10 +48,18 @@ export function DataTableComponent({ }; const openDeleteConfirmModal = (row: MRT_Row) => modals.openConfirmModal({ - title: 'Are you sure you want to delete this user?', - children: Are you sure?, + title: ( + Are you sure you want to delete this user? + ), + children: Are you sure?, labels: { confirm: 'Delete', cancel: 'Cancel' }, - confirmProps: { color: 'red' }, + confirmProps: { + style: { + backgroundColor: 'var(--mantine-color-red-6)', + color: 'var(--mantine-color-white)', + }, + }, + cancelProps: { color: 'green' }, onConfirm: () => deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }), }); @@ -80,12 +88,17 @@ export function DataTableComponent({ columnVisibility: { id: false, categoryIndex: false }, showGlobalFilter: tableName !== 'Personalization', }, - mantineSearchTextInputProps: {}, + mantineSearchTextInputProps: { + classNames: textInputClasses, + className: textInputClasses.default, + }, mantinePaperProps: { - className: 'root', style: { border: 'none', boxShadow: 'none', + '--mrt-base-background-color': 'transparent', + '--mrt-row-hover-background-color': theme.searchColor, + color: 'var(--color-text-pri)', }, }, mantineTableContainerProps: { @@ -107,9 +120,46 @@ export function DataTableComponent({ }, mantineTableBodyRowProps: { style: { + fontSize: '18px', borderBottom: 'none', }, }, + mantineEditTextInputProps: { + styles: { + wrapper: { + display: 'flex', + }, + input: { + width: '100%', + border: 'none', + backgroundColor: `${theme.searchColor}`, + color: 'var(--color-text-pri)', + fontSize: '18px', + }, + }, + }, + mantineFilterTextInputProps: { + classNames: textInputClasses, + className: textInputClasses.default, + }, + mantineEditSelectProps: { + styles: { + input: { + color: theme.primaryColor, + fontSize: '18px', + backgroundColor: theme.searchColor, + border: 'none', + }, + option: { + color: theme.primaryColor, + fontSize: '18px', + backgroundColor: 'transparent', + }, + dropdown: { + backgroundColor: `${theme.backgroundColor} !important`, + }, + }, + }, displayColumnDefOptions: { 'mrt-row-actions': { header: '', @@ -118,16 +168,28 @@ export function DataTableComponent({ }, renderRowActions: ({ row, table }) => ( - table.setEditingRow(row)} + - - - openDeleteConfirmModal(row)}> - - + table.setEditingRow(row)} + > + + + + + openDeleteConfirmModal(row)}> + + + ), mantineCreateRowModalProps: { @@ -158,7 +220,11 @@ export function DataTableComponent({ ); }, }); - return ; + return ( + + + + ); } export const DataTable = memo(DataTableComponent); diff --git a/src/components/WeatherModal/WeatherModal.tsx b/src/components/WeatherModal/WeatherModal.tsx index 3d6bf23..a002e4c 100644 --- a/src/components/WeatherModal/WeatherModal.tsx +++ b/src/components/WeatherModal/WeatherModal.tsx @@ -3,27 +3,36 @@ import { modalClasses } from 'styles'; import SmallOutlookCard from './SmallOutlookCard'; import SmallWeatherCard from './SmallWeatherCard'; -import { useCommonHooks } from 'hooks'; +import { useCommonHooks, useQueryAPI, useWeatherAPI } from 'hooks'; import { useEffect, useState } from 'react'; import HourlyCard from './HourlyCard'; export function WeatherModal({ current, outlook, + points, closeWeatherModal, weatherModalOpened, }: any) { + const { data: personal, isFetched: personalIsFetched } = useQueryAPI({ + endpoint: 'api/personalData', + }); + const [personalData, setPersonalData] = useState([]); + const { data: hourly } = useWeatherAPI({ + endpoint: 'hourly', + office: points?.properties.gridId, + x: points?.properties.gridX, + y: points?.properties.gridY, + }); + useEffect(() => { + if (personal && personalIsFetched) { + setPersonalData(personal); + } + }, [personal, personalIsFetched]); const [hourlyForecast, setHourlyForecast] = useState([]); const [sunset, setSunset] = useState(100); - const { - theme, - isMobile, - hourly, - setProviderLabel, - setSearchValue, - setProviderURL, - personal, - } = useCommonHooks(); + const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } = + useCommonHooks(); useEffect(() => { if (hourly) { setHourlyForecast(hourly.properties.periods.slice(1, 13)); @@ -75,7 +84,7 @@ export function WeatherModal({ Weather Forecast for{' '} - {personal?.[0].physicalAddress} + {personalData?.[0]?.physicalAddress} diff --git a/src/dataTableStyles.css b/src/dataTableStyles.css deleted file mode 100644 index d4021ca..0000000 --- a/src/dataTableStyles.css +++ /dev/null @@ -1,32 +0,0 @@ -.root { - --mrt-base-background-color: transparent; - --mrt-striped-row-background-color: transparent; - --mrt-row-hover-background-color: transparent; - --mrt-striped-row-hover-background-color: transparent; - --mrt-selected-row-background-color: transparent; - --mrt-selected-row-hover-background-color: transparent; - --mrt-pinned-row-background-color: transparent; - --mrt-pinned-row-hover-background-color: transparent; - --mrt-pinned-column-background-color: transparent; - --mrt-dragging-hovered-border-color: transparent; - --mrt-dragging-drag-border-color: transparent; - --mrt-resize-column-border-color: transparent; - color: var(--color-text-pri) !important; -} - -.mrt-table-head-sort-button { - color: var(--color-text-pri) !important; -} - -.mantine-Input-input { - color: var(--color-text-pri) !important; -} - -.mantine-Select-input { - color: var(--color-text-pri) !important; -} - -.mantine-Select-options { - color: black !important; - background-color: white !important; -} diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts index 4e019dc..50e2e9f 100644 --- a/src/hooks/useCommonHooks.ts +++ b/src/hooks/useCommonHooks.ts @@ -1,67 +1,10 @@ import { useLocalStorage } from '@mantine/hooks'; import { appTheme } from 'contexts'; import { useAtom } from 'jotai'; -import { useEffect, useState } from 'react'; -import { useOSMAPI, useQueryAPI, useWeatherAPI } from './useAPI'; +import { useState } from 'react'; export function useCommonHooks() { const isMobile = window.matchMedia('(max-width: 600px)').matches; - const { - data: apps, - isFetching: isAppsFetching, - isLoading: isAppsLoading, - } = useQueryAPI({ endpoint: 'api/apps' }); - const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({ - endpoint: 'api/themes', - }); - const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({ - endpoint: 'api/backgrounds', - }); - const { - data: messages, - isFetching: isMessagesFetching, - isFetched: isMessagesFetched, - isLoading: isMessagesLoading, - } = useQueryAPI({ - endpoint: 'api/messages', - }); - const { - data: linkData, - isFetched: linksIsFetched, - isFetching: linksIsFetching, - isLoading: linksIsLoading, - } = useQueryAPI({ - endpoint: 'api/links', - }); - const { - data: groupData, - isFetched: groupsIsFetched, - isFetching: groupsIsFetching, - isLoading: groupsIsLoading, - } = useQueryAPI({ - endpoint: 'api/categories', - }); - const { - data: personal, - isFetched: personalIsFetched, - isFetching: personalIsFetching, - isLoading: personalIsLoading, - } = useQueryAPI({ - endpoint: 'api/personalData', - }); - const { - data: providers, - isFetched: providersIsFetched, - isFetching: providersIsFetching, - isLoading: providersIsLoading, - } = useQueryAPI({ endpoint: 'api/providers' }); - const { - data: wolClients, - isFetched: wolClientsIsFetched, - isFetching: wolClientsIsFetching, - isLoading: wolClientsIsLoading, - } = useQueryAPI({ endpoint: 'api/wolClients' }); - const [theme, setTheme] = useAtom(appTheme); const [themeName, setThemeName] = useLocalStorage({ key: 'theme', @@ -96,114 +39,10 @@ export function useCommonHooks() { } }; - const [applicationData, setApplicationData] = useState([]); - - useEffect(() => { - if (apps && !isAppsFetching) { - setApplicationData(apps); - } - }, [apps, isAppsFetching]); - - const [bookmarkData, setBookmarkData] = useState([]); - - const [groups, setGroups] = useState([]); - - useEffect(() => { - if (linkData && linksIsFetched) { - setBookmarkData(linkData); - } - }, [linksIsFetched, linkData]); - - useEffect(() => { - if (groupData && groupsIsFetched) { - const groupList = groupData?.map((category: any) => { - return category.categoryName; - }); - setGroups(groupList); - } - }, [groupData, groupsIsFetched]); - - const [messageData, setMessageData] = useState([]); - - useEffect(() => { - if (messages && isMessagesFetched) { - setMessageData(messages); - } - }, [messages, isMessagesFetched]); - - const [personalData, setPersonalData] = useState([]); - - useEffect(() => { - if (personal && personalIsFetched) { - setPersonalData(personal); - } - }, [personal, personalIsFetched]); - - const [providerData, setProviderData] = useState([]); - - useEffect(() => { - if (providers && providersIsFetched) { - setProviderData(providers); - } - }, [providers, providersIsFetched]); - - const [wolClientsData, setWolClientsData] = useState([]); - - useEffect(() => { - if (wolClients && wolClientsIsFetched) { - setWolClientsData(wolClients); - } - }, [wolClients, wolClientsIsFetched]); - - const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress }); - const { data: points } = useWeatherAPI({ - endpoint: 'points', - lat: weatherMetadata?.[0].lat || 0, - lon: weatherMetadata?.[0].lon || 0, - }); - const { data: basicWeather } = useWeatherAPI({ - endpoint: 'baseline', - office: points?.properties.gridId, - x: points?.properties.gridX, - y: points?.properties.gridY, - }); - const { data: stations } = useWeatherAPI({ - endpoint: 'stations', - office: points?.properties.gridId, - x: points?.properties.gridX, - y: points?.properties.gridY, - }); - const { data: weather } = useWeatherAPI({ - endpoint: 'current', - station: stations?.features[0].properties.stationIdentifier, - }); - const { data: forecast } = useWeatherAPI({ - endpoint: 'forecast', - office: points?.properties.gridId, - x: points?.properties.gridX, - y: points?.properties.gridY, - }); - const { data: hourly } = useWeatherAPI({ - endpoint: 'hourly', - office: points?.properties.gridId, - x: points?.properties.gridX, - y: points?.properties.gridY, - }); - return { isMobile, theme, setTheme, - allThemes, - backgrounds, - isBackgroundFetched, - isAllThemesFetched, - messages, - isMessagesFetching, - basicWeather, - weather, - forecast, - hourly, handleThemeChange, themeName, setThemeName, @@ -219,37 +58,5 @@ export function useCommonHooks() { setProviderLabel, providerURL, setProviderURL, - providers, - providerData, - providersIsFetched, - providersIsFetching, - providersIsLoading, - linkData, - linksIsFetched, - groupData, - groupsIsFetched, - apps, - isAppsFetching, - isAppsLoading, - applicationData, - bookmarkData, - groups, - linksIsFetching, - linksIsLoading, - groupsIsFetching, - groupsIsLoading, - messageData, - isMessagesFetched, - isMessagesLoading, - personal, - personalData, - personalIsFetched, - personalIsFetching, - personalIsLoading, - wolClients, - wolClientsData, - wolClientsIsFetched, - wolClientsIsFetching, - wolClientsIsLoading, }; } diff --git a/src/index.css b/src/index.css index 20c8b1b..74b62f5 100644 --- a/src/index.css +++ b/src/index.css @@ -1,16 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap'); -.mrt-edit-action-buttons { - .mantine-Button-root[data-variant="subtle"] { - color: var(--color-text-pri) !important; - background-color: var(--color-text-pri) !important; - } - .mantine-Button-root[data-variant="filled"] { - color: var(--color-text-pri) !important; - background-color: var(--color-text-pri) !important; - } -} - .Toastify__toast-theme--light { backdrop-filter: blur(10px) !important; } \ No newline at end of file diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index c0eddbb..2fd202f 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/src/pages/homepage/Homepage.tsx @@ -1,6 +1,6 @@ import { Stack } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; -import { useCommonHooks } from 'hooks'; +import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks'; import { useEffect, useState } from 'react'; import { stackClasses } from 'styles'; import type { CurrentWeather, OutlookWeather } from 'types'; @@ -11,19 +11,93 @@ import Search from './components/Search/Search'; import SettingsButton from './components/SettingsButton'; export function Homepage() { - const [displayedGreeting, setDisplayedGreeting] = useState(''); + const { data: personal, isFetched: personalIsFetched } = useQueryAPI({ + endpoint: 'api/personalData', + }); + const [personalData, setPersonalData] = useState([]); const { - appFilter, - bookmarkFilter, - isMobile, - messages, - isMessagesFetching, - weather, - basicWeather, - forecast, - personal, - } = useCommonHooks(); + data: messageData, + isFetching: isMessagesFetching, + isFetched: isMessagesFetched, + } = useQueryAPI({ + endpoint: 'api/messages', + }); + const [messages, setMessages] = useState([]); + useEffect(() => { + if (messageData && isMessagesFetched) { + setMessages(messageData); + } + }, [messageData, isMessagesFetched]); + useEffect(() => { + if (personal && personalIsFetched) { + setPersonalData(personal); + } + }, [personal, personalIsFetched]); + const [displayedGreeting, setDisplayedGreeting] = useState(''); + const { appFilter, bookmarkFilter, isMobile } = useCommonHooks(); + + 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 (messages && personalData) { + setDisplayedGreeting(() => { + if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) { + switch (Math.floor(new Date().getHours() / 6)) { + case 0: + return `Good night, ${personalData?.[0]?.firstName}!`; + case 1: + return `Good morning, ${personalData?.[0]?.firstName}!`; + case 2: + return `Good afternoon, ${personalData?.[0]?.firstName}!`; + case 3: + return `Good evening, ${personalData?.[0]?.firstName}!`; + } + } + return messages[Math.floor(Math.random() * messages.length)].message; + }); + } + }, [messages, personalData, isMessagesFetching]); + + const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress }); + const { data: points } = useWeatherAPI({ + endpoint: 'points', + lat: weatherMetadata?.[0].lat || 0, + lon: weatherMetadata?.[0].lon || 0, + }); + const { data: basicWeather } = useWeatherAPI({ + endpoint: 'baseline', + office: points?.properties.gridId, + x: points?.properties.gridX, + y: points?.properties.gridY, + }); + const { data: stations } = useWeatherAPI({ + endpoint: 'stations', + office: points?.properties.gridId, + x: points?.properties.gridX, + y: points?.properties.gridY, + }); + const { data: weather } = useWeatherAPI({ + endpoint: 'current', + station: stations?.features[0].properties.stationIdentifier, + }); + const { data: forecast } = useWeatherAPI({ + endpoint: 'forecast', + office: points?.properties.gridId, + x: points?.properties.gridX, + y: points?.properties.gridY, + }); const [current, setCurrent] = useState({ icon: '', temperature: 0, @@ -46,38 +120,6 @@ export function Homepage() { windDirection: 'N', }, ]); - 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 (messages) { - setDisplayedGreeting(() => { - if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) { - switch (Math.floor(new Date().getHours() / 6)) { - case 0: - return `Good night, ${personal[0].firstName}!`; - case 1: - return `Good morning, ${personal[0].firstName}!`; - case 2: - return `Good afternoon, ${personal[0].firstName}!`; - case 3: - return `Good evening, ${personal[0].firstName}!`; - } - } - return messages[Math.floor(Math.random() * messages.length)].message; - }); - } - }, [messages, isMessagesFetching]); useEffect(() => { if (weather !== undefined && basicWeather !== undefined) { @@ -140,6 +182,9 @@ export function Homepage() { ([]); + + useEffect(() => { + if (apps && !isAppsFetching) { + setApplicationData(apps); + } + }, [apps, isAppsFetching]); return ( <> {applicationData.length > 0 && contentType.length > 0 && ( diff --git a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx index 8dc4c26..42f5e72 100644 --- a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx @@ -1,16 +1,40 @@ import { Stack, Text } from '@mantine/core'; -import { useCommonHooks } from 'hooks'; +import { useCommonHooks, useQueryAPI } from 'hooks'; +import { useEffect, useState } from 'react'; import { textClasses } from 'styles'; import LinkGroups from './LinkGroups'; function Links({ contentType }: any) { - const { isMobile, linksIsFetched, groupsIsFetched, groupData, bookmarkData } = - useCommonHooks(); + const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({ + endpoint: 'api/links', + }); + const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({ + endpoint: 'api/categories', + }); + const [bookmarkData, setBookmarkData] = useState([]); + + const [groups, setGroups] = useState([]); + useEffect(() => { + if (linkData && linksIsFetched) { + setBookmarkData(linkData); + } + }, [linksIsFetched, linkData]); + + useEffect(() => { + if (groupData && groupsIsFetched) { + const groupList = groupData?.map((category: any) => { + return category; + }); + setGroups(groupList); + } + }, [groupData, groupsIsFetched]); + const { isMobile } = useCommonHooks(); + return ( <> {groupsIsFetched && linksIsFetched && - groupData?.length > 0 && + groups?.length > 0 && contentType.length > 0 && ( @@ -26,7 +50,7 @@ function Links({ contentType }: any) { gridTemplateRows: 'auto', }} > - {groupData.map((category: any) => { + {groups.map((category: any) => { if ( contentType.includes(category.filterName) || contentType.includes('All') diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx index 911d978..436a08f 100644 --- a/src/pages/homepage/components/Header/Header.tsx +++ b/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([]); + 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())} diff --git a/src/pages/homepage/components/Search/Search.tsx b/src/pages/homepage/components/Search/Search.tsx index 08ebea3..d8ee148 100644 --- a/src/pages/homepage/components/Search/Search.tsx +++ b/src/pages/homepage/components/Search/Search.tsx @@ -1,16 +1,30 @@ import { Stack, TextInput } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { HelpModal, WeatherModal } from 'components'; -import { useCommonHooks } from 'hooks'; +import { useCommonHooks, useQueryAPI } from 'hooks'; +import { useEffect, useState } from 'react'; import { textInputClasses } from 'styles'; export default function Search({ current, outlook, + points, weatherModalOpened, closeWeatherModal, openWeatherModal, }: any) { + const { data: providers, isFetched: providersIsFetched } = useQueryAPI({ + endpoint: 'api/providers', + }); + + const [providerData, setProviderData] = useState([]); + + useEffect(() => { + if (providers && providersIsFetched) { + setProviderData(providers); + } + }, [providers, providersIsFetched]); + const { providerLabel, setProviderLabel, @@ -18,7 +32,6 @@ export default function Search({ setProviderURL, searchValue, setSearchValue, - providers, } = useCommonHooks(); const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] = @@ -94,7 +107,7 @@ export default function Search({ ) { setProviderLabel('Show help'); } else if (item.target.value.startsWith('/')) { - const provider = providers?.find( + const provider = providerData?.find( (p: any) => p.prefix === item.target.value.split(' ')[0], ); setProviderLabel(provider?.name || 'Invalid Search'); @@ -121,6 +134,7 @@ export default function Search({ diff --git a/src/pages/homepage/components/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton.tsx index 63d3e7f..aafb26e 100644 --- a/src/pages/homepage/components/SettingsButton.tsx +++ b/src/pages/homepage/components/SettingsButton.tsx @@ -20,12 +20,21 @@ import { actionIconClasses, buttonClasses, menuClasses, + multiSelectClasses, selectClasses, stackClasses, } from 'styles'; function SettingsButton() { const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' }); + const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({ + endpoint: 'api/wolClients', + }); + const [wolClientsData, setWolClientsData] = useState([]); + const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({ + endpoint: 'api/themes', + }); + const [allThemeData, setAllThemeData] = useState([]); const { mutateAsync: wakeRequest } = useMutationAPI(); const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]); const navigate = useNavigate(); @@ -34,13 +43,11 @@ function SettingsButton() { setCurrentTheme, handleThemeChange, theme, - allThemes, appFilter, setAppFilter, bookmarkFilter, setBookmarkFilter, isMobile, - wolClients, } = useCommonHooks(); const notify = (notification: any) => toast(notification, { position: 'bottom-right' }); @@ -65,6 +72,18 @@ function SettingsButton() { } }, [data, isFetched]); + useEffect(() => { + if (wolClients && wolClientsIsFetched) { + setWolClientsData(wolClients); + } + }, [wolClients, wolClientsIsFetched]); + + useEffect(() => { + if (allThemes && isAllThemesFetched) { + setAllThemeData(allThemes); + } + }, [allThemes, isAllThemesFetched]); + return ( <> {overlayOpened && } @@ -108,7 +127,7 @@ function SettingsButton() {