feat: APP-189 post secret link (#2401)

regen-network · Jul 15, 2024 · be1e1e6 · be1e1e6
1 parent 3d343b0
commit be1e1e6
Show file tree

Hide file tree

Showing 16 changed files with 257 additions and 185 deletions.
diff --git a/web-components/src/components/buttons/PostAdminButton/PostAdminButton.stories.tsx b/web-components/src/components/buttons/PostAdminButton/PostAdminButton.stories.tsx
@@ -0,0 +1,26 @@
+import { StoryObj } from '@storybook/react';
+
+import { PostAdminButton } from './PostAdminButton';
+
+type Story = StoryObj<typeof PostAdminButton>;
+
+export default {
+ title: 'Buttons/PostAdminButton',
+ component: PostAdminButton,
+ argTypes: {
+ sharePublicLink: { action: 'share public link' },
+ sharePrivateLink: { action: 'share private link' },
+ },
+};
+
+export const Public: Story = {
+ args: {
+ publicPost: true,
+ },
+};
+
+export const Private: Story = {
+ args: {
+ publicPost: false,
+ },
+};
diff --git a/web-components/src/components/buttons/PostAdminButton/PostAdminButton.tsx b/web-components/src/components/buttons/PostAdminButton/PostAdminButton.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Menu } from '@mui/material';
+
+import {
+ SharePrivateMenuItem,
+ SharePublicMenuItem,
+} from '../../cards/PostCard/PostCard.MenuItems';
+import { HorizontalDotsIcon } from '../../icons/HorizontalDotsIcon';
+
+type Props = {
+ publicPost?: boolean;
+ sharePublicLink: (ev: React.MouseEvent) => void;
+ sharePrivateLink: (ev: React.MouseEvent) => void;
+};
+
+export const PostAdminButton = ({
+ publicPost,
+ sharePublicLink,
+ sharePrivateLink,
+}: Props) => {
+ const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ const open = Boolean(anchorEl);
+ const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+ event.stopPropagation();
+ setAnchorEl(event.currentTarget);
+ };
+ const handleClose = (event: React.MouseEvent<HTMLDivElement>) => {
+ event.stopPropagation();
+ setAnchorEl(null);
+ };
+ return (
+ <>
+ <div
+ id="actions-button"
+ aria-controls={open ? 'actions-menu' : undefined}
+ aria-haspopup="true"
+ aria-expanded={open ? 'true' : undefined}
+ onClick={handleClick}
+ className="flex items-center justify-center w-[44px] h-[44px] rounded-[50%] bg-grey-700 cursor-pointer opacity-80 hover:opacity-60"
+ >
+ <HorizontalDotsIcon className="text-grey-0 h-[24px] w-[24px]" />
+ </div>
+ <Menu
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'right',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ id="actions-menu"
+ anchorEl={anchorEl}
+ open={open}
+ onClose={handleClose}
+ MenuListProps={{
+ 'aria-labelledby': 'actions-button',
+ }}
+ classes={{
+ paper:
+ 'rounded-sm py-10 border border-solid border-grey-300 shadow-[0_0_4px_0_rgba(0,0,0,0.05)]',
+ }}
+ >
+ {/* <EditMenuItem /> */}
+ <SharePublicMenuItem
+ classes={{ root: 'px-[25px]' }}
+ onClick={sharePublicLink}
+ publicPost={publicPost}
+ />
+ {!publicPost && (
+ <SharePrivateMenuItem
+ classes={{ root: 'px-[25px]' }}
+ onClick={sharePrivateLink}
+ />
+ )}
+ {/*<DeleteMenuItem /> */}
+ </Menu>
+ </>
+ );
+};
diff --git a/web-components/src/components/buttons/TableActionButtons.tsx b/web-components/src/components/buttons/TableActionButtons.tsx
@@ -31,7 +31,7 @@ const TableActionButtons: React.FC<
  aria-controls="table-menu-buttons"
  sx={sx}
  >
