63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { Stack, Text } from '@mantine/core';
|
|
import { useEffect, useState } from 'react';
|
|
import {useQueryAPI} from '../../../hooks/useAPI';
|
|
import texts from '../../../styles/Text.module.css';
|
|
import LinkGroups from './LinkGroups';
|
|
|
|
function Links() {
|
|
const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
|
|
endpoint: 'api/links',
|
|
});
|
|
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
|
|
endpoint: 'api/categories',
|
|
});
|
|
const [bookmarks, setBookmarks] = useState([]);
|
|
const [categories, setCategories] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (linksIsFetched && groupsIsFetched) {
|
|
setBookmarks(linkData);
|
|
setCategories(groupData);
|
|
}
|
|
}, [linksIsFetched, groupsIsFetched]);
|
|
|
|
return (
|
|
<>
|
|
{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
|
|
<Stack id='links' style={{ gap: 0 }}>
|
|
<Text className={texts.sectionTitle} classNames={texts}>Bookmarks</Text>
|
|
<Stack
|
|
style={{
|
|
display: 'grid',
|
|
flexWrap: 'nowrap',
|
|
gridColumnGap: '20px',
|
|
gridRowGap: '0px',
|
|
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
|
|
gridTemplateRows: 'auto',
|
|
}}
|
|
>
|
|
{categories.map((category: any) => {
|
|
if (
|
|
category.column_filter === localStorage.getItem('contenttype') ||
|
|
localStorage.getItem('contenttype') === 'All'
|
|
) {
|
|
return (
|
|
<LinkGroups
|
|
key={category.id}
|
|
category={category.category_name}
|
|
links={bookmarks.filter(
|
|
(bookmark: any) => bookmark.category === category.category_index,
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Links;
|