From 350b39de845c65891a268c8659c74f4eb000f0ef Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Tue, 8 Oct 2024 12:07:09 +0300 Subject: [PATCH 1/3] CW-copy-link-in-2-steps Remove usage of ShareModal --- .../DiscussionFeedCard/DiscussionFeedCard.tsx | 25 ++++++------------ .../ProposalFeedCard/ProposalFeedCard.tsx | 26 +++++++------------ .../ActionsButton/ActionsButton.tsx | 23 +++++++--------- .../ElementDropdown/ElementDropdown.tsx | 3 ++- 4 files changed, 28 insertions(+), 49 deletions(-) diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 0ecf31b59d..54eb9d3883 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -8,6 +8,7 @@ import React, { import { useDispatch, useSelector } from "react-redux"; import { useUpdateEffect } from "react-use"; import { debounce } from "lodash"; +import copyToClipboard from "copy-to-clipboard"; import { selectUser } from "@/pages/Auth/store/selectors"; import { DiscussionService } from "@/services"; import { DeletePrompt, GlobalOverlay, ReportModal } from "@/shared/components"; @@ -33,10 +34,9 @@ import { PredefinedTypes, } from "@/shared/models"; import { TextEditorValue } from "@/shared/ui-kit"; -import { StaticLinkType, getUserName, InternalLinkData, generateFirstMessage } from "@/shared/utils"; +import { StaticLinkType, getUserName, InternalLinkData, generateFirstMessage, generateStaticShareLink } from "@/shared/utils"; import { useChatContext } from "../ChatComponent"; import { FeedCard } from "../FeedCard"; -import { FeedCardShare } from "../FeedCard"; import { FeedItemRef, GetLastMessageOptions, @@ -122,11 +122,6 @@ function DiscussionFeedCard(props, ref) { onOpen: onReportModalOpen, onClose: onReportModalClose, } = useModal(false); - const { - isShowing: isShareModalOpen, - onOpen: onShareModalOpen, - onClose: onShareModalClose, - } = useModal(false); const { isShowing: isDeleteModalOpen, onOpen: onDeleteModalOpen, @@ -194,7 +189,12 @@ function DiscussionFeedCard(props, ref) { }, { report: onReportModalOpen, - share: () => onShareModalOpen(), + share: () => { + if(discussion) { + copyToClipboard(generateStaticShareLink(StaticLinkType.Discussion, discussion, item.id)); + notify("The link has copied!"); + } + }, remove: onDeleteModalOpen, linkStream: onLinkStreamModalOpen, unlinkStream: onUnlinkStreamModalOpen, @@ -464,15 +464,6 @@ function DiscussionFeedCard(props, ref) { type={EntityTypes.Discussion} /> )} - {discussion && ( - - )} {isDeleteModalOpen && ( ( setHovering(isMouseEnter); }; const proposalId = item.data.id; - const { - isShowing: isShareModalOpen, - onOpen: onShareModalOpen, - onClose: onShareModalClose, - } = useModal(false); const preloadDiscussionMessagesData = usePreloadDiscussionMessagesById({ commonId, discussionId: discussion?.id, @@ -202,7 +198,12 @@ const ProposalFeedCard = forwardRef( }, { report: () => {}, - share: () => onShareModalOpen(), + share: () => { + if(discussion) { + copyToClipboard(generateStaticShareLink(StaticLinkType.Proposal, discussion, item.id)); + notify("The link has copied!"); + } + }, remove: onProposalDeleteModalOpen, markFeedItemAsSeen, markFeedItemAsUnseen, @@ -457,15 +458,6 @@ const ProposalFeedCard = forwardRef( /> )} - {discussion && ( - - )} {isProposalDeleteModalOpen && ( = (props) => { const { common, commonMember, commonFollow, onClick, onSearchClick } = props; - const { - isShowing: isShareModalOpen, - onOpen: onShareModalOpen, - onClose: onShareModalClose, - } = useModal(false); + const { notify } = useNotification(); const { markCommonAsSeen } = useUpdateCommonSeenState(); + const shareLink = generateStaticShareLink(StaticLinkType.Common, common); const items = useMenuItems( { common, @@ -32,23 +29,21 @@ const ActionsButton: FC = (props) => { isSearchActionAvailable: Boolean(onSearchClick), }, { - share: onShareModalOpen, + share: () => { + copyToClipboard(shareLink); + notify("The link has copied!"); + }, onFollowToggle: commonFollow.onFollowToggle, onSearchClick, markCommonAsSeen }, ); - const shareLink = generateStaticShareLink(StaticLinkType.Common, common); + const triggerEl = ; return ( <> {items.length > 0 && } - ); }; diff --git a/src/shared/components/ElementDropdown/ElementDropdown.tsx b/src/shared/components/ElementDropdown/ElementDropdown.tsx index 1e5c09ef83..52b904e9f4 100644 --- a/src/shared/components/ElementDropdown/ElementDropdown.tsx +++ b/src/shared/components/ElementDropdown/ElementDropdown.tsx @@ -261,7 +261,8 @@ const ElementDropdown: FC = ({ switch (selectedItem) { case ElementDropdownMenuItems.Share: - onOpen(); + copyToClipboard(staticShareLink); + notify("The link has copied!"); break; case ElementDropdownMenuItems.Copy: copyToClipboard( From 28b27cfe69b5289f8af9e1416a219a57f19b85d6 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Thu, 10 Oct 2024 15:22:29 +0300 Subject: [PATCH 2/3] CW-copy-link-in-2-steps Fixed text for Share --- .../DiscussionFeedCard/DiscussionFeedCard.tsx | 3 ++- .../DiscussionFeedCard/hooks/useMenuItems.tsx | 3 ++- src/pages/common/components/FeedItem/types.ts | 2 ++ .../ProposalFeedCard/ProposalFeedCard.tsx | 3 ++- .../components/ActionsButton/ActionsButton.tsx | 2 ++ .../ActionsButton/hooks/useMenuItems.tsx | 4 ++-- src/pages/commonFeed/utils/getAllowedItems.ts | 2 ++ src/shared/components/Dropdown/index.scss | 2 +- .../ElementDropdown/ElementDropdown.tsx | 17 +++++++++++------ .../components/ElementDropdown/index.scss | 8 ++++---- src/shared/constants/index.tsx | 1 + src/shared/constants/shareText.ts | 5 +++++ 12 files changed, 36 insertions(+), 16 deletions(-) create mode 100644 src/shared/constants/shareText.ts diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 54eb9d3883..6f9be2fd29 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -12,7 +12,7 @@ import copyToClipboard from "copy-to-clipboard"; import { selectUser } from "@/pages/Auth/store/selectors"; import { DiscussionService } from "@/services"; import { DeletePrompt, GlobalOverlay, ReportModal } from "@/shared/components"; -import { DiscussionMessageOwnerType, EntityTypes, InboxItemType } from "@/shared/constants"; +import { DiscussionMessageOwnerType, EntityTypes, InboxItemType, ShareButtonText } from "@/shared/constants"; import { useModal, useNotification } from "@/shared/hooks"; import { FeedItemFollowState, @@ -186,6 +186,7 @@ function DiscussionFeedCard(props, ref) { getNonAllowedItems, feedItemUserMetadata, withoutMenu, + shareText: ShareButtonText.Stream }, { report: onReportModalOpen, diff --git a/src/pages/common/components/DiscussionFeedCard/hooks/useMenuItems.tsx b/src/pages/common/components/DiscussionFeedCard/hooks/useMenuItems.tsx index c7120aa2e3..3fe3c6ef21 100644 --- a/src/pages/common/components/DiscussionFeedCard/hooks/useMenuItems.tsx +++ b/src/pages/common/components/DiscussionFeedCard/hooks/useMenuItems.tsx @@ -59,6 +59,7 @@ export const useMenuItems = ( feedItem, feedItemFollow, feedItemUserMetadata, + shareText } = options; const { report, @@ -92,7 +93,7 @@ export const useMenuItems = ( }, { id: FeedItemMenuItem.Share, - text: "Share", + text: shareText ?? "Share", onClick: share, icon: , }, diff --git a/src/pages/common/components/FeedItem/types.ts b/src/pages/common/components/FeedItem/types.ts index 39e24d71d4..c00a97c579 100644 --- a/src/pages/common/components/FeedItem/types.ts +++ b/src/pages/common/components/FeedItem/types.ts @@ -9,6 +9,7 @@ import { CommonFeedObjectUserUnique, } from "@/shared/models"; import { FeedItemMenuItem } from "./constants"; +import { ShareButtonText } from "@/shared/constants"; export type GetNonAllowedItemsOptions = ( type: CommonFeedType, @@ -26,6 +27,7 @@ export interface GetAllowedItemsOptions { getNonAllowedItems?: GetNonAllowedItemsOptions; feedItemUserMetadata: CommonFeedObjectUserUnique | null; withoutMenu?: boolean; + shareText?: ShareButtonText; } export type MenuItemOptions = Omit; diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 6122ab3286..622050213b 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -13,7 +13,7 @@ import { selectUser } from "@/pages/Auth/store/selectors"; import { useCommonMember, useProposalUserVote } from "@/pages/OldCommon/hooks"; import { ProposalService } from "@/services"; import { DeletePrompt, GlobalOverlay } from "@/shared/components"; -import { InboxItemType } from "@/shared/constants"; +import { InboxItemType, ShareButtonText } from "@/shared/constants"; import { useRoutesContext } from "@/shared/contexts"; import { useForceUpdate, useModal, useNotification } from "@/shared/hooks"; import { @@ -195,6 +195,7 @@ const ProposalFeedCard = forwardRef( getNonAllowedItems, feedItemUserMetadata, withoutMenu, + shareText: ShareButtonText.Stream }, { report: () => {}, diff --git a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx index 3d2fe766a7..fe936cdb6a 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx +++ b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx @@ -7,6 +7,7 @@ import { DesktopMenu, MenuButton } from "@/shared/ui-kit"; import { StaticLinkType, generateStaticShareLink } from "@/shared/utils"; import { useMenuItems } from "./hooks"; import { useUpdateCommonSeenState } from "@/shared/hooks/useCases"; +import { ShareButtonText } from "@/shared/constants"; interface ActionsButtonProps { common: Common; @@ -27,6 +28,7 @@ const ActionsButton: FC = (props) => { commonMember, isFollowInProgress: commonFollow.isFollowInProgress, isSearchActionAvailable: Boolean(onSearchClick), + shareText: ShareButtonText.Space, }, { share: () => { diff --git a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx index e36c7305e7..d8b72dc396 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx +++ b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx @@ -25,7 +25,7 @@ export const useMenuItems = ( options: GetAllowedItemsOptions, actions: Actions, ): Item[] => { - const { common } = options; + const { common, shareText } = options; const { share, onFollowToggle, onSearchClick, markCommonAsSeen } = actions; const items: Item[] = [ @@ -37,7 +37,7 @@ export const useMenuItems = ( }, { id: CommonFeedMenuItem.Share, - text: "Share", + text: shareText ?? "Share", onClick: share, icon: , }, diff --git a/src/pages/commonFeed/utils/getAllowedItems.ts b/src/pages/commonFeed/utils/getAllowedItems.ts index 8be993be32..4f3d1a3e66 100644 --- a/src/pages/commonFeed/utils/getAllowedItems.ts +++ b/src/pages/commonFeed/utils/getAllowedItems.ts @@ -1,12 +1,14 @@ import { MenuItem as Item } from "@/shared/interfaces"; import { CirclesPermissions, Common, CommonMember } from "@/shared/models"; import { CommonFeedMenuItem } from "../constants"; +import { ShareButtonText } from "@/shared/constants"; export interface Options { common: Common; commonMember: (CommonMember & CirclesPermissions) | null; isFollowInProgress: boolean; isSearchActionAvailable: boolean; + shareText?: ShareButtonText; } const MENU_ITEM_TO_CHECK_FUNCTION_MAP: Record< diff --git a/src/shared/components/Dropdown/index.scss b/src/shared/components/Dropdown/index.scss index 145b3bd27b..36dbfd8af0 100644 --- a/src/shared/components/Dropdown/index.scss +++ b/src/shared/components/Dropdown/index.scss @@ -89,7 +89,7 @@ } .custom-dropdown-wrapper__menu-list { - max-height: 16.875rem; + max-height: 18rem; margin: 0; padding: 0; overflow-y: auto; diff --git a/src/shared/components/ElementDropdown/ElementDropdown.tsx b/src/shared/components/ElementDropdown/ElementDropdown.tsx index 52b904e9f4..3ae5af62af 100644 --- a/src/shared/components/ElementDropdown/ElementDropdown.tsx +++ b/src/shared/components/ElementDropdown/ElementDropdown.tsx @@ -4,7 +4,7 @@ import classNames from "classnames"; import copyToClipboard from "copy-to-clipboard"; import { selectUser } from "@/pages/Auth/store/selectors"; import { MenuButton, ShareModal } from "@/shared/components"; -import { Orientation, EntityTypes } from "@/shared/constants"; +import { Orientation, EntityTypes, ShareButtonText } from "@/shared/constants"; import { useNotification, useModal } from "@/shared/hooks"; import { CopyIcon, @@ -165,9 +165,10 @@ const ElementDropdown: FC = ({ } if (!isChatMessage) { + const shareText = isDiscussionMessage ? ShareButtonText.Message : "Share"; items.push({ - text: } />, - searchText: "Share", + text: } />, + searchText: shareText, value: ElementDropdownMenuItems.Share, }); } @@ -261,8 +262,12 @@ const ElementDropdown: FC = ({ switch (selectedItem) { case ElementDropdownMenuItems.Share: - copyToClipboard(staticShareLink); - notify("The link has copied!"); + if(isDiscussionMessage) { + copyToClipboard(staticShareLink); + notify("The link has copied!"); + } else { + onOpen(); + } break; case ElementDropdownMenuItems.Copy: copyToClipboard( @@ -313,7 +318,7 @@ const ElementDropdown: FC = ({ const menuInlineStyle = useMemo( () => ({ - height: `${2.5 * (ElementDropdownMenuItemsList.length || 1)}rem`, + height: `${3 * (ElementDropdownMenuItemsList.length || 1)}rem`, }), [ElementDropdownMenuItemsList], ); diff --git a/src/shared/components/ElementDropdown/index.scss b/src/shared/components/ElementDropdown/index.scss index 8eaeca3cc8..0980cdef69 100644 --- a/src/shared/components/ElementDropdown/index.scss +++ b/src/shared/components/ElementDropdown/index.scss @@ -2,8 +2,8 @@ .element-dropdown__menu-wrapper { .element-dropdown__menu { - width: 10rem; - height: 5.625rem; + width: 14rem; + height: 9rem; right: 0; display: flex; flex-direction: column; @@ -16,9 +16,9 @@ display: flex; align-items: center; box-sizing: border-box; - height: 2.5rem; + height: 3rem; padding: 0.65625rem 1.5rem; - font-size: $small; + font-size: $xsmall; box-shadow: inset 0 -0.0625rem 0 var(--drop-shadow); > :first-child { diff --git a/src/shared/constants/index.tsx b/src/shared/constants/index.tsx index 56d585e63f..1a3a2db9b1 100755 --- a/src/shared/constants/index.tsx +++ b/src/shared/constants/index.tsx @@ -36,3 +36,4 @@ export * from "./docChange"; export * from "./files"; export * from "./inboxAction"; export * from "./featureFlags"; +export * from "./shareText"; diff --git a/src/shared/constants/shareText.ts b/src/shared/constants/shareText.ts new file mode 100644 index 0000000000..a8f89626c0 --- /dev/null +++ b/src/shared/constants/shareText.ts @@ -0,0 +1,5 @@ +export enum ShareButtonText { + Space = "Copy space link", + Stream = "Copy link", + Message = "Copy message link" +} \ No newline at end of file From 2e2b16308463d2ee916fa765ffb26ac31f942d37 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Fri, 11 Oct 2024 18:07:08 +0300 Subject: [PATCH 3/3] CW-copy-link-in-2-steps Fixed typo --- .../components/DiscussionFeedCard/DiscussionFeedCard.tsx | 2 +- .../common/components/ProposalFeedCard/ProposalFeedCard.tsx | 2 +- .../HeaderContent/components/ActionsButton/ActionsButton.tsx | 2 +- src/shared/components/ElementDropdown/ElementDropdown.tsx | 4 ++-- src/shared/components/ShareModal/ShareModal.tsx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 6f9be2fd29..a6598731eb 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -193,7 +193,7 @@ function DiscussionFeedCard(props, ref) { share: () => { if(discussion) { copyToClipboard(generateStaticShareLink(StaticLinkType.Discussion, discussion, item.id)); - notify("The link has copied!"); + notify("The link has been copied!"); } }, remove: onDeleteModalOpen, diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 622050213b..050ddf0b9d 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -202,7 +202,7 @@ const ProposalFeedCard = forwardRef( share: () => { if(discussion) { copyToClipboard(generateStaticShareLink(StaticLinkType.Proposal, discussion, item.id)); - notify("The link has copied!"); + notify("The link has been copied!"); } }, remove: onProposalDeleteModalOpen, diff --git a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx index fe936cdb6a..a19ee41b66 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx +++ b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx @@ -33,7 +33,7 @@ const ActionsButton: FC = (props) => { { share: () => { copyToClipboard(shareLink); - notify("The link has copied!"); + notify("The link has been copied!"); }, onFollowToggle: commonFollow.onFollowToggle, onSearchClick, diff --git a/src/shared/components/ElementDropdown/ElementDropdown.tsx b/src/shared/components/ElementDropdown/ElementDropdown.tsx index 3ae5af62af..a98a795682 100644 --- a/src/shared/components/ElementDropdown/ElementDropdown.tsx +++ b/src/shared/components/ElementDropdown/ElementDropdown.tsx @@ -264,7 +264,7 @@ const ElementDropdown: FC = ({ case ElementDropdownMenuItems.Share: if(isDiscussionMessage) { copyToClipboard(staticShareLink); - notify("The link has copied!"); + notify("The link has been copied!"); } else { onOpen(); } @@ -279,7 +279,7 @@ const ElementDropdown: FC = ({ break; case ElementDropdownMenuItems.CopyLink: copyToClipboard(staticShareLink || ""); - notify("The link has copied!"); + notify("The link has been copied!"); break; case ElementDropdownMenuItems.Delete: onOpenDelete(); diff --git a/src/shared/components/ShareModal/ShareModal.tsx b/src/shared/components/ShareModal/ShareModal.tsx index 2811daf6cc..f74310a107 100644 --- a/src/shared/components/ShareModal/ShareModal.tsx +++ b/src/shared/components/ShareModal/ShareModal.tsx @@ -37,7 +37,7 @@ const ShareModal: FC> = (props) => { const handleCopyClick = () => { copyToClipboard(sourceUrl); - notify("The link has copied!"); + notify("The link has been copied!"); }; return (