Clean up and typing

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

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

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

@@ -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();
 									}}
 								>

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>