105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import { Stack, Text } from '@mantine/core';
|
|
import { useCommonHooks, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { textClasses } from 'styles';
|
|
import type { Bookmark, BookmarkGroup } from 'types';
|
|
import BookmarkGroups from './BookmarkGroups';
|
|
|
|
function Bookmarks({ contentType }: { contentType: string[] }) {
|
|
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
|
|
endpoint: 'api/bookmarks',
|
|
});
|
|
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
|
|
endpoint: 'api/bookmarkCategories',
|
|
});
|
|
const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks();
|
|
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
|
|
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (bookmarkData && bookmarksIsFetched) {
|
|
setBookmarks(bookmarkData);
|
|
}
|
|
}, [bookmarksIsFetched, bookmarkData]);
|
|
|
|
useEffect(() => {
|
|
if (groupData && groupsIsFetched) {
|
|
const groupList = groupData?.map((category: BookmarkGroup) => {
|
|
return category;
|
|
});
|
|
setGroups(
|
|
groupList.sort((a: BookmarkGroup, b: BookmarkGroup) => {
|
|
switch (bookmarkSort) {
|
|
case 'A>Z':
|
|
return a.categoryName > b.categoryName ? 1 : -1;
|
|
case 'Z>A':
|
|
return a.categoryName < b.categoryName ? 1 : -1;
|
|
case 'Newest':
|
|
if (a.id && b.id) {
|
|
return a.id < b.id ? 1 : -1;
|
|
}
|
|
return -1;
|
|
case 'Oldest':
|
|
if (a.id && b.id) {
|
|
return a.id > b.id ? 1 : -1;
|
|
}
|
|
return -1;
|
|
case 'Custom':
|
|
return a.categoryIndex > b.categoryIndex ? 1 : -1;
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
}, [groupData, groupsIsFetched, bookmarkSort]);
|
|
|
|
return (
|
|
<>
|
|
{groupsIsFetched &&
|
|
bookmarksIsFetched &&
|
|
groups?.length > 0 &&
|
|
contentType.length > 0 && (
|
|
<Stack gap={0}>
|
|
<Text
|
|
className={textClasses.sectionTitle}
|
|
classNames={textClasses}
|
|
mb={'-.5rem'}
|
|
mt={'1.25rem'}
|
|
>
|
|
Bookmarks
|
|
</Text>
|
|
<Stack
|
|
style={{
|
|
display: 'grid',
|
|
gridRowGap: '0px',
|
|
gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
|
|
}}
|
|
>
|
|
{groups
|
|
?.filter(
|
|
(category: BookmarkGroup) =>
|
|
contentType.includes(category.filterName) ||
|
|
contentType.includes('All'),
|
|
)
|
|
|
|
.map((category: BookmarkGroup) => {
|
|
return (
|
|
<BookmarkGroups
|
|
key={category.categoryName}
|
|
category={category.categoryName}
|
|
bookmarks={bookmarks.filter(
|
|
(bookmark: Bookmark) =>
|
|
bookmark.category === category.categoryName,
|
|
)}
|
|
bookmarkScale={bookmarkScale}
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Bookmarks;
|