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

Clean up and typing

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-27 16:22:34 -05:00
parent b46d89721e
commit 67293b20ca
47 changed files with 450 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,7 @@ import {
textClasses,
textInputClasses,
} from 'styles';
import type { Application } from 'types';
import AppSettingsItem from './AppSettingsItem';
import DebouncedApplication from './DebouncedApplication';
@@ -32,27 +33,26 @@ const ApplicationSettings = () => {
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
endpoint: endpoint,
});
const [applicationData, setApplicationData] = useState<any>([]);
const { theme, isMobile } = useCommonHooks();
const [newApplication, setNewApplication] = useState<any>({
const [applicationData, setApplicationData] = useState<Application[]>([]);
const { theme, isMobile, modalStyle } = useCommonHooks();
const [newApplication, setNewApplication] = useState<Application>({
id: undefined,
name: '',
url: '',
icon: '',
baseUrl: '',
filterName: '',
index: 0,
});
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const handleDelete = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: endpoint, body: application });
};
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(
apps.filter((a: any) =>
apps.filter((a: Application) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
),
);
@@ -70,14 +70,7 @@ const ApplicationSettings = () => {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -269,7 +262,7 @@ const ApplicationSettings = () => {
</Group>
<Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{applicationData?.map((application: any) => (
{applicationData?.map((application: Application) => (
<GridCol span={6} key={application.id}>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
@@ -286,10 +279,7 @@ const ApplicationSettings = () => {
</Box>
</Popover.Target>
<Popover.Dropdown>
<DebouncedApplication
application={application}
handleDelete={handleDelete}
/>
<DebouncedApplication application={application} />
</Popover.Dropdown>
</Popover>
</GridCol>

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

@@ -14,14 +14,15 @@ import { IconTrash } from '@tabler/icons-react';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
function DebouncedApplication({ application, handleDelete }: any) {
const { theme, isMobile } = useCommonHooks();
function DebouncedApplication({ application }: { application: Application }) {
const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
const [app, setApp] = useState<any>(application);
const [update, setUpdate] = useState({});
const [app, setApp] = useState<Application>(application);
const [update, setUpdate] = useState<any>();
const [debounced] = useDebouncedValue(update, 1000);
useEffect(() => {
@@ -47,14 +48,7 @@ function DebouncedApplication({ application, handleDelete }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -84,7 +78,7 @@ function DebouncedApplication({ application, handleDelete }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(app);
handleDelete(app, 'api/apps');
closeModal();
}}
>

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

@@ -25,20 +25,26 @@ import {
textClasses,
textInputClasses,
} from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
const BookmarkSettings = () => {
const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
endpoint: 'api/links',
});
const [bookmarks, setBookmarks] = useState<any>([]);
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/categories',
});
const [dragging, setDragging] = useState(false);
const [groups, setGroups] = useState<any>([]);
const [newGroup, setNewGroup] = useState<any>({});
const [groupList, setGroupList] = useState<any>([]);
const { theme, isMobile } = useCommonHooks();
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const [newGroup, setNewGroup] = useState<BookmarkGroup>({
id: undefined,
categoryName: '',
categoryIndex: 0,
filterName: '',
});
const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
const { theme, isMobile, modalStyle } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -80,9 +86,13 @@ const BookmarkSettings = () => {
useEffect(() => {
if (groupData && groupsIsFetched) {
setGroups(
groupData.filter((a: any) =>
a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
),
groupData
.filter((a: BookmarkGroup) =>
a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
)
.sort((a: BookmarkGroup, b: BookmarkGroup) =>
a.categoryIndex > b.categoryIndex ? 1 : -1,
),
);
}
}, [groupData, groupsIsFetched, debouncedGroupSearch]);
@@ -104,14 +114,7 @@ const BookmarkSettings = () => {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -282,69 +285,65 @@ const BookmarkSettings = () => {
ref={provided.innerRef}
{...provided.droppableProps}
>
{groups
?.sort((a: any, b: any) =>
a.categoryIndex > b.categoryIndex ? 1 : -1,
)
.map((group: any) => (
<Draggable
key={group.id}
draggableId={`${group.id}`}
index={Number(group.categoryIndex)}
>
{(provided) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
{groups?.map((group: BookmarkGroup) => (
<Draggable
key={group.id}
draggableId={`${group.id}`}
index={Number(group.categoryIndex)}
>
{(provided) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Card
w={'400px'}
style={{
backgroundColor: theme.searchColor,
border: '1px solid var(--color-border)',
borderRadius: '8px',
}}
>
<Card
w={'400px'}
style={{
backgroundColor: theme.searchColor,
border: '1px solid var(--color-border)',
borderRadius: '8px',
}}
>
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.categoryName}
</Text>
</Stack>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Filter Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.filterName}
</Text>
</Stack>
</Group>
</Card>
</Box>
)}
</Draggable>
))}
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.categoryName}
</Text>
</Stack>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Filter Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.filterName}
</Text>
</Stack>
</Group>
</Card>
</Box>
)}
</Draggable>
))}
{provided.placeholder}
</Stack>
)}
@@ -354,17 +353,15 @@ const BookmarkSettings = () => {
) : (
<Stack w={'100%'} align='center'>
<Group w={'75%'} align='start'>
{groups
?.sort((a: any, b: any) => (a.categoryIndex > b.categoryIndex ? 1 : -1))
.map((group: any) => (
<DebouncedGroupSettingsItem
key={group.id}
bookmarkGroup={group}
bookmarks={bookmarks
.filter((a: any) => a.category === group.categoryName)
.sort((a: any, b: any) => (a.index > b.index ? 1 : -1))}
/>
))}
{groups?.map((group: BookmarkGroup) => (
<DebouncedGroupSettingsItem
key={group.id}
bookmarkGroup={group}
bookmarks={bookmarks
.filter((a: Bookmark) => a.category === group.categoryName)
.sort((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))}
/>
))}
</Group>
</Stack>
)}

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

@@ -14,14 +14,15 @@ import { IconTrash } from '@tabler/icons-react';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
import type { Bookmark } from 'types';
function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
const { theme, isMobile } = useCommonHooks();
function DebouncedBookmarkItem({ bookmarkItem }: { bookmarkItem: Bookmark }) {
const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
const [bookmark, setBookmark] = useState<any>(bookmarkItem);
const [update, setUpdate] = useState({});
const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
useEffect(() => {
@@ -47,14 +48,7 @@ function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -84,7 +78,7 @@ function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(bookmark);
handleDelete(bookmark, 'api/links');
closeModal();
}}
>

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

@@ -18,25 +18,29 @@ import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiPlus } from 'react-icons/fi';
import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import BookmarkSettingsItem from './BookmarkSettingsItem';
import DebouncedBookmarkItem from './DebouncedBookmarkItem';
function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
const { theme, isMobile } = useCommonHooks();
function DebouncedGroupSettingsItem({
bookmarkGroup,
bookmarks,
}: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[] }) {
const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [popoverOpened, setPopoverOpened] = useState(false);
const { mutateAsync } = useMutationAPI();
const [group, setGroup] = useState<any>(bookmarkGroup);
const [update, setUpdate] = useState({});
const [group, setGroup] = useState<BookmarkGroup>(bookmarkGroup);
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
const [newBookmark, setNewBookmark] = useState<any>({});
const [bookmarkList, setBookmarkList] = useState<any>(bookmarks);
const handleDeleteBookmark = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: 'api/links', body: application });
};
const handleDeleteGroup = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: 'api/categories', body: application });
};
const [newBookmark, setNewBookmark] = useState<Bookmark>({
id: undefined,
name: '',
url: '',
category: group.categoryName,
index: 0,
});
const [bookmarkList, setBookmarkList] = useState<Bookmark[]>(bookmarks);
const reorder = (list: any, startIndex: any, endIndex: any) => {
const result = Array.from(list);
@@ -95,14 +99,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -132,7 +129,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDeleteGroup(group);
handleDelete(group, 'api/categories');
closeModal();
}}
>
@@ -234,47 +231,42 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
<Droppable droppableId={`${bookmarkGroup.id}`}>
{(provided) => (
<Stack ref={provided.innerRef} {...provided.droppableProps}>
{bookmarks
.sort((a: any, b: any) => (a.index > b.index ? 1 : -1))
.map((bookmark: any) => (
<Draggable
key={bookmark.id}
draggableId={`${bookmark.id}`}
index={bookmark.index}
>
{(provided: any) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Popover withArrow withOverlay>
<Popover.Target>
<Box>
<BookmarkSettingsItem bookmark={bookmark} />
</Box>
</Popover.Target>
<Popover.Dropdown
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
>
<DebouncedBookmarkItem
bookmarkItem={bookmark}
handleDelete={handleDeleteBookmark}
/>
</Popover.Dropdown>
</Popover>
{provided.placeholder}
</Box>
)}
</Draggable>
))}
{bookmarks.map((bookmark: Bookmark) => (
<Draggable
key={bookmark.id}
draggableId={`${bookmark.id}`}
index={bookmark.index}
>
{(provided: any) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Popover withArrow withOverlay>
<Popover.Target>
<Box>
<BookmarkSettingsItem bookmark={bookmark} />
</Box>
</Popover.Target>
<Popover.Dropdown
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
>
<DebouncedBookmarkItem bookmarkItem={bookmark} />
</Popover.Dropdown>
</Popover>
{provided.placeholder}
</Box>
)}
</Draggable>
))}
{provided.placeholder}
</Stack>

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

