59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
|
|
import {
|
|
handleResponse,
|
|
Headline,
|
|
ListContainer,
|
|
ItemList,
|
|
ErrorMessage,
|
|
} from './elements';
|
|
|
|
import { BookmarkGroup } from './bookmarkGroup';
|
|
|
|
const useBookmarkData = () => {
|
|
const [bookmarkData, setBookmarkData] = useState({
|
|
groups: [],
|
|
error: false,
|
|
});
|
|
|
|
const fetchBookmarkData = useCallback(() => {
|
|
(process.env.NODE_ENV === 'production'
|
|
? fetch('/data/bookmarks.json').then(handleResponse)
|
|
: import('./data/bookmarks.json')
|
|
)
|
|
.then((jsonResponse) => {
|
|
setBookmarkData({ ...jsonResponse, error: false });
|
|
})
|
|
.catch((error) => {
|
|
setBookmarkData({ groups: [], error: error.message });
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchBookmarkData();
|
|
}, [fetchBookmarkData]);
|
|
return { bookmarkData, fetchBookmarkData };
|
|
};
|
|
|
|
const BookmarkList = () => {
|
|
const {
|
|
bookmarkData: { groups, error },
|
|
} = useBookmarkData();
|
|
return (
|
|
<ListContainer>
|
|
<Headline>Bookmarks</Headline>
|
|
{error && <ErrorMessage>{error}</ErrorMessage>}
|
|
<ItemList>
|
|
{groups.map(({ name, items }, idx) => (
|
|
<BookmarkGroup
|
|
key={[name, idx].join('')}
|
|
name={name}
|
|
items={items}
|
|
/>
|
|
))}
|
|
</ItemList>
|
|
</ListContainer>
|
|
);
|
|
};
|
|
|
|
export default BookmarkList;
|