diff --git a/web/community-header/community-header-actions.css b/web/community-header/community-header-actions.css new file mode 100644 --- /dev/null +++ b/web/community-header/community-header-actions.css @@ -0,0 +1,6 @@ +.container { + display: flex; + column-gap: 8px; + align-items: center; + justify-content: center; +} diff --git a/web/community-header/community-header-actions.react.js b/web/community-header/community-header-actions.react.js new file mode 100644 --- /dev/null +++ b/web/community-header/community-header-actions.react.js @@ -0,0 +1,70 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; +import type { InviteLink } from 'lib/types/link-types.js'; + +import css from './community-header-actions.css'; +import CommunityHeaderButton from './community-header-button.react.js'; +import ViewInviteLinkModal from '../invite-links/view-invite-link-modal.react.js'; +import { useSelector } from '../redux/redux-utils.js'; + +type Props = { + +communityID: string, +}; + +function CommunityHeaderActions(props: Props): React.Node { + const { communityID } = props; + + const { pushModal } = useModalContext(); + + const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ + communityID + ]; + + const onClickLinkButton = React.useCallback(() => { + if (!inviteLink) { + return; + } + + pushModal(); + }, [inviteLink, pushModal]); + + const onClickSettings = React.useCallback(() => { + // TODO + }, []); + + const linkButton = React.useMemo(() => { + if (!inviteLink) { + return null; + } + + return ( + + ); + }, [inviteLink, onClickLinkButton]); + + const communityHeaderActions = React.useMemo( + () => ( +
+ {linkButton} + +
+ ), + [linkButton, onClickSettings], + ); + + return communityHeaderActions; +} + +export default CommunityHeaderActions;