|
@@ -6,28 +6,37 @@ import { DropdownItem, DropdownMenu, UncontrolledDropdown } from 'reactstrap';
|
|
|
|
|
|
|
|
import { addBookmarkToFolder, toggleBookmark } from '~/client/util/bookmark-utils';
|
|
import { addBookmarkToFolder, toggleBookmark } from '~/client/util/bookmark-utils';
|
|
|
import { toastError } from '~/client/util/toastr';
|
|
import { toastError } from '~/client/util/toastr';
|
|
|
-import { IBookmarkInfo } from '~/interfaces/bookmark-info';
|
|
|
|
|
-import { useSWRBookmarkInfo, useSWRxUserBookmarks } from '~/stores/bookmark';
|
|
|
|
|
|
|
+import { useSWRMUTxCurrentUserBookmarks } from '~/stores/bookmark';
|
|
|
import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
|
|
import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
|
|
|
import { useCurrentUser } from '~/stores/context';
|
|
import { useCurrentUser } from '~/stores/context';
|
|
|
-import { useSWRxPageInfo } from '~/stores/page';
|
|
|
|
|
|
|
+import { useSWRMUTxPageInfo } from '~/stores/page';
|
|
|
|
|
|
|
|
import { BookmarkFolderMenuItem } from './BookmarkFolderMenuItem';
|
|
import { BookmarkFolderMenuItem } from './BookmarkFolderMenuItem';
|
|
|
|
|
|
|
|
-export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, bookmarkInfo: IBookmarkInfo }> = ({ children, bookmarkInfo }): JSX.Element => {
|
|
|
|
|
|
|
+
|
|
|
|
|
+type BookmarkFolderMenuProps = {
|
|
|
|
|
+ isOpen: boolean,
|
|
|
|
|
+ pageId: string,
|
|
|
|
|
+ isBookmarked: boolean,
|
|
|
|
|
+ onToggle?: () => void,
|
|
|
|
|
+ onUnbookmark?: () => void,
|
|
|
|
|
+ children?: React.ReactNode,
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element => {
|
|
|
|
|
+ const {
|
|
|
|
|
+ isOpen, pageId, isBookmarked, onToggle, onUnbookmark, children,
|
|
|
|
|
+ } = props;
|
|
|
|
|
+
|
|
|
const { t } = useTranslation();
|
|
const { t } = useTranslation();
|
|
|
|
|
|
|
|
const [selectedItem, setSelectedItem] = useState<string | null>(null);
|
|
const [selectedItem, setSelectedItem] = useState<string | null>(null);
|
|
|
- const [isOpen, setIsOpen] = useState(false);
|
|
|
|
|
|
|
|
|
|
const { data: currentUser } = useCurrentUser();
|
|
const { data: currentUser } = useCurrentUser();
|
|
|
const { data: bookmarkFolders, mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
|
|
const { data: bookmarkFolders, mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
|
|
|
- const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(bookmarkInfo.pageId);
|
|
|
|
|
-
|
|
|
|
|
- const { mutate: mutateUserBookmarks } = useSWRxUserBookmarks(currentUser?._id);
|
|
|
|
|
- const { mutate: mutatePageInfo } = useSWRxPageInfo(bookmarkInfo.pageId);
|
|
|
|
|
|
|
|
|
|
- const isBookmarked = bookmarkInfo.isBookmarked ?? false;
|
|
|
|
|
|
|
+ const { trigger: mutateCurrentUserBookmarks } = useSWRMUTxCurrentUserBookmarks();
|
|
|
|
|
+ const { trigger: mutatePageInfo } = useSWRMUTxPageInfo(pageId);
|
|
|
|
|
|
|
|
const isBookmarkFolderExists = useMemo((): boolean => {
|
|
const isBookmarkFolderExists = useMemo((): boolean => {
|
|
|
return bookmarkFolders != null && bookmarkFolders.length > 0;
|
|
return bookmarkFolders != null && bookmarkFolders.length > 0;
|
|
@@ -35,36 +44,40 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, bookmarkI
|
|
|
|
|
|
|
|
const toggleBookmarkHandler = useCallback(async() => {
|
|
const toggleBookmarkHandler = useCallback(async() => {
|
|
|
try {
|
|
try {
|
|
|
- await toggleBookmark(bookmarkInfo.pageId, isBookmarked);
|
|
|
|
|
|
|
+ await toggleBookmark(pageId, isBookmarked);
|
|
|
}
|
|
}
|
|
|
catch (err) {
|
|
catch (err) {
|
|
|
toastError(err);
|
|
toastError(err);
|
|
|
}
|
|
}
|
|
|
- }, [bookmarkInfo.pageId, isBookmarked]);
|
|
|
|
|
|
|
+ }, [isBookmarked, pageId]);
|
|
|
|
|
|
|
|
const onUnbookmarkHandler = useCallback(async() => {
|
|
const onUnbookmarkHandler = useCallback(async() => {
|
|
|
|
|
+ if (onUnbookmark != null) {
|
|
|
|
|
+ onUnbookmark();
|
|
|
|
|
+ }
|
|
|
await toggleBookmarkHandler();
|
|
await toggleBookmarkHandler();
|
|
|
- setIsOpen(false);
|
|
|
|
|
setSelectedItem(null);
|
|
setSelectedItem(null);
|
|
|
- mutateUserBookmarks();
|
|
|
|
|
- mutateBookmarkInfo();
|
|
|
|
|
|
|
+ mutateCurrentUserBookmarks();
|
|
|
mutateBookmarkFolders();
|
|
mutateBookmarkFolders();
|
|
|
mutatePageInfo();
|
|
mutatePageInfo();
|
|
|
- }, [mutateBookmarkFolders, mutateBookmarkInfo, mutatePageInfo, mutateUserBookmarks, toggleBookmarkHandler]);
|
|
|
|
|
|
|
+ }, [onUnbookmark, toggleBookmarkHandler, mutateCurrentUserBookmarks, mutateBookmarkFolders, mutatePageInfo]);
|
|
|
|
|
|
|
|
const toggleHandler = useCallback(async() => {
|
|
const toggleHandler = useCallback(async() => {
|
|
|
- setIsOpen(!isOpen);
|
|
|
|
|
-
|
|
|
|
|
|
|
+ // on close
|
|
|
if (isOpen && bookmarkFolders != null) {
|
|
if (isOpen && bookmarkFolders != null) {
|
|
|
bookmarkFolders.forEach((bookmarkFolder) => {
|
|
bookmarkFolders.forEach((bookmarkFolder) => {
|
|
|
bookmarkFolder.bookmarks.forEach((bookmark) => {
|
|
bookmarkFolder.bookmarks.forEach((bookmark) => {
|
|
|
- if (bookmark.page._id === bookmarkInfo.pageId) {
|
|
|
|
|
|
|
+ if (bookmark.page._id === pageId) {
|
|
|
setSelectedItem(bookmarkFolder._id);
|
|
setSelectedItem(bookmarkFolder._id);
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ if (onToggle != null) {
|
|
|
|
|
+ onToggle();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if (selectedItem == null) {
|
|
if (selectedItem == null) {
|
|
|
setSelectedItem('root');
|
|
setSelectedItem('root');
|
|
|
}
|
|
}
|
|
@@ -72,8 +85,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, bookmarkI
|
|
|
if (!isOpen && !isBookmarked) {
|
|
if (!isOpen && !isBookmarked) {
|
|
|
try {
|
|
try {
|
|
|
await toggleBookmarkHandler();
|
|
await toggleBookmarkHandler();
|
|
|
- mutateUserBookmarks();
|
|
|
|
|
- mutateBookmarkInfo();
|
|
|
|
|
|
|
+ mutateCurrentUserBookmarks();
|
|
|
mutatePageInfo();
|
|
mutatePageInfo();
|
|
|
}
|
|
}
|
|
|
catch (err) {
|
|
catch (err) {
|
|
@@ -81,7 +93,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, bookmarkI
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- [isOpen, bookmarkFolders, selectedItem, isBookmarked, bookmarkInfo.pageId, toggleBookmarkHandler, mutateUserBookmarks, mutateBookmarkInfo, mutatePageInfo]);
|
|
|
|
|
|
|
+ [isOpen, bookmarkFolders, onToggle, selectedItem, isBookmarked, pageId, toggleBookmarkHandler, mutateCurrentUserBookmarks, mutatePageInfo]);
|
|
|
|
|
|
|
|
const onMenuItemClickHandler = useCallback(async(e, itemId: string) => {
|
|
const onMenuItemClickHandler = useCallback(async(e, itemId: string) => {
|
|
|
e.stopPropagation();
|
|
e.stopPropagation();
|
|
@@ -89,15 +101,15 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, bookmarkI
|
|
|
setSelectedItem(itemId);
|
|
setSelectedItem(itemId);
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
- await addBookmarkToFolder(bookmarkInfo.pageId, itemId === 'root' ? null : itemId);
|
|
|
|
|
- mutateUserBookmarks();
|
|
|
|
|
|
|
+ await addBookmarkToFolder(pageId, itemId === 'root' ? null : itemId);
|
|
|
|
|
+ mutateCurrentUserBookmarks();
|
|
|
mutateBookmarkFolders();
|
|
mutateBookmarkFolders();
|
|
|
- mutateBookmarkInfo();
|
|
|
|
|
|
|
+ mutatePageInfo();
|
|
|
}
|
|
}
|
|
|
catch (err) {
|
|
catch (err) {
|
|
|
toastError(err);
|
|
toastError(err);
|
|
|
}
|
|
}
|
|
|
- }, [bookmarkInfo.pageId, mutateUserBookmarks, mutateBookmarkFolders, mutateBookmarkInfo]);
|
|
|
|
|
|
|
+ }, [pageId, mutateCurrentUserBookmarks, mutateBookmarkFolders, mutatePageInfo]);
|
|
|
|
|
|
|
|
const renderBookmarkMenuItem = () => {
|
|
const renderBookmarkMenuItem = () => {
|
|
|
return (
|
|
return (
|