chore: redo structure for cards (#3596)

packages/shared/src/components/Feed.spec.tsx

@@ -75,14 +75,28 @@ import { acquisitionKey } from './cards/AcquisitionForm/common/common';
 const showLogin = jest.fn();
 let nextCallback: (value: PostsEngaged) => unknown = null;
 
-jest.mock('../hooks/useBookmarkProvider', () => ({
-  __esModule: true,
-  default: jest
-    .fn()
-    .mockImplementation((): { highlightBookmarkedPost: boolean } => ({
+jest.mock('../hooks', () => {
+  const originalModule = jest.requireActual('../hooks');
+  return {
+    __esModule: true,
+    ...originalModule,
+    useBookmarkProvider: (): { highlightBookmarkedPost: boolean } => ({
       highlightBookmarkedPost: false,
-    })),
-}));
+    }),
+    useSubscription: {
+      default: jest
+        .fn()
+        .mockImplementation(
+          (
+            request: () => OperationOptions,
+            { next }: SubscriptionCallbacks<PostsEngaged>,
+          ): void => {
+            nextCallback = next;
+          },
+        ),
+    },
+  };
+});
 
 jest.mock('../hooks/useSubscription', () => ({
   __esModule: true,
@@ -108,6 +122,7 @@ beforeEach(() => {
   jest.restoreAllMocks();
   jest.clearAllMocks();
   nock.cleanAll();
+  jest.clearAllMocks();
   variables = defaultVariables;
 });
 

packages/shared/src/components/FeedItemComponent.tsx

@@ -1,34 +1,37 @@
 import React, { FunctionComponent, ReactElement } from 'react';
 import dynamic from 'next/dynamic';
 import { FeedItem } from '../hooks/useFeed';
-import { ArticlePostCard } from './cards/ArticlePostCard';
-import { ArticlePostList } from './cards/list/ArticlePostList';
-import { PlaceholderCard } from './cards/PlaceholderCard';
-import { PlaceholderList } from './cards/list/PlaceholderList';
+import { PlaceholderGrid } from './cards/placeholder/PlaceholderGrid';
+import { PlaceholderList } from './cards/placeholder/PlaceholderList';
 import { Ad, Post, PostItem, PostType } from '../graphql/posts';
 import { LoggedUser } from '../lib/user';
 import { CommentOnData } from '../graphql/comments';
 import useLogImpression from '../hooks/feed/useLogImpression';
 import { FeedPostClick } from '../hooks/feed/useFeedOnPostClick';
-import { SharePostCard } from './cards/SharePostCard';
-import { SharePostList } from './cards/list/SharePostList';
 import { Origin } from '../lib/log';
 import { useFeedLayout, UseVotePost } from '../hooks';
-import { CollectionCard } from './cards/CollectionCard';
-import { CollectionList } from './cards/list/CollectionList';
+import { CollectionList } from './cards/collection/CollectionList';
 import { MarketingCtaCard } from './marketingCta';
 import { MarketingCtaList } from './marketingCta/MarketingCtaList';
-import { FeedItemType } from './cards/common';
+import { FeedItemType } from './cards/common/common';
 import { AdGrid } from './cards/ad/AdGrid';
 import { AdList } from './cards/ad/AdList';
 import { AcquisitionFormGrid } from './cards/AcquisitionForm/AcquisitionFormGrid';
 import { AcquisitionFormList } from './cards/AcquisitionForm/AcquisitionFormList';
 import { FreeformGrid } from './cards/Freeform/FreeformGrid';
 import { FreeformList } from './cards/Freeform/FreeformList';
 import { PostClick } from '../lib/click';
+import { ArticleList } from './cards/article/ArticleList';
+import { ArticleGrid } from './cards/article/ArticleGrid';
+import { ShareGrid } from './cards/share/ShareGrid';
+import { ShareList } from './cards/share/ShareList';
+import { CollectionGrid } from './cards/collection';
 
 const CommentPopup = dynamic(
-  () => import(/* webpackChunkName: "commentPopup" */ './cards/CommentPopup'),
+  () =>
+    import(
+      /* webpackChunkName: "commentPopup" */ './cards/common/CommentPopup'
+    ),
 );
 
 export type FeedItemComponentProps = {
@@ -90,20 +93,20 @@ export function getFeedItemKey(item: FeedItem, index: number): string {
 }
 
 const PostTypeToTagCard: Record<PostType, FunctionComponent> = {
-  [PostType.Article]: ArticlePostCard,
-  [PostType.Share]: SharePostCard,
+  [PostType.Article]: ArticleGrid,
+  [PostType.Share]: ShareGrid,
   [PostType.Welcome]: FreeformGrid,
   [PostType.Freeform]: FreeformGrid,
-  [PostType.VideoYouTube]: ArticlePostCard,
-  [PostType.Collection]: CollectionCard,
+  [PostType.VideoYouTube]: ArticleGrid,
+  [PostType.Collection]: CollectionGrid,
 };
 
 const PostTypeToTagList: Record<PostType, FunctionComponent> = {
-  [PostType.Article]: ArticlePostList,
-  [PostType.Share]: SharePostList,
+  [PostType.Article]: ArticleList,
+  [PostType.Share]: ShareList,
   [PostType.Welcome]: FreeformList,
   [PostType.Freeform]: FreeformList,
-  [PostType.VideoYouTube]: ArticlePostList,
+  [PostType.VideoYouTube]: ArticleList,
   [PostType.Collection]: CollectionList,
 };
 
@@ -121,10 +124,10 @@ const getTags = ({
   const useListCards = isListFeedLayout || shouldUseListMode;
   return {
     PostTag: useListCards
-      ? PostTypeToTagList[postType] ?? ArticlePostList
-      : PostTypeToTagCard[postType] ?? ArticlePostCard,
+      ? PostTypeToTagList[postType] ?? ArticleList
+      : PostTypeToTagCard[postType] ?? ArticleGrid,
     AdTag: useListCards ? AdList : AdGrid,
-    PlaceholderTag: useListCards ? PlaceholderList : PlaceholderCard,
+    PlaceholderTag: useListCards ? PlaceholderList : PlaceholderGrid,
     MarketingCtaTag: useListCards ? MarketingCtaList : MarketingCtaCard,
     AcquisitionFormTag: useListCards
       ? AcquisitionFormList

packages/shared/src/components/cards/AcquisitionForm/AcquisitionFormGrid.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Card } from '../Card';
+import { Card } from '../common/Card';
 import { AcquisitionFormInner } from './common/AcquisitionFormInner';
 
 export function AcquisitionFormGrid(): ReactElement {

packages/shared/src/components/cards/AcquisitionForm/AcquisitionFormList.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { ListCard } from '../list/ListCard';
+import { ListCard } from '../common/list/ListCard';
 import { AcquisitionFormInner } from './common/AcquisitionFormInner';
 
 export function AcquisitionFormList(): ReactElement {

packages/shared/src/components/cards/Freeform/FreeformGrid.tsx

@@ -1,18 +1,18 @@
 import React, { forwardRef, ReactElement, Ref, useRef } from 'react';
 import classNames from 'classnames';
-import { Container, generateTitleClamp, PostCardProps } from '../common';
+import { Container, generateTitleClamp, PostCardProps } from '../common/common';
 import { usePostImage } from '../../../hooks/post/usePostImage';
 import { useSquadChecklist } from '../../../hooks/useSquadChecklist';
 import { Squad } from '../../../graphql/sources';
 import { PostType } from '../../../graphql/posts';
 import { ActionType } from '../../../graphql/actions';
-import FeedItemContainer from '../FeedItemContainer';
-import { FreeformCardTitle, getPostClassNames } from '../Card';
+import FeedItemContainer from '../common/FeedItemContainer';
+import { FreeformCardTitle, getPostClassNames } from '../common/Card';
 import CardOverlay from '../common/CardOverlay';
 import OptionsButton from '../../buttons/OptionsButton';
 import { SquadPostCardHeader } from '../common/SquadPostCardHeader';
-import PostMetadata from '../PostMetadata';
-import { WelcomePostCardFooter } from '../WelcomePostCardFooter';
+import PostMetadata from '../common/PostMetadata';
+import { WelcomePostCardFooter } from '../common/WelcomePostCardFooter';
 import ActionButtons from '../ActionsButtons/ActionButtons';
 
 export const FreeformGrid = forwardRef(function SharePostCard(

packages/shared/src/components/cards/Freeform/FreeformList.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement, Ref, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 import { sanitize } from 'dompurify';
 
-import { Container, generateTitleClamp, PostCardProps } from '../common';
+import { Container, generateTitleClamp, PostCardProps } from '../common/common';
 import { useSquadChecklist } from '../../../hooks/useSquadChecklist';
 import { Squad } from '../../../graphql/sources';
 import { ActionType } from '../../../graphql/actions';
@@ -11,11 +11,11 @@ import { useFeedPreviewMode, useTruncatedSummary } from '../../../hooks';
 import { usePostImage } from '../../../hooks/post/usePostImage';
 import SquadHeaderPicture from '../common/SquadHeaderPicture';
 import { PostContentReminder } from '../../post/common/PostContentReminder';
-import FeedItemContainer from '../list/FeedItemContainer';
-import { CardContainer, CardContent, CardTitle } from '../list/ListCard';
-import { PostCardHeader } from '../list/PostCardHeader';
-import { CardCoverList } from '../list/CardCover';
-import ActionButtons from '../list/ActionButtons';
+import FeedItemContainer from '../common/list/FeedItemContainer';
+import { CardContainer, CardContent, CardTitle } from '../common/list/ListCard';
+import { PostCardHeader } from '../common/list/PostCardHeader';
+import { CardCoverList } from '../common/list/CardCover';
+import ActionButtons from '../common/list/ActionButtons';
 
 export const FreeformList = forwardRef(function SharePostCard(
   {

packages/shared/src/components/cards/SimilarPosts/PostEngagementCounts.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import classNames from 'classnames';
-import { separatorCharacter } from '../common';
+import { separatorCharacter } from '../common/common';
 import { largeNumberFormat } from '../../../lib';
 
 interface PostEngagementCountsProps {

packages/shared/src/components/cards/ad/AdGrid.tsx

@@ -5,7 +5,7 @@ import {
   CardSpace,
   CardTextContainer,
   CardTitle,
-} from '../Card';
+} from '../common/Card';
 import AdLink from './common/AdLink';
 import AdAttribution from './common/AdAttribution';
 import { AdImage } from './common/AdImage';

packages/shared/src/components/cards/ad/AdList.tsx

@@ -4,9 +4,14 @@ import React, {
   ReactElement,
   Ref,
 } from 'react';
-import { CardContent, CardImage, CardSpace, CardTitle } from '../list/ListCard';
+import {
+  CardContent,
+  CardImage,
+  CardSpace,
+  CardTitle,
+} from '../common/list/ListCard';
 import AdAttribution from './common/AdAttribution';
-import FeedItemContainer from '../list/FeedItemContainer';
+import FeedItemContainer from '../common/list/FeedItemContainer';
 import type { AdCardProps } from './common/common';
 import { AdImage } from './common/AdImage';
 import { AdPixel } from './common/AdPixel';

packages/shared/src/components/cards/ad/common/AdLink.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Ad } from '../../../../graphql/posts';
-import { CardLink } from '../../Card';
+import { CardLink } from '../../common/Card';
 import { combinedClicks } from '../../../../lib/click';
 
 export type AdLinkProps = {

packages/shared/src/components/cards/ArticlePostCard.spec.tsx → packages/shared/src/components/cards/article/ArticleGrid.spec.tsx

@@ -7,11 +7,11 @@ import {
   waitFor,
 } from '@testing-library/react';
 import { QueryClient } from '@tanstack/react-query';
-import { ArticlePostCard } from './ArticlePostCard';
-import post from '../../../__tests__/fixture/post';
-import { PostCardProps, visibleOnGroupHover } from './common';
-import { PostType } from '../../graphql/posts';
-import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import post from '../../../../__tests__/fixture/post';
+import { PostCardProps, visibleOnGroupHover } from '../common/common';
+import { PostType } from '../../../graphql/posts';
+import { TestBootProvider } from '../../../../__tests__/helpers/boot';
+import { ArticleGrid } from './ArticleGrid';
 
 const defaultProps: PostCardProps = {
   post,
@@ -31,7 +31,7 @@ beforeEach(() => {
 const renderComponent = (props: Partial<PostCardProps> = {}): RenderResult => {
   return render(
     <TestBootProvider client={new QueryClient()}>
-      <ArticlePostCard {...defaultProps} {...props} />
+      <ArticleGrid {...defaultProps} {...props} />
     </TestBootProvider>,
   );
 };

packages/shared/src/components/cards/ArticlePostCard.tsx → packages/shared/src/components/cards/article/ArticleGrid.tsx

@@ -1,28 +1,28 @@
 import React, { forwardRef, ReactElement, Ref } from 'react';
 import classNames from 'classnames';
+import { Container, PostCardProps } from '../common/common';
+import { useBlockPostPanel } from '../../../hooks/post/useBlockPostPanel';
+import { usePostFeedback } from '../../../hooks';
+import { isVideoPost } from '../../../graphql/posts';
+import { PostTagsPanel } from '../../post/block/PostTagsPanel';
+import FeedItemContainer from '../common/FeedItemContainer';
 import {
   CardSpace,
   CardTextContainer,
   CardTitle,
   getPostClassNames,
-} from './Card';
-import PostMetadata from './PostMetadata';
-import ActionButtons from './ActionsButtons/ActionButtons';
-import { PostCardHeader } from './PostCardHeader';
-import { PostCardFooter } from './PostCardFooter';
-import { Container, PostCardProps } from './common';
-import FeedItemContainer from './FeedItemContainer';
-import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel';
-import { PostTagsPanel } from '../post/block/PostTagsPanel';
-import { usePostFeedback } from '../../hooks';
-import styles from './Card.module.css';
-import { FeedbackCard } from './FeedbackCard';
-import { Origin } from '../../lib/log';
-import { isVideoPost } from '../../graphql/posts';
-import CardOverlay from './common/CardOverlay';
-import PostTags from './PostTags';
+} from '../common/Card';
+import CardOverlay from '../common/CardOverlay';
+import { Origin } from '../../../lib/log';
+import styles from '../common/Card.module.css';
+import { PostCardHeader } from '../common/PostCardHeader';
+import PostTags from '../common/PostTags';
+import PostMetadata from '../common/PostMetadata';
+import { PostCardFooter } from '../common/PostCardFooter';
+import ActionButtons from '../ActionsButtons';
+import { FeedbackGrid } from './feedback/FeedbackGrid';
 
-export const ArticlePostCard = forwardRef(function PostCard(
+export const ArticleGrid = forwardRef(function ArticleGrid(
   {
     post,
     onPostClick,
@@ -80,7 +80,7 @@ export const ArticlePostCard = forwardRef(function PostCard(
         onPostCardAuxClick={onPostCardAuxClick}
       />
       {showFeedback && (
-        <FeedbackCard
+        <FeedbackGrid
           post={post}
           onUpvoteClick={() => onUpvoteClick(post, Origin.FeedbackCard)}
           onDownvoteClick={() => onDownvoteClick(post, Origin.FeedbackCard)}