diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx deleted file mode 100644 index 16f301a..0000000 --- a/src/components/DataTable/DataTable.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core'; -import { modals } from '@mantine/modals'; -import { IconEdit, IconTrash } from '@tabler/icons-react'; -import { ThemeProvider } from 'components/ThemeProvider'; -import { useCommonHooks, useMutationAPI } from 'hooks'; -import { - type MRT_Row, - type MRT_TableOptions, - MantineReactTable, - useMantineReactTable, -} from 'mantine-react-table'; -import { memo } from 'react'; -import { FiPlus } from 'react-icons/fi'; -import { actionIconClasses, buttonClasses, textInputClasses } from 'styles'; - -export function DataTableComponent({ - tableName, - columns, - tableData, - isFetching, - isLoading, - endpoint, -}: { - tableName: string; - columns: any; - tableData: any; - isFetching: boolean; - isLoading: boolean; - endpoint: string; -}) { - const { theme } = useCommonHooks(); - const { mutateAsync: createRow } = useMutationAPI(); - const { mutateAsync: editRow } = useMutationAPI(); - const { mutateAsync: deleteRow } = useMutationAPI(); - const handleCreateRow: MRT_TableOptions['onCreatingRowSave'] = async ({ - values, - exitCreatingMode, - }) => { - createRow({ method: 'POST', endpoint: endpoint, body: values }); - exitCreatingMode(); - }; - const handleEditRow: MRT_TableOptions['onEditingRowSave'] = async ({ - values, - table, - row, - }) => { - editRow({ method: 'PATCH', endpoint: endpoint, body: { ...values, id: row.id } }); - table.setEditingRow(null); - }; - const openDeleteConfirmModal = (row: MRT_Row) => - modals.openConfirmModal({ - title: ( - Are you sure you want to delete this user? - ), - children: Are you sure?, - labels: { confirm: 'Delete', cancel: 'Cancel' }, - confirmProps: { - style: { - backgroundColor: 'var(--mantine-color-red-6)', - color: 'var(--mantine-color-white)', - }, - }, - cancelProps: { color: 'green' }, - onConfirm: () => - deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }), - }); - const table = useMantineReactTable({ - columns: columns, - data: tableData, - enableFacetedValues: true, - enablePagination: false, - enableRowVirtualization: true, - enableEditing: true, - createDisplayMode: 'modal', - editDisplayMode: 'row', - enableBottomToolbar: false, - enableToolbarInternalActions: false, - positionGlobalFilter: 'right', - onCreatingRowSave: handleCreateRow, - onEditingRowSave: handleEditRow, - getRowId: (row: any) => row.id, - initialState: { - showLoadingOverlay: isLoading, - isLoading: isLoading, - }, - state: { - showLoadingOverlay: isFetching, - isLoading: isLoading, - columnVisibility: { id: false, categoryIndex: false }, - showGlobalFilter: tableName !== 'Personalization', - }, - mantineSearchTextInputProps: { - classNames: textInputClasses, - className: textInputClasses.default, - }, - mantinePaperProps: { - style: { - border: 'none', - boxShadow: 'none', - '--mrt-base-background-color': 'transparent', - '--mrt-row-hover-background-color': theme.searchColor, - color: 'var(--color-text-pri)', - }, - }, - mantineTableContainerProps: { - style: { - maxHeight: '700px', - borderRadius: '20px', - backgroundColor: theme.searchColor, - backdropFilter: theme.backgroundImage === 'none' ? undefined : 'blur(20px)', - fontSize: '18px', - }, - }, - mantineTableHeadProps: { - style: { - fontSize: '18px', - backgroundColor: theme.primaryColor, - color: theme.accentColor, - opacity: 1, - }, - }, - mantineTableBodyRowProps: { - style: { - fontSize: '18px', - borderBottom: 'none', - }, - }, - mantineEditTextInputProps: { - styles: { - wrapper: { - display: 'flex', - }, - input: { - width: '100%', - border: 'none', - backgroundColor: `${theme.searchColor}`, - color: 'var(--color-text-pri)', - fontSize: '18px', - }, - }, - }, - mantineFilterTextInputProps: { - classNames: textInputClasses, - className: textInputClasses.default, - }, - mantineEditSelectProps: { - styles: { - input: { - color: theme.primaryColor, - fontSize: '18px', - backgroundColor: theme.searchColor, - border: 'none', - }, - option: { - color: theme.primaryColor, - fontSize: '18px', - backgroundColor: 'transparent', - }, - dropdown: { - backgroundColor: `${theme.backgroundColor} !important`, - }, - }, - }, - displayColumnDefOptions: { - 'mrt-row-actions': { - header: '', - minSize: 40, - }, - }, - renderRowActions: ({ row, table }) => ( - - - table.setEditingRow(row)} - > - - - - - openDeleteConfirmModal(row)}> - - - - - ), - mantineCreateRowModalProps: { - styles: { - root: { - color: theme.primaryColor, - }, - content: { - color: theme.primaryColor, - }, - }, - }, - renderTopToolbarCustomActions: ({ table }) => { - return ( - <> - {tableName !== 'Personalization' && ( - - )} - - ); - }, - }); - return ( - - - - ); -} - -export const DataTable = memo(DataTableComponent); - -export default DataTable; diff --git a/src/components/DataTable/columns/ApplicationColumns.tsx b/src/components/DataTable/columns/ApplicationColumns.tsx deleted file mode 100644 index 160b1e8..0000000 --- a/src/components/DataTable/columns/ApplicationColumns.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import type { MRT_ColumnDef } from 'mantine-react-table'; -import { useMemo } from 'react'; - -export function ApplicationColumns() { - const columns = useMemo[]>( - () => [ - { - accessorFn: (row) => { - if (row.id) { - return `${row.id}`; - } - return ''; - }, - enableEditing: false, - id: 'id', - header: 'ID', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.name) { - return `${row.name}`; - } - return ''; - }, - id: 'name', - header: 'Name', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.url) { - return `${row.url}`; - } - return ''; - }, - id: 'url', - header: 'Url', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.icon) { - return `${row.icon}`; - } - return ''; - }, - id: 'icon', - header: 'Icon', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.baseUrl) { - return `${row.baseUrl}`; - } - return ''; - }, - id: 'baseUrl', - header: 'Base Url', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.filterName) { - return `${row.filterName}`; - } - return ''; - }, - id: 'filterName', - header: 'Filter Name', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - ], - [], - ); - - return columns; -} diff --git a/src/components/DataTable/columns/BookmarkColumns.tsx b/src/components/DataTable/columns/BookmarkColumns.tsx deleted file mode 100644 index 29b4b65..0000000 --- a/src/components/DataTable/columns/BookmarkColumns.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import type { MRT_ColumnDef } from 'mantine-react-table'; -import { useMemo } from 'react'; - -export function BookmarkColumns(groups: any) { - const columns = useMemo[]>( - () => [ - { - accessorFn: (row) => { - if (row.id) { - return `${row.id}`; - } - return ''; - }, - enableEditing: false, - id: 'id', - header: 'ID', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.name) { - return `${row.name}`; - } - return ''; - }, - id: 'name', - header: 'Name', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.url) { - return `${row.url}`; - } - return ''; - }, - id: 'url', - header: 'Url', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.category) { - return `${row.category}`; - } - return ''; - }, - id: 'category', - header: 'Category', - editVariant: 'select', - mantineEditSelectProps: { data: groups }, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - ], - [groups], - ); - - return columns; -} diff --git a/src/components/DataTable/columns/CategoryColumns.tsx b/src/components/DataTable/columns/CategoryColumns.tsx deleted file mode 100644 index 361aa85..0000000 --- a/src/components/DataTable/columns/CategoryColumns.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import type { MRT_ColumnDef } from 'mantine-react-table'; -import { useMemo } from 'react'; - -export function CategoryColumns() { - const columns = useMemo[]>( - () => [ - { - accessorFn: (row) => { - if (row.id) { - return `${row.id}`; - } - return ''; - }, - enableEditing: false, - id: 'id', - header: 'ID', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.categoryName) { - return `${row.categoryName}`; - } - return ''; - }, - id: 'categoryName', - header: 'Name', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.categoryIndex > -1) { - return `${row.categoryIndex}`; - } - return ''; - }, - enableEditing: false, - id: 'categoryIndex', - header: 'Index', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.filterName) { - return `${row.filterName}`; - } - return ''; - }, - id: 'filterName', - header: 'Filter Name', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - ], - [], - ); - - return columns; -} diff --git a/src/components/DataTable/columns/MessagesColumns.tsx b/src/components/DataTable/columns/MessagesColumns.tsx deleted file mode 100644 index 0e824e9..0000000 --- a/src/components/DataTable/columns/MessagesColumns.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { MRT_ColumnDef } from 'mantine-react-table'; -import { useMemo } from 'react'; - -export function MessagesColumns() { - const columns = useMemo[]>( - () => [ - { - accessorFn: (row) => { - if (row.id) { - return `${row.id}`; - } - return ''; - }, - enableEditing: false, - id: 'id', - header: 'ID', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.message) { - return `${row.message}`; - } - return ''; - }, - id: 'message', - header: 'Message', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - ], - [], - ); - - return columns; -} diff --git a/src/components/DataTable/columns/SearchProviderColumns.tsx b/src/components/DataTable/columns/SearchProviderColumns.tsx deleted file mode 100644 index dd7f1e5..0000000 --- a/src/components/DataTable/columns/SearchProviderColumns.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import type { MRT_ColumnDef } from 'mantine-react-table'; -import { useMemo } from 'react'; - -export function SearchProviderColumns() { - const columns = useMemo[]>( - () => [ - { - accessorFn: (row) => { - if (row.id) { - return `${row.id}`; - } - return ''; - }, - enableEditing: false, - id: 'id', - header: 'ID', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.name) { - return `${row.name}`; - } - return ''; - }, - id: 'name', - header: 'Name', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.url) { - return `${row.url}`; - } - return ''; - }, - id: 'url', - header: 'Url', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.prefix) { - return `${row.prefix}`; - } - return ''; - }, - id: 'prefix', - header: 'Prefix', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - ], - [], - ); - - return columns; -} diff --git a/src/components/DataTable/columns/WolClientColumns.tsx b/src/components/DataTable/columns/WolClientColumns.tsx deleted file mode 100644 index 57a8bc3..0000000 --- a/src/components/DataTable/columns/WolClientColumns.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { MRT_ColumnDef } from 'mantine-react-table'; -import { useMemo } from 'react'; - -export function WolClientColumns() { - const columns = useMemo[]>( - () => [ - { - accessorFn: (row) => { - if (row.id) { - return `${row.id}`; - } - return ''; - }, - enableEditing: false, - id: 'id', - header: 'ID', - size: 50, - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.hostname) { - return `${row.hostname}`; - } - return ''; - }, - id: 'hostname', - header: 'Hostname', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - { - accessorFn: (row) => { - if (row.macAddress) { - return `${row.macAddress}`; - } - return ''; - }, - id: 'macAddress', - header: 'MAC Address', - Cell: ({ renderedCellValue }) => renderedCellValue, - Header: ({ column }) => column.columnDef.header, - }, - ], - [], - ); - - return columns; -} diff --git a/src/components/index.ts b/src/components/index.ts index e276d9e..d1c9930 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,11 +1,4 @@ export { HelpModal } from './HelpModal/HelpModal'; export { WeatherModal } from './WeatherModal/WeatherModal'; -export { DataTable } from './DataTable/DataTable'; export { ThemeProvider } from './ThemeProvider'; export { MainLayout } from './MainLayout'; -export { ApplicationColumns } from './DataTable/columns/ApplicationColumns'; -export { BookmarkColumns } from './DataTable/columns/BookmarkColumns'; -export { CategoryColumns } from './DataTable/columns/CategoryColumns'; -export { MessagesColumns } from './DataTable/columns/MessagesColumns'; -export { SearchProviderColumns } from './DataTable/columns/SearchProviderColumns'; -export { WolClientColumns } from './DataTable/columns/WolClientColumns'; diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index af020a9..bde2376 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -2,7 +2,6 @@ import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core'; import { useCommonHooks } from 'hooks'; import { FiArrowLeftCircle, - FiBook, FiBookmark, FiEdit, FiGlobe, @@ -15,7 +14,6 @@ import { useNavigate, useParams } from 'react-router-dom'; import { actionIconClasses, tabClasses, textClasses } from 'styles'; import Applications from './components/Applications/Applications'; import Bookmarks from './components/Bookmarks/Bookmarks'; -import Categories from './components/Categories/Categories'; import Messages from './components/Messages/Messages'; import Personalization from './components/Personalization/Personalization'; import SearchProviders from './components/Search/SearchProviders'; @@ -66,9 +64,6 @@ export function Settings() { {isMobile ? : 'Bookmarks'} - - {isMobile ? : 'Categories'} - {isMobile ? : 'Themes'} @@ -94,9 +89,6 @@ export function Settings() { - - - diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx index cfa52fd..063daa2 100644 --- a/src/pages/settings/components/Applications/DebouncedApplication.tsx +++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx @@ -60,7 +60,7 @@ function DebouncedApplication({ application, handleDelete }: any) { - Add a new message + Delete Application diff --git a/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx new file mode 100644 index 0000000..08e6ca0 --- /dev/null +++ b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx @@ -0,0 +1,39 @@ +import { ActionIcon, Box, Group, Text } from '@mantine/core'; +import { useState } from 'react'; +import { FiEdit } from 'react-icons/fi'; +import { actionIconClasses } from 'styles'; + +function BookmarkSettingsItem({ bookmark }: any) { + const [hover, setHover] = useState(false); + return ( + setHover(true)} + onMouseLeave={() => setHover(false)} + > + + {bookmark.name} + {hover && ( + + + + )} + + + ); +} + +export default BookmarkSettingsItem; diff --git a/src/pages/settings/components/Bookmarks/Bookmarks.tsx b/src/pages/settings/components/Bookmarks/Bookmarks.tsx index 0c4b645..79c7ac7 100644 --- a/src/pages/settings/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/settings/components/Bookmarks/Bookmarks.tsx @@ -1,52 +1,219 @@ -import { Stack, Text } from '@mantine/core'; -import { BookmarkColumns, DataTable } from 'components'; -import { useQueryAPI } from 'hooks'; +import { + ActionIcon, + Button, + Divider, + Group, + Highlight, + Modal, + Popover, + Stack, + Text, + TextInput, +} from '@mantine/core'; +import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; +import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { textClasses } from 'styles'; +import { FiHelpCircle, FiPlus } from 'react-icons/fi'; +import { + actionIconClasses, + buttonClasses, + modalClasses, + textClasses, + textInputClasses, +} from 'styles'; +import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem'; const BookmarkSettings = () => { - const endpoint = 'api/links'; - const { - data: linkData, - isFetched: linksIsFetched, - isFetching: linksIsFetching, - isLoading: linksIsLoading, - } = useQueryAPI({ - endpoint: endpoint, + const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({ + endpoint: 'api/links', }); + const [bookmarks, setBookmarks] = useState([]); const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({ endpoint: 'api/categories', }); - const [bookmarkData, setBookmarkData] = useState([]); const [groups, setGroups] = useState([]); + const [newGroup, setNewGroup] = useState({}); + const { theme } = useCommonHooks(); + const { mutateAsync } = useMutationAPI(); + const [searchValue, setSearchValue] = useState(''); + const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500); + const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); useEffect(() => { if (linkData && linksIsFetched) { - setBookmarkData(linkData); + setBookmarks(linkData); } }, [linksIsFetched, linkData]); useEffect(() => { if (groupData && groupsIsFetched) { - const groupList = groupData?.map((category: any) => { - return category.categoryName; - }); - setGroups(groupList); + setGroups( + groupData.filter((a: any) => + a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()), + ), + ); } - }, [groupData, groupsIsFetched]); + }, [groupData, groupsIsFetched, debouncedGroupSearch]); return ( - - Bookmarks - - + { + 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})`, + }} + closeOnEscape + closeOnClickOutside + > + + + + Add a new Group + + + + + + { + setNewGroup({ + ...newGroup, + categoryName: event.target.value, + }); + }} + /> + { + setNewGroup({ + ...newGroup, + filterName: event.target.value, + }); + }} + /> + + + + + + + + + + + + + + Bookmarks + + + + + + + + + + + {'Bookmarks are the links that will be displayed on the homepage.'} + + + {''} + + + + + + { + setSearchValue(event.target.value); + }} + /> + + + + {groups?.map((group: any) => ( + a.category === group.categoryName)} + /> + ))} + + ); }; diff --git a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx new file mode 100644 index 0000000..1f291da --- /dev/null +++ b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx @@ -0,0 +1,170 @@ +import { + ActionIcon, + 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'; + +function DebouncedBookmarkItem({ bookmarkItem, handleDelete }: any) { + const { theme } = useCommonHooks(); + const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); + const { mutateAsync } = useMutationAPI(); + + const [bookmark, setBookmark] = useState(bookmarkItem); + const [update, setUpdate] = useState({}); + const [debounced] = useDebouncedValue(update, 1000); + + useEffect(() => { + if (Object.keys(debounced).length) { + mutateAsync({ method: 'PATCH', endpoint: 'api/links', body: debounced }); + } + }, [debounced]); + + useEffect(() => { + if (update !== bookmark && Object.keys(update).length) { + setBookmark(update); + } + }, [update]); + + return ( + + { + 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})`, + }} + closeOnEscape + closeOnClickOutside + > + + + + Delete Bookmark + + + + + Are you sure you want to delete this bookmark? + {`"${bookmark.name}"`} + This action cannot be undone! + + + + + + + + + + { + openModal(); + }} + > + + + + + { + setUpdate({ + ...bookmark, + name: event.target.value, + }); + }} + /> + { + setUpdate({ + ...bookmark, + category: event.target.value, + }); + }} + /> + + + { + setUpdate({ + ...bookmark, + url: event.target.value, + }); + }} + /> + + + ); +} + +export default DebouncedBookmarkItem; diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx new file mode 100644 index 0000000..93d84a7 --- /dev/null +++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx @@ -0,0 +1,358 @@ +import { + ActionIcon, + Box, + Button, + Card, + Group, + Modal, + Popover, + 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 { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles'; +import BookmarkSettingsItem from './BookmarkSettingsItem'; +import DebouncedBookmarkItem from './DebouncedBookmarkItem'; + +function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) { + const { theme } = useCommonHooks(); + const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); + const [popoverOpened, setPopoverOpened] = useState(false); + const { mutateAsync } = useMutationAPI(); + const [group, setGroup] = useState(bookmarkGroup); + const [update, setUpdate] = useState({}); + const [debounced] = useDebouncedValue(update, 1000); + const [newBookmark, setNewBookmark] = useState({}); + const handleDeleteBookmark = (application: any) => { + mutateAsync({ method: 'DELETE', endpoint: 'api/links', body: application }); + }; + const handleDeleteGroup = (application: any) => { + mutateAsync({ method: 'DELETE', endpoint: 'api/categories', body: application }); + }; + useEffect(() => { + if (Object.keys(debounced).length) { + mutateAsync({ method: 'PATCH', endpoint: 'api/categories', body: debounced }); + setUpdate({}); + } + }, [debounced]); + + useEffect(() => { + if (update !== group && Object.keys(update).length) { + setGroup(update); + } + }, [update]); + + return ( + + { + 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})`, + }} + closeOnEscape + closeOnClickOutside + > + + + + Delete Application + + + + + Are you sure you want to delete this application? + {`"${group.categoryName}"`} + This action cannot be undone! + + + + + + + + + + + + { + setUpdate({ + ...group, + categoryName: event.target.value, + }); + }} + /> + { + setUpdate({ + ...group, + filterName: event.target.value, + }); + }} + /> + + { + openModal(); + }} + > + + + + + + + {bookmarks.length} + + + + + + {bookmarks.map((bookmark: any) => ( + + + + + + + + + + + ))} + + + + + + + + + + + + { + setNewBookmark({ + ...newBookmark, + name: event.target.value, + }); + }} + /> + { + setNewBookmark({ + ...newBookmark, + category: event.target.value, + }); + }} + /> + + + { + setNewBookmark({ + ...newBookmark, + url: event.target.value, + }); + }} + /> + + + + + + + + + + + + ); +} + +export default DebouncedGroupSettingsItem; diff --git a/src/pages/settings/components/Categories/Categories.tsx b/src/pages/settings/components/Categories/Categories.tsx deleted file mode 100644 index 0f68ab5..0000000 --- a/src/pages/settings/components/Categories/Categories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Stack, Text } from '@mantine/core'; -import { CategoryColumns, DataTable } from 'components'; -import { useQueryAPI } from 'hooks'; -import { useEffect, useState } from 'react'; -import { textClasses } from '../../../../styles'; -const CategorySettings = () => { - const endpoint = 'api/categories'; - const { - data: groupData, - isFetching: groupsIsFetching, - isLoading: groupsIsLoading, - isFetched: groupsIsFetched, - } = useQueryAPI({ - endpoint: endpoint, - }); - const [groups, setGroups] = useState([]); - - useEffect(() => { - if (groupData && groupsIsFetched) { - const groupList = groupData?.map((category: any) => { - return category; - }); - setGroups(groupList); - } - }, [groupData, groupsIsFetched]); - - return ( - - - Categories - - - - ); -}; -export default CategorySettings; diff --git a/src/pages/settings/components/Search/SearchProviders.tsx b/src/pages/settings/components/Search/SearchProviders.tsx index 5d3d9ff..138b41c 100644 --- a/src/pages/settings/components/Search/SearchProviders.tsx +++ b/src/pages/settings/components/Search/SearchProviders.tsx @@ -29,12 +29,7 @@ import SearchProviderSettingsItem from './SearchProviderSettingsItem'; const SearchProviderSettings = () => { const endpoint = 'api/providers'; - const { - data: providers, - isFetched: providersIsFetched, - isFetching: providersIsFetching, - isLoading: providersIsLoading, - } = useQueryAPI({ + const { data: providers, isFetched: providersIsFetched } = useQueryAPI({ endpoint: endpoint, }); const [providerData, setProviderData] = useState([]); diff --git a/src/pages/settings/components/Theming/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists.tsx index 13ba93a..7eb0b33 100644 --- a/src/pages/settings/components/Theming/ThemePlaylists.tsx +++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx @@ -75,7 +75,6 @@ function ThemePlaylists() { Theme Playlists