@@ -14,8 +14,8 @@ import { IconTrash } from '@tabler/icons-react';
import { useCommonHooks } from 'hooks';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
const { theme, isMobile } = useCommonHooks();
function DebouncedMessage({ label, message, setMessage }: any) {
const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
@@ -28,14 +28,7 @@ function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -65,7 +58,7 @@ function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(message);
handleDelete(message, 'api/messages');
closeModal();
}}
>

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

@@ -24,14 +24,15 @@ import {
textClasses,
textInputClasses,
} from 'styles';
import type { Message } from 'types';
const MessageSettings = () => {
const endpoint = 'api/messages';
const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
endpoint: 'api/messages',
endpoint: endpoint,
});
const { theme, isMobile } = useCommonHooks();
const { theme, isMobile, modalStyle } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [messages, setMessages] = useState<any>([]);
const [messages, setMessages] = useState<Message[]>([]);
const [newMessage, setNewMessage] = useState('');
const [newMessageError, setNewMessageError] = useState<string>('');
const [message, setMessage] = useState({});
@@ -40,14 +41,10 @@ const MessageSettings = () => {
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const handleDelete = (message: any) => {
mutateAsync({ method: 'DELETE', endpoint: endpoint, body: message });
};
useEffect(() => {
if (messageData && isMessagesFetched) {
setMessages(
messageData.filter((m: any) =>
messageData.filter((m: Message) =>
m.message.toLowerCase().includes(debouncedSearch.toLowerCase()),
),
);
@@ -71,14 +68,7 @@ const MessageSettings = () => {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -203,13 +193,12 @@ const MessageSettings = () => {
</Group>
<Stack w={'100%'} align='center'>
<Grid w={'75%'}>
{messages?.map((message: any) => (
{messages?.map((message: Message) => (
<GridCol span={isMobile ? 12 : 6} key={message.id}>
<DebouncedMessage
label={`ID# ${message.id}`}
message={message}
setMessage={setMessage}
handleDelete={handleDelete}
/>
</GridCol>
))}

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

@@ -3,6 +3,7 @@ import { useDebouncedValue } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, textClasses, textInputClasses } from 'styles';
import type { PersonalData } from 'types';
const PersonalizationSettings = () => {
const endpoint = 'api/personalData';
const {
@@ -12,8 +13,8 @@ const PersonalizationSettings = () => {
} = useQueryAPI({
endpoint: endpoint,
});
const [personal, setPersonal] = useState<any>({});
const [update, setUpdate] = useState({});
const [personal, setPersonal] = useState<PersonalData>();
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
const { mutateAsync: editRow } = useMutationAPI();
const { isMobile } = useCommonHooks();

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

@@ -14,14 +14,15 @@ import { IconTrash } from '@tabler/icons-react';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
import type { Provider } from 'types';
function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
const { theme, isMobile } = useCommonHooks();
function DebouncedSearchProvider({ searchProvider }: any) {
const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
const [provider, setProvider] = useState<any>(searchProvider);
const [update, setUpdate] = useState({});
const [provider, setProvider] = useState<Provider>(searchProvider);
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
useEffect(() => {
@@ -47,14 +48,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -84,7 +78,7 @@ function DebouncedSearchProvider({ searchProvider, handleDelete }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(provider);
handleDelete(provider, 'api/providers');
closeModal();
}}
>

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

@@ -24,6 +24,7 @@ import {
textClasses,
textInputClasses,
} from 'styles';
import type { Provider } from 'types';
import DebouncedSearchProvider from './DebouncedSearchProvider';
import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -32,20 +33,23 @@ const SearchProviderSettings = () => {
const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
endpoint: endpoint,
});
const [providerData, setProviderData] = useState<any>([]);
const { theme, isMobile } = useCommonHooks();
const [providerData, setProviderData] = useState<Provider[]>([]);
const { theme, isMobile, modalStyle } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [newProvider, setNewProvider] = useState<any>({});
const [newProvider, setNewProvider] = useState<Provider>({
id: undefined,
name: '',
url: '',
prefix: '',
});
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const handleDelete = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: endpoint, body: application });
};
useEffect(() => {
if (providers && providersIsFetched) {
setProviderData(
providers.filter((a: any) =>
providers.filter((a: Provider) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
),
);
@@ -63,14 +67,7 @@ const SearchProviderSettings = () => {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -224,7 +221,7 @@ const SearchProviderSettings = () => {
</Group>
<Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{providerData?.map((provider: any) => (
{providerData?.map((provider: Provider) => (
<GridCol span={isMobile ? 18 : 6} key={provider.id}>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
@@ -237,10 +234,7 @@ const SearchProviderSettings = () => {
</Box>
</Popover.Target>
<Popover.Dropdown>
<DebouncedSearchProvider
searchProvider={provider}
handleDelete={handleDelete}
/>
<DebouncedSearchProvider searchProvider={provider} />
</Popover.Dropdown>
</Popover>
</GridCol>

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

@@ -13,6 +13,7 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses, modalClasses } from 'styles';
import type { ThemePlaylist } from 'types';
function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
const { data: themePlaylists } = useQueryAPI({
@@ -31,10 +32,9 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
isMobile,
currentThemePlaylist,
setCurrentThemePlaylist,
modalStyle,
handleDelete,
} = useCommonHooks();
const handleDelete = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: 'api/themes', body: application });
};
return (
<Group
@@ -55,14 +55,7 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -92,7 +85,7 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardTheme);
handleDelete(cardTheme, 'api/themes');
closeModal();
}}
>
@@ -299,8 +292,9 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
<FiShuffle
onClick={() => {
const themeList = JSON.parse(
themePlaylists.find((t: any) => t.name === currentThemePlaylist)
.themeList,
themePlaylists.find(
(t: ThemePlaylist) => t.name === currentThemePlaylist,
).themeList,
);
const filteredThemes = allThemes.filter((t: any) =>
themeList.includes(t.id),

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

@@ -17,16 +17,21 @@ import ThemeMiniCard from './ThemeMiniCard';
function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, theme, isMobile } = useCommonHooks();
const {
setThemeName,
setCurrentThemePlaylist,
theme,
isMobile,
modalStyle,
handleDelete,
} = useCommonHooks();
const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
const { mutateAsync } = useMutationAPI();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const themeList = JSON.parse(
cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
);
const handleDelete = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: 'api/themePlaylists', body: application });
};
return (
<Group
gap={0}
@@ -46,14 +51,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -83,7 +81,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardPlaylist);
handleDelete(cardPlaylist, 'api/themePlaylists');
closeModal();
}}
>

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

@@ -14,6 +14,7 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
import type { ThemePlaylist } from 'types';
import ThemePlaylistCard from './ThemePlaylistCard';
import ThemePlaylistModal from './ThemePlaylistModal';
@@ -140,11 +141,11 @@ function ThemePlaylists() {
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
?.filter((playlist: any) => playlist.default === 1)
?.filter((a: any) =>
?.filter((playlist: ThemePlaylist) => playlist.default === 1)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardPlaylist: any) => {
.map((cardPlaylist: ThemePlaylist) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (
@@ -184,11 +185,11 @@ function ThemePlaylists() {
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
?.filter((playlist: any) => playlist.default === 0)
?.filter((a: any) =>
?.filter((playlist: ThemePlaylist) => playlist.default === 0)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardPlaylist: any) => {
.map((cardPlaylist: ThemePlaylist) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (

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

@@ -19,6 +19,7 @@ import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css';
import { FaDice } from 'react-icons/fa';
import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
import type { Theme } from 'types';
import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal';
function ThemesSettings() {
@@ -32,7 +33,7 @@ function ThemesSettings() {
const [opened, { open, close }] = useDisclosure(false);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
const [backgroundList, setBackgroundList] = useState<any>(['None']);
const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
const [selectedTheme, setSelectedTheme] = useState<any>({});
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
@@ -40,7 +41,7 @@ function ThemesSettings() {
const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
useCommonHooks();
const handleOpen = (theme: any) => {
const handleOpen = (theme: Theme) => {
setSelectedTheme(theme);
open();
};
@@ -192,10 +193,10 @@ function ThemesSettings() {
pos={'absolute'}
/>
{allThemes
?.filter((a: any) =>
?.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardTheme: any) => (
.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight

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

@@ -15,8 +15,8 @@ import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';
function DebouncedWolClient({ wolClient, handleDelete }: any) {
const { theme, isMobile } = useCommonHooks();
function DebouncedWolClient({ wolClient }: any) {
const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -47,14 +47,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -84,7 +77,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(client);
handleDelete(client, 'api/WolClients');
closeModal();
}}
>

27
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -24,6 +24,7 @@ import {
textClasses,
textInputClasses,
} from 'styles';
import type { WolClient } from 'types';
import DebouncedWolClient from './DebouncedWolClient';
import WolClientSettingsItem from './WolClientSettingsItem';
@@ -32,23 +33,22 @@ const WolClientSettings = () => {
const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
endpoint: endpoint,
});
const [wolClients, setWolClients] = useState<any>([]);
const [wolClients, setWolClients] = useState<WolClient[]>([]);
const { mutateAsync } = useMutationAPI();
const { theme, isMobile } = useCommonHooks();
const [newWolClient, setNewWolClient] = useState<any>({
const { theme, isMobile, modalStyle } = useCommonHooks();
const [newWolClient, setNewWolClient] = useState<WolClient>({
id: undefined,
hostname: '',
macAddress: '',
});
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const handleDelete = (application: any) => {
mutateAsync({ method: 'DELETE', endpoint: endpoint, body: application });
};
useEffect(() => {
if (wolClientsData && wolClientsIsFetched) {
setWolClients(
wolClientsData.filter((a: any) =>
wolClientsData.filter((a: WolClient) =>
a.hostname.toLowerCase().includes(debouncedSearch.toLowerCase()),
),
);
@@ -66,14 +66,7 @@ const WolClientSettings = () => {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -210,7 +203,7 @@ const WolClientSettings = () => {
</Group>
<Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{wolClients?.map((client: any) => (
{wolClients?.map((client: WolClient) => (
<GridCol span={isMobile ? 18 : 6} key={client.id}>
<Popover withArrow withOverlay withinPortal={false}>
<Popover.Target>
@@ -223,7 +216,7 @@ const WolClientSettings = () => {
</Box>
</Popover.Target>
<Popover.Dropdown>
<DebouncedWolClient wolClient={client} handleDelete={handleDelete} />
<DebouncedWolClient wolClient={client} />
</Popover.Dropdown>
</Popover>
</GridCol>