feat(snapshot): share a hot take as an image, and copy a link from reading history

packages/shared/src/components/history/ReadingHistory.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { subDays } from 'date-fns';
 import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import nock from 'nock';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { PostItemCardProps } from '../post/PostItemCard';
@@ -15,6 +15,9 @@ import user from '../../../__tests__/fixture/loggedUser';
 import { getLabel } from '../../lib/dateFormat.spec';
 import post from '../../../__tests__/fixture/post';
 import { SourceType } from '../../graphql/sources';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { LogEvent, Origin } from '../../lib/log';
+import { ShareProvider } from '../../lib/share';
 
 beforeEach(() => {
   nock.cleanAll();
@@ -199,6 +202,42 @@ describe('PostItemCard component', () => {
     );
   });
 
+  it('should copy the post link and log it as a share from history', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, { clipboard: { writeText } });
+    const logEvent = jest.fn();
+    const onRowClick = jest.fn();
+
+    render(
+      <TestBootProvider client={new QueryClient()} log={{ logEvent }}>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+        <div onClick={onRowClick}>
+          <PostItemCard
+            postItem={defaultHistory}
+            logOrigin={Origin.History}
+            showCopyLink
+          />
+        </div>
+      </TestBootProvider>,
+    );
+
+    fireEvent.click(await screen.findByLabelText('Copy link'));
+
+    await waitFor(() =>
+      expect(writeText).toHaveBeenCalledWith(post.commentsPermalink),
+    );
+    expect(onRowClick).not.toHaveBeenCalled();
+    expect(logEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        event_name: LogEvent.SharePost,
+        target_id: post.id,
+        extra: expect.stringContaining(
+          `"provider":"${ShareProvider.CopyLink}","origin":"${Origin.History}"`,
+        ),
+      }),
+    );
+  });
+
   it('should call onHide on close button clicked', async () => {
     renderCard({ onHide });
     const button = (await screen.findAllByRole('button'))[0];

packages/shared/src/components/history/ReadingHistoryList.tsx

@@ -23,37 +23,43 @@ export default function ReadHistoryList({
     let currentDate: Date;
 
     return data?.pages.map((page, pageIndex) =>
-      page.readHistory.edges.reduce((dom, { node: history }, edgeIndex) => {
-        const { timestamp } = history;
-        const date = new Date(timestamp);
+      page.readHistory.edges.reduce<ReactElement[]>(
+        (dom, { node: history }, edgeIndex) => {
+          const { timestamp } = history;
+          // Optional only because PostItem is shared with surfaces that carry
+          // no timestamp; every reading-history edge has one.
+          const date = new Date(timestamp as Date);
+
+          if (!currentDate || !isDateOnlyEqual(currentDate, date)) {
+            currentDate = date;
+            dom.push(
+              <DateFormat
+                key={date.toISOString()}
+                date={date}
+                type={TimeFormatType.ReadHistory}
+                className="my-3 px-6 text-text-tertiary typo-body first:mt-0"
+              />,
+            );
+          }
+
+          const indexes = { page: pageIndex, edge: edgeIndex };
 
-        if (!currentDate || !isDateOnlyEqual(currentDate, date)) {
-          currentDate = date;
           dom.push(
-            <DateFormat
-              key={date.toISOString()}
-              date={date}
-              type={TimeFormatType.ReadHistory}
-              className="my-3 px-6 text-text-tertiary typo-body first:mt-0"
+            <PostItemCard
+              key={`${history.post.id}-${timestamp}`}
+              postItem={history}
+              indexes={indexes}
+              onHide={(params) => onHide({ ...params, ...indexes })}
+              showVoteActions
+              showCopyLink
+              logOrigin={Origin.History}
             />,
           );
-        }
-
-        const indexes = { page: pageIndex, edge: edgeIndex };
-
-        dom.push(
-          <PostItemCard
-            key={`${history.post.id}-${timestamp}`}
-            postItem={history}
-            indexes={indexes}
-            onHide={(params) => onHide({ ...params, ...indexes })}
-            showVoteActions
-            logOrigin={Origin.History}
-          />,
-        );
 
-        return dom;
-      }, []),
+          return dom;
+        },
+        [],
+      ),
     );
     // @NOTE see https://dailydotdev.atlassian.net/l/cp/dK9h1zoM
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/shared/src/components/modals/hotTakes/HotAndColdModal.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { HotTake } from '../../../graphql/user/userHotTake';
 import { useDiscoverHotTakes } from '../../../hooks/useDiscoverHotTakes';
 import { useVoteHotTake } from '../../../hooks/vote/useVoteHotTake';
@@ -48,11 +49,13 @@ const createHotTake = (id = 'take-1'): HotTake => ({
 
 const renderComponent = (onRequestClose = jest.fn()) => {
   render(
-    <HotAndColdModal
-      isOpen
-      onRequestClose={onRequestClose}
-      ariaHideApp={false}
-    />,
+    <QueryClientProvider client={new QueryClient()}>
+      <HotAndColdModal
+        isOpen
+        onRequestClose={onRequestClose}
+        ariaHideApp={false}
+      />
+    </QueryClientProvider>,
   );
 
   return { onRequestClose };
@@ -253,6 +256,23 @@ describe('HotAndColdModal', () => {
     expect(onRequestClose).toHaveBeenCalledTimes(1);
   });
 
+  it('should offer a snapshot on the top card only', () => {
+    mockedUseDiscoverHotTakes.mockReturnValue({
+      hotTakes: [createHotTake('top'), createHotTake('behind')],
+      currentTake: createHotTake('top'),
+      nextTake: createHotTake('behind'),
+      isEmpty: false,
+      isLoading: false,
+      dismissCurrent,
+    });
+
+    renderComponent();
+
+    // The card behind is rendered too, and a second control would capture a
+    // take the reader has not reached yet.
+    expect(screen.getAllByLabelText('Snapshot')).toHaveLength(1);
+  });
+
   it('should keep subtitle visible even when title is very long', () => {
     const currentTake = {
       ...createHotTake('long-text'),

packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx

@@ -26,6 +26,7 @@ import {
   TypographyColor,
 } from '../../typography/Typography';
 import { ProfilePicture, ProfileImageSize } from '../../ProfilePicture';
+import { HotTakeSnapshotButton } from '../../../features/snapshot/HotTakeSnapshotButton';
 import { ReputationUserBadge } from '../../ReputationUserBadge';
 import { VerifiedCompanyUserBadge } from '../../VerifiedCompanyUserBadge';
 import { PlusUserBadge } from '../../PlusUserBadge';
@@ -1324,18 +1325,27 @@ const HotTakeCard = ({
           </Typography>
         )}
 
-        {hotTake.upvotes > 0 && (
-          <div className="flex items-center gap-1 rounded-10 bg-surface-hover px-3 py-1">
-            <HotIcon className="text-accent-cabbage-default" />
-            <Typography
-              type={TypographyType.Footnote}
-              color={TypographyColor.Secondary}
-              bold
-            >
-              {hotTake.upvotes}
-            </Typography>
-          </div>
-        )}
+        <div className="flex items-center gap-2">
+          {hotTake.upvotes > 0 && (
+            <div className="flex items-center gap-1 rounded-10 bg-surface-hover px-3 py-1">
+              <HotIcon className="text-accent-cabbage-default" />
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Secondary}
+                bold
+              >
+                {hotTake.upvotes}
+              </Typography>
+            </div>
+          )}
+          {isTop && (
+            <HotTakeSnapshotButton
+              hotTake={hotTake}
+              origin={Origin.HotAndCold}
+              variant={ButtonVariant.Primary}
+            />
+          )}
+        </div>
       </div>
 
       {hotTake.user && (

packages/shared/src/components/post/PostItemCard.tsx

@@ -6,14 +6,15 @@ import type { HidePostItemCardProps } from '../../graphql/users';
 import type { PostItem } from '../../graphql/posts';
 import { UserVote, isVideoPost } from '../../graphql/posts';
 import { MiniCloseIcon as XIcon, UpvoteIcon, DownvoteIcon } from '../icons';
+import { LinkIcon } from '../icons/Link';
 import classed from '../../lib/classed';
 import PostMetadata from '../cards/common/PostMetadata';
 import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
 import { Image } from '../image/Image';
 import ConditionalWrapper from '../ConditionalWrapper';
 import { cloudinaryPostImageCoverPlaceholder } from '../../lib/image';
 import { useReadHistoryVotePost } from '../../hooks';
-import { Origin } from '../../lib/log';
+import { LogEvent, Origin } from '../../lib/log';
 import {
   Button,
   ButtonColor,
@@ -24,6 +25,13 @@ import { isSourceUserSource } from '../../graphql/sources';
 
 import { ReadingHistoryOptionsMenu } from '../history/ReadingHistoryOptionsMenu';
 import type { QueryIndexes } from '../../hooks/useReadingHistory';
+import { useCopyPostLink } from '../../hooks/useCopyPostLink';
+import { CopyStateIcon } from '../share/CopyStateIcon';
+import { Tooltip } from '../tooltip/Tooltip';
+import { useLogContext } from '../../contexts/LogContext';
+import { postLogEvent } from '../../lib/feed';
+import { ReferralCampaignKey } from '../../lib/referral';
+import { ShareProvider } from '../../lib/share';
 
 export interface PostItemCardProps {
   className?: string;
@@ -32,6 +40,7 @@ export interface PostItemCardProps {
   clickable?: boolean;
   onHide?: (params: HidePostItemCardProps) => Promise<unknown>;
   showVoteActions?: boolean;
+  showCopyLink?: boolean;
   logOrigin?: Origin;
   indexes?: QueryIndexes;
 }
@@ -48,6 +57,7 @@ export default function PostItemCard({
   onHide,
   className,
   showVoteActions = false,
+  showCopyLink = false,
   logOrigin = Origin.Feed,
   indexes,
 }: PostItemCardProps): ReactElement {
@@ -66,6 +76,23 @@ export default function PostItemCard({
   const isUserSource = isSourceUserSource(source);
 
   const { toggleUpvote, toggleDownvote } = useReadHistoryVotePost();
+  const [linkCopied, copyLink] = useCopyPostLink();
+  const { logEvent } = useLogContext();
+
+  const onCopyLink = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    logEvent(
+      postLogEvent(LogEvent.SharePost, post, {
+        extra: { provider: ShareProvider.CopyLink, origin: logOrigin },
+      }),
+    );
+    copyLink({
+      link: post.commentsPermalink,
+      shorten: true,
+      cid: ReferralCampaignKey.SharePost,
+    });
+  };
 
   const classes = classNames(
     'relative flex w-full flex-row py-3 pl-9 pr-5',
@@ -185,6 +212,17 @@ export default function PostItemCard({
                   onClick={onHideClick}
                 />
               )}
+              {showButtons && showCopyLink && (
+                <Tooltip content="Copy link">
+                  <Button
+                    size={ButtonSize.Small}
+                    variant={ButtonVariant.Tertiary}
+                    aria-label="Copy link"
+                    icon={<CopyStateIcon copied={linkCopied} icon={LinkIcon} />}
+                    onClick={onCopyLink}
+                  />
+                </Tooltip>
+              )}
               {showButtons && (
                 <ReadingHistoryOptionsMenu
                   post={post}

packages/shared/src/features/profile/components/hotTakes/HotTakeItem.tsx

@@ -19,6 +19,8 @@ import { IconSize } from '../../../../components/Icon';
 import { QuaternaryButton } from '../../../../components/buttons/QuaternaryButton';
 import { Tooltip } from '../../../../components/tooltip/Tooltip';
 import { useEngagementBarV2 } from '../../../../hooks/useEngagementBarV2';
+import { HotTakeSnapshotButton } from '../../../snapshot/HotTakeSnapshotButton';
+import { Origin } from '../../../../lib/log';
 import { HotTakeItem as HotTakeItemV2 } from './HotTakeItem.v2';
 
 interface HotTakeItemProps {
@@ -93,6 +95,12 @@ function HotTakeItemV1({
             )}
           </div>
         )}
+        <HotTakeSnapshotButton
+          hotTake={item}
+          origin={Origin.HotTakeList}
+          showLabel={false}
+          size={ButtonSize.XSmall}
+        />
         {onUpvoteClick && (
           <Tooltip
             content={isUpvoteActive ? 'Remove upvote' : 'Upvote'}

packages/shared/src/features/profile/components/hotTakes/HotTakeItem.v2.tsx

@@ -16,6 +16,8 @@ import {
 import { EditIcon, TrashIcon, UpvoteIcon } from '../../../../components/icons';
 import { CardAction } from '../../../../components/buttons/CardAction';
 import { Tooltip } from '../../../../components/tooltip/Tooltip';
+import { HotTakeSnapshotButton } from '../../../snapshot/HotTakeSnapshotButton';
+import { Origin } from '../../../../lib/log';
 
 interface HotTakeItemProps {
   item: HotTake;
@@ -89,6 +91,12 @@ export function HotTakeItem({
             )}
           </div>
         )}
+        <HotTakeSnapshotButton
+          hotTake={item}
+          origin={Origin.HotTakeList}
+          showLabel={false}
+          size={ButtonSize.XSmall}
+        />
         {onUpvoteClick && (
           <Tooltip
             content={isUpvoteActive ? 'Remove upvote' : 'Upvote'}

packages/shared/src/features/profile/components/hotTakes/ProfileUserHotTakes.spec.tsx

@@ -267,6 +267,17 @@ describe('ProfileUserHotTakes', () => {
     expect(screen.getByText('Hot take 1')).toBeVisible();
   });
 
+  it('offers a snapshot on every hot take, visitors included', () => {
+    mockHotTakes({
+      hotTakes: [createHotTake(1), createHotTake(2)],
+      isOwner: false,
+    });
+
+    renderProfileUserHotTakes();
+
+    expect(screen.getAllByLabelText('Snapshot')).toHaveLength(2);
+  });
+
   it('renders the hot takes anchor while loading for visitors', () => {
     mockHotTakes({
       isOwner: false,