comments on polls

makerdao · Dec 15, 2021 · 82a1fba · 82a1fba
1 parent 2c54d92
commit 82a1fba
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/modules/comments/components/CommentCount.tsx b/modules/comments/components/CommentCount.tsx
@@ -0,0 +1,13 @@
+import InternalIcon from 'modules/app/components/Icon';
+import { Text, Flex } from 'theme-ui';
+
+export default function CommentCount({ count }: { count: number }): React.ReactElement {
+  return (
+    <Flex sx={{ alignItems: 'center' }}>
+      <InternalIcon name="comment" />
+      <Text as="p" variant="caps" sx={{ ml: 2 }}>
+        {count} Comments
+      </Text>
+    </Flex>
+  );
+}
diff --git a/modules/executive/components/ExecutiveOverviewCard.tsx b/modules/executive/components/ExecutiveOverviewCard.tsx
@@ -3,7 +3,6 @@ import Link from 'next/link';
 import { useBreakpointIndex } from '@theme-ui/match-media';
 import { Text, Flex, Box, Button, Badge, Divider, Card } from 'theme-ui';
 import { Icon } from '@makerdao/dai-ui-icons';
-import InternalIcon from 'modules/app/components/Icon';
 
 import Skeleton from 'modules/app/components/SkeletonThemed';
 import Bignumber from 'bignumber.js';
@@ -20,6 +19,7 @@ import { ANALYTICS_PAGES } from 'modules/app/client/analytics/analytics.constant
 import { useMkrOnHat } from 'modules/executive/hooks/useMkrOnHat';
 import { ZERO_ADDRESS } from 'modules/app/constants';
 import { useExecutiveComments } from 'modules/comments/hooks/useExecutiveComments';
+import CommentCount from 'modules/comments/components/CommentCount';
 
 type Props = {
   proposal: Proposal;
@@ -175,12 +175,9 @@ export default function ExecutiveOverviewCard({ proposal, isHat, spellData, ...p
           </Flex>
 
           {comments && comments.length > 0 && (
-            <Flex sx={{ alignItems: 'center', mt: 2 }}>
-              <InternalIcon name="comment" />
-              <Text as="p" variant="smallCaps" sx={{ ml: 2 }}>
-                {comments.length} Comments
-              </Text>
-            </Flex>
+            <Box sx={{ mt: 2 }}>
+              <CommentCount count={comments.length} />
+            </Box>
           )}
         </Box>
 

diff --git a/modules/polling/components/PollOverviewCard.tsx b/modules/polling/components/PollOverviewCard.tsx
@@ -19,6 +19,8 @@ import { formatDateWithTime } from 'lib/datetime';
 import { usePollTally } from '../hooks/usePollTally';
 import SkeletonThemed from 'modules/app/components/SkeletonThemed';
 import React from 'react';
+import CommentCount from 'modules/comments/components/CommentCount';
+import { usePollComments } from 'modules/comments/hooks/usePollComments';
 
 type Props = {
   poll: Poll;
@@ -39,6 +41,7 @@ export default function PollOverviewCard({
   const bpi = useBreakpointIndex({ defaultIndex: 2 });
   const canVote = !!account && isActivePoll(poll);
   const showQuickVote = canVote && showVoting;
+  const { comments } = usePollComments(poll.pollId);
 
   const { tally } = usePollTally(poll.pollId);
 
@@ -87,11 +90,18 @@ export default function PollOverviewCard({
                 </Box>
               ))}
             </Flex>
-
             {bpi > 0 && (
-              <Box mb={1}>
-                <CountdownTimer endText="Poll ended" endDate={poll.endDate} />
-              </Box>
+              <Flex mb={1}>
+                <Box mr={2}>
+                  <CountdownTimer endText="Poll ended" endDate={poll.endDate} />
+                </Box>
+
+                {comments && comments.length > 0 && (
+                  <Box>
+                    <CommentCount count={comments.length} />
+                  </Box>
+                )}
+              </Flex>
             )}
           </Stack>
           {showQuickVote && bpi > 0 && (