create copy board link option so the menu is also visible to logged o…

…ut users

src/components/hooks/useBoardOptions.ts

@@ -1,6 +1,7 @@
 import {
   faCommentSlash,
   faEdit,
+  faLink,
   faThumbtack,
   faVolumeMute,
   faVolumeUp,
@@ -15,14 +16,18 @@ import {
 import { BoardPermissions } from "types/Types";
 import { DropdownProps } from "@bobaboard/ui-components/dist/common/DropdownListMenu";
 import React from "react";
+import { copyText } from "lib/text";
+import { toast } from "@bobaboard/ui-components";
 import { useAuth } from "components/Auth";
+import { useCachedLinks } from "../hooks/useCachedLinks";
 import { useInvalidateNotifications } from "lib/api/hooks/notifications";
 
 export enum BoardOptions {
   DISMISS_NOTIFICATIONS = "DISMISS_NOTIFICATIONS",
   PIN = "PIN",
   EDIT = "EDIT",
   MUTE = "MUTE",
+  COPY_LINK = "COPY_LINK",
 }
 
 type OptionType = NonNullable<DropdownProps["options"]>[number];
@@ -64,6 +69,18 @@ const getEditOption = (callback: () => void): OptionType => ({
   },
 });
 
+const getCopyLinkOption = (href: string): OptionType => ({
+  icon: faLink,
+  name: "Copy link to board",
+  link: {
+    onClick: () => {
+      copyText(new URL(href, window.location.origin).toString());
+
+      toast.success("Link copied!");
+    },
+  },
+});
+
 const useBoardOptions = ({
   options,
   boardId,
@@ -77,6 +94,7 @@ const useBoardOptions = ({
 }): DropdownProps["options"] | undefined => {
   const { boardMetadata } = useBoardMetadata({ boardId });
   const { isLoggedIn } = useAuth();
+  const { getLinkToBoard } = useCachedLinks();
 
   const setBoardPinned = usePinBoard();
   const dismissNotifications = useDismissBoardNotifications();
@@ -128,6 +146,11 @@ const useBoardOptions = ({
             return null;
           }
           return getEditOption(() => callbacks.editSidebar?.(true));
+        case BoardOptions.COPY_LINK:
+          if (!boardMetadata) {
+            return null;
+          }
+          return getCopyLinkOption(getLinkToBoard(boardMetadata.slug).href);
       }
     };
     return options.map(getOption).filter((option) => option != null);
@@ -141,6 +164,7 @@ const useBoardOptions = ({
     isLoggedIn,
     setBoardMuted,
     setBoardPinned,
+    getLinkToBoard,
   ]);
 
   return dropdownOptions.length

src/pages/index.tsx

@@ -1,14 +1,13 @@
 import {
+  BoardListBlock,
   RulesBlock,
   SubscriptionBlock,
   useBoos,
-  BoardListBlock,
 } from "@bobaboard/ui-components";
 import {
   BoardOptions,
   useBoardOptions,
 } from "../components/hooks/useBoardOptions";
-
 import {
   REALM_QUERY_KEY,
   useRealmBoards,
@@ -32,21 +31,21 @@ import {
   prefetchSubscriptionData,
   useSubscription,
 } from "lib/api/hooks/subscriptions";
+import {
+  useBoardMetadata,
+  useMuteBoard,
+  usePinBoard,
+} from "lib/api/hooks/board";
 
+import { BoardListBlockProps } from "@bobaboard/ui-components/dist/blocks/BoardListBlock";
 import Layout from "components/core/layouts/Layout";
 import { NextPage } from "next";
 import { PageContextWithQueryClient } from "additional";
 import debug from "debug";
-import { useCachedLinks } from "components/hooks/useCachedLinks";
-import { useNotifications } from "lib/api/hooks/notifications";
-import { BoardListBlockProps } from "@bobaboard/ui-components/dist/blocks/BoardListBlock";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import { useAuth } from "components/Auth";
-import {
-  useBoardMetadata,
-  useMuteBoard,
-  usePinBoard,
-} from "lib/api/hooks/board";
+import { useCachedLinks } from "components/hooks/useCachedLinks";
+import { useNotifications } from "lib/api/hooks/notifications";
 
 const error = debug("bobafrontend:HomePage-error");
 
@@ -159,16 +158,15 @@ const RulesBlockWithShowAll = (rulesBlock: RulesBlockType) => {
 const BoardListItemWithOptions = (props: any) => {
   const boardOptions = useBoardOptions({
     options: [
+      BoardOptions.COPY_LINK,
       BoardOptions.MUTE,
       BoardOptions.PIN,
       BoardOptions.DISMISS_NOTIFICATIONS,
     ],
     boardId: props.id || null,
   });
   console.log(boardOptions);
-  return (
-    <BoardListBlock.Item {...props} options={boardOptions} />
-  );
+  return <BoardListBlock.Item {...props} options={boardOptions} />;
 };
 
 const UiBlock = (props: UiBlocks) => {
@@ -278,6 +276,7 @@ const HomePage: NextPage = () => {
                 </BoardListBlock.Empty>
                 {boardsToDisplay.map((board) => (
                   <BoardListItemWithOptions
+                    key={board.id}
                     {...board}
                     as={BoardListBlock.Item}
                   />