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', fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
}); });
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
return ( return (
<> <>
{theme && ( {theme && (

108
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 { import {
type MRT_Row, type MRT_Row,
type MRT_TableOptions, type MRT_TableOptions,
@@ -5,13 +10,8 @@ import {
useMantineReactTable, useMantineReactTable,
} from 'mantine-react-table'; } from 'mantine-react-table';
import { memo } from 'react'; 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 { FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses } from 'styles'; import { actionIconClasses, buttonClasses, textInputClasses } from 'styles';
export function DataTableComponent({ export function DataTableComponent({
tableName, tableName,
@@ -48,10 +48,18 @@ export function DataTableComponent({
}; };
const openDeleteConfirmModal = (row: MRT_Row<any>) => const openDeleteConfirmModal = (row: MRT_Row<any>) =>
modals.openConfirmModal({ modals.openConfirmModal({
title: 'Are you sure you want to delete this user?', title: (
children: <Text>Are you sure?</Text>, <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' }, 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: () => onConfirm: () =>
deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }), deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }),
}); });
@@ -80,12 +88,17 @@ export function DataTableComponent({
columnVisibility: { id: false, categoryIndex: false }, columnVisibility: { id: false, categoryIndex: false },
showGlobalFilter: tableName !== 'Personalization', showGlobalFilter: tableName !== 'Personalization',
}, },
mantineSearchTextInputProps: {}, mantineSearchTextInputProps: {
classNames: textInputClasses,
className: textInputClasses.default,
},
mantinePaperProps: { mantinePaperProps: {
className: 'root',
style: { style: {
border: 'none', border: 'none',
boxShadow: 'none', boxShadow: 'none',
'--mrt-base-background-color': 'transparent',
'--mrt-row-hover-background-color': theme.searchColor,
color: 'var(--color-text-pri)',
}, },
}, },
mantineTableContainerProps: { mantineTableContainerProps: {
@@ -107,9 +120,46 @@ export function DataTableComponent({
}, },
mantineTableBodyRowProps: { mantineTableBodyRowProps: {
style: { style: {
fontSize: '18px',
borderBottom: 'none', 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: { displayColumnDefOptions: {
'mrt-row-actions': { 'mrt-row-actions': {
header: '', header: '',
@@ -118,16 +168,28 @@ export function DataTableComponent({
}, },
renderRowActions: ({ row, table }) => ( renderRowActions: ({ row, table }) => (
<Flex gap='xs'> <Flex gap='xs'>
<ActionIcon <Tooltip
className={actionIconClasses.editButton} color={theme.primaryColor}
classNames={actionIconClasses} bd={`solid 1px ${theme.borderColor}`}
onClick={() => table.setEditingRow(row)} label={'Edit'}
> >
<IconEdit /> <ActionIcon
</ActionIcon> className={actionIconClasses.editButton}
<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}> classNames={actionIconClasses}
<IconTrash /> onClick={() => table.setEditingRow(row)}
</ActionIcon> >
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip
color={theme.primaryColor}
bd={`solid 1px ${theme.borderColor}`}
label={'Delete'}
>
<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
<IconTrash />
</ActionIcon>
</Tooltip>
</Flex> </Flex>
), ),
mantineCreateRowModalProps: { 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); 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 SmallOutlookCard from './SmallOutlookCard';
import SmallWeatherCard from './SmallWeatherCard'; import SmallWeatherCard from './SmallWeatherCard';
import { useCommonHooks } from 'hooks'; import { useCommonHooks, useQueryAPI, useWeatherAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import HourlyCard from './HourlyCard'; import HourlyCard from './HourlyCard';
export function WeatherModal({ export function WeatherModal({
current, current,
outlook, outlook,
points,
closeWeatherModal, closeWeatherModal,
weatherModalOpened, weatherModalOpened,
}: any) { }: 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 [hourlyForecast, setHourlyForecast] = useState<any>([]);
const [sunset, setSunset] = useState(100); const [sunset, setSunset] = useState(100);
const { const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } =
theme, useCommonHooks();
isMobile,
hourly,
setProviderLabel,
setSearchValue,
setProviderURL,
personal,
} = useCommonHooks();
useEffect(() => { useEffect(() => {
if (hourly) { if (hourly) {
setHourlyForecast(hourly.properties.periods.slice(1, 13)); setHourlyForecast(hourly.properties.periods.slice(1, 13));
@@ -75,7 +84,7 @@ export function WeatherModal({
Weather Forecast for{' '} Weather Forecast for{' '}
</Text> </Text>
<Text fz={18} fw={600}> <Text fz={18} fw={600}>
{personal?.[0].physicalAddress} {personalData?.[0]?.physicalAddress}
</Text> </Text>
</Group> </Group>
</Modal.Title> </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 { useLocalStorage } from '@mantine/hooks';
import { appTheme } from 'contexts'; import { appTheme } from 'contexts';
import { useAtom } from 'jotai'; import { useAtom } from 'jotai';
import { useEffect, useState } from 'react'; import { useState } from 'react';
import { useOSMAPI, useQueryAPI, useWeatherAPI } from './useAPI';
export function useCommonHooks() { export function useCommonHooks() {
const isMobile = window.matchMedia('(max-width: 600px)').matches; 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 [theme, setTheme] = useAtom(appTheme);
const [themeName, setThemeName] = useLocalStorage<any>({ const [themeName, setThemeName] = useLocalStorage<any>({
key: 'theme', 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 { return {
isMobile, isMobile,
theme, theme,
setTheme, setTheme,
allThemes,
backgrounds,
isBackgroundFetched,
isAllThemesFetched,
messages,
isMessagesFetching,
basicWeather,
weather,
forecast,
hourly,
handleThemeChange, handleThemeChange,
themeName, themeName,
setThemeName, setThemeName,
@@ -219,37 +58,5 @@ export function useCommonHooks() {
setProviderLabel, setProviderLabel,
providerURL, providerURL,
setProviderURL, 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'); @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 { .Toastify__toast-theme--light {
backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
} }

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

@@ -1,6 +1,6 @@
import { Stack } from '@mantine/core'; import { Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks'; import { useCommonHooks, useOSMAPI, useQueryAPI, useWeatherAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { stackClasses } from 'styles'; import { stackClasses } from 'styles';
import type { CurrentWeather, OutlookWeather } from 'types'; import type { CurrentWeather, OutlookWeather } from 'types';
@@ -11,19 +11,93 @@ import Search from './components/Search/Search';
import SettingsButton from './components/SettingsButton'; import SettingsButton from './components/SettingsButton';
export function Homepage() { export function Homepage() {
const [displayedGreeting, setDisplayedGreeting] = useState(''); const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
endpoint: 'api/personalData',
});
const [personalData, setPersonalData] = useState<any>([]);
const { const {
appFilter, data: messageData,
bookmarkFilter, isFetching: isMessagesFetching,
isMobile, isFetched: isMessagesFetched,
messages, } = useQueryAPI({
isMessagesFetching, endpoint: 'api/messages',
weather, });
basicWeather, const [messages, setMessages] = useState<any>([]);
forecast,
personal,
} = useCommonHooks();
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>({ const [current, setCurrent] = useState<CurrentWeather>({
icon: '', icon: '',
temperature: 0, temperature: 0,
@@ -46,38 +120,6 @@ export function Homepage() {
windDirection: 'N', 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(() => { useEffect(() => {
if (weather !== undefined && basicWeather !== undefined) { if (weather !== undefined && basicWeather !== undefined) {
@@ -140,6 +182,9 @@ export function Homepage() {
<Search <Search
current={current} current={current}
outlook={outlook} outlook={outlook}
weather={weather}
basicWeather={basicWeather}
points={points}
weatherModalOpened={weatherModalOpened} weatherModalOpened={weatherModalOpened}
closeWeatherModal={closeWeatherModal} closeWeatherModal={closeWeatherModal}
openWeatherModal={openWeatherModal} openWeatherModal={openWeatherModal}
@@ -150,6 +195,9 @@ export function Homepage() {
current={current} current={current}
setCurrent={setCurrent} setCurrent={setCurrent}
outlook={outlook} outlook={outlook}
weather={weather}
basicWeather={basicWeather}
points={points}
weatherModalOpened={weatherModalOpened} weatherModalOpened={weatherModalOpened}
closeWeatherModal={closeWeatherModal} closeWeatherModal={closeWeatherModal}
openWeatherModal={openWeatherModal} openWeatherModal={openWeatherModal}

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

@@ -1,10 +1,21 @@
import { Stack, Text } from '@mantine/core'; 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 { textClasses } from 'styles';
import AppItem from './AppItem'; import AppItem from './AppItem';
function Applications({ contentType }: any) { 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 ( return (
<> <>
{applicationData.length > 0 && contentType.length > 0 && ( {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 { Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks'; import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
import LinkGroups from './LinkGroups'; import LinkGroups from './LinkGroups';
function Links({ contentType }: any) { function Links({ contentType }: any) {
const { isMobile, linksIsFetched, groupsIsFetched, groupData, bookmarkData } = const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
useCommonHooks(); 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 ( return (
<> <>
{groupsIsFetched && {groupsIsFetched &&
linksIsFetched && linksIsFetched &&
groupData?.length > 0 && groups?.length > 0 &&
contentType.length > 0 && ( contentType.length > 0 && (
<Stack id='links' style={{ gap: 0 }}> <Stack id='links' style={{ gap: 0 }}>
<Text className={textClasses.sectionTitle} classNames={textClasses}> <Text className={textClasses.sectionTitle} classNames={textClasses}>
@@ -26,7 +50,7 @@ function Links({ contentType }: any) {
gridTemplateRows: 'auto', gridTemplateRows: 'auto',
}} }}
> >
{groupData.map((category: any) => { {groups.map((category: any) => {
if ( if (
contentType.includes(category.filterName) || contentType.includes(category.filterName) ||
contentType.includes('All') 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 { Group, Stack, Text } from '@mantine/core';
import { WeatherModal } from 'components'; import { WeatherModal } from 'components';
import { useCommonHooks } from 'hooks'; import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
@@ -10,11 +10,19 @@ function Header({
current, current,
setCurrent, setCurrent,
outlook, outlook,
weather,
basicWeather,
points,
weatherModalOpened, weatherModalOpened,
closeWeatherModal, closeWeatherModal,
openWeatherModal, openWeatherModal,
}: any) { }: 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()); const [time, setTime] = useState(new Date());
function fixDigits(k: any) { function fixDigits(k: any) {
if (k < 10) { if (k < 10) {
@@ -30,6 +38,12 @@ function Header({
}, 1000); }, 1000);
}, []); }, []);
useEffect(() => {
if (personal && personalIsFetched) {
setPersonalData(personal);
}
}, [personal, personalIsFetched]);
useEffect(() => { useEffect(() => {
if (weather !== undefined && basicWeather !== undefined) { if (weather !== undefined && basicWeather !== undefined) {
setCurrent({ setCurrent({
@@ -77,10 +91,10 @@ function Header({
fz={isMobile ? 24 : undefined} fz={isMobile ? 24 : undefined}
> >
{greet {greet
.replace('$firstName', personal?.[0].firstName) .replace('$firstName', personalData?.[0]?.firstName)
.replace('$lastName', personal?.[0].lastName) .replace('$lastName', personalData?.[0]?.lastName)
.replace('$firstName!', personal?.[0].firstName.toUpperCase()) .replace('$firstName!', personalData?.[0]?.firstName.toUpperCase())
.replace('$lastName!', personal?.[0].lastName.toUpperCase())} .replace('$lastName!', personalData?.[0]?.lastName.toUpperCase())}
</Text> </Text>
</Stack> </Stack>
<Stack <Stack
@@ -150,6 +164,7 @@ function Header({
<WeatherModal <WeatherModal
current={current} current={current}
outlook={outlook} outlook={outlook}
points={points}
closeWeatherModal={closeWeatherModal} closeWeatherModal={closeWeatherModal}
weatherModalOpened={weatherModalOpened} weatherModalOpened={weatherModalOpened}
/> />

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

@@ -1,16 +1,30 @@
import { Stack, TextInput } from '@mantine/core'; import { Stack, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { HelpModal, WeatherModal } from 'components'; import { HelpModal, WeatherModal } from 'components';
import { useCommonHooks } from 'hooks'; import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textInputClasses } from 'styles'; import { textInputClasses } from 'styles';
export default function Search({ export default function Search({
current, current,
outlook, outlook,
points,
weatherModalOpened, weatherModalOpened,
closeWeatherModal, closeWeatherModal,
openWeatherModal, openWeatherModal,
}: any) { }: any) {
const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
endpoint: 'api/providers',
});
const [providerData, setProviderData] = useState<any>([]);
useEffect(() => {
if (providers && providersIsFetched) {
setProviderData(providers);
}
}, [providers, providersIsFetched]);
const { const {
providerLabel, providerLabel,
setProviderLabel, setProviderLabel,
@@ -18,7 +32,6 @@ export default function Search({
setProviderURL, setProviderURL,
searchValue, searchValue,
setSearchValue, setSearchValue,
providers,
} = useCommonHooks(); } = useCommonHooks();
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] = const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
@@ -94,7 +107,7 @@ export default function Search({
) { ) {
setProviderLabel('Show help'); setProviderLabel('Show help');
} else if (item.target.value.startsWith('/')) { } else if (item.target.value.startsWith('/')) {
const provider = providers?.find( const provider = providerData?.find(
(p: any) => p.prefix === item.target.value.split(' ')[0], (p: any) => p.prefix === item.target.value.split(' ')[0],
); );
setProviderLabel(provider?.name || 'Invalid Search'); setProviderLabel(provider?.name || 'Invalid Search');
@@ -121,6 +134,7 @@ export default function Search({
<WeatherModal <WeatherModal
current={current} current={current}
outlook={outlook} outlook={outlook}
points={points}
closeWeatherModal={closeWeatherModal} closeWeatherModal={closeWeatherModal}
weatherModalOpened={weatherModalOpened} weatherModalOpened={weatherModalOpened}
/> />

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

@@ -20,12 +20,21 @@ import {
actionIconClasses, actionIconClasses,
buttonClasses, buttonClasses,
menuClasses, menuClasses,
multiSelectClasses,
selectClasses, selectClasses,
stackClasses, stackClasses,
} from 'styles'; } from 'styles';
function SettingsButton() { function SettingsButton() {
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' }); 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 { mutateAsync: wakeRequest } = useMutationAPI();
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]); const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
const navigate = useNavigate(); const navigate = useNavigate();
@@ -34,13 +43,11 @@ function SettingsButton() {
setCurrentTheme, setCurrentTheme,
handleThemeChange, handleThemeChange,
theme, theme,
allThemes,
appFilter, appFilter,
setAppFilter, setAppFilter,
bookmarkFilter, bookmarkFilter,
setBookmarkFilter, setBookmarkFilter,
isMobile, isMobile,
wolClients,
} = useCommonHooks(); } = useCommonHooks();
const notify = (notification: any) => toast(notification, { position: 'bottom-right' }); const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
@@ -65,6 +72,18 @@ function SettingsButton() {
} }
}, [data, isFetched]); }, [data, isFetched]);
useEffect(() => {
if (wolClients && wolClientsIsFetched) {
setWolClientsData(wolClients);
}
}, [wolClients, wolClientsIsFetched]);
useEffect(() => {
if (allThemes && isAllThemesFetched) {
setAllThemeData(allThemes);
}
}, [allThemes, isAllThemesFetched]);
return ( return (
<> <>
{overlayOpened && <Overlay />} {overlayOpened && <Overlay />}
@@ -108,7 +127,7 @@ function SettingsButton() {
<Button <Button
classNames={buttonClasses} classNames={buttonClasses}
className={buttonClasses.wakeButton} className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null} disabled={!wolClientsData?.length || selectedClient === null}
onClick={() => { onClick={() => {
handleWakeRequest(); handleWakeRequest();
notify('Wake command sent'); notify('Wake command sent');
@@ -121,9 +140,9 @@ function SettingsButton() {
<Select <Select
labelProps={{ display: 'none' }} labelProps={{ display: 'none' }}
placeholder='Pick a host...' placeholder='Pick a host...'
defaultValue={wolClients?.[0]?.hostname} defaultValue={wolClientsData?.[0]?.hostname}
data={ data={
wolClients?.map((wolClient: any) => { wolClientsData?.map((wolClient: any) => {
return { return {
value: wolClient.hostname, value: wolClient.hostname,
label: `${wolClient.hostname} (${wolClient.macAddress})`, label: `${wolClient.hostname} (${wolClient.macAddress})`,
@@ -178,7 +197,7 @@ function SettingsButton() {
color: theme.primaryColor, color: theme.primaryColor,
}} }}
onClick={() => { onClick={() => {
handleThemeChange(allThemes, true); handleThemeChange(allThemeData, true);
}} }}
> >
<FaDice /> <FaDice />
@@ -220,7 +239,7 @@ function SettingsButton() {
onChange={(data: any) => { onChange={(data: any) => {
setAppFilter(data); setAppFilter(data);
}} }}
classNames={selectClasses} classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }} comboboxProps={{ withinPortal: false }}
/> />
<MultiSelect <MultiSelect
@@ -237,7 +256,7 @@ function SettingsButton() {
onChange={(data: any) => { onChange={(data: any) => {
setBookmarkFilter(data); setBookmarkFilter(data);
}} }}
classNames={selectClasses} classNames={multiSelectClasses}
comboboxProps={{ withinPortal: false }} comboboxProps={{ withinPortal: false }}
/> />
</Group> </Group>

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

@@ -1,11 +1,25 @@
import { Stack, Text } from '@mantine/core'; import { Stack, Text } from '@mantine/core';
import { ApplicationColumns, DataTable } from 'components'; import { ApplicationColumns, DataTable } from 'components';
import { useCommonHooks } from 'hooks'; import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
const ApplicationSettings = () => { const ApplicationSettings = () => {
const endpoint = 'api/apps'; 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 ( return (
<Stack> <Stack>

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

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

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

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

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

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

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

@@ -1,11 +1,24 @@
import { Text } from '@mantine/core'; import { Text } from '@mantine/core';
import { DataTable, PersonalizationColumns } from 'components'; import { DataTable, PersonalizationColumns } from 'components';
import { useCommonHooks } from 'hooks'; import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
const PersonalizationSettings = () => { const PersonalizationSettings = () => {
const endpoint = 'api/personalData'; 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 ( return (
<> <>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}> <Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -14,7 +27,7 @@ const PersonalizationSettings = () => {
<DataTable <DataTable
tableName='Personalization' tableName='Personalization'
columns={PersonalizationColumns()} columns={PersonalizationColumns()}
tableData={personalData} tableData={personal}
isFetching={personalIsFetching} isFetching={personalIsFetching}
isLoading={personalIsLoading} isLoading={personalIsLoading}
endpoint={endpoint} endpoint={endpoint}

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

@@ -1,11 +1,27 @@
import { Stack, Text } from '@mantine/core'; import { Stack, Text } from '@mantine/core';
import { DataTable, SearchProviderColumns } from 'components'; import { DataTable, SearchProviderColumns } from 'components';
import { useCommonHooks } from 'hooks'; import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
const SearchProviderSettings = () => { const SearchProviderSettings = () => {
const endpoint = 'api/providers'; 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 ( return (
<Stack> <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 { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses } from 'styles'; 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 [hover, setHover] = useState(false);
const [shift, setShift] = useState<number>(0); const [shift, setShift] = useState<number>(0);
const { handleThemeChange, currentTheme, setCurrentTheme, theme, allThemes } = const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
useCommonHooks();
return ( return (
<Group <Group
gap={0} gap={0}
@@ -51,7 +56,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
setCurrentTheme(cardTheme.name); 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'> <Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
<Stack align='center'> <Stack align='center'>
<Box <Box
@@ -179,6 +184,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
<Stack <Stack
gap={0} gap={0}
style={{ style={{
zIndex: 2,
padding: '4px', padding: '4px',
paddingRight: '0px', paddingRight: '0px',
position: 'absolute', position: 'absolute',
@@ -224,7 +230,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />} {cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
</ActionIcon> </ActionIcon>
<ActionIcon <ActionIcon
className={actionIconClasses.editButton} className={actionIconClasses.themeEditButton}
classNames={actionIconClasses} classNames={actionIconClasses}
onClick={() => handleOpen(cardTheme)} onClick={() => handleOpen(cardTheme)}
mb={2} mb={2}
@@ -232,7 +238,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
<FiEdit color='green' /> <FiEdit color='green' />
</ActionIcon> </ActionIcon>
<ActionIcon <ActionIcon
className={actionIconClasses.editButton} className={actionIconClasses.themeEditButton}
classNames={actionIconClasses} classNames={actionIconClasses}
onClick={() => handleDeleteTheme(cardTheme)} onClick={() => handleDeleteTheme(cardTheme)}
> >

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

@@ -7,7 +7,6 @@ import {
Group, Group,
Image, Image,
Modal, Modal,
OptionalPortal,
Select, Select,
Stack, Stack,
Text, Text,
@@ -153,35 +152,32 @@ function ThemeModal({
/> />
</Group> </Group>
<Group justify='space-between'> <Group justify='space-between'>
<OptionalPortal withinPortal={false}> <Select
<Select data={backgroundList}
data={backgroundList} classNames={selectClasses}
className={selectClasses.select} label='Background Image'
classNames={selectClasses} value={selectedTheme.backgroundImage}
label='Background Image' renderOption={(value) => {
value={selectedTheme.backgroundImage} return (
renderOption={(value) => { <Group h={'100%'} w={'100%'} justify='space-between'>
return ( {value.option.value}
<Group h={'100%'} w={'100%'} justify='space-between'> {value.option.value && value.option.value !== 'None' && (
{value.option.value} <Image
{value.option.value && value.option.value !== 'None' && ( h={'28px'}
<Image w={'50px'}
h={'28px'} src={`/backgrounds/${value.option.value}`}
w={'50px'} />
src={`/backgrounds/${value.option.value}`} )}
/> </Group>
)} );
</Group> }}
); onChange={(value) =>
}} setSelectedTheme({
onChange={(value) => ...selectedTheme,
setSelectedTheme({ backgroundImage: value,
...selectedTheme, })
backgroundImage: value, }
}) />
}
/>
</OptionalPortal>
</Group> </Group>
</Stack> </Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'> <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 { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { FiChevronRight, FiPlus } from 'react-icons/fi'; import { FiChevronRight, FiPlus } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css'; import '@mantine/core/styles/ModalBase.css';
@@ -10,6 +10,12 @@ import { buttonClasses, textClasses } from 'styles';
import ThemeCard from './ThemeCard'; import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal'; import ThemeModal from './ThemeModal';
function ThemesSettings() { 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 [opened, { open, close }] = useDisclosure(false);
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false); const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [colorId, setColorId] = useState<string>(''); const [colorId, setColorId] = useState<string>('');
@@ -20,21 +26,13 @@ function ThemesSettings() {
const { mutateAsync: createTheme } = useMutationAPI(); const { mutateAsync: createTheme } = useMutationAPI();
const { mutateAsync: deleteTheme } = useMutationAPI(); const { mutateAsync: deleteTheme } = useMutationAPI();
const { const { currentTheme, setCurrentTheme, isMobile, theme } = useCommonHooks();
currentTheme,
setCurrentTheme,
backgrounds,
isBackgroundFetched,
isMobile,
theme,
allThemes,
} = useCommonHooks();
useEffect(() => { useEffect(() => {
if (backgrounds && isBackgroundFetched) { if (backgroundData && isBackgroundFetched) {
setBackgroundList(['None', ...backgrounds]); setBackgroundList(['None', ...backgroundData]);
} }
}, [backgrounds, isBackgroundFetched]); }, [backgroundData, isBackgroundFetched]);
const handleOpen = (theme: any) => { const handleOpen = (theme: any) => {
setSelectedTheme(theme); setSelectedTheme(theme);
@@ -162,6 +160,7 @@ function ThemesSettings() {
}} }}
> >
<ThemeCard <ThemeCard
allThemes={allThemes}
cardTheme={cardTheme} cardTheme={cardTheme}
handleOpen={handleOpen} handleOpen={handleOpen}
handleDeleteTheme={handleDeleteTheme} handleDeleteTheme={handleDeleteTheme}

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

@@ -1,11 +1,26 @@
import { Stack, Text } from '@mantine/core'; import { Stack, Text } from '@mantine/core';
import { DataTable, WolClientColumns } from 'components'; import { DataTable, WolClientColumns } from 'components';
import { useCommonHooks } from 'hooks'; import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
const WolClientSettings = () => { const WolClientSettings = () => {
const endpoint = 'api/wolClients'; 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 ( return (
<Stack> <Stack>
@@ -15,7 +30,7 @@ const WolClientSettings = () => {
<DataTable <DataTable
tableName='WoL Clients' tableName='WoL Clients'
columns={WolClientColumns()} columns={WolClientColumns()}
tableData={wolClientsData} tableData={wolClients}
isFetching={wolClientsIsFetching} isFetching={wolClientsIsFetching}
isLoading={wolClientsIsLoading} isLoading={wolClientsIsLoading}
endpoint={endpoint} endpoint={endpoint}

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

@@ -17,13 +17,28 @@
color: var(--color-text-pri) !important; color: var(--color-text-pri) !important;
} }
} }
} }
.editButton { .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 { &.root {
background-color: white !important; background-color: white !important;
color: black !important;
.icon { .icon {
font-size: 24px; 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 { .input {
border-color: light-dark(var(--mantine-color-appGray-2), white) !important; 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; color: var(--color-text-pri) !important;
&:focus { &:focus {
border-color: var(--color-text-pri) !important; border-color: var(--color-text-pri) !important;
@@ -13,6 +13,9 @@
display: flex !important; display: flex !important;
overflow: clip !important; overflow: clip !important;
height: 36px !important; height: 36px !important;
&::placeholder {
color: var(--color-text-acc) !important;
}
} }
.options { .options {
@@ -38,17 +41,7 @@
} }
.dropdown { .dropdown {
background-color: var(--color-background) !important; background-color: var(--color-background);
}
.pillsList {
.pill {
display: none !important;
}
}
.placeholder {
color: white !important;
} }
.root { .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{ .search{
&.root { &.root {
.wrapper { .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 buttonClasses from './Button.module.css';
import menuClasses from './Menu.module.css'; import menuClasses from './Menu.module.css';
import modalClasses from './Modal.module.css'; import modalClasses from './Modal.module.css';
import multiSelectClasses from './MultiSelect.module.css';
import navLinkClasses from './NavLink.module.css'; import navLinkClasses from './NavLink.module.css';
import popoverClasses from './Popover.module.css'; import popoverClasses from './Popover.module.css';
import selectClasses from './Select.module.css'; import selectClasses from './Select.module.css';
@@ -15,6 +16,7 @@ export {
buttonClasses, buttonClasses,
menuClasses, menuClasses,
modalClasses, modalClasses,
multiSelectClasses,
navLinkClasses, navLinkClasses,
popoverClasses, popoverClasses,
selectClasses, selectClasses,