feat: polls (#4902)

Co-authored-by: Chris Bongers <chrisbongers@gmail.com>
Co-authored-by: Lee Hansel Solevilla <sshanzel@yahoo.com>
Co-authored-by: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com>

Author: 3 people

packages/shared/src/components/Feed.tsx

@@ -117,6 +117,11 @@ const BriefPostModal = dynamic(
     import(/* webpackChunkName: "briefPostModal" */ './modals/BriefPostModal'),
 );
 
+const PollPostModal = dynamic(
+  () =>
+    import(/* webpackChunkName: "pollPostModal" */ './modals/PollPostModal'),
+);
+
 const BriefCardFeed = dynamic(
   () =>
     import(
@@ -137,6 +142,7 @@ export const PostModalMap: Record<PostType, typeof ArticlePostModal> = {
   [PostType.VideoYouTube]: ArticlePostModal,
   [PostType.Collection]: CollectionPostModal,
   [PostType.Brief]: BriefPostModal,
+  [PostType.Poll]: PollPostModal,
 };
 
 export default function Feed<T>({

packages/shared/src/components/FeedItemComponent.tsx

@@ -42,6 +42,8 @@ import { adLogEvent, feedLogExtra } from '../lib/feed';
 import { useLogContext } from '../contexts/LogContext';
 import { MarketingCtaVariant } from './marketingCta/common';
 import { MarketingCtaBriefing } from './marketingCta/MarketingCtaBriefing';
+import PollGrid from './cards/poll/PollGrid';
+import { PollList } from './cards/poll/PollList';
 
 export type FeedItemComponentProps = {
   item: FeedItem;
@@ -100,6 +102,7 @@ const PostTypeToTagCard: Record<PostType, FunctionComponent> = {
   [PostType.VideoYouTube]: ArticleGrid,
   [PostType.Collection]: CollectionGrid,
   [PostType.Brief]: BriefCard,
+  [PostType.Poll]: PollGrid,
 };
 
 const PostTypeToTagList: Record<PostType, FunctionComponent> = {
@@ -110,6 +113,7 @@ const PostTypeToTagList: Record<PostType, FunctionComponent> = {
   [PostType.VideoYouTube]: ArticleList,
   [PostType.Collection]: CollectionList,
   [PostType.Brief]: BriefCard,
+  [PostType.Poll]: PollList,
 };
 
 type GetTagsProps = {

packages/shared/src/components/Pill.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import classNames from 'classnames';
 
 export enum PillSize {
+  XSmall = 'xsmall',
   Small = 'small',
   Medium = 'medium',
 }
 
 const pillSizeToClassName: Record<PillSize, string> = {
+  [PillSize.XSmall]: 'font-bold typo-caption2 rounded-4 px-1',
   [PillSize.Small]: 'font-bold typo-footnote rounded-8 p-1 px-2',
   [PillSize.Medium]: 'font-bold typo-caption1 rounded-10 p-2',
 };

packages/shared/src/components/cards/common/PollMetadata.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import isAfter from 'date-fns/isAfter';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../typography/Typography';
+import { Separator } from './common';
+import type { Post } from '../../../graphql/posts';
+import { largeNumberFormat } from '../../../lib';
+
+const MIN_VOTES_REQUIRED = 10;
+
+export type PollMetadataProps = Pick<Post, 'endsAt' | 'numPollVotes'> & {
+  isAuthor: boolean;
+};
+
+const PollMetadata = ({
+  endsAt,
+  isAuthor,
+  numPollVotes,
+}: PollMetadataProps) => {
+  const shouldShowVotes = numPollVotes > MIN_VOTES_REQUIRED || isAuthor;
+  const pollHasEnded = endsAt && isAfter(new Date(), new Date(endsAt));
+
+  return (
+    <>
+      {pollHasEnded && (
+        <>
+          <Typography tag={TypographyTag.Span} type={TypographyType.Footnote}>
+            Voting ended
+          </Typography>
+          <Separator />
+        </>
+      )}
+      <>
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Footnote}
+          color={TypographyColor.StatusSuccess}
+        >
+          {shouldShowVotes ? 'Voting open' : 'New poll'}
+        </Typography>
+        <Separator />
+      </>
+      {shouldShowVotes && (
+        <>
+          <Typography tag={TypographyTag.Span} type={TypographyType.Footnote}>
+            {largeNumberFormat(numPollVotes)}{' '}
+            {pollHasEnded ? 'total votes' : 'votes'}
+          </Typography>
+          <Separator />
+        </>
+      )}
+    </>
+  );
+};
+
+export default PollMetadata;

packages/shared/src/components/cards/common/PostMetadata.tsx

@@ -8,6 +8,8 @@ import { formatReadTime, TruncateText, DateFormat } from '../../utilities';
 import { largeNumberFormat } from '../../../lib';
 import { useFeedCardContext } from '../../../features/posts/FeedCardContext';
 import { Tooltip } from '../../tooltip/Tooltip';
+import type { PollMetadataProps } from './PollMetadata';
+import PollMetadata from './PollMetadata';
 
 interface PostMetadataProps
   extends Pick<Post, 'createdAt' | 'readTime' | 'numUpvotes'> {
@@ -16,6 +18,7 @@ interface PostMetadataProps
   children?: ReactNode;
   isVideoType?: boolean;
   domain?: ReactNode;
+  pollMetadata?: PollMetadataProps;
 }
 
 export default function PostMetadata({
@@ -27,6 +30,7 @@ export default function PostMetadata({
   description,
   isVideoType,
   domain,
+  pollMetadata,
 }: PostMetadataProps): ReactElement {
   const timeActionContent = isVideoType ? 'watch' : 'read';
   const showReadTime = isVideoType ? Number.isInteger(readTime) : !!readTime;
@@ -49,6 +53,7 @@ export default function PostMetadata({
           <Separator />
         )}
         {!!description && description}
+        {pollMetadata && <PollMetadata {...pollMetadata} />}
         {!!createdAt && !!description && !boostedBy && <Separator />}
         {!!createdAt && !boostedBy && (
           <DateFormat date={createdAt} type={TimeFormatType.Post} />

packages/shared/src/components/cards/poll/PollGrid.tsx

@@ -0,0 +1,104 @@
+import type { Ref } from 'react';
+import React, { forwardRef, useState } from 'react';
+import FeedItemContainer from '../common/FeedItemContainer';
+import {
+  CardTextContainer,
+  CardTitle,
+  getPostClassNames,
+} from '../common/Card';
+import { SquadPostCardHeader } from '../common/SquadPostCardHeader';
+import type { PostCardProps } from '../common/common';
+import { Container } from '../common/common';
+import ActionButtons from '../ActionsButtons';
+import PollOptions from './PollOptions';
+import PostMetadata from '../common/PostMetadata';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import usePoll from '../../../hooks/usePoll';
+import CardOverlay from '../common/CardOverlay';
+import { useSmartTitle } from '../../../hooks/post/useSmartTitle';
+
+const PollGrid = forwardRef(function PollCard(
+  {
+    post,
+    onPostClick,
+    onPostAuxClick,
+    onUpvoteClick,
+    onDownvoteClick,
+    onCommentClick,
+    onBookmarkClick,
+    onCopyLinkClick,
+    domProps = {},
+  }: PostCardProps,
+  ref: Ref<HTMLElement>,
+) {
+  const { user } = useAuthContext();
+  const { onVote, isCastingVote } = usePoll({ post });
+  const [shouldAnimateResults, setShouldAnimateResults] = useState(false);
+
+  const handleVote = (optionId: string, text: string) => {
+    if (!isCastingVote) {
+      onVote(optionId, text);
+      setShouldAnimateResults(true);
+    }
+  };
+  const { title } = useSmartTitle(post);
+
+  const { pinnedAt, trending, pollOptions, endsAt, numPollVotes, source } =
+    post;
+
+  return (
+    <FeedItemContainer
+      ref={ref}
+      domProps={{
+        ...domProps,
+        className: getPostClassNames(post, domProps?.className, 'min-h-card'),
+      }}
+      flagProps={{ pinnedAt, trending }}
+    >
+      <CardOverlay
+        post={post}
+        onPostCardAuxClick={() => onPostAuxClick(post)}
+        onPostCardClick={() => onPostClick(post)}
+      />
+      <SquadPostCardHeader
+        post={post}
+        enableSourceHeader={source.type === 'squad'}
+      />
+      <CardTextContainer>
+        <CardTitle>{title}</CardTitle>
+      </CardTextContainer>
+      <Container className="justify-end gap-2">
+        <PostMetadata
+          createdAt={post.createdAt}
+          className="mx-4"
+          pollMetadata={{
+            endsAt,
+            isAuthor: user?.id === post.author?.id,
+            numPollVotes,
+          }}
+        />
+        <PollOptions
+          className={{
+            container: 'px-2',
+          }}
+          options={pollOptions}
+          onClick={handleVote}
+          userVote={post?.userState?.pollOption?.id}
+          numPollVotes={numPollVotes || 0}
+          endsAt={endsAt}
+          shouldAnimateResults={shouldAnimateResults}
+        />
+        <ActionButtons
+          post={post}
+          onUpvoteClick={onUpvoteClick}
+          onCommentClick={onCommentClick}
+          onCopyLinkClick={onCopyLinkClick}
+          onBookmarkClick={onBookmarkClick}
+          onDownvoteClick={onDownvoteClick}
+        />
+      </Container>
+    </FeedItemContainer>
+  );
+});
+
+export default PollGrid;