Refresh BookmarksMenu when it is opened. (#1378)

Without adding this logic, the BookmarksMenu will not reflect any new
bookmarks that are added unless you refresh the browser. The reason is
because the menu is always mounted, as it lives at the `App` layer,
though hidden off screen. This means that the `useEffect()` call only
happens once, when the app is first loaded.

By capturing the `isOpen` variable in the `useEffect()`'s dependency
list, we can retrigger the `useEffect()` call whenever the menu is
opened, causing it to be updated with the latest state of the user's
bookmarks.

app/components/ui/BookmarksMenu/BookmarksMenu.tsx

@@ -58,21 +58,24 @@ export const BookmarksMenu = ({
     itemListElement="div"
     width={450}
   >
-    <BookmarksInnerMenu toggleMenu={toggleBookmarksMenu} />
+    <BookmarksInnerMenu toggleMenu={toggleBookmarksMenu} isOpen={isOpen} />
   </Menu>
 );
 
 const BookmarksInnerMenu = ({
   toggleMenu,
+  isOpen,
 }: {
   toggleMenu: (open: boolean) => void;
+  isOpen: boolean;
 }) => {
   const [activeFolder, setActiveFolder] = useState<number | null>(null);
   const [bookmarkFolders, setBookmarkFolders] = useState<Folder[]>([]);
   const { authState } = useAppContext();
 
   useEffect(() => {
     if (!authState) return;
+    if (!isOpen) return;
     const authToken = authState.accessTokenObject.token;
     getCurrentUser(authToken).then((user) =>
       Promise.all([
@@ -97,7 +100,11 @@ const BookmarksInnerMenu = ({
         setBookmarkFolders(transformedFolders);
       })
     );
-  }, [authState]);
+    // We capture isOpen because we want to refresh this menu every time this
+    // modal is reopened. Otherwise, if you add a bookmark, navigate to the
+    // dashboard, and then open this BookmarkMenu, it will not reflect the newly
+    // added bookmarks.
+  }, [authState, isOpen]);
 
   const showFolders = () => {
     if (activeFolder !== null) {