diff --git a/src/pages/commonFeed/CommonFeedPage_v04.tsx b/src/pages/commonFeed/CommonFeedPage_v04.tsx index 4f4e0373ca..b0fc1ac089 100644 --- a/src/pages/commonFeed/CommonFeedPage_v04.tsx +++ b/src/pages/commonFeed/CommonFeedPage_v04.tsx @@ -1,7 +1,6 @@ import React, { FC } from "react"; import { RoutesV04Provider } from "@/shared/contexts"; import { CommonSidenavLayoutPageContent } from "@/shared/layouts"; -import { checkIsProject } from "@/shared/utils"; import BaseCommonFeedPage from "./BaseCommonFeedPage"; import { RenderCommonFeedContentWrapper } from "./CommonFeed"; import HeaderContent_v04 from "./components/HeaderContent_v04/HeaderContent_v04"; @@ -19,13 +18,9 @@ const renderContentWrapper: RenderCommonFeedContentWrapper = ({ headerClassName={styles.layoutHeader} headerContent={ } isGlobalLoading={!isGlobalDataFetched} diff --git a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss index 90e0145540..7adfd958c3 100644 --- a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss +++ b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss @@ -12,6 +12,13 @@ } } +.actionsContainer { + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +} + .openSidenavButton { display: none; @@ -78,6 +85,12 @@ overflow: hidden; } +.commonMainInfoWrapper { + display: flex; + align-items: center; + column-gap: 8px; +} + .commonName { margin: 0; font-family: PoppinsSans, sans-serif; diff --git a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx index adc058837a..bf4d0ea019 100644 --- a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx +++ b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx @@ -3,37 +3,36 @@ import { NavLink } from "react-router-dom"; import classNames from "classnames"; import { NewStreamButton } from "@/pages/common/components/CommonTabPanels/components/FeedTab/components"; import { useRoutesContext } from "@/shared/contexts"; +import { useCommonFollow } from "@/shared/hooks/useCases"; import { useIsTabletView } from "@/shared/hooks/viewport"; -import { RightArrowThinIcon } from "@/shared/icons"; -import { CirclesPermissions, CommonMember, Governance } from "@/shared/models"; +import { RightArrowThinIcon, StarIcon } from "@/shared/icons"; +import { + CirclesPermissions, + Common, + CommonMember, + Governance, +} from "@/shared/models"; import { CommonAvatar, TopNavigationOpenSidenavButton } from "@/shared/ui-kit"; -import { getPluralEnding } from "@/shared/utils"; +import { checkIsProject, getPluralEnding } from "@/shared/utils"; +import { ActionsButton } from "../HeaderContent/components"; import styles from "./HeaderContent_v04.module.scss"; interface HeaderContentProps { className?: string; - commonId: string; - commonName: string; - commonImage: string; - commonMembersAmount: number; - isProject?: boolean; + common: Common; commonMember: (CommonMember & CirclesPermissions) | null; governance: Governance; } const HeaderContent_v04: FC = (props) => { - const { - className, - commonId, - commonName, - commonImage, - commonMembersAmount, - isProject = false, - commonMember, - governance, - } = props; + const { className, common, commonMember, governance } = props; const { getCommonPageAboutTabPath } = useRoutesContext(); const isMobileVersion = useIsTabletView(); + const isProject = checkIsProject(common); + const commonFollow = useCommonFollow(common.id, commonMember); + const showFollowIcon = commonFollow.isFollowInProgress + ? !commonMember?.isFollowing + : commonMember?.isFollowing; return ( @@ -44,11 +43,11 @@ const HeaderContent_v04: FC = (props) => { /> = (props) => { /> - {commonName} + + {common.name} + {showFollowIcon && } + - {commonMembersAmount} member{getPluralEnding(commonMembersAmount)} + {common.memberCount} member{getPluralEnding(common.memberCount)} - + + + + ); }; diff --git a/src/shared/utils/generateStaticShareLink.ts b/src/shared/utils/generateStaticShareLink.ts index 51a2df05fc..c68737288f 100644 --- a/src/shared/utils/generateStaticShareLink.ts +++ b/src/shared/utils/generateStaticShareLink.ts @@ -1,5 +1,6 @@ -import { Environment, REACT_APP_ENV } from "../constants"; +import { Environment, REACT_APP_ENV, ROUTE_PATHS } from "../constants"; import { Common, Discussion, DiscussionMessage, Proposal } from "../models"; +import { matchRoute } from "./matchRoute"; const staticLinkPrefix = () => { if (window.location.hostname === "localhost") { @@ -15,6 +16,24 @@ const staticLinkPrefix = () => { } }; +const getStaticLinkBasePath = (): string => { + const pathname: string = window.location.pathname; + + if (matchRoute(pathname, ROUTE_PATHS.COMMON)) { + return "commons"; + } + + if (matchRoute(pathname, ROUTE_PATHS.V04_COMMON)) { + return "commons-v04"; + } + + if (matchRoute(pathname, ROUTE_PATHS.V03_COMMON)) { + return "commons-v03"; + } + + return "commons"; +}; + export const enum StaticLinkType { DiscussionMessage, ProposalComment, @@ -28,22 +47,24 @@ export const generateStaticShareLink = ( elem: Common | Proposal | Discussion | DiscussionMessage, feedItemId?: string, ): string => { + const basePath: string = getStaticLinkBasePath(); + if (!feedItemId && linkType === StaticLinkType.Common) { elem = elem as Common; - return `${staticLinkPrefix()}/commons/${elem.id}`; + return `${staticLinkPrefix()}/${basePath}/${elem.id}`; } switch (linkType) { case StaticLinkType.Proposal: case StaticLinkType.Discussion: elem = elem as Discussion; - return `${staticLinkPrefix()}/commons/${ + return `${staticLinkPrefix()}/${basePath}/${ elem.commonId }?item=${feedItemId}`; case StaticLinkType.DiscussionMessage: case StaticLinkType.ProposalComment: elem = elem as DiscussionMessage; - return `${staticLinkPrefix()}/commons/${ + return `${staticLinkPrefix()}/${basePath}/${ elem.commonId }?item=${feedItemId}&message=${elem.id}`; default:
- {commonMembersAmount} member{getPluralEnding(commonMembersAmount)} + {common.memberCount} member{getPluralEnding(common.memberCount)}