Drag and drop bookmark settings

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

@@ -1,12 +1,16 @@
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import {
 	ActionIcon,
+	Box,
 	Button,
+	Card,
 	Divider,
 	Group,
 	Highlight,
 	Modal,
 	Popover,
 	Stack,
+	Switch,
 	Text,
 	TextInput,
 } from '@mantine/core';
@@ -30,14 +34,43 @@ const BookmarkSettings = () => {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/categories',
 	});
-	const [groups, setGroups] = useState([]);
+	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 { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 
+	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(groups, result.source.index, result.destination.index);
+		setGroupList(
+			items.map((item: any, index: number) => {
+				return {
+					...item,
+					index: index,
+				};
+			}),
+		);
+	}
+
 	useEffect(() => {
 		if (linkData && linksIsFetched) {
 			setBookmarks(linkData);
@@ -54,6 +87,12 @@ const BookmarkSettings = () => {
 		}
 	}, [groupData, groupsIsFetched, debouncedGroupSearch]);
 
+	useEffect(() => {
+		if (groupList.length > 0 && groupList !== groups) {
+			mutateAsync({ method: 'PATCH', endpoint: 'api/categoryOrder', body: groupList });
+		}
+	}, [groupList]);
+
 	return (
 		<Stack>
 			<Modal.Root
@@ -218,18 +257,117 @@ const BookmarkSettings = () => {
 						setSearchValue(event.target.value);
 					}}
 				/>
+				<Switch
+					label={'Reorder'}
+					labelPosition='left'
+					pos={'absolute'}
+					right={isMobile ? '2rem' : '1rem'}
+					top={isMobile ? '9.5rem' : undefined}
+					onChange={(e) => {
+						setDragging(e.target.checked);
+					}}
+					color={theme.primaryColor}
+					styles={{ label: { color: theme.primaryColor } }}
+				/>
 			</Group>
-			<Stack w={'100%'} align='center'>
-				<Group w={'75%'} align='start'>
-					{groups?.map((group: any) => (
-						<DebouncedGroupSettingsItem
-							key={group.id}
-							bookmarkGroup={group}
-							bookmarks={bookmarks.filter((a: any) => a.category === group.categoryName)}
-						/>
-					))}
-				</Group>
-			</Stack>
+			{dragging ? (
+				<DragDropContext onDragEnd={onDragEnd}>
+					<Stack w={'100%'} align='center'>
+						<Droppable droppableId={'groupList'}>
+							{(provided) => (
+								<Stack
+									w={'75%'}
+									align='center'
+									justify='center'
+									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}
+													>
+														<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>
+										))}
+									{provided.placeholder}
+								</Stack>
+							)}
+						</Droppable>
+					</Stack>
+				</DragDropContext>
+			) : (
+				<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))}
+								/>
+							))}
+					</Group>
+				</Stack>
+			)}
 		</Stack>
 	);
 };