From 3308a4431ffd08459d55028fa82ef38ac9b45812 Mon Sep 17 00:00:00 2001
From: Luke Watts <luke@thisis.la>
Date: Thu, 1 Feb 2024 19:24:57 +0100
Subject: [PATCH] feat: add content statistics to questions

---
 src/pages/Question/QuestionPage.tsx         | 124 ++++++++++++++------
 src/pages/Question/question.routes.test.tsx |   6 +
 2 files changed, 91 insertions(+), 39 deletions(-)

diff --git a/src/pages/Question/QuestionPage.tsx b/src/pages/Question/QuestionPage.tsx
index 2f484b4ea7..0d93de4a69 100644
--- a/src/pages/Question/QuestionPage.tsx
+++ b/src/pages/Question/QuestionPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import {
+  ContentStatistics,
   FollowButton,
   Loader,
   ModerationStatus,
@@ -9,8 +10,8 @@ import {
 import { logger } from 'src/logger'
 import { useDiscussionStore } from 'src/stores/Discussions/discussions.store'
 import { useQuestionStore } from 'src/stores/Question/question.store'
-import { isAllowedToEditContent } from 'src/utils/helpers'
-import { Box, Button, Card, Flex, Heading, Text } from 'theme-ui'
+import { buildStatisticsLabel, isAllowedToEditContent } from 'src/utils/helpers'
+import { Box, Button, Card, Divider, Flex, Heading, Text } from 'theme-ui'
 
 import { ContentAuthorTimestamp } from '../common/ContentAuthorTimestamp/ContentAuthorTimestamp'
 import { QuestionComments } from './QuestionComments'
@@ -116,47 +117,92 @@ export const QuestionPage = () => {
         <Loader />
       ) : question ? (
         <>
-          <Card sx={{ mt: 4, p: 4, position: 'relative' }}>
-            <Flex sx={{ flexWrap: 'wrap', gap: 2 }}>
-              <UsefulStatsButton
-                votedUsefulCount={store.votedUsefulCount}
-                hasUserVotedUseful={store.userVotedActiveQuestionUseful}
-                isLoggedIn={store.activeUser ? true : false}
-                onUsefulClick={onUsefulClick}
+          <Card sx={{ position: 'relative', mt: 4 }}>
+            <Box sx={{ p: 4 }}>
+              <Flex sx={{ flexWrap: 'wrap', gap: 2 }}>
+                <UsefulStatsButton
+                  votedUsefulCount={store.votedUsefulCount}
+                  hasUserVotedUseful={store.userVotedActiveQuestionUseful}
+                  isLoggedIn={store.activeUser ? true : false}
+                  onUsefulClick={onUsefulClick}
+                />
+                <FollowButton
+                  hasUserSubscribed={hasUserSubscribed}
+                  isLoggedIn={isLoggedIn ? true : false}
+                  onFollowClick={onFollowClick}
+                />
+                {isEditable && (
+                  <Link to={'/questions/' + question.slug + '/edit'}>
+                    <Button variant={'primary'}>Edit</Button>
+                  </Link>
+                )}
+              </Flex>
+              <ModerationStatus
+                status={question.moderation}
+                contentType="question"
+                sx={{ top: 0, position: 'absolute', right: 0 }}
               />
-              <FollowButton
-                hasUserSubscribed={hasUserSubscribed}
-                isLoggedIn={isLoggedIn ? true : false}
-                onFollowClick={onFollowClick}
-              />
-              {isEditable && (
-                <Link to={'/questions/' + question.slug + '/edit'}>
-                  <Button variant={'primary'}>Edit</Button>
-                </Link>
-              )}
-            </Flex>
-            <ModerationStatus
-              status={question.moderation}
-              contentType="question"
-              sx={{ top: 0, position: 'absolute', right: 0 }}
-            />
 
-            <ContentAuthorTimestamp
-              userName={question._createdBy}
-              countryCode={question.creatorCountry}
-              created={question._created}
-              modified={
-                question._contentModifiedTimestamp || question._modified
-              }
-              action="Asked"
-            />
+              <ContentAuthorTimestamp
+                userName={question._createdBy}
+                countryCode={question.creatorCountry}
+                created={question._created}
+                modified={
+                  question._contentModifiedTimestamp || question._modified
+                }
+                action="Asked"
+              />
 
-            <Box mt={3} mb={2}>
-              <Heading mb={1}>{question.title}</Heading>
-              <Text variant="paragraph" sx={{ whiteSpace: 'pre-line' }}>
-                {question.description}
-              </Text>
+              <Box mt={3} mb={2}>
+                <Heading mb={1}>{question.title}</Heading>
+                <Text variant="paragraph" sx={{ whiteSpace: 'pre-line' }}>
+                  {question.description}
+                </Text>
+              </Box>
             </Box>
+
+            <Divider
+              sx={{
+                m: 0,
+                border: '.5px solid black',
+              }}
+            />
+            <ContentStatistics
+              statistics={[
+                {
+                  icon: 'view',
+                  label: buildStatisticsLabel({
+                    stat: question.total_views || 0,
+                    statUnit: 'view',
+                    usePlural: true,
+                  }),
+                },
+                {
+                  icon: 'thunderbolt',
+                  label: buildStatisticsLabel({
+                    stat: question?.subscribers?.length || 0,
+                    statUnit: 'following',
+                    usePlural: false,
+                  }),
+                },
+                {
+                  icon: 'star',
+                  label: buildStatisticsLabel({
+                    stat: store.votedUsefulCount,
+                    statUnit: 'useful',
+                    usePlural: false,
+                  }),
+                },
+                {
+                  icon: 'comment',
+                  label: buildStatisticsLabel({
+                    stat: comments.length,
+                    statUnit: 'comment',
+                    usePlural: true,
+                  }),
+                },
+              ]}
+            />
           </Card>
           {question._id && (
             <QuestionComments
diff --git a/src/pages/Question/question.routes.test.tsx b/src/pages/Question/question.routes.test.tsx
index 8248f4d24b..e796c8be03 100644
--- a/src/pages/Question/question.routes.test.tsx
+++ b/src/pages/Question/question.routes.test.tsx
@@ -311,6 +311,12 @@ describe('question.routes', () => {
             new RegExp(`^${question.description.split(' ')[0]}`),
           ),
         ).toBeInTheDocument()
+
+        // Content statistics
+        expect(wrapper.getByText(`0 views`)).toBeInTheDocument()
+        expect(wrapper.getByText(`0 following`)).toBeInTheDocument()
+        expect(wrapper.getByText(`1 comment`)).toBeInTheDocument()
+
         expect(mockFetchQuestionBySlug).toBeCalledWith(question.slug)
       })
     })