From 6493a458ff63fef4853c54f2e7a37ad615ba57ac Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Thu, 3 Apr 2025 13:37:22 -0500 Subject: [PATCH] Application adding bugfix; consolidated Settings headers --- package-lock.json | 25 -- package.json | 1 - .../components/Applications/Applications.tsx | 265 +++++++++--------- .../Applications/DebouncedApplication.tsx | 110 ++++---- .../components/Bookmarks/Bookmarks.tsx | 191 ++++++------- .../Bookmarks/DebouncedBookmarkItem.tsx | 116 ++++---- .../Bookmarks/DebouncedGroupSettingsItem.tsx | 120 ++++---- .../components/Messages/DebouncedMessage.tsx | 108 +++---- .../settings/components/Messages/Messages.tsx | 138 ++++----- .../Search/DebouncedSearchProvider.tsx | 110 ++++---- .../components/Search/SearchProviders.tsx | 200 ++++++------- .../components/Shared/AddItemModal.tsx | 35 +++ .../components/Shared/DeleteItemModal.tsx | 35 +++ .../settings/components/Theming/ThemeCard.tsx | 116 +++----- .../components/Theming/ThemePlaylistCard.tsx | 112 +++----- .../components/Theming/ThemePlaylists.tsx | 8 +- .../settings/components/Theming/Themes.tsx | 10 +- .../components/WoL/DebouncedWolClient.tsx | 110 ++++---- .../settings/components/WoL/WolClients.tsx | 173 ++++++------ 19 files changed, 902 insertions(+), 1081 deletions(-) create mode 100644 src/pages/settings/components/Shared/AddItemModal.tsx create mode 100644 src/pages/settings/components/Shared/DeleteItemModal.tsx diff --git a/package-lock.json b/package-lock.json index 7e9722c..a92ff9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "@iconify/react": "^5.2.0", "@mantine/core": "^7.17.3", "@mantine/hooks": "^7.17.3", - "@tabler/icons-react": "^3.31.0", "@tanstack/react-query": "^5.69.3", "@tanstack/react-query-devtools": "^5.69.3", "@tanstack/react-query-persist-client": "^5.69.3", @@ -1588,30 +1587,6 @@ "sprintf-js": "~1.0.2" } }, - "node_modules/@tabler/icons": { - "version": "3.31.0", - "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.31.0.tgz", - "integrity": "sha512-dblAdeKY3+GA1U+Q9eziZ0ooVlZMHsE8dqP0RkwvRtEsAULoKOYaCUOcJ4oW1DjWegdxk++UAt2SlQVnmeHv+g==", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/codecalm" - } - }, - "node_modules/@tabler/icons-react": { - "version": "3.31.0", - "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.31.0.tgz", - "integrity": "sha512-2rrCM5y/VnaVKnORpDdAua9SEGuJKVqPtWxeQ/vUVsgaUx30LDgBZph7/lterXxDY1IKR6NO//HDhWiifXTi3w==", - "dependencies": { - "@tabler/icons": "3.31.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/codecalm" - }, - "peerDependencies": { - "react": ">= 16" - } - }, "node_modules/@tanstack/query-core": { "version": "5.69.2", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.69.2.tgz", diff --git a/package.json b/package.json index 50d51de..5dbf547 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "@iconify/react": "^5.2.0", "@mantine/core": "^7.17.3", "@mantine/hooks": "^7.17.3", - "@tabler/icons-react": "^3.31.0", "@tanstack/react-query": "^5.69.3", "@tanstack/react-query-devtools": "^5.69.3", "@tanstack/react-query-persist-client": "^5.69.3", diff --git a/src/pages/settings/components/Applications/Applications.tsx b/src/pages/settings/components/Applications/Applications.tsx index 2966db2..f097728 100644 --- a/src/pages/settings/components/Applications/Applications.tsx +++ b/src/pages/settings/components/Applications/Applications.tsx @@ -7,7 +7,6 @@ import { Grid, GridCol, Group, - Modal, Popover, Stack, Text, @@ -16,21 +15,15 @@ import { import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { cardClasses, modalClasses, textInputClasses } from 'styles'; +import { textInputClasses } from 'styles'; import type { Application } from 'types'; +import AddItemModal from '../Shared/AddItemModal'; import SettingsHeader from '../Shared/SettingsHeader'; import AppSettingsItem from './AppSettingsItem'; import DebouncedApplication from './DebouncedApplication'; const ApplicationSettings = () => { - const endpoint = 'api/apps'; - const { data: apps, isFetching: isAppsFetching } = useQueryAPI({ - endpoint: endpoint, - }); - const [applicationData, setApplicationData] = useState([]); - const [applicationList, setApplicationList] = useState([]); - const { theme, isMobile, modalStyle } = useCommonHooks(); - const [newApplication, setNewApplication] = useState({ + const defaultApplication: Application = { id: null, name: '', url: '', @@ -39,7 +32,16 @@ const ApplicationSettings = () => { filterName: '', index: 0, enabled: 1, + }; + const appsEndpoint = 'api/apps'; + const appsOrderEndpoint = 'api/appsOrder'; + const { data: apps, isFetching: isAppsFetching } = useQueryAPI({ + endpoint: appsEndpoint, }); + const [applicationData, setApplicationData] = useState([]); + const [applicationList, setApplicationList] = useState([]); + const { theme, isMobile } = useCommonHooks(); + const [newApplication, setNewApplication] = useState(defaultApplication); const { mutateAsync } = useMutationAPI(); const [searchValue, setSearchValue] = useState(''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); @@ -74,6 +76,11 @@ const ApplicationSettings = () => { const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); + const handleClose = () => { + closeModal(); + setNewApplication(defaultApplication); + }; + useEffect(() => { if (apps && !isAppsFetching) { setApplicationData( @@ -90,7 +97,7 @@ const ApplicationSettings = () => { if (applicationList.length > 0 && applicationList !== applicationData) { mutateAsync({ method: 'PATCH', - endpoint: 'api/applicationOrder', + endpoint: appsOrderEndpoint, body: applicationList, }); } @@ -98,134 +105,116 @@ const ApplicationSettings = () => { return ( - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Add a new application - - - - - - - { - setNewApplication({ - ...newApplication, - name: event.target.value, - }); - }} - /> - { - setNewApplication({ - ...newApplication, - baseUrl: event.target.value, - }); - }} - /> - - - { - setNewApplication({ - ...newApplication, - url: event.target.value, - }); - }} - /> - - - { - setNewApplication({ - ...newApplication, - icon: event.target.value, - }); - }} - /> - { - setNewApplication({ - ...newApplication, - filterName: event.target.value, - }); - }} - /> - + + + { + setNewApplication({ + ...newApplication, + name: event.target.value, + }); + }} + /> + { + setNewApplication({ + ...newApplication, + baseUrl: event.target.value, + }); + }} + /> + + + { + setNewApplication({ + ...newApplication, + url: event.target.value, + }); + }} + /> + + + { + setNewApplication({ + ...newApplication, + icon: event.target.value, + }); + }} + /> + { + setNewApplication({ + ...newApplication, + filterName: event.target.value, + }); + }} + /> + - - - - - - - - - - + + + + + + + } + /> - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Delete Application - - - - - Are you sure you want to delete this application? - + Are you sure you want to delete this application? + {`"${app.name}"`} + This action cannot be undone! + + - - - - - - + > + Delete + + + + + } + /> - + { - const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({ - endpoint: 'api/links', - }); - const [bookmarks, setBookmarks] = useState([]); - const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({ - endpoint: 'api/categories', - }); - const [dragging, setDragging] = useState(false); - const [groups, setGroups] = useState([]); - const [newGroup, setNewGroup] = useState({ + const defaultGroup = { id: undefined, categoryName: '', categoryIndex: 0, filterName: '', + }; + const linksEndpoint = 'api/links'; + const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({ + endpoint: linksEndpoint, }); + const [bookmarks, setBookmarks] = useState([]); + const categoriesEndpoint = 'api/categories'; + const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({ + endpoint: categoriesEndpoint, + }); + const [dragging, setDragging] = useState(false); + const [groups, setGroups] = useState([]); + const [newGroup, setNewGroup] = useState(defaultGroup); const [groupList, setGroupList] = useState([]); - const { theme, isMobile, modalStyle } = useCommonHooks(); + const { theme, isMobile } = useCommonHooks(); const { mutateAsync } = useMutationAPI(); const [searchValue, setSearchValue] = useState(''); const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500); @@ -47,6 +41,11 @@ const BookmarkSettings = () => { return result; }; + const handleClose = () => { + setNewGroup(defaultGroup); + closeModal(); + }; + function onDragEnd(result: any) { if (!result.destination) { return; @@ -95,90 +94,70 @@ const BookmarkSettings = () => { return ( - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Add a new Bookmark Group - - - - - - - { - setNewGroup({ - ...newGroup, - categoryName: event.target.value, - }); - }} - /> - { - setNewGroup({ - ...newGroup, - filterName: event.target.value, - }); - }} - /> - + + + { + setNewGroup({ + ...newGroup, + categoryName: event.target.value, + }); + }} + /> + { + setNewGroup({ + ...newGroup, + filterName: event.target.value, + }); + }} + /> + - - - - - - - - - - + + + + + + + } + /> - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Delete Bookmark - - - - - Are you sure you want to delete this bookmark? - + Are you sure you want to delete this bookmark? + {`"${bookmark.name}"`} + This action cannot be undone! + + - - - - - - + > + Delete + + + + + } + title='Delete Bookmark' + /> { + setIsOpen(true); openModal(); }} > - + diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx index 8df243d..0cb464a 100644 --- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx +++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx @@ -5,7 +5,6 @@ import { Button, Card, Group, - Modal, Popover, Stack, Text, @@ -13,12 +12,12 @@ import { Tooltip, } from '@mantine/core'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; -import { IconTrash } from '@tabler/icons-react'; import { useCommonHooks, useMutationAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { FiPlus } from 'react-icons/fi'; -import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles'; +import { FiPlus, FiTrash } from 'react-icons/fi'; +import { buttonClasses, cardClasses, textInputClasses } from 'styles'; import type { Bookmark, BookmarkGroup } from 'types'; +import DeleteItemModal from '../Shared/DeleteItemModal'; import BookmarkSettingsItem from './BookmarkSettingsItem'; import DebouncedBookmarkItem from './DebouncedBookmarkItem'; @@ -26,7 +25,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks, }: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[] }) { - const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks(); + const { theme, isMobile, handleDelete } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [popoverOpened, setPopoverOpened] = useState(false); const { mutateAsync } = useMutationAPI(); @@ -41,6 +40,7 @@ function DebouncedGroupSettingsItem({ index: 0, }); const [bookmarkList, setBookmarkList] = useState(bookmarks); + const [isOpen, setIsOpen] = useState(false); const reorder = (list: any, startIndex: any, endIndex: any) => { const result = Array.from(list); @@ -90,65 +90,49 @@ function DebouncedGroupSettingsItem({ return ( - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Delete Group - - - - - Are you sure you want to delete this bookmark group? - + Are you sure you want to delete this bookmark group? + {`"${group.categoryName}"`} + This action cannot be undone! + + - - - - - - + > + Delete + + + + + } + /> @@ -201,7 +185,7 @@ function DebouncedGroupSettingsItem({ openModal(); }} > - + @@ -243,7 +227,7 @@ function DebouncedGroupSettingsItem({ {...provided.draggableProps} {...provided.dragHandleProps} > - + @@ -259,7 +243,10 @@ function DebouncedGroupSettingsItem({ '--image-background': `url(${theme.backgroundImage})`, }} > - + {provided.placeholder} @@ -284,6 +271,7 @@ function DebouncedGroupSettingsItem({ opened={popoverOpened} onChange={setPopoverOpened} closeOnEscape + // closeOnClickOutside={} > - - - - - - + > + Delete + + + + + } + /> - + { const endpoint = 'api/messages'; const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({ endpoint: endpoint, }); - const { isMobile, modalStyle } = useCommonHooks(); + const { isMobile } = useCommonHooks(); const { mutateAsync } = useMutationAPI(); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(''); @@ -32,6 +23,12 @@ const MessageSettings = () => { const [debouncedSearch] = useDebouncedValue(searchValue, 500); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); + const handleClose = () => { + setNewMessage(''); + setNewMessageError(''); + closeModal(); + }; + useEffect(() => { if (messageData && isMessagesFetched) { setMessages( @@ -50,74 +47,53 @@ const MessageSettings = () => { return ( - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Add a new message - - - - - - { - setNewMessage(event.target.value); - }} - error={newMessageError} - /> - - - - - - - - - - + + { + setNewMessage(event.target.value); + }} + error={newMessageError} + /> + + + + + + + } + /> - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Delete Search Provider - - - - - Are you sure you want to delete this Search Provider? - + Are you sure you want to delete this Search Provider? + {`"${provider.name}"`} + This action cannot be undone! + + - - - - - - + > + Delete + + + + + } + /> - + diff --git a/src/pages/settings/components/Search/SearchProviders.tsx b/src/pages/settings/components/Search/SearchProviders.tsx index 2f3e408..afee574 100644 --- a/src/pages/settings/components/Search/SearchProviders.tsx +++ b/src/pages/settings/components/Search/SearchProviders.tsx @@ -1,12 +1,10 @@ import { Box, Button, - Card, Divider, Grid, GridCol, Group, - Modal, Popover, Stack, TextInput, @@ -14,30 +12,37 @@ import { import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { cardClasses, modalClasses, textInputClasses } from 'styles'; +import { textInputClasses } from 'styles'; import type { Provider } from 'types'; +import AddItemModal from '../Shared/AddItemModal'; import SettingsHeader from '../Shared/SettingsHeader'; import DebouncedSearchProvider from './DebouncedSearchProvider'; import SearchProviderSettingsItem from './SearchProviderSettingsItem'; const SearchProviderSettings = () => { + const defaultProvider = { + id: undefined, + name: '', + url: '', + prefix: '', + }; const endpoint = 'api/providers'; const { data: providers, isFetched: providersIsFetched } = useQueryAPI({ endpoint: endpoint, }); const [providerData, setProviderData] = useState([]); - const { isMobile, modalStyle } = useCommonHooks(); + const { isMobile } = useCommonHooks(); const { mutateAsync } = useMutationAPI(); - const [newProvider, setNewProvider] = useState({ - id: undefined, - name: '', - url: '', - prefix: '', - }); + const [newProvider, setNewProvider] = useState(defaultProvider); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [searchValue, setSearchValue] = useState(''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); + const handleClose = () => { + setNewProvider(defaultProvider); + closeModal(); + }; + useEffect(() => { if (providers && providersIsFetched) { setProviderData( @@ -52,104 +57,83 @@ const SearchProviderSettings = () => { return ( - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Add a new Search Provider - - - - - - - - { - setNewProvider({ - ...newProvider, - name: event.target.value, - }); - }} - /> - { - setNewProvider({ - ...newProvider, - prefix: event.target.value, - }); - }} - /> - - { - setNewProvider({ - ...newProvider, - url: event.target.value, - }); - }} - /> - - - - - - - - - - - + + + + { + setNewProvider({ + ...newProvider, + name: event.target.value, + }); + }} + /> + { + setNewProvider({ + ...newProvider, + prefix: event.target.value, + }); + }} + /> + + { + setNewProvider({ + ...newProvider, + url: event.target.value, + }); + }} + /> + + + + + + + + } + /> + + + + {title} + + + + + {body} + + + + + ); +} + +export default AddItemModal; diff --git a/src/pages/settings/components/Shared/DeleteItemModal.tsx b/src/pages/settings/components/Shared/DeleteItemModal.tsx new file mode 100644 index 0000000..8773f8a --- /dev/null +++ b/src/pages/settings/components/Shared/DeleteItemModal.tsx @@ -0,0 +1,35 @@ +import { Card, Modal } from '@mantine/core'; +import { useCommonHooks } from 'hooks'; +import { cardClasses, modalClasses } from 'styles'; + +function DeleteItemModal({ modalOpened, handleClose, body, title }: any) { + const { isMobile, modalStyle } = useCommonHooks(); + return ( + + + + + {title} + + + + + {body} + + + + + ); +} + +export default DeleteItemModal; diff --git a/src/pages/settings/components/Theming/ThemeCard.tsx b/src/pages/settings/components/Theming/ThemeCard.tsx index bb7d7c0..5d75cb1 100644 --- a/src/pages/settings/components/Theming/ThemeCard.tsx +++ b/src/pages/settings/components/Theming/ThemeCard.tsx @@ -1,19 +1,11 @@ -import { - ActionIcon, - Box, - Button, - Group, - Modal, - Overlay, - Stack, - Text, -} from '@mantine/core'; +import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; 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 { actionIconClasses } from 'styles'; import type { ThemePlaylist } from 'types'; +import DeleteItemModal from '../Shared/DeleteItemModal'; function ThemeCard({ cardTheme, handleOpen, allThemes }: any) { const { data: themePlaylists } = useQueryAPI({ @@ -29,10 +21,8 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) { currentTheme, setCurrentTheme, theme, - isMobile, currentThemePlaylist, setCurrentThemePlaylist, - modalStyle, handleDelete, } = useCommonHooks(); @@ -46,65 +36,49 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) { onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} > - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Delete Theme - - - - - Are you sure you want to delete this theme? - + Are you sure you want to delete this theme? + {`"${cardTheme.name}"`} + This action cannot be undone! + + - - - - - - + > + Delete + + + + + } + /> setHover(true)} onMouseLeave={() => setHover(false)} > - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Delete Theme Playlist - - - - - Are you sure you want to delete this Theme Playlist? - + Are you sure you want to delete this Theme Playlist? + {`"${cardPlaylist.name}"`} + This action cannot be undone! + + - - - - - - + > + Delete + + + + + } + /> { mutateAsync({ method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH', - endpoint: 'api/themePlaylists', + endpoint: themePlaylistsEndpoint, body: selectedPlaylist, }); close(); diff --git a/src/pages/settings/components/Theming/Themes.tsx b/src/pages/settings/components/Theming/Themes.tsx index f0ce445..24ff0b4 100644 --- a/src/pages/settings/components/Theming/Themes.tsx +++ b/src/pages/settings/components/Theming/Themes.tsx @@ -2,20 +2,20 @@ import { Box, Group, Overlay, Stack, Switch, Text } from '@mantine/core'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { FiChevronRight } from 'react-icons/fi'; -import '@mantine/core/styles/ModalBase.css'; -import '@mantine/core/styles/Modal.css'; import { FaDice } from 'react-icons/fa'; +import { FiChevronRight } from 'react-icons/fi'; import type { Theme } from 'types'; import SettingsHeader from '../Shared/SettingsHeader'; import ThemeCard from './ThemeCard'; import ThemeModal from './ThemeModal'; function ThemesSettings() { + const themesEndpoint = 'api/themes'; + const backgroundsEndpoint = 'api/backgrounds'; const { data: allThemes } = useQueryAPI({ endpoint: 'api/themes', }); const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({ - endpoint: 'api/backgrounds', + endpoint: backgroundsEndpoint, }); const { mutateAsync } = useMutationAPI(); const [opened, { open, close }] = useDisclosure(false); @@ -43,7 +43,7 @@ function ThemesSettings() { const handleSaveTheme = () => { mutateAsync({ method: selectedTheme.id === undefined ? 'POST' : 'PATCH', - endpoint: 'api/themes', + endpoint: themesEndpoint, body: selectedTheme, }); close(); diff --git a/src/pages/settings/components/WoL/DebouncedWolClient.tsx b/src/pages/settings/components/WoL/DebouncedWolClient.tsx index 1f8080d..775d573 100644 --- a/src/pages/settings/components/WoL/DebouncedWolClient.tsx +++ b/src/pages/settings/components/WoL/DebouncedWolClient.tsx @@ -3,20 +3,20 @@ import { Button, Card, Group, - Modal, Stack, Text, TextInput, Tooltip, } from '@mantine/core'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; -import { IconTrash } from '@tabler/icons-react'; import { useCommonHooks, useMutationAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { cardClasses, modalClasses, textInputClasses } from 'styles'; +import { FiTrash } from 'react-icons/fi'; +import { cardClasses, textInputClasses } from 'styles'; +import DeleteItemModal from '../Shared/DeleteItemModal'; function DebouncedWolClient({ wolClient }: any) { - const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks(); + const { theme, handleDelete } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const { mutateAsync } = useMutationAPI(); @@ -38,65 +38,49 @@ function DebouncedWolClient({ wolClient }: any) { return ( - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Delete WoL Client - - - - - Are you sure you want to delete this WoL Client? - + Are you sure you want to delete this WoL Client? + {`"${client.hostname}"`} + This action cannot be undone! + + - - - - - - + > + Delete + + + + + } + /> - + diff --git a/src/pages/settings/components/WoL/WolClients.tsx b/src/pages/settings/components/WoL/WolClients.tsx index 452d753..faec24a 100644 --- a/src/pages/settings/components/WoL/WolClients.tsx +++ b/src/pages/settings/components/WoL/WolClients.tsx @@ -1,11 +1,9 @@ import { Button, - Card, Divider, Grid, GridCol, Group, - Modal, Popover, Stack, TextInput, @@ -13,29 +11,36 @@ import { import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { cardClasses, modalClasses, textInputClasses } from 'styles'; +import { textInputClasses } from 'styles'; import type { WolClient } from 'types'; +import AddItemModal from '../Shared/AddItemModal'; import SettingsHeader from '../Shared/SettingsHeader'; import DebouncedWolClient from './DebouncedWolClient'; import WolClientSettingsItem from './WolClientSettingsItem'; const WolClientSettings = () => { + const defaultWolClient: WolClient = { + id: undefined, + hostname: '', + macAddress: '', + }; const endpoint = 'api/wolClients'; const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({ endpoint: endpoint, }); const [wolClients, setWolClients] = useState([]); const { mutateAsync } = useMutationAPI(); - const { isMobile, modalStyle } = useCommonHooks(); - const [newWolClient, setNewWolClient] = useState({ - id: undefined, - hostname: '', - macAddress: '', - }); + const { isMobile } = useCommonHooks(); + const [newWolClient, setNewWolClient] = useState(defaultWolClient); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const [searchValue, setSearchValue] = useState(''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); + const handleClose = () => { + setNewWolClient(defaultWolClient); + closeModal(); + }; + useEffect(() => { if (wolClientsData && wolClientsIsFetched) { setWolClients( @@ -48,93 +53,75 @@ const WolClientSettings = () => { return ( - { - closeModal(); - }} - style={modalStyle} - closeOnEscape - closeOnClickOutside - > - - - - Add a new WoL Client - - - - - - - { - setNewWolClient({ - ...newWolClient, - hostname: event.target.value, - }); - }} - /> - { - setNewWolClient({ - ...newWolClient, - macAddress: event.target.value, - }); - }} - /> - - - - - - - - - - - + + + { + setNewWolClient({ + ...newWolClient, + hostname: event.target.value, + }); + }} + /> + { + setNewWolClient({ + ...newWolClient, + macAddress: event.target.value, + }); + }} + /> + + + + + + + + } + />