feat(seo): update meta descriptions of agency and post pages

- update meta description for post page with text of first answer
- update meta description for agency-specific page with 'Answers from `agency.longname` (`agency.shortname`)'
- set meta prop data-react-helmet in index.html to true
- refactor AnswerSection component to prevent repeat answer queries

re #394

client/public/index.html

@@ -35,6 +35,7 @@
     <meta
       name="description"
       content="Answers from the Singapore Government"
+      data-react-helmet="true"
     />
 
     <link rel="preconnect" href="https://fonts.gstatic.com" />

client/src/pages/HomePage/HomePage.component.jsx

@@ -66,6 +66,13 @@ const HomePage = ({ match }) => {
         title={
           agency ? `${agency?.shortname.toUpperCase()} FAQ - AskGov` : undefined
         }
+        description={
+          agency
+            ? `Answers from ${
+                agency?.longname
+              } (${agency?.shortname.toUpperCase()})`
+            : undefined
+        }
       />
       <Box
         bg="primary.500"

client/src/pages/Post/AnswerSection/AnswerSection.component.jsx

@@ -1,35 +1,24 @@
-import { useQuery } from 'react-query'
 import { SkeletonText } from '@chakra-ui/react'
 import AnswerItem from './AnswerItem/AnswerItem.component'
 import './AnswerSection.styles.scss'
-import {
-  getAnswersForPost,
-  GET_ANSWERS_FOR_POST_QUERY_KEY,
-} from '../../../services/AnswerService'
 import { sortByCreatedAt } from '../../../util/date'
 
-const AnswerSection = ({ post }) => {
-  const { isLoading, data: answers } = useQuery(
-    [GET_ANSWERS_FOR_POST_QUERY_KEY, post.id],
-    () => getAnswersForPost(post.id),
-  )
-
-  return isLoading ? (
+const AnswerSection = ({ answers }) => {
+  return !answers ? (
     <SkeletonText />
   ) : (
     <div className="answer-section">
-      {answers.length > 0 ? null : (
+      {answers && answers.length > 0 ? (
+        answers?.sort(sortByCreatedAt).map((answer) => (
+          <div key={answer.id} className="answers">
+            <AnswerItem answer={answer} />
+          </div>
+        ))
+      ) : (
         <div className="answer-header">
           <h2>No official answers yet</h2>
         </div>
       )}
-      {answers?.length > 0
-        ? answers?.sort(sortByCreatedAt).map((answer) => (
-            <div key={answer.id} className="answers">
-              <AnswerItem answer={answer} postId={post.id} />
-            </div>
-          ))
-        : null}
     </div>
   )
 }

client/src/pages/Post/Post.component.jsx

@@ -1,28 +1,31 @@
-import { Center, Flex, Stack, Spacer, Text, VStack } from '@chakra-ui/layout'
+import { Center, Flex, Spacer, Stack, Text, VStack } from '@chakra-ui/layout'
+import { format, utcToZonedTime } from 'date-fns-tz'
 import { BiArrowBack, BiXCircle } from 'react-icons/bi'
 import { useQuery } from 'react-query'
-import { Link, useParams, useHistory } from 'react-router-dom'
-import { format, utcToZonedTime } from 'date-fns-tz'
-
+import { Link, useHistory, useParams } from 'react-router-dom'
+import { PostStatus, TagType } from '~shared/types/base'
 import CitizenRequest from '../../components/CitizenRequest/CitizenRequest.component'
+import EditButton from '../../components/EditButton/EditButton.component'
 import PageTitle from '../../components/PageTitle/PageTitle.component'
 import Spinner from '../../components/Spinner/Spinner.component'
 import TagBadge from '../../components/TagBadge/TagBadge.component'
 import ViewCount from '../../components/ViewCount/ViewCount.component'
+import { useAuth } from '../../contexts/AuthContext'
 import {
   getAgencyByShortName,
   GET_AGENCY_BY_SHORTNAME_QUERY_KEY,
 } from '../../services/AgencyService'
+import {
+  getAnswersForPost,
+  GET_ANSWERS_FOR_POST_QUERY_KEY,
+} from '../../services/AnswerService'
 import {
   getPostById,
   GET_POST_BY_ID_QUERY_KEY,
 } from '../../services/PostService'
-import { PostStatus, TagType } from '~shared/types/base'
 import AnswerSection from './AnswerSection/AnswerSection.component'
 import './Post.styles.scss'
 import QuestionSection from './QuestionSection/QuestionSection.component'
-import EditButton from '../../components/EditButton/EditButton.component'
-import { useAuth } from '../../contexts/AuthContext'
 
 const Post = () => {
   const { id: postId } = useParams()
@@ -69,12 +72,22 @@ const Post = () => {
     'dd MMM yyyy HH:mm, zzzz',
   )
 
+  const { _, data: answers } = useQuery(
+    [GET_ANSWERS_FOR_POST_QUERY_KEY, post?.id],
+    () => getAnswersForPost(post?.id),
+  )
+
   return isLoading ? (
     <Spinner centerHeight="200px" />
   ) : (
     <Flex direction="column" height="100%">
       <PageTitle
         title={`${post.title} - ${agencyShortName?.toUpperCase()} FAQ - AskGov`}
+        description={
+          answers && answers.length > 0
+            ? answers[0]?.body.replace(/<[^>]*>?/gm, '') // .replace() uses regex to remove html tags
+            : undefined
+        }
       />
       <Center>
         <Stack
@@ -131,7 +144,7 @@ const Post = () => {
             </div>
             <div className="question-main">
               <QuestionSection post={post} />
-              <AnswerSection post={post} />
+              <AnswerSection answers={answers} />
               <div className="post-time">
                 <time dateTime={formattedTimeString}>
                   Last updated {formattedTimeString}