From 8ded07688db3900b21902d6278e0eb1695bec842 Mon Sep 17 00:00:00 2001 From: israellund Date: Wed, 13 Nov 2024 20:25:51 -0500 Subject: [PATCH 1/2] added All/Overview page growl and updated growl template --- .../client/scripts/views/Sublayout.tsx | 1 + .../GrowlTemplate/CWGrowlTemplate.scss | 3 + .../GrowlTemplate/CWGrowlTemplate.tsx | 52 ++-- .../pages/discussions/DiscussionsPage.tsx | 235 +++++++++--------- 4 files changed, 157 insertions(+), 134 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/Sublayout.tsx b/packages/commonwealth/client/scripts/views/Sublayout.tsx index 4c158643b43..9efad615127 100644 --- a/packages/commonwealth/client/scripts/views/Sublayout.tsx +++ b/packages/commonwealth/client/scripts/views/Sublayout.tsx @@ -183,6 +183,7 @@ const Sublayout = ({ children, isInsideCommunity }: SublayoutProps) => { buttonLink="https://commonwealth.im/common/discussion/25536-Weighted%20Voting%20and%20Contest%20FAQs" growlImage={contestsGTMGrowlImage} extraText="Spark creativity and foster connections within your community." + growlType="contests" /> { const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore(); @@ -37,8 +37,9 @@ export const CWGrowlTemplate = ({ useState(false); const [isDisabled, setIsDisabled] = useState( - localStorage.getItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY) === 'true' || - isGrowlHidden, + localStorage.getItem( + `LOCALSTORAGE_GROWL_TEMPLATE_${growlType.toUpperCase()}_KEY`, + ) === 'true' || isGrowlHidden, ); const handleExit = () => { @@ -46,7 +47,10 @@ export const CWGrowlTemplate = ({ setIsGrowlHidden(true); if (shouldHideGrowlPermanently) { - localStorage.setItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY, 'true'); + localStorage.setItem( + `LOCALSTORAGE_GROWL_TEMPLATE_${growlType.toUpperCase()}_KEY`, + 'true', + ); } }; @@ -56,10 +60,10 @@ export const CWGrowlTemplate = ({ - + {growlImage && }
{headerText} @@ -67,16 +71,18 @@ export const CWGrowlTemplate = ({ {bodyText} - { - e.preventDefault(); - window.open(buttonLink, '_blank'); - }} - /> + {buttonLink && ( + { + e.preventDefault(); + window.open(buttonLink, '_blank'); + }} + /> + )} {discordLink && ( <> { /> {selectedView === VIEWS[0].value ? ( - { - const discussionLink = getProposalUrlPath( - thread.slug, - `${thread.identifier}-${slugify(thread.title)}`, - ); - - const isTopicGated = !!(memberships || []).find( - (membership) => - thread?.topic?.id && - membership.topics.find((t) => t.id === thread.topic!.id), - ); - const isActionAllowedInGatedTopic = !!(memberships || []).find( - (membership) => - thread?.topic?.id && - membership.topics.find((t) => t.id === thread.topic!.id) && - membership.isAllowed, - ); - const isRestrictedMembership = - !isAdmin && isTopicGated && !isActionAllowedInGatedTopic; - const foundTopicPermissions = topicPermissions.find( - (tp) => tp.id === thread.topic!.id, - ); - const disabledActionsTooltipText = getThreadActionTooltipText({ - isCommunityMember: !!user.activeAccount, - isThreadArchived: !!thread?.archivedAt, - isThreadLocked: !!thread?.lockedAt, - isThreadTopicGated: isRestrictedMembership, - }); - const disabledReactPermissionTooltipText = - getThreadActionTooltipText({ + <> + { + const discussionLink = getProposalUrlPath( + thread.slug, + `${thread.identifier}-${slugify(thread.title)}`, + ); + + const isTopicGated = !!(memberships || []).find( + (membership) => + thread?.topic?.id && + membership.topics.find((t) => t.id === thread.topic!.id), + ); + const isActionAllowedInGatedTopic = !!(memberships || []).find( + (membership) => + thread?.topic?.id && + membership.topics.find((t) => t.id === thread.topic!.id) && + membership.isAllowed, + ); + const isRestrictedMembership = + !isAdmin && isTopicGated && !isActionAllowedInGatedTopic; + const foundTopicPermissions = topicPermissions.find( + (tp) => tp.id === thread.topic!.id, + ); + const disabledActionsTooltipText = getThreadActionTooltipText({ isCommunityMember: !!user.activeAccount, - threadTopicInteractionRestrictions: - !isAdmin && - !foundTopicPermissions?.permissions?.includes( - // this should be updated if we start displaying recent comments on this page - PermissionEnum.CREATE_THREAD_REACTION, - ) - ? foundTopicPermissions?.permissions - : undefined, + isThreadArchived: !!thread?.archivedAt, + isThreadLocked: !!thread?.lockedAt, + isThreadTopicGated: isRestrictedMembership, }); - const disabledCommentPermissionTooltipText = - getThreadActionTooltipText({ - isCommunityMember: !!user.activeAccount, - threadTopicInteractionRestrictions: - !isAdmin && - !foundTopicPermissions?.permissions?.includes( - PermissionEnum.CREATE_COMMENT, - ) - ? foundTopicPermissions?.permissions - : undefined, - }); - const isThreadTopicInContest = checkIsTopicInContest( - contestsData.all, - thread?.topic?.id, - ); - - return ( - navigate(`${discussionLink}?isEdit=true`)} - onStageTagClick={() => { - navigate(`/discussions?stage=${thread.stage}`); - }} - threadHref={`${getScopePrefix()}${discussionLink}`} - onBodyClick={() => { - const scrollEle = - document.getElementsByClassName('Body')[0]; - localStorage[`${communityId}-discussions-scrollY`] = - scrollEle.scrollTop; - }} - onCommentBtnClick={() => - navigate(`${discussionLink}?focusComments=true`) - } - disabledActionsTooltipText={ - disabledCommentPermissionTooltipText || - disabledReactPermissionTooltipText || - disabledActionsTooltipText - } - hideRecentComments - editingDisabled={isThreadTopicInContest} - /> - ); - }} - endReached={() => { - hasNextPage && fetchNextPage(); - }} - overscan={50} - components={{ - // eslint-disable-next-line react/no-multi-comp - EmptyPlaceholder: () => ( - - ), - }} - /> + const disabledReactPermissionTooltipText = + getThreadActionTooltipText({ + isCommunityMember: !!user.activeAccount, + threadTopicInteractionRestrictions: + !isAdmin && + !foundTopicPermissions?.permissions?.includes( + // this should be updated if we start displaying recent comments on this page + PermissionEnum.CREATE_THREAD_REACTION, + ) + ? foundTopicPermissions?.permissions + : undefined, + }); + const disabledCommentPermissionTooltipText = + getThreadActionTooltipText({ + isCommunityMember: !!user.activeAccount, + threadTopicInteractionRestrictions: + !isAdmin && + !foundTopicPermissions?.permissions?.includes( + PermissionEnum.CREATE_COMMENT, + ) + ? foundTopicPermissions?.permissions + : undefined, + }); + const isThreadTopicInContest = checkIsTopicInContest( + contestsData.all, + thread?.topic?.id, + ); + + return ( + <> + + navigate(`${discussionLink}?isEdit=true`) + } + onStageTagClick={() => { + navigate(`/discussions?stage=${thread.stage}`); + }} + threadHref={`${getScopePrefix()}${discussionLink}`} + onBodyClick={() => { + const scrollEle = + document.getElementsByClassName('Body')[0]; + localStorage[`${communityId}-discussions-scrollY`] = + scrollEle.scrollTop; + }} + onCommentBtnClick={() => + navigate(`${discussionLink}?focusComments=true`) + } + disabledActionsTooltipText={ + disabledCommentPermissionTooltipText || + disabledReactPermissionTooltipText || + disabledActionsTooltipText + } + hideRecentComments + editingDisabled={isThreadTopicInContest} + /> + + + ); + }} + endReached={() => { + hasNextPage && fetchNextPage(); + }} + overscan={50} + components={{ + // eslint-disable-next-line react/no-multi-comp + EmptyPlaceholder: () => ( + + ), + }} + /> + ) : ( )} From db2edca039d2825acd1ce9616547a5dd2b71a497 Mon Sep 17 00:00:00 2001 From: israellund Date: Thu, 14 Nov 2024 09:16:53 -0500 Subject: [PATCH 2/2] removed unnecessary fragment --- .../pages/discussions/DiscussionsPage.tsx | 242 +++++++++--------- 1 file changed, 120 insertions(+), 122 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx b/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx index b40c2a3cf56..22217596749 100644 --- a/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx +++ b/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx @@ -298,131 +298,129 @@ const DiscussionsPage = ({ topicName }: DiscussionsPageProps) => { /> {selectedView === VIEWS[0].value ? ( - <> - { - const discussionLink = getProposalUrlPath( - thread.slug, - `${thread.identifier}-${slugify(thread.title)}`, - ); - - const isTopicGated = !!(memberships || []).find( - (membership) => - thread?.topic?.id && - membership.topics.find((t) => t.id === thread.topic!.id), - ); - const isActionAllowedInGatedTopic = !!(memberships || []).find( - (membership) => - thread?.topic?.id && - membership.topics.find((t) => t.id === thread.topic!.id) && - membership.isAllowed, - ); - const isRestrictedMembership = - !isAdmin && isTopicGated && !isActionAllowedInGatedTopic; - const foundTopicPermissions = topicPermissions.find( - (tp) => tp.id === thread.topic!.id, - ); - const disabledActionsTooltipText = getThreadActionTooltipText({ + { + const discussionLink = getProposalUrlPath( + thread.slug, + `${thread.identifier}-${slugify(thread.title)}`, + ); + + const isTopicGated = !!(memberships || []).find( + (membership) => + thread?.topic?.id && + membership.topics.find((t) => t.id === thread.topic!.id), + ); + const isActionAllowedInGatedTopic = !!(memberships || []).find( + (membership) => + thread?.topic?.id && + membership.topics.find((t) => t.id === thread.topic!.id) && + membership.isAllowed, + ); + const isRestrictedMembership = + !isAdmin && isTopicGated && !isActionAllowedInGatedTopic; + const foundTopicPermissions = topicPermissions.find( + (tp) => tp.id === thread.topic!.id, + ); + const disabledActionsTooltipText = getThreadActionTooltipText({ + isCommunityMember: !!user.activeAccount, + isThreadArchived: !!thread?.archivedAt, + isThreadLocked: !!thread?.lockedAt, + isThreadTopicGated: isRestrictedMembership, + }); + const disabledReactPermissionTooltipText = + getThreadActionTooltipText({ isCommunityMember: !!user.activeAccount, - isThreadArchived: !!thread?.archivedAt, - isThreadLocked: !!thread?.lockedAt, - isThreadTopicGated: isRestrictedMembership, + threadTopicInteractionRestrictions: + !isAdmin && + !foundTopicPermissions?.permissions?.includes( + // this should be updated if we start displaying recent comments on this page + PermissionEnum.CREATE_THREAD_REACTION, + ) + ? foundTopicPermissions?.permissions + : undefined, }); - const disabledReactPermissionTooltipText = - getThreadActionTooltipText({ - isCommunityMember: !!user.activeAccount, - threadTopicInteractionRestrictions: - !isAdmin && - !foundTopicPermissions?.permissions?.includes( - // this should be updated if we start displaying recent comments on this page - PermissionEnum.CREATE_THREAD_REACTION, - ) - ? foundTopicPermissions?.permissions - : undefined, - }); - const disabledCommentPermissionTooltipText = - getThreadActionTooltipText({ - isCommunityMember: !!user.activeAccount, - threadTopicInteractionRestrictions: - !isAdmin && - !foundTopicPermissions?.permissions?.includes( - PermissionEnum.CREATE_COMMENT, - ) - ? foundTopicPermissions?.permissions - : undefined, - }); - const isThreadTopicInContest = checkIsTopicInContest( - contestsData.all, - thread?.topic?.id, - ); - - return ( - <> - - navigate(`${discussionLink}?isEdit=true`) - } - onStageTagClick={() => { - navigate(`/discussions?stage=${thread.stage}`); - }} - threadHref={`${getScopePrefix()}${discussionLink}`} - onBodyClick={() => { - const scrollEle = - document.getElementsByClassName('Body')[0]; - localStorage[`${communityId}-discussions-scrollY`] = - scrollEle.scrollTop; - }} - onCommentBtnClick={() => - navigate(`${discussionLink}?focusComments=true`) - } - disabledActionsTooltipText={ - disabledCommentPermissionTooltipText || - disabledReactPermissionTooltipText || - disabledActionsTooltipText - } - hideRecentComments - editingDisabled={isThreadTopicInContest} - /> - - - ); - }} - endReached={() => { - hasNextPage && fetchNextPage(); - }} - overscan={50} - components={{ - // eslint-disable-next-line react/no-multi-comp - EmptyPlaceholder: () => ( - + + navigate(`${discussionLink}?isEdit=true`) + } + onStageTagClick={() => { + navigate(`/discussions?stage=${thread.stage}`); + }} + threadHref={`${getScopePrefix()}${discussionLink}`} + onBodyClick={() => { + const scrollEle = + document.getElementsByClassName('Body')[0]; + localStorage[`${communityId}-discussions-scrollY`] = + scrollEle.scrollTop; + }} + onCommentBtnClick={() => + navigate(`${discussionLink}?focusComments=true`) + } + disabledActionsTooltipText={ + disabledCommentPermissionTooltipText || + disabledReactPermissionTooltipText || + disabledActionsTooltipText + } + hideRecentComments + editingDisabled={isThreadTopicInContest} /> - ), - }} - /> - + + + ); + }} + endReached={() => { + hasNextPage && fetchNextPage(); + }} + overscan={50} + components={{ + // eslint-disable-next-line react/no-multi-comp + EmptyPlaceholder: () => ( + + ), + }} + /> ) : ( )}