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

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 { FiHelpCircle, FiPlus } from 'react-icons/fi';
import {
	actionIconClasses,
	buttonClasses,
	modalClasses,
	textClasses,
	textInputClasses,
} from 'styles';
import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
const BookmarkSettings = () => {
	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
		endpoint: 'api/links',
	});
	const [bookmarks, setBookmarks] = useState<any>([]);
	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
		endpoint: 'api/categories',
	});
	const [groups, setGroups] = useState([]);
	const [newGroup, setNewGroup] = 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);

	useEffect(() => {
		if (linkData && linksIsFetched) {
			setBookmarks(linkData);
		}
	}, [linksIsFetched, linkData]);

	useEffect(() => {
		if (groupData && groupsIsFetched) {
			setGroups(
				groupData.filter((a: any) =>
					a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
				),
			);
		}
	}, [groupData, groupsIsFetched, debouncedGroupSearch]);

	return (
		<Stack>
			<Modal.Root
				size={'60%'}
				className={modalClasses.helpModal}
				classNames={modalClasses}
				opened={modalOpened}
				fullScreen={isMobile}
				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})`,
				}}
				closeOnEscape
				closeOnClickOutside
			>
				<Modal.Overlay />
				<Modal.Content>
					<Modal.Header>
						<Modal.Title>Add a new Bookmark Group</Modal.Title>
						<Modal.CloseButton />
					</Modal.Header>
					<Modal.Body pb={'2rem'}>
						<Stack gap={0} w={'100%'} align='center'>
							<Group w={'100%'} justify='center'>
								<TextInput
									label={'Category Name'}
									className={textInputClasses.settingsItem}
									pt={16}
									classNames={textInputClasses}
									defaultValue={newGroup.categoryName}
									onChange={(event) => {
										setNewGroup({
											...newGroup,
											categoryName: event.target.value,
										});
									}}
								/>
								<TextInput
									label={'Filter Name'}
									className={textInputClasses.settingsItem}
									pt={16}
									classNames={textInputClasses}
									defaultValue={newGroup.filterName}
									onChange={(event) => {
										setNewGroup({
											...newGroup,
											filterName: event.target.value,
										});
									}}
								/>
							</Group>

							<Divider color='black' my='sm' />
							<Group pos={'absolute'} bottom={8}>
								<Button
									color={'green'}
									styles={{ label: { color: 'black' } }}
									onClick={() => {
										if (newGroup) {
											mutateAsync({
												method: 'POST',
												endpoint: 'api/categories',
												body: newGroup,
											});
											closeModal();
										}
									}}
								>
									Save
								</Button>
								<Button
									color={'red'}
									styles={{ label: { color: 'black' } }}
									onClick={() => {
										closeModal();
									}}
								>
									Cancel
								</Button>
							</Group>
						</Stack>
					</Modal.Body>
				</Modal.Content>
			</Modal.Root>
			<Group align='center'>
				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
					Bookmarks
				</Text>
				<Popover withArrow withOverlay withinPortal={false}>
					<Popover.Target>
						<ActionIcon
							className={actionIconClasses.settingsTooltip}
							classNames={actionIconClasses}
						>
							<FiHelpCircle />
						</ActionIcon>
					</Popover.Target>
					<Popover.Dropdown
						style={{
							color: theme.primaryColor,
							backgroundColor: theme.backgroundColor,
						}}
					>
						<Stack>
							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
								{'Bookmarks are the links that will be displayed on the homepage.'}
							</Text>
							<Highlight
								ta={'center'}
								highlight={''}
								className={textClasses.settingsTooltip}
								classNames={textClasses}
								highlightStyles={{
									backgroundImage:
										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
									fontWeight: 700,
									WebkitBackgroundClip: 'text',
									WebkitTextFillColor: 'transparent',
								}}
							>
								{''}
							</Highlight>
						</Stack>
					</Popover.Dropdown>
				</Popover>
				<Button
					className={buttonClasses.tableButton}
					classNames={buttonClasses}
					onClick={openModal}
				>
					<FiPlus />
				</Button>
				<TextInput
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					autoFocus
					placeholder='Search...'
					value={searchValue}
					onInput={(event: any) => {
						setSearchValue(event.target.value);
					}}
				/>
			</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>
		</Stack>
	);
};
export default BookmarkSettings;