Updated names for uniformity
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -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]);
|
||||
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user