- <HorizontalDotsIcon />
+ <HorizontalDotsIcon className="text-brand-400" />
  </OutlinedButton>
  <Menu
  id="table-menu-buttons"

diff --git a/web-components/src/components/cards/PostCard/PostCard.MenuItems.tsx b/web-components/src/components/cards/PostCard/PostCard.MenuItems.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
  ListItemIcon,
  ListItemText,
@@ -8,7 +7,7 @@ import {
 
 import EditIcon from '../../icons/EditIcon';
 import ShareIcon from '../../icons/ShareIcon';
-import ShareUnlockIcon from '../../icons/ShareUnlockIcon';
+import { ShareUnlockIcon } from '../../icons/ShareUnlockIcon';
 import TrashIcon from '../../icons/TrashIcon';
 import { Body } from '../../typography';
 
@@ -28,9 +27,9 @@ export const SharePublicMenuItem = ({
  publicPost,
  ...props
 }: SharePublicMenuItemProps): JSX.Element => (
- <MenuItem key="2" {...props}>
+ <MenuItem {...props}>
  <ListItemIcon sx={{ height: '24px', width: '24px' }}>
- <ShareIcon color="primary" />
+ <ShareIcon className="text-brand-300" />
  </ListItemIcon>
  <ListItemText>
  Share the public link

diff --git a/web-components/src/components/cards/PostCard/PostCard.stories.tsx b/web-components/src/components/cards/PostCard/PostCard.stories.tsx
@@ -18,6 +18,7 @@ export const Public: Story = {
  },
  argTypes: {
  handleClickShare: { action: 'handle share click' },
+ sharePrivateLink: { action: 'share private link' },
  },
  render: args => <PostCard {...args} signers={signers} />,
 };
@@ -32,6 +33,7 @@ export const Private: Story = {
  },
  argTypes: {
  handleClickShare: { action: 'handle share click' },
+ sharePrivateLink: { action: 'share private link' },
  },
  render: args => <PostCard {...args} signers={signers} />,
 };
@@ -45,6 +47,7 @@ export const NoImage: Story = {
  },
  argTypes: {
  handleClickShare: { action: 'handle share click' },
+ sharePrivateLink: { action: 'share private link' },
  },
  render: args => <PostCard {...args} signers={signers} />,
 };
diff --git a/web-components/src/components/cards/PostCard/PostCard.tsx b/web-components/src/components/cards/PostCard/PostCard.tsx
@@ -21,7 +21,8 @@ interface PostCardProps extends OptimizeImageProps {
  privacyLabel?: string;
  isAdmin?: boolean;
  numberOfFiles?: number;
- handleClickShare?: (ev: React.MouseEvent) => void;
+ handleClickShare: (ev: React.MouseEvent) => void;
+ sharePrivateLink: (ev: React.MouseEvent) => void;
  onClick: () => void;
  publicPost?: boolean;
 }
