smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Refactored common hooks to reduce api calls

Browse Source
This commit is contained in:
Sean Edmunds
2025-01-30 16:09:09 -06:00
parent aa1e9fd6e5
commit 2c3870f288
27 changed files with 604 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.tsx
View File

@@ -60,7 +60,6 @@ function App() {
fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
});
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
return (
<>
{theme && (

90
src/components/DataTable/DataTable.tsx
View File

@@ -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<any>) =>
modals.openConfirmModal({
title: 'Are you sure you want to delete this user?',
children: <Text>Are you sure?</Text>,
title: (
<Text c={theme.primaryColor}>Are you sure you want to delete this user?</Text>
),
children: <Text c={theme.primaryColor}>Are you sure?</Text>,
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,6 +168,11 @@ export function DataTableComponent({
},
renderRowActions: ({ row, table }) => (
<Flex gap='xs'>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Edit'}
>
<ActionIcon
className={actionIconClasses.editButton}
classNames={actionIconClasses}
@@ -125,9 +180,16 @@ export function DataTableComponent({
>
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Delete'}
>
<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
<IconTrash />
</ActionIcon>
</Tooltip>
</Flex>
),
mantineCreateRowModalProps: {
@@ -158,7 +220,11 @@ export function DataTableComponent({
);
},
});
return <MantineReactTable table={table} />;
return (
<ThemeProvider theme={theme}>
<MantineReactTable table={table} />
</ThemeProvider>
);
}
export const DataTable = memo(DataTableComponent);

31
src/components/WeatherModal/WeatherModal.tsx
View File

@@ -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<any>([]);
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<any>([]);
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{' '}
</Text>
<Text fz={18} fw={600}>
{personal?.[0].physicalAddress}
{personalData?.[0]?.physicalAddress}
</Text>
</Group>
</Modal.Title>

32
src/dataTableStyles.css
View File

@@ -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;
}

195
src/hooks/useCommonHooks.ts
View File

@@ -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<any>({
key: 'theme',
@@ -96,114 +39,10 @@ export function useCommonHooks() {
}
};
const [applicationData, setApplicationData] = useState<any>([]);
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(apps);
}
}, [apps, isAppsFetching]);
const [bookmarkData, setBookmarkData] = useState<any>([]);
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<any>([]);
useEffect(() => {
if (messages && isMessagesFetched) {
setMessageData(messages);
}
}, [messages, isMessagesFetched]);
const [personalData, setPersonalData] = useState<any>([]);
useEffect(() => {
if (personal && personalIsFetched) {
setPersonalData(personal);
}
}, [personal, personalIsFetched]);
const [providerData, setProviderData] = useState<any>([]);
useEffect(() => {
if (providers && providersIsFetched) {
setProviderData(providers);
}
}, [providers, providersIsFetched]);
const [wolClientsData, setWolClientsData] = useState<any>([]);
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,
};
}

11
src/index.css
View File

@@ -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;
}

136
src/pages/homepage/Homepage.tsx
View File

