145 lines
3.8 KiB
TypeScript
145 lines
3.8 KiB
TypeScript
import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
|
|
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
|
import { DeleteItemModal, ManagementPill } from 'components';
|
|
import { useCommonHooks, useMutationAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { cardClasses, textInputClasses } from 'styles';
|
|
import type { Bookmark } from 'types';
|
|
|
|
function DebouncedBookmarkItem({
|
|
bookmarkItem,
|
|
setIsOpen,
|
|
}: {
|
|
bookmarkItem: Bookmark;
|
|
setIsOpen: (isOpen: boolean) => void;
|
|
}) {
|
|
const { handleDelete, isMobile, theme } = useCommonHooks();
|
|
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
|
|
const { mutateAsync } = useMutationAPI();
|
|
|
|
const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
|
|
const [update, setUpdate] = useState<any>({});
|
|
const [debounced] = useDebouncedValue(update, 1000);
|
|
const handleClose = () => {
|
|
setIsOpen(false);
|
|
closeModal();
|
|
};
|
|
useEffect(() => {
|
|
if (Object.keys(debounced).length) {
|
|
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
|
|
}
|
|
}, [debounced]);
|
|
|
|
useEffect(() => {
|
|
if (update !== bookmark && Object.keys(update).length) {
|
|
setBookmark(update);
|
|
}
|
|
}, [update]);
|
|
|
|
return (
|
|
<Card
|
|
p={isMobile ? 'xl' : undefined}
|
|
className={cardClasses.settingsItem}
|
|
classNames={cardClasses}
|
|
>
|
|
<DeleteItemModal
|
|
modalOpened={modalOpened}
|
|
handleClose={handleClose}
|
|
handleDelete={() => handleDelete(bookmark, 'api/bookmarks')}
|
|
body={
|
|
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
|
|
<Text>Are you sure you want to delete this bookmark?</Text>
|
|
<Text
|
|
style={{
|
|
fontWeight: 'bold',
|
|
fontSize: '1.25rem',
|
|
padding: '.5rem',
|
|
margin: '.5rem',
|
|
borderRadius: '10px',
|
|
backgroundColor: 'var(--mantine-color-accent-0)',
|
|
color: 'var(--mantine-color-background-0)',
|
|
}}
|
|
>{`"${bookmark.name}"`}</Text>
|
|
<Text c='red'>This action cannot be undone!</Text>
|
|
</Stack>
|
|
}
|
|
title='Delete Bookmark'
|
|
/>
|
|
<ManagementPill
|
|
enabled={bookmark.enabled}
|
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setUpdate({
|
|
...bookmark,
|
|
enabled: event.target.checked ? 1 : 0,
|
|
});
|
|
}}
|
|
openModal={openModal}
|
|
/>
|
|
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
|
|
<TextInput
|
|
label={'Name'}
|
|
className={textInputClasses.settingsItem}
|
|
classNames={textInputClasses}
|
|
defaultValue={bookmark.name}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...bookmark,
|
|
name: event.target.value,
|
|
});
|
|
}}
|
|
styles={
|
|
theme.textShadowsEnabled
|
|
? {
|
|
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
|
}
|
|
: undefined
|
|
}
|
|
/>
|
|
<TextInput
|
|
label={'Category'}
|
|
className={textInputClasses.settingsItem}
|
|
classNames={textInputClasses}
|
|
defaultValue={bookmark.category}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...bookmark,
|
|
category: event.target.value,
|
|
});
|
|
}}
|
|
styles={
|
|
theme.textShadowsEnabled
|
|
? {
|
|
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
|
}
|
|
: undefined
|
|
}
|
|
/>
|
|
</Group>
|
|
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
|
|
<TextInput
|
|
label={'URL'}
|
|
className={textInputClasses.settingsItem}
|
|
classNames={textInputClasses}
|
|
w={isMobile ? '80%' : '100%'}
|
|
defaultValue={bookmark.url}
|
|
onChange={(event) => {
|
|
setUpdate({
|
|
...bookmark,
|
|
url: event.target.value,
|
|
});
|
|
}}
|
|
styles={
|
|
theme.textShadowsEnabled
|
|
? {
|
|
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
|
}
|
|
: undefined
|
|
}
|
|
/>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default DebouncedBookmarkItem;
|