@@ -38,6 +39,7 @@ export default function PostCard({
  isAdmin,
  numberOfFiles,
  handleClickShare,
+ sharePrivateLink,
  onClick,
  publicPost,
 }: PostCardProps): JSX.Element {
@@ -53,6 +55,7 @@ export default function PostCard({
  <ActionButton
  isAdmin={isAdmin}
  onClickShare={handleClickShare}
+ sharePrivateLink={sharePrivateLink}
  publicPost={publicPost}
  />
  {!hasImageBlock && privacyLabel && (

diff --git a/web-components/src/components/cards/PostCard/PostCardActionButton.tsx b/web-components/src/components/cards/PostCard/PostCardActionButton.tsx
@@ -1,96 +1,46 @@
-import React, { useRef, useState } from 'react';
-import { IconButton, Menu } from '@mui/material';
+import React from 'react';
+import { IconButton } from '@mui/material';
 
-import { HorizontalDotsIcon } from '../../icons/HorizontalDotsIcon';
+import { PostAdminButton } from '../../buttons/PostAdminButton/PostAdminButton';
 import ShareIcon from '../../icons/ShareIcon';
-import { SharePublicMenuItem } from './PostCard.MenuItems';
 
 const ActionButton = ({
  publicPost,
  isAdmin,
  onClickShare,
+ sharePrivateLink,
 }: {
  publicPost?: boolean;
  isAdmin?: boolean;
- onClickShare?: (ev: React.MouseEvent) => void;
+ onClickShare: (ev: React.MouseEvent) => void;
+ sharePrivateLink: (ev: React.MouseEvent) => void;
 }): JSX.Element => {
- const menuAnchor = useRef<HTMLButtonElement | null>(null);
- const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
- const isOpen = Boolean(anchorEl);
- const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {
- event.stopPropagation();
- setAnchorEl(null);
- };
-
  return (
- <React.Fragment>
- <IconButton
- sx={theme => ({
- position: 'absolute',
- top: { xs: theme.spacing(1.25), md: theme.spacing(3.75) },
- right: { xs: theme.spacing(1.25), md: theme.spacing(3) },
- zIndex: 1,
- borderRadius: theme.spacing(7),
- backgroundColor: isAdmin ? 'rgba(0, 0, 0, 0.8)' : 'white',
- boxShadow: theme.shadows[1],
- height: '44px',
- width: '44px',
- '&:hover': {
- backgroundColor: 'rgba(0, 0, 0, 0.6)',
- },
- })}
- ref={menuAnchor}
- onClick={event => {
- event.stopPropagation();
- if (isAdmin) handleOpen(event);
- else if (onClickShare) onClickShare(event);
- }}
- >
- {isAdmin ? (
- <HorizontalDotsIcon
- sx={{
- height: '32px',
- width: '32px',
- m: theme => theme.spacing(-1),
- }}
- color="white"
- />
- ) : (
- <ShareIcon sx={{ height: '24px', width: '24px' }} color="primary" />
- )}
- </IconButton>
- {isAdmin && (
- <Menu
- open={isOpen}
- onClose={handleClose}
- anchorEl={anchorEl}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'right',
+ <div className="z-[1] absolute top-5 right-5 lg:top-[15px] lg:right-[12px] cursor-pointer">
+ {isAdmin ? (
+ <PostAdminButton
+ publicPost={publicPost}
+ sharePublicLink={event => {
+ event.stopPropagation();
+ onClickShare(event);
+ }}
+ sharePrivateLink={event => {
+ event.stopPropagation();
+ sharePrivateLink(event);
  }}
- disableScrollLock={true}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'right',
+ />
+ ) : (
+ <IconButton
+ className="bg-grey-0 w-[44px] h-[44px] rounded-[50%]"
+ onClick={event => {
+ event.stopPropagation();
+ onClickShare(event);
  }}
  >
- {/* <EditMenuItem /> */}
- <SharePublicMenuItem
- classes={{ root: 'px-[25px]' }}
- onClick={event => {
- event.stopPropagation();
- if (onClickShare) onClickShare(event);
- }}
- publicPost={publicPost}
- />
- {/* <SharePrivateMenuItem />
- <DeleteMenuItem /> */}
- </Menu>
+ <ShareIcon className="w-[24px] h-[24px] text-brand-300" />
+ </IconButton>
  )}
- </React.Fragment>
+ </div>
  );
 };
 

diff --git a/web-components/src/components/icons/HorizontalDotsIcon.tsx b/web-components/src/components/icons/HorizontalDotsIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { SvgIcon, SxProps, useTheme } from '@mui/material';
+import { SvgIcon, SxProps } from '@mui/material';
 
 import { Theme } from '../../theme/muiTheme';
 
@@ -10,8 +10,7 @@ export const HorizontalDotsIcon: React.FC<
  sx?: SxProps<Theme>;
  }>
 > = ({ className, color, sx, ...props }) => {
- const theme = useTheme();
- color = color || theme.palette.secondary.main;
+ color = color || 'currentColor';
 
  return (
  <SvgIcon

diff --git a/web-components/src/components/icons/ShareUnlockIcon.tsx b/web-components/src/components/icons/ShareUnlockIcon.tsx
@@ -1,31 +1,18 @@
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import React from 'react';
 
-interface ShareUnlockIconProps extends SvgIconProps {}
-
-export default function ShareUnlockIcon({
- sx,
-}: ShareUnlockIconProps): JSX.Element {
- return (
- <SvgIcon
- width="24"
- height="24"
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- sx={sx}
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M12 2C9.79086 2 8 3.79086 8 6V9H20C20.5523 9 21 9.44772 21 10V23C21 23.5523 20.5523 24 20 24H4C3.44772 24 3 23.5523 3 23V10C3 9.44771 3.44772 9 4 9H6V6C6 2.68629 8.68629 0 12 0C14.0618 0 15.8806 1.03992 16.9607 2.62385C17.2711 3.07897 17.0471 3.67787 16.5475 3.90996C16.0454 4.14324 15.4573 3.91254 15.1086 3.48247C14.3752 2.57806 13.2551 2 12 2ZM19 11V22H5V11H19Z"
- fill="black"
- />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M15.5 13.5C15.5 12.6716 14.8284 12 14 12C13.1716 12 12.5 12.6716 12.5 13.5C12.5 13.6829 12.5327 13.8581 12.5926 14.0202L10.0528 15.4315C9.78196 15.1647 9.41021 15 9 15C8.17157 15 7.5 15.6716 7.5 16.5C7.5 17.3284 8.17157 18 9 18C9.20034 18 9.3915 17.9607 9.56621 17.8895L12.5079 19.6544C12.5852 20.4103 13.2237 21 14 21C14.8284 21 15.5 20.3284 15.5 19.5C15.5 18.6716 14.8284 18 14 18C13.4897 18 13.0388 18.2549 12.7679 18.6443L10.335 17.1846C10.4405 16.9793 10.5 16.7466 10.5 16.5C10.5 16.4433 10.4968 16.3873 10.4907 16.3321L13.2496 14.7991C13.4704 14.9269 13.7266 15 14 15C14.8284 15 15.5 14.3284 15.5 13.5Z"
- fill="#7BC796"
- />
- </SvgIcon>
- );
-}
+export const ShareUnlockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M12 2C9.79086 2 8 3.79086 8 6V9H20C20.5523 9 21 9.44772 21 10V23C21 23.5523 20.5523 24 20 24H4C3.44772 24 3 23.5523 3 23V10C3 9.44771 3.44772 9 4 9H6V6C6 2.68629 8.68629 0 12 0C14.0618 0 15.8806 1.03992 16.9607 2.62385C17.2711 3.07897 17.0471 3.67787 16.5475 3.90996C16.0454 4.14324 15.4573 3.91254 15.1086 3.48247C14.3752 2.57806 13.2551 2 12 2ZM19 11V22H5V11H19Z"
+ fill="#7BC796"
+ />
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M15.5 13.5C15.5 12.6716 14.8284 12 14 12C13.1716 12 12.5 12.6716 12.5 13.5C12.5 13.6829 12.5327 13.8581 12.5926 14.0202L10.0528 15.4315C9.78196 15.1647 9.41021 15 9 15C8.17157 15 7.5 15.6716 7.5 16.5C7.5 17.3284 8.17157 18 9 18C9.20034 18 9.3915 17.9607 9.56621 17.8895L12.5079 19.6544C12.5852 20.4103 13.2237 21 14 21C14.8284 21 15.5 20.3284 15.5 19.5C15.5 18.6716 14.8284 18 14 18C13.4897 18 13.0388 18.2549 12.7679 18.6443L10.335 17.1846C10.4405 16.9793 10.5 16.7466 10.5 16.5C10.5 16.4433 10.4968 16.3873 10.4907 16.3321L13.2496 14.7991C13.4704 14.9269 13.7266 15 14 15C14.8284 15 15.5 14.3284 15.5 13.5Z"
+ fill="#7BC796"
+ />
+ </svg>
+);