@@ -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<any>([]);
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<any>([]);
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<CurrentWeather>({
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() {
<Search
current={current}
outlook={outlook}
weather={weather}
basicWeather={basicWeather}
points={points}
weatherModalOpened={weatherModalOpened}
closeWeatherModal={closeWeatherModal}
openWeatherModal={openWeatherModal}
@@ -150,6 +195,9 @@ export function Homepage() {
current={current}
setCurrent={setCurrent}
outlook={outlook}
weather={weather}
basicWeather={basicWeather}
points={points}
weatherModalOpened={weatherModalOpened}
closeWeatherModal={closeWeatherModal}
openWeatherModal={openWeatherModal}

15
src/pages/homepage/components/Applications/Applications.tsx
View File

@@ -1,10 +1,21 @@
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 AppItem from './AppItem';
function Applications({ contentType }: any) {
const { isMobile, applicationData } = useCommonHooks();
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
endpoint: 'api/apps',
});
const { isMobile } = useCommonHooks();
const [applicationData, setApplicationData] = useState<any>([]);
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(apps);
}
}, [apps, isAppsFetching]);
return (
<>
{applicationData.length > 0 && contentType.length > 0 && (

34
src/pages/homepage/components/Bookmarks/Bookmarks.tsx
View File

@@ -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<any>([]);
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 && (
<Stack id='links' style={{ gap: 0 }}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
@@ -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')

27
src/pages/homepage/components/Header/Header.tsx
View File

@@ -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<any>([]);
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())}
</Text>
</Stack>
<Stack
@@ -150,6 +164,7 @@ function Header({
<WeatherModal
current={current}
outlook={outlook}
points={points}
closeWeatherModal={closeWeatherModal}
weatherModalOpened={weatherModalOpened}
/>

20
src/pages/homepage/components/Search/Search.tsx
View File

@@ -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<any>([]);
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({
<WeatherModal
current={current}
outlook={outlook}
points={points}
closeWeatherModal={closeWeatherModal}
weatherModalOpened={weatherModalOpened}
/>

35
src/pages/homepage/components/SettingsButton.tsx
View File

@@ -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<any>([]);
const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
endpoint: 'api/themes',
});
const [allThemeData, setAllThemeData] = useState<any>([]);
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 && <Overlay />}
@@ -108,7 +127,7 @@ function SettingsButton() {
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
disabled={!wolClientsData?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
notify('Wake command sent');
@@ -121,9 +140,9 @@ function SettingsButton() {
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a host...'
defaultValue={wolClients?.[0]?.hostname}
defaultValue={wolClientsData?.[0]?.hostname}
data={
wolClients?.map((wolClient: any) => {
wolClientsData?.map((wolClient: any) => {
return {
value: wolClient.hostname,
label: `${wolClient.hostname} (${wolClient.macAddress})`,
@@ -178,7 +197,7 @@ function SettingsButton() {
color: theme.primaryColor,
}}
onClick={() => {
handleThemeChange(allThemes, true);
handleThemeChange(allThemeData, true);
}}
>
<FaDice />
@@ -220,7 +239,7 @@ function SettingsButton() {
onChange={(data: any) => {
setAppFilter(data);
}}
classNames={selectClasses}
classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }}
/>
<MultiSelect
@@ -237,7 +256,7 @@ function SettingsButton() {
onChange={(data: any) => {
setBookmarkFilter(data);
}}
classNames={selectClasses}
classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }}
/>
</Group>

18
src/pages/settings/components/Applications.tsx
View File

@@ -1,11 +1,25 @@
import { Stack, Text } from '@mantine/core';
import { ApplicationColumns, DataTable } from 'components';
import { useCommonHooks } from 'hooks';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
const ApplicationSettings = () => {
const endpoint = 'api/apps';
const { isAppsFetching, isAppsLoading, applicationData } = useCommonHooks();
const {
data: apps,
isFetching: isAppsFetching,
isLoading: isAppsLoading,
} = useQueryAPI({
endpoint: 'api/apps',
});
const [applicationData, setApplicationData] = useState<any>([]);
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(apps);
}
}, [apps, isAppsFetching]);
return (
<Stack>

34
src/pages/settings/components/Bookmarks.tsx
View File

@@ -1,10 +1,38 @@
import { Stack, Text } from '@mantine/core';
import { BookmarkColumns, DataTable } from 'components';
import { useCommonHooks } from 'hooks';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
const BookmarkSettings = () => {
const endpoint = 'api/links';
const { groups, bookmarkData, linksIsFetching, linksIsLoading } = useCommonHooks();
const {
data: linkData,
isFetched: linksIsFetched,
isFetching: linksIsFetching,
isLoading: linksIsLoading,
} = useQueryAPI({
endpoint: 'api/links',
});
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/categories',
});
const [bookmarkData, setBookmarkData] = useState<any>([]);
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]);
return (
<Stack>
@@ -12,7 +40,7 @@ const BookmarkSettings = () => {
Bookmarks
</Text>
<DataTable
tableName='Applications'
tableName='Bookmarks'
columns={BookmarkColumns(groups)}
tableData={bookmarkData}
isFetching={linksIsFetching}

25
src/pages/settings/components/Categories.tsx
View File

@@ -1,10 +1,29 @@
import { Stack, Text } from '@mantine/core';
import { CategoryColumns, DataTable } from 'components';
import { useCommonHooks } from 'hooks';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from '../../../styles';
const CategorySettings = () => {
const endpoint = 'api/categories';
const { groupData, groupsIsFetching, groupsIsLoading } = useCommonHooks();
const {
data: groupData,
isFetching: groupsIsFetching,
isLoading: groupsIsLoading,
isFetched: groupsIsFetched,
} = useQueryAPI({
endpoint: endpoint,
});
const [groups, setGroups] = useState([]);
useEffect(() => {
if (groupData && groupsIsFetched) {
const groupList = groupData?.map((category: any) => {
return category;
});
setGroups(groupList);
}
}, [groupData, groupsIsFetched]);
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -13,7 +32,7 @@ const CategorySettings = () => {
<DataTable
tableName='Categories'
columns={CategoryColumns()}
tableData={groupData ?? []}
tableData={groups ?? []}
isFetching={groupsIsFetching}
isLoading={groupsIsLoading}
endpoint={endpoint}

21
src/pages/settings/components/Messages.tsx
View File

@@ -1,10 +1,25 @@
import { Stack, Text } from '@mantine/core';
import { DataTable, MessagesColumns } from 'components';
import { useCommonHooks } from 'hooks';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
const MessageSettings = () => {
const endpoint = 'api/messages';
const { messageData, isMessagesFetching, isMessagesLoading } = useCommonHooks();
const {
data: messageData,
isFetching: isMessagesFetching,
isFetched: isMessagesFetched,
isLoading: isMessagesLoading,
} = useQueryAPI({
endpoint: 'api/messages',
});
const [messages, setMessages] = useState<any>([]);
useEffect(() => {
if (messageData && isMessagesFetched) {
setMessages(messageData);
}
}, [messageData, isMessagesFetched]);
return (
<Stack>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -13,7 +28,7 @@ const MessageSettings = () => {
<DataTable
tableName='Messages'
columns={MessagesColumns()}
tableData={messageData}
tableData={messages}
isFetching={isMessagesFetching}
isLoading={isMessagesLoading}
endpoint={endpoint}

21
src/pages/settings/components/Personalization.tsx
View File

@@ -1,11 +1,24 @@
import { Text } from '@mantine/core';
import { DataTable, PersonalizationColumns } from 'components';
import { useCommonHooks } from 'hooks';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
const PersonalizationSettings = () => {
const endpoint = 'api/personalData';
const { personalData, personalIsFetching, personalIsLoading } = useCommonHooks();
const {
data: personalData,
isFetched: personalIsFetched,
isFetching: personalIsFetching,
isLoading: personalIsLoading,
} = useQueryAPI({
endpoint: endpoint,
});
const [personal, setPersonal] = useState<any>([]);
useEffect(() => {
if (personalData && personalIsFetched) {
setPersonal(personalData);
}
}, [personalData, personalIsFetched]);
return (
<>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -14,7 +27,7 @@ const PersonalizationSettings = () => {
<DataTable
tableName='Personalization'
columns={PersonalizationColumns()}
tableData={personalData}
tableData={personal}
isFetching={personalIsFetching}
isLoading={personalIsLoading}
endpoint={endpoint}

20
src/pages/settings/components/SearchProviders.tsx
View File

@@ -1,11 +1,27 @@
import { Stack, Text } from '@mantine/core';
import { DataTable, SearchProviderColumns } from 'components';
import { useCommonHooks } from 'hooks';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
const SearchProviderSettings = () => {
const endpoint = 'api/providers';
const { providerData, providersIsFetching, providersIsLoading } = useCommonHooks();
const {
data: providers,
isFetched: providersIsFetched,
isFetching: providersIsFetching,
isLoading: providersIsLoading,
} = useQueryAPI({
endpoint: endpoint,
});
const [providerData, setProviderData] = useState<any>([]);
useEffect(() => {
if (providers && providersIsFetched) {
setProviderData(providers);
}
}, [providers, providersIsFetched]);
return (
<Stack>

18
src/pages/settings/components/ThemeCard.tsx
View File

@@ -4,11 +4,16 @@ import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses } from 'styles';
function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: any) {
function ThemeCard({
cardTheme,
handleOpen,
handleDeleteTheme,
createTheme,
allThemes,
}: any) {
const [hover, setHover] = useState(false);
const [shift, setShift] = useState<number>(0);
const { handleThemeChange, currentTheme, setCurrentTheme, theme, allThemes } =
useCommonHooks();
const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
return (
<Group
gap={0}
@@ -51,7 +56,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
setCurrentTheme(cardTheme.name);
}}
>
{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={0} />}
{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={1} />}
<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
<Stack align='center'>
<Box
@@ -179,6 +184,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
<Stack
gap={0}
style={{
zIndex: 2,
padding: '4px',
paddingRight: '0px',
position: 'absolute',
@@ -224,7 +230,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
</ActionIcon>
<ActionIcon
className={actionIconClasses.editButton}
className={actionIconClasses.themeEditButton}
classNames={actionIconClasses}
onClick={() => handleOpen(cardTheme)}
mb={2}
@@ -232,7 +238,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
<FiEdit color='green' />
</ActionIcon>
<ActionIcon
className={actionIconClasses.editButton}
className={actionIconClasses.themeEditButton}
classNames={actionIconClasses}
onClick={() => handleDeleteTheme(cardTheme)}
>

4
src/pages/settings/components/ThemeModal.tsx
View File

@@ -7,7 +7,6 @@ import {
Group,
Image,
Modal,
OptionalPortal,
Select,
Stack,
Text,
@@ -153,10 +152,8 @@ function ThemeModal({
/>
</Group>
<Group justify='space-between'>
<OptionalPortal withinPortal={false}>
<Select
data={backgroundList}
className={selectClasses.select}
classNames={selectClasses}
label='Background Image'
value={selectedTheme.backgroundImage}
@@ -181,7 +178,6 @@ function ThemeModal({
})
}
/>
</OptionalPortal>
</Group>
</Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>

25
src/pages/settings/components/Themes.tsx
View File

@@ -1,6 +1,6 @@
import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiChevronRight, FiPlus } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css';
@@ -10,6 +10,12 @@ import { buttonClasses, textClasses } from 'styles';
import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal';
function ThemesSettings() {
const { data: allThemes } = useQueryAPI({
endpoint: 'api/themes',
});
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
endpoint: 'api/backgrounds',
});
const [opened, { open, close }] = useDisclosure(false);
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [colorId, setColorId] = useState<string>('');
@@ -20,21 +26,13 @@ function ThemesSettings() {
const { mutateAsync: createTheme } = useMutationAPI();
const { mutateAsync: deleteTheme } = useMutationAPI();
const {
currentTheme,
setCurrentTheme,
backgrounds,
isBackgroundFetched,
isMobile,
theme,
allThemes,
} = useCommonHooks();
const { currentTheme, setCurrentTheme, isMobile, theme } = useCommonHooks();
useEffect(() => {
if (backgrounds && isBackgroundFetched) {
setBackgroundList(['None', ...backgrounds]);
if (backgroundData && isBackgroundFetched) {
setBackgroundList(['None', ...backgroundData]);
}
}, [backgrounds, isBackgroundFetched]);
}, [backgroundData, isBackgroundFetched]);
const handleOpen = (theme: any) => {
setSelectedTheme(theme);
@@ -162,6 +160,7 @@ function ThemesSettings() {
}}
>
<ThemeCard
allThemes={allThemes}
cardTheme={cardTheme}
handleOpen={handleOpen}
handleDeleteTheme={handleDeleteTheme}

21
src/pages/settings/components/WolClients.tsx
View File

@@ -1,11 +1,26 @@
import { Stack, Text } from '@mantine/core';
import { DataTable, WolClientColumns } from 'components';
import { useCommonHooks } from 'hooks';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
const WolClientSettings = () => {
const endpoint = 'api/wolClients';
const { wolClientsData, wolClientsIsFetching, wolClientsIsLoading } = useCommonHooks();
const {
data: wolClientsData,
isFetched: wolClientsIsFetched,
isFetching: wolClientsIsFetching,
isLoading: wolClientsIsLoading,
} = useQueryAPI({
endpoint: endpoint,
});
const [wolClients, setWolClients] = useState<any>([]);
useEffect(() => {
if (wolClientsData && wolClientsIsFetched) {
setWolClients(wolClientsData);
}
}, [wolClientsData, wolClientsIsFetched]);
return (
<Stack>
@@ -15,7 +30,7 @@ const WolClientSettings = () => {
<DataTable
tableName='WoL Clients'
columns={WolClientColumns()}
tableData={wolClientsData}
tableData={wolClients}
isFetching={wolClientsIsFetching}
isLoading={wolClientsIsLoading}
endpoint={endpoint}

19
src/styles/ActionIcon.module.css
View File

@@ -17,13 +17,28 @@
color: var(--color-text-pri) !important;
}
}
}
.editButton {
&.root {
background-color: var(--color-text-acc) !important;
color: var(--color-text-pri) !important;
.icon {
font-size: 24px;
}
.loader {
display: none;
}
:hover {
background-color: var(--color-text-pri) !important;
color: var(--color-text-acc) !important;
}
}
}
.themeEditButton {
&.root {
background-color: white !important;
color: black !important;
.icon {
font-size: 24px;
}

61
src/styles/MultiSelect.module.css Normal file
View File

@@ -0,0 +1,61 @@
.label {
margin-bottom: 5px !important;
color: var(--color-text-pri) !important;
font-size: 14px !important;
}
.input {
border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
background-color: var(--color-background) !important;
color: var(--color-text-pri) !important;
&:focus {
border-color: var(--color-text-pri) !important;
}
display: flex !important;
overflow: clip !important;
height: 36px !important;
}
.options {
.option {
color: var(--color-text-pri) !important;
font-size: 14px !important;
/* applies styles to selected item */
&[data-checked] {
background-color: var(--color-text-acc) !important;
color: var(--color-text-pri) !important;
&:hover {
background-color: var(--color-text-acc) !important;
color: var(--color-background) !important;
}
}
/* applies styles to hovered item (with mouse or keyboard) */
&:hover {
background-color: var(--color-text-acc) !important;
color: var(--color-text-pri) !important;
}
}
}
.dropdown {
background-color: var(--color-background) !important;
}
.pillsList {
.pill {
display: none !important;
}
}
.inputField {
color: var(--color-text-acc) !important;
&::placeholder {
color: var(--color-text-acc) !important;
}
}
.root {
width: 180px !important;
}

17
src/styles/Select.module.css
View File

@@ -5,7 +5,7 @@
}
.input {
border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
background-color: var(--color-background);
background-color: var(--color-background) !important;
color: var(--color-text-pri) !important;
&:focus {
border-color: var(--color-text-pri) !important;
@@ -13,6 +13,9 @@
display: flex !important;
overflow: clip !important;
height: 36px !important;
&::placeholder {
color: var(--color-text-acc) !important;
}
}
.options {
@@ -38,17 +41,7 @@
}
.dropdown {
background-color: var(--color-background) !important;
}
.pillsList {
.pill {
display: none !important;
}
}
.placeholder {
color: white !important;
background-color: var(--color-background);
}
.root {

22
src/styles/TextInput.module.css
View File

@@ -1,3 +1,25 @@
.default{
&.root {
.wrapper {
display: flex;
justify-content: center;
.input {
width: 100%;
border: none;
background-color: var(--color-search-background);
color: var(--color-text-pri);
font-size: 18px;
}
.section{
color: var(--color-border);
width: auto;
padding-left: .5rem;
opacity: 1;
}
}
}
}
.search{
&.root {
.wrapper {

2
src/styles/index.ts
View File

@@ -2,6 +2,7 @@ import actionIconClasses from './ActionIcon.module.css';
import buttonClasses from './Button.module.css';
import menuClasses from './Menu.module.css';
import modalClasses from './Modal.module.css';
import multiSelectClasses from './MultiSelect.module.css';
import navLinkClasses from './NavLink.module.css';
import popoverClasses from './Popover.module.css';
import selectClasses from './Select.module.css';
@@ -15,6 +16,7 @@ export {
buttonClasses,
menuClasses,
modalClasses,
multiSelectClasses,
navLinkClasses,
popoverClasses,
selectClasses,