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

Updated names for uniformity

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-28 14:21:45 -05:00
parent f44f6e004b
commit 19b793fbf9
26 changed files with 247 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/WeatherModal/ExtendedForecastCard.tsx
View File

@@ -1,5 +1,4 @@
import { Group, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { textClasses } from 'styles';
import type { ExtendedForecast } from 'types';
import WeatherIcon from './WeatherIcon';
@@ -9,8 +8,6 @@ export default function ExtendedForecastCard({
}: { forecast: ExtendedForecast[] }) {
const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
const { isMobile } = useCommonHooks();
return (
<Stack
gap={0}
@@ -33,7 +30,7 @@ export default function ExtendedForecastCard({
Extended Forecast
</Text>
</Group>
<Group w={'100%'} align='center' justify='space-between'>
<SimpleGrid w={'100%'} cols={6}>
{day.map((item: ExtendedForecast, index: number) => {
const short = item.shortForecast.includes('And')
? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
@@ -43,7 +40,6 @@ export default function ExtendedForecastCard({
return (
<Stack
w={isMobile ? '30%' : '15%'}
key={item.name}
gap={0}
align='center'
@@ -78,7 +74,7 @@ export default function ExtendedForecastCard({
</Stack>
);
})}
</Group>
</SimpleGrid>
</Stack>
);
}

16
src/hooks/useAPI.ts
View File

@@ -127,10 +127,10 @@ export function useMutationAPI() {
queryClient.refetchQueries({
queryKey: ['GET', endpoint],
});
endpoint === 'api/linkOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/links'] });
endpoint === 'api/categoryOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/categories'] });
endpoint === 'api/bookmarkOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] });
endpoint === 'api/bookmarkCategoryOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] });
endpoint === 'api/applicationOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
},
@@ -138,10 +138,10 @@ export function useMutationAPI() {
queryClient.refetchQueries({
queryKey: ['GET', endpoint],
});
endpoint === 'api/linkOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/links'] });
endpoint === 'api/categoryOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/categories'] });
endpoint === 'api/bookmarkOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] });
endpoint === 'api/bookmarkCategoryOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] });
endpoint === 'api/applicationOrder' &&
queryClient.refetchQueries({ queryKey: ['GET', 'api/applicationOrder'] });
},

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

@@ -19,7 +19,7 @@ import Search from './components/Search/Search';
import SettingsButton from './components/SettingsButton/SettingsButton';
export function Homepage() {
const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({
endpoint: 'api/personalData',
});
const {
@@ -27,7 +27,7 @@ export function Homepage() {
isFetching: isMessagesFetching,
isFetched: isMessagesFetched,
} = useQueryAPI({
endpoint: 'api/messages',
endpoint: 'api/displayedGreeting',
});
const {
appFilter,
@@ -37,8 +37,8 @@ export function Homepage() {
currentLocation,
setCurrentLocation,
} = useCommonHooks();
const [personalData, setPersonalData] = useState<PersonalData>();
const [messages, setMessages] = useState<Message[]>([]);
const [personal, setPersonal] = useState<PersonalData>();
const [message, setMessage] = useState<Message>();
const [displayedGreeting, setDisplayedGreeting] = useState('');
const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
useDisclosure(false);
@@ -53,36 +53,36 @@ export function Homepage() {
const date = new Date().toLocaleDateString('en-US', dateOptions);
useEffect(() => {
if (messageData && isMessagesFetched) {
setMessages(messageData);
setMessage(messageData[0]);
}
}, [messageData, isMessagesFetched]);
useEffect(() => {
if (personal && personalIsFetched) {
setCurrentUser(personal[0]);
setPersonalData(personal[0]);
if (personalData && personalIsFetched) {
setCurrentUser(personalData[0]);
setPersonal(personalData[0]);
}
}, [personal, personalIsFetched]);
}, [personalData, personalIsFetched]);
useEffect(() => {
if (messages && personalData) {
if (message !== undefined && personal) {
setDisplayedGreeting(() => {
if (Math.floor(Math.random() * 100) > 10 || messages.length === 0) {
if (Math.floor(Math.random() * 100) > 10 || message === undefined) {
switch (Math.floor(new Date().getHours() / 6)) {
case 0:
return `Good night, ${personalData?.firstName}!`;
return `Good night, ${personal?.firstName}!`;
case 1:
return `Good morning, ${personalData?.firstName}!`;
return `Good morning, ${personal?.firstName}!`;
case 2:
return `Good afternoon, ${personalData?.firstName}!`;
return `Good afternoon, ${personal?.firstName}!`;
case 3:
return `Good evening, ${personalData?.firstName}!`;
return `Good evening, ${personal?.firstName}!`;
}
}
return messages[Math.floor(Math.random() * messages.length)].message;
return message.message;
});
}
}, [messages, personalData, isMessagesFetching]);
}, [message, personal, isMessagesFetching]);
const { data: weatherMetadata } = useOSMAPI({
address: personal?.[0]?.physicalAddress,
address: personalData?.[0]?.physicalAddress,
});
const { data: points } = useWeatherAPI({
endpoint: 'points',

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

@@ -6,46 +6,42 @@ import type { Application } from 'types';
import AppItem from './AppItem';
function Applications({ contentType }: { contentType: string[] }) {
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
endpoint: 'api/apps',
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
endpoint: 'api/enabledApplications',
});
const { isMobile, appSort, appDensity } = useCommonHooks();
const [applicationData, setApplicationData] = useState<Application[]>([]);
const [applications, setApplications] = useState<Application[]>([]);
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(
apps
.filter((a: Application) => a.enabled === 1)
.sort((a: Application, b: Application) => {
switch (appSort) {
case 'A>Z':
return a.name > b.name ? 1 : -1;
case 'Z>A':
return a.name < b.name ? 1 : -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
case 'Custom':
return a.index > b.index ? 1 : -1;
}
}),
if (applicationData && !isApplicationDataFetching) {
setApplications(
applicationData.sort((a: Application, b: Application) => {
switch (appSort) {
case 'A>Z':
return a.name > b.name ? 1 : -1;
case 'Z>A':
return a.name < b.name ? 1 : -1;
case 'Newest':
if (a.id && b.id) {
return a.id < b.id ? 1 : -1;
}
return -1;
case 'Oldest':
if (a.id && b.id) {
return a.id > b.id ? 1 : -1;
}
return -1;
case 'Custom':
return a.index > b.index ? 1 : -1;
}
}),
);
}
}, [apps, isAppsFetching, appSort]);
}, [applicationData, isApplicationDataFetching, appSort]);
return (
<>
{applicationData.length > 0 && contentType.length > 0 && (
<Stack id='apps' style={{ gap: 0 }}>
{applications.length > 0 && contentType.length > 0 && (
<Stack style={{ gap: 0 }}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Applications
</Text>
@@ -63,7 +59,7 @@ function Applications({ contentType }: { contentType: string[] }) {
gridTemplateRows: '64px',
}}
>
{applicationData
{applications
?.filter(
(application: Application) =>
contentType.includes(application.filterName) ||

17
src/pages/homepage/components/Bookmarks/LinkGroups.tsx → src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx
View File

@@ -1,9 +1,12 @@
import { Stack, Text } from '@mantine/core';
import { textClasses } from 'styles';
import type { Bookmark } from 'types';
import LinkItem from './LinkItem';
import BookmarkItem from './BookmarkItem';
function LinkGroups({ links, category }: { links: Bookmark[]; category: string }) {
function BookmarkGroups({
bookmarks,
category,
}: { bookmarks: Bookmark[]; category: string }) {
return (
<Stack
style={{
@@ -14,16 +17,16 @@ function LinkGroups({ links, category }: { links: Bookmark[]; category: string }
whiteSpace: 'nowrap',
}}
>
<Text className={textClasses.linkCategory} classNames={textClasses}>
<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
{category}
</Text>
{links
{bookmarks
?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
.map((link: Bookmark) => (
<LinkItem key={link.name} link={link} />
.map((bookmark: Bookmark) => (
<BookmarkItem key={bookmark.name} bookmark={bookmark} />
))}
</Stack>
);
}
export default LinkGroups;
export default BookmarkGroups;

10
src/pages/homepage/components/Bookmarks/LinkItem.tsx → src/pages/homepage/components/Bookmarks/BookmarkItem.tsx
View File

@@ -2,17 +2,17 @@ import { Text } from '@mantine/core';
import { textClasses } from 'styles';
import type { Bookmark } from 'types';
function LinkItem({ link }: { link: Bookmark }) {
function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
return (
<Text
className={textClasses.linkItem}
className={textClasses.bookmarkItem}
classNames={textClasses}
component='a'
href={link.url}
href={bookmark.url}
>
{link.name}
{bookmark.name}
</Text>
);
}
export default LinkItem;
export default BookmarkItem;

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

@@ -3,24 +3,24 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import LinkGroups from './LinkGroups';
import BookmarkGroups from './BookmarkGroups';
function Links({ contentType }: { contentType: string[] }) {
const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
endpoint: 'api/links',
function Bookmarks({ contentType }: { contentType: string[] }) {
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
endpoint: 'api/bookmarks',
});
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/categories',
endpoint: 'api/bookmarkCategories',
});
const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
useEffect(() => {
if (linkData && linksIsFetched) {
setBookmarkData(linkData);
if (bookmarkData && bookmarksIsFetched) {
setBookmarks(bookmarkData);
}
}, [linksIsFetched, linkData]);
}, [bookmarksIsFetched, bookmarkData]);
useEffect(() => {
if (groupData && groupsIsFetched) {
@@ -57,10 +57,10 @@ function Links({ contentType }: { contentType: string[] }) {
return (
<>
{groupsIsFetched &&
linksIsFetched &&
bookmarksIsFetched &&
groups?.length > 0 &&
contentType.length > 0 && (
<Stack id='links' style={{ gap: 0 }}>
<Stack style={{ gap: 0 }}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Bookmarks
</Text>
@@ -85,10 +85,10 @@ function Links({ contentType }: { contentType: string[] }) {
.map((category: BookmarkGroup) => {
return (
<LinkGroups
<BookmarkGroups
key={category.categoryName}
category={category.categoryName}
links={bookmarkData.filter(
bookmarks={bookmarks.filter(
(bookmark: Bookmark) =>
bookmark.category === category.categoryName,
)}
@@ -102,4 +102,4 @@ function Links({ contentType }: { contentType: string[] }) {
);
}
export default Links;
export default Bookmarks;

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

@@ -30,7 +30,6 @@ function Header({
setTime(newDate);
}, 1000);
}, []);
useEffect(() => {
if (weather !== undefined && basicWeather !== undefined) {
setCurrent({
@@ -92,7 +91,7 @@ function Header({
fz={isMobile ? 24 : undefined}
>
{greet
.replace('$firstName', currentUser.firstName)
?.replace('$firstName', currentUser.firstName)
.replace('$lastName', currentUser.lastName)
.replace('$^firstName', currentUser.firstName.toUpperCase())
.replace('$^lastName', currentUser.lastName.toUpperCase())}

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

@@ -33,16 +33,17 @@ export default function Search({
closeWeatherModal: () => void;
openWeatherModal: () => void;
}) {
const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
endpoint: 'api/providers',
});
const [providerData, setProviderData] = useState<Provider[]>([]);
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
endpoint: 'api/apps',
const [providers, setProviders] = useState<Provider[]>([]);
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
endpoint: 'api/enabledApplications',
});
const [applicationData, setApplicationData] = useState<Application[]>([]);
const { data: history, isFetched: historyIsFetched } = useQueryAPI({
endpoint: 'api/searchHistory',
const [applications, setApplications] = useState<Application[]>([]);
const searchEndpoint = 'api/searchHistory';
const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
endpoint: searchEndpoint,
});
const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
const [filteredHistory, setFilteredHistory] = useState<SearchHistoryItem[]>([]);
@@ -69,7 +70,7 @@ export default function Search({
const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
const url =
providers.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
providerData.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
'https://www.google.com/search?q=';
open(`${url}${option.searchTerm}`, '_self');
};
@@ -99,7 +100,7 @@ export default function Search({
} else if (item.target.value.startsWith('/')) {
mutateAsync({
method: 'POST',
endpoint: 'api/searchHistory',
endpoint: searchEndpoint,
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
}).then(() => {
open(`${providerURL}${subtext}`, '_self');
@@ -107,7 +108,7 @@ export default function Search({
} else if (providerLabel === 'Show weather') {
openWeatherModal();
} else if (providerLabel.startsWith('Launch')) {
const url = applicationData.find(
const url = applications.find(
(app: Application) =>
app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
)?.url;
@@ -123,7 +124,7 @@ export default function Search({
} else {
mutateAsync({
method: 'POST',
endpoint: 'api/searchHistory',
endpoint: searchEndpoint,
body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
}).then(() => {
open(`${providerURL}${subtext}`, '_self');
@@ -221,7 +222,7 @@ export default function Search({
setProviderURL('https://www.google.com/search?q=');
setProviderPrefix('/g');
} else if (item.target.value.startsWith('/')) {
const provider = providerData?.find(
const provider = providers?.find(
(p: Provider) => p.prefix === item.target.value.split(' ')[0],
);
setProviderLabel(provider?.name ?? 'Invalid Search');
@@ -231,7 +232,7 @@ export default function Search({
if (item.target.value === '!w' || item.target.value === '!weather') {
setProviderLabel('Show weather');
} else if (
applicationData?.find(
applications?.find(
(app: Application) =>
app.baseUrl.substring(1).toLowerCase() === item.target.value.substr(1),
)
@@ -250,7 +251,7 @@ export default function Search({
const optionsFilter: OptionsFilter = ({ options, search }) => {
const splittedSearch = search.toLowerCase().trim().split(' ');
if (splittedSearch[0].startsWith('!')) {
return apps
return applicationData
.filter((app: Application) =>
app.name.toLowerCase().includes(splittedSearch[0].substring(1).toLowerCase()),
)
@@ -341,7 +342,7 @@ export default function Search({
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: 'api/searchHistory',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
@@ -392,25 +393,25 @@ export default function Search({
}
useEffect(() => {
if (providers && providersIsFetched) {
setProviderData(providers);
if (providerData && providerDataIsFetched) {
setProviders(providerData);
}
}, [providers, providersIsFetched]);
}, [providerData, providerDataIsFetched]);
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(apps);
if (applicationData && !isApplicationDataFetching) {
setApplications(applicationData);
}
}, [apps, isAppsFetching]);
}, [applicationData, isApplicationDataFetching]);
useEffect(() => {
if (history && historyIsFetched) {
setSearchHistory(history);
if (historyData && historyDataIsFetched) {
setSearchHistory(historyData);
if (filteredHistory.length === 0) {
setFilteredHistory(history.slice(0, 10));
setFilteredHistory(historyData.slice(0, 10));
}
}
}, [history, historyIsFetched]);
}, [historyData, historyDataIsFetched]);
useEffect(() => {
if (dropdownOpened) {
@@ -494,8 +495,8 @@ export default function Search({
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
applicationData={applicationData}
providerData={providerData}
applicationData={applications}
providerData={providers}
providerModalOpened={providerModalOpened}
closeProviderModal={closeProviderModal}
/>

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

@@ -31,21 +31,23 @@ import {
import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';
function SettingsButton() {
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({
const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
endpoint: 'api/appCategories',
});
const { data: wolClientData, isFetched: wolClientDataIsFetched } = useQueryAPI({
endpoint: 'api/wolClients',
});
const [wolClientsData, setWolClientsData] = useState<WolClient[]>([]);
const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
const [wolClients, setWolClients] = useState<WolClient[]>([]);
const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
endpoint: 'api/themes',
});
const { data: themePlaylists } = useQueryAPI({
const { data: themePlaylistData } = useQueryAPI({
endpoint: 'api/themePlaylists',
});
const { mutateAsync } = useMutationAPI();
const [allThemeData, setAllThemeData] = useState<Theme[]>([]);
const [allThemes, setAllThemes] = useState<Theme[]>([]);
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
const [selectedClient, setSelectedClient] = useState<WolClient>(wolClients?.[0]);
const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
const [overlayOpened, setOverlayOpened] = useState(false);
const navigate = useNavigate();
const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
@@ -75,7 +77,7 @@ function SettingsButton() {
mutateAsync({
method: 'POST',
endpoint: 'api/wakeClient',
body: selectedClient || wolClients?.[0],
body: selectedClient || wolClientData?.[0],
});
};
@@ -86,26 +88,26 @@ function SettingsButton() {
};
useEffect(() => {
if (data) {
const list: [any] = data.map((category: AppCategory) => {
if (appCategoryData) {
const list: [any] = appCategoryData.map((category: AppCategory) => {
return { value: category.filterName, label: category.filterName };
});
list.unshift({ value: 'All', label: 'All' });
setCategories(list);
}
}, [data, isFetched]);
}, [appCategoryData, appCategoryDataIsFetched]);
useEffect(() => {
if (wolClients && wolClientsIsFetched) {
setWolClientsData(wolClients);
if (wolClientData && wolClientDataIsFetched) {
setWolClients(wolClientData);
}
}, [wolClients, wolClientsIsFetched]);
}, [wolClientData, wolClientDataIsFetched]);
useEffect(() => {
if (allThemes && isAllThemesFetched) {
setAllThemeData(allThemes);
if (allThemeData && allThemeDataIsFetched) {
setAllThemes(allThemeData);
}
}, [allThemes, isAllThemesFetched]);
}, [allThemeData, allThemeDataIsFetched]);
return (
<>
{overlayOpened && <Overlay pos={'fixed'} />}
@@ -146,7 +148,7 @@ function SettingsButton() {
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClientsData?.length || selectedClient === null}
disabled={!wolClients?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
notify('Wake command sent');
@@ -159,9 +161,9 @@ function SettingsButton() {
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a host...'
defaultValue={wolClientsData?.[0]?.hostname}
defaultValue={wolClients?.[0]?.hostname}
data={
wolClientsData
wolClients
?.map((wolClient: WolClient) => {
return {
value: wolClient.hostname,
@@ -227,7 +229,7 @@ function SettingsButton() {
}}
onClick={() => {
setCurrentThemePlaylist('All');
handleThemeChange(allThemeData, true);
handleThemeChange(allThemes, true);
}}
>
<FaDice />
@@ -246,7 +248,7 @@ function SettingsButton() {
placeholder='Pick a playlist...'
value={currentThemePlaylist}
data={
themePlaylists
themePlaylistData
?.map((playlist: ThemePlaylist) => {
return {
value: playlist.name,
@@ -271,12 +273,12 @@ function SettingsButton() {
setThemeName('random');
} else {
const themeList = JSON.parse(
themePlaylists.find(
themePlaylistData.find(
(t: ThemePlaylist) => t.name === 'Time of Day',
).themeList,
);
setThemeName(
allThemes.find(
allThemeData.find(
(t: Theme) =>
t.id ===
Number(themeList[Math.floor(new Date().getHours() / 6)]),

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

@@ -40,12 +40,12 @@ const ApplicationSettings = () => {
index: 0,
enabled: 1,
};
const appsEndpoint = 'api/apps';
const appsEndpoint = 'api/applications';
const appsOrderEndpoint = 'api/applicationOrder';
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
const { data: applicationData, isFetching: isAppsFetching } = useQueryAPI({
endpoint: appsEndpoint,
});
const [applicationData, setApplicationData] = useState<Application[]>([]);
const [applications, setApplications] = useState<Application[]>([]);
const [applicationList, setApplicationList] = useState<Application[]>([]);
const { theme, isMobile, reorder } = useCommonHooks();
const [newApplication, setNewApplication] = useState<Application>(defaultApplication);
@@ -64,7 +64,7 @@ const ApplicationSettings = () => {
return;
}
const items = reorder(applicationData, result.source.index, result.destination.index);
const items = reorder(applications, result.source.index, result.destination.index);
setApplicationList(
items.map((item: any, index: number) => {
return {
@@ -83,19 +83,19 @@ const ApplicationSettings = () => {
};
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(
apps
if (applicationData && !isAppsFetching) {
setApplications(
applicationData
.filter((a: Application) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
);
}
}, [apps, isAppsFetching, debouncedSearch]);
}, [applicationData, isAppsFetching, debouncedSearch]);
useEffect(() => {
if (applicationList.length > 0 && applicationList !== applicationData) {
if (applicationList.length > 0 && applicationList !== applications) {
mutateAsync({
method: 'PATCH',
endpoint: appsOrderEndpoint,
@@ -229,7 +229,7 @@ const ApplicationSettings = () => {
endpoint: appsEndpoint,
body: {
...newApplication,
index: applicationData.length,
index: applications.length,
},
}).then(handleClose);
}
@@ -253,10 +253,11 @@ const ApplicationSettings = () => {
openModal={openModal}
title={'Applications'}
tooltip={{
title: 'Applications are the apps that will be displayed on the homepage.',
title:
'Applications are the applicationData that will be displayed on the homepage.',
highlightList: [
'Applications',
'apps',
'applicationData',
'application',
'name',
'base url',
@@ -288,7 +289,7 @@ const ApplicationSettings = () => {
ref={provided.innerRef}
{...provided.droppableProps}
>
{applicationData?.map((app: Application) => (
{applications?.map((app: Application) => (
<Draggable
key={app.id}
draggableId={`${app.id}`}
@@ -361,7 +362,7 @@ const ApplicationSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{applicationData?.map((application: Application) => (
{applications?.map((application: Application) => (
<GridCol span={6} key={application.id}>
<Popover
withArrow

23
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -1,6 +1,5 @@
import {
ActionIcon,
Button,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
@@ -38,7 +37,7 @@ function DebouncedApplication({
};
useEffect(() => {
if (debounced && Object.keys(debounced).length > 0) {
mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced });
mutateAsync({ method: 'PATCH', endpoint: 'api/applications', body: debounced });
}
}, [debounced]);
@@ -52,6 +51,7 @@ function DebouncedApplication({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(app, 'api/applications')}
title='Delete Application'
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -68,25 +68,6 @@ function DebouncedApplication({
}}
>{`"${app.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(app, 'api/apps');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

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

@@ -15,12 +15,12 @@ const BookmarkSettings = () => {
categoryIndex: 0,
filterName: '',
};
const linksEndpoint = 'api/links';
const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
endpoint: linksEndpoint,
const bookmarksEndpoint = 'api/bookmarks';
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
endpoint: bookmarksEndpoint,
});
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const categoriesEndpoint = 'api/categories';
const categoriesEndpoint = 'api/bookmarkCategories';
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: categoriesEndpoint,
});
@@ -60,10 +60,10 @@ const BookmarkSettings = () => {
}
useEffect(() => {
if (linkData && linksIsFetched) {
setBookmarks(linkData);
if (bookmarkData && bookmarksIsFetched) {
setBookmarks(bookmarkData);
}
}, [linksIsFetched, linkData]);
}, [bookmarksIsFetched, bookmarkData]);
useEffect(() => {
if (groupData && groupsIsFetched) {
@@ -98,7 +98,11 @@ const BookmarkSettings = () => {
useEffect(() => {
if (groupList.length > 0 && groupList !== groups) {
mutateAsync({ method: 'PATCH', endpoint: 'api/categoryOrder', body: groupList });
mutateAsync({
method: 'PATCH',
endpoint: 'api/bookmarkCategoryOrder',
body: groupList,
});
}
}, [groupList]);

33
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -33,7 +24,7 @@ function DebouncedBookmarkItem({
};
useEffect(() => {
if (Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/links', body: debounced });
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
}
}, [debounced]);
@@ -48,6 +39,7 @@ function DebouncedBookmarkItem({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(bookmark, 'api/bookmarks')}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this bookmark?</Text>
@@ -63,25 +55,6 @@ function DebouncedBookmarkItem({
}}
>{`"${bookmark.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(bookmark, 'api/links');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
title='Delete Bookmark'

36
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -72,7 +72,11 @@ function DebouncedGroupSettingsItem({
useEffect(() => {
if (Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/categories', body: debounced });
mutateAsync({
method: 'PATCH',
endpoint: 'api/bookmarkCategories',
body: debounced,
});
setUpdate({});
}
}, [debounced]);
@@ -85,7 +89,7 @@ function DebouncedGroupSettingsItem({
useEffect(() => {
if (bookmarkList && bookmarkList !== bookmarks) {
mutateAsync({ method: 'PATCH', endpoint: 'api/linkOrder', body: bookmarkList });
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarkOrder', body: bookmarkList });
}
}, [bookmarkList]);
@@ -94,6 +98,10 @@ function DebouncedGroupSettingsItem({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => {
handleDelete(bookmarks, 'api/bookmarks');
handleDelete(group, 'api/bookmarkCategories');
}}
title='Delete message'
body={
<Stack gap={0} w={'100%'} h={'175px'} align='center'>
@@ -113,28 +121,6 @@ function DebouncedGroupSettingsItem({
This will also delete all bookmarks in this group!
</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(bookmarks, 'api/links');
handleDelete(group, 'api/categories');
closeModal();
}}
>
Delete
</Button>
<Button
color={'var(--color-text-acc)'}
styles={{ label: { color: 'var(--color-text-pri)' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
}
/>
@@ -401,7 +387,7 @@ function DebouncedGroupSettingsItem({
if (newBookmark) {
mutateAsync({
method: 'POST',
endpoint: 'api/links',
endpoint: 'api/bookmarks',
body: { ...newBookmark, index: bookmarks.length },
});
setPopoverOpened(false);

31
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { FiTrash } from 'react-icons/fi';
@@ -31,6 +22,7 @@ function DebouncedMessage({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => handleDelete(message, 'api/messages')}
title='Delete message'
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -47,25 +39,6 @@ function DebouncedMessage({
}}
>{`"${message.message}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(message, 'api/messages');
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={closeModal}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

31
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -53,6 +44,7 @@ function DebouncedSearchProvider({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(provider, 'api/providers')}
title={'Delete Search Provider'}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -69,25 +61,6 @@ function DebouncedSearchProvider({
}}
>{`"${provider.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(provider, 'api/providers');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

24
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -27,10 +27,10 @@ const SearchProviderSettings = () => {
prefix: '',
};
const endpoint = 'api/providers';
const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
endpoint: endpoint,
});
const [providerData, setProviderData] = useState<Provider[]>([]);
const [providers, setProviders] = useState<Provider[]>([]);
const { isMobile } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [newProvider, setNewProvider] = useState<Provider>(defaultProvider);
@@ -45,16 +45,16 @@ const SearchProviderSettings = () => {
};
useEffect(() => {
if (providers && providersIsFetched) {
setProviderData(
providers
if (providerData && providerDataIsFetched) {
setProviders(
providerData
.filter((a: Provider) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
);
}
}, [providers, providersIsFetched, debouncedSearch]);
}, [providerData, providerDataIsFetched, debouncedSearch]);
return (
<Stack>
@@ -138,16 +138,16 @@ const SearchProviderSettings = () => {
<SettingsHeader
setDragging={undefined}
openModal={openModal}
title={'Search Providers'}
title={'Search providerData'}
tooltip={{
title: 'Search providers and shortcuts can be configured here.',
highlightList: ['Providers', 'search', 'provider', 'prefix'],
title: 'Search providerData and shortcuts can be configured here.',
highlightList: ['providerData', 'search', 'provider', 'prefix'],
description:
'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
'providerData can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Search Providers...'}
searchPlaceholder={'Search Search providerData...'}
/>
<Stack
mt={isMobile ? '9rem' : '6rem'}
@@ -156,7 +156,7 @@ const SearchProviderSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{providerData?.map((provider: Provider) => (
{providers?.map((provider: Provider) => (
<GridCol span={isMobile ? 18 : 6} key={provider.id}>
<Popover
withArrow

23
src/pages/settings/components/Shared/DeleteItemModal.tsx
View File

@@ -1,15 +1,17 @@
import { Card, Modal } from '@mantine/core';
import { Button, Card, Group, Modal } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { cardClasses, modalClasses } from 'styles';
function DeleteItemModal({
modalOpened,
handleClose,
handleDelete,
body,
title,
}: {
modalOpened: boolean;
handleClose: () => void;
handleDelete: () => void;
body: React.ReactNode;
title: string;
}) {
@@ -36,6 +38,25 @@ function DeleteItemModal({
<Modal.Body pb={'2rem'}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
{body}
<Group w={'100%'} justify='center' bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete();
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'white' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Card>
</Modal.Body>
</Modal.Content>

22
src/pages/settings/components/Theming/ThemeCard.tsx
View File

@@ -46,6 +46,7 @@ function ThemeCard({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => handleDelete(cardTheme, 'api/themes')}
title={'Delete Theme'}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -62,27 +63,6 @@ function ThemeCard({
}}
>{`"${cardTheme.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardTheme, 'api/themes');
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

8
src/pages/settings/components/Theming/ThemeModalContent.tsx
View File

@@ -188,7 +188,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 1'}
{'Bookmark 1'}
</Text>
<Text
style={{
@@ -199,7 +199,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 2'}
{'Bookmark 2'}
</Text>
</Stack>
<Stack
@@ -235,7 +235,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 1'}
{'Bookmark 1'}
</Text>
<Text
style={{
@@ -246,7 +246,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 2'}
{'Bookmark 2'}
</Text>
</Stack>
</Stack>

29
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -24,6 +24,7 @@ function ThemePlaylistCard({
handleOpen: (cardPlaylist: ThemePlaylist) => void;
allThemes: Theme[];
}) {
const themePlaylistEndpoint = 'api/themePlaylists';
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
@@ -45,6 +46,7 @@ function ThemePlaylistCard({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')}
title='Delete Theme Playlist'
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -61,27 +63,6 @@ function ThemePlaylistCard({
}}
>{`"${cardPlaylist.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardPlaylist, 'api/themePlaylists');
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
}
/>
@@ -124,7 +105,7 @@ function ThemePlaylistCard({
if (cardPlaylist.name === 'All') {
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'All',
@@ -135,7 +116,7 @@ function ThemePlaylistCard({
if (cardPlaylist.name === 'Backgrounds') {
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'Backgrounds',
@@ -152,7 +133,7 @@ function ThemePlaylistCard({
if (cardPlaylist.name === 'No Backgrounds') {
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'No Backgrounds',

14
src/pages/settings/components/Theming/ThemePlaylists.tsx
View File

@@ -11,11 +11,11 @@ import ThemePlaylistModal from './ThemePlaylistModal';
function ThemePlaylists() {
const themesEndpoint = 'api/themes';
const { data: allThemes } = useQueryAPI({
const { data: allThemeData } = useQueryAPI({
endpoint: themesEndpoint,
});
const themePlaylistsEndpoint = 'api/themePlaylists';
const { data: themePlaylists } = useQueryAPI({
const { data: themePlaylistData } = useQueryAPI({
endpoint: themePlaylistsEndpoint,
});
const defaultPlaylist = {
@@ -60,7 +60,7 @@ function ThemePlaylists() {
defaultPlaylist={defaultPlaylist}
setSelectedPlaylist={setSelectedPlaylist}
handleSavePlaylist={handleSavePlaylist}
allThemes={allThemes}
allThemes={allThemeData}
createPlaylist={mutateAsync}
/>
<Stack h={'100%'} w={'100%'}>
@@ -84,7 +84,7 @@ function ThemePlaylists() {
</Text>
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
{themePlaylistData
?.filter((playlist: ThemePlaylist) => playlist.default === 1)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -113,7 +113,7 @@ function ThemePlaylists() {
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
allThemes={allThemes}
allThemes={allThemeData}
/>
</Box>
</Group>
@@ -131,7 +131,7 @@ function ThemePlaylists() {
pos={'relative'}
mb={isMobile ? '6rem' : undefined}
>
{themePlaylists
{themePlaylistData
?.filter((playlist: ThemePlaylist) => playlist.default === 0)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -161,7 +161,7 @@ function ThemePlaylists() {
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
allThemes={allThemes}
allThemes={allThemeData}
/>
</Box>
</Group>

6
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -13,7 +13,7 @@ import ThemeModal from './ThemeModal';
function ThemesSettings() {
const themesEndpoint = 'api/themes';
const backgroundsEndpoint = 'api/backgrounds';
const { data: allThemes } = useQueryAPI({
const { data: allThemeData } = useQueryAPI({
endpoint: 'api/themes',
});
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
@@ -161,7 +161,7 @@ function ThemesSettings() {
}}
pos={'absolute'}
/>
{allThemes
{allThemeData
?.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
@@ -191,7 +191,7 @@ function ThemesSettings() {
}}
>
<ThemeCard
allThemes={allThemes}
allThemes={allThemeData}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}

31
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -52,6 +43,7 @@ function DebouncedWolClient({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(client, 'api/WolClients')}
title={'Delete WoL Client'}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -68,25 +60,6 @@ function DebouncedWolClient({
}}
>{`"${client.hostname}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(client, 'api/WolClients');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

4
src/styles/Text.module.css
View File

@@ -69,7 +69,7 @@
}
}
.linkCategory {
.bookmarkCategory {
&.root {
font-size: 14px;
font-weight: 400;
@@ -81,7 +81,7 @@
}
}
.linkItem {
.bookmarkItem {
&.root {
display: block;
font-size: 14px;