Clean up and typing

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -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>