Drag and drop bookmark settings

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

@@ -1,3 +1,4 @@
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import {
 	ActionIcon,
 	Box,
@@ -29,12 +30,41 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 	const [update, setUpdate] = useState({});
 	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 reorder = (list: any, startIndex: any, endIndex: any) => {
+		const result = Array.from(list);
+		const [removed]: any = result.splice(startIndex, 1);
+		result.splice(endIndex, 0, removed);
+		return result;
+	};
+
+	function onDragEnd(result: any) {
+		if (!result.destination) {
+			return;
+		}
+
+		if (result.destination.index === result.source.index) {
+			return;
+		}
+
+		const items = reorder(bookmarkList, result.source.index, result.destination.index);
+		setBookmarkList(
+			items.map((item: any, index: number) => {
+				return {
+					...item,
+					index: index,
+				};
+			}),
+		);
+	}
+
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: 'api/categories', body: debounced });
@@ -48,6 +78,12 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 		}
 	}, [update]);
 
+	useEffect(() => {
+		if (bookmarkList && bookmarkList !== bookmarks) {
+			mutateAsync({ method: 'PATCH', endpoint: 'api/linkOrder', body: bookmarkList });
+		}
+	}, [bookmarkList]);
+
 	return (
 		<Card w={'400px'} className={cardClasses.settingsItem} classNames={cardClasses}>
 			<Modal.Root
@@ -194,30 +230,57 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 			</Card.Section>
 			<Card.Section mt={16} p={16}>
 				<Stack>
-					{bookmarks.map((bookmark: any) => (
-						<Popover key={bookmark.id} 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>
-					))}
+					<DragDropContext onDragEnd={onDragEnd}>
+						<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>
+										))}
+
+									{provided.placeholder}
+								</Stack>
+							)}
+						</Droppable>
+					</DragDropContext>
 				</Stack>
 			</Card.Section>
 			<Card.Section p={8} bg={theme.searchColor} c={theme.backgroundColor}>