FW-5304 set doc head (#698)

* Replace react-helmet with react-helmet-async

* Add DocHead title to all App level pages

* Update label helper to include titlecase

* Add SiteDocHead to all page level components in splashboard

* Safeguard against `unobserve` without element

* Tweak colours for report icons

package.json

@@ -119,7 +119,7 @@
     "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.52.1",
     "react-i18next": "^15.1.1",
     "react-oidc-context": "^3.1.1",

src/common/hooks/useIntersectionObserver.js

@@ -9,22 +9,25 @@ export default function useIntersectionObserver({
   enabled = true,
 }) {
   useEffect(() => {
-    const el = target && target?.current
+    const el = target?.current
     if (!enabled || !el) {
       return
     }
     const observer = new IntersectionObserver(
       (entries) =>
         entries.forEach((entry) => entry.isIntersecting && onIntersect()),
       {
-        root: root && root.current,
+        root: root?.current,
         rootMargin,
         threshold,
       },
     )
     observer.observe(el)
+
     return () => {
-      observer.unobserve(el)
+      if (el) {
+        observer.unobserve(el)
+      }
     }
-  }, [target.current, enabled])
+  }, [target, enabled, root, rootMargin, threshold, onIntersect])
 }

src/common/hooks/useSearchDomain.js

@@ -9,10 +9,7 @@ import {
   DOMAIN_TRANSLATION,
 } from 'common/constants'
 import useSearchParamsState from 'common/hooks/useSearchParamsState'
-import {
-  makeTitleCase,
-  getPresentationPropertiesForType,
-} from 'common/utils/stringHelpers'
+import { getPresentationPropertiesForType } from 'common/utils/stringHelpers'
 
 function useSearchDomain({ searchType }) {
   const [searchDomainInUrl, setSearchDomainInUrl] = useSearchParamsState({
@@ -34,7 +31,7 @@ function useSearchDomain({ searchType }) {
   const searchDomainOptions = {
     [DOMAIN_BOTH]: 'All',
     [DOMAIN_TRANSLATION]: 'Translation',
-    [DOMAIN_LANGUAGE]: makeTitleCase(labels.plural),
+    [DOMAIN_LANGUAGE]: labels.titlecase,
   }
 
   const handleSearchDomainNavigation = (value) => {

src/common/hooks/useSearchType.js

@@ -32,7 +32,7 @@ function useSearchType({ initialSearchType = TYPE_ENTRY }) {
 
   const getSearchTypeLabel = ({ searchType, plural = false }) => {
     const labels = getPresentationPropertiesForType(searchType)
-    if (plural) return labels.plural
+    if (plural) return labels.lowercase
     return labels.singular
   }
 

src/common/utils/stringHelpers.js

@@ -136,91 +136,101 @@ export const getPresentationPropertiesForType = (type) => {
   switch (type) {
     case TYPE_WORD:
       return {
+        lowercase: 'words',
         uppercase: 'WORDS',
+        titlecase: 'Words',
         singular: 'word',
-        plural: 'words',
         slug: 'words',
         color: 'word-color-500',
         textColor: 'word-color-700',
       }
     case TYPE_PHRASE:
       return {
+        lowercase: 'phrases',
         uppercase: 'PHRASES',
+        titlecase: 'Phrases',
         singular: 'phrase',
-        plural: 'phrases',
         slug: 'phrases',
         color: 'phrase-color-600',
         textColor: 'phrase-color-800',
       }
     case TYPE_SONG:
       return {
+        lowercase: 'songs',
         uppercase: 'SONGS',
+        titlecase: 'Songs',
         singular: 'song',
-        plural: 'songs',
         slug: 'songs',
         color: 'song-color-800',
         textColor: 'song-color-900',
       }
     case TYPE_STORY:
       return {
+        lowercase: 'stories',
         uppercase: 'STORIES',
+        titlecase: 'Stories',
         singular: 'story',
-        plural: 'stories',
         slug: 'stories',
         color: 'story-color-700',
         textColor: 'story-color-900',
       }
     case TYPE_DICTIONARY:
       return {
+        lowercase: 'words and phrases',
         uppercase: 'DICTIONARY',
+        titlecase: 'Dictionary',
         singular: 'word / phrase',
-        plural: 'words and phrases',
         slug: 'dictionary',
         color: 'word-color-500',
         textColor: 'word-color-700',
       }
     case TYPE_MEDIA:
       return {
+        lowercase: 'media',
         uppercase: 'MEDIA',
+        titlecase: 'Media',
         singular: 'media',
-        plural: 'media',
         slug: 'search',
         color: 'charcoal-500',
         textColor: 'charcoal-900',
       }
     case TYPE_AUDIO:
       return {
+        lowercase: 'audio',
         uppercase: 'AUDIO',
+        titlecase: 'Audio',
         singular: 'audio',
-        plural: 'audio',
         slug: 'audio',
         color: 'charcoal-500',
         textColor: 'charcoal-900',
       }
     case TYPE_IMAGE:
       return {
-        uppercase: 'IMAGE',
+        lowercase: 'images',
+        uppercase: 'IMAGES',
+        titlecase: 'Images',
         singular: 'image',
-        plural: 'images',
         slug: 'image',
         color: 'charcoal-500',
         textColor: 'charcoal-900',
       }
     case TYPE_VIDEO:
       return {
-        uppercase: 'VIDEO',
+        lowercase: 'videos',
+        uppercase: 'VIDEOS',
+        titlecase: 'Videos',
         singular: 'video',
-        plural: 'videos',
         slug: 'video',
         color: 'charcoal-500',
         textColor: 'charcoal-900',
       }
     case TYPE_ENTRY:
     default:
       return {
-        uppercase: 'DICTIONARY',
+        lowercase: 'language entries',
+        uppercase: 'LANGUAGE ENTRIES',
+        titlecase: 'Language Entries',
         singular: 'language entry',
-        plural: 'language entries',
         slug: 'search',
         color: 'charcoal-500',
         textColor: 'charcoal-900',

src/components/AboutFV/AboutFV.js → src/components/About/About.js

@@ -1,14 +1,18 @@
 import React from 'react'
+
+// FPCC
 import SectionTitle from 'components/SectionTitle'
+import DocHead from 'components/DocHead'
 
-function AboutFV() {
+function About() {
   const headerStyle = 'text-xl font-bold mb-1 mt-4'
   const paraStyle = 'mb-2'
   return (
     <section
       className="pt-2 md:pt-4 lg:pt-8 bg-white"
       data-testid="AboutFirstVoices"
     >
+      <DocHead titleArray={['About FirstVoices']} />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <SectionTitle.Presentation title="ABOUT FIRSTVOICES" />
         <div className="max-w-4xl mx-auto text-charcoal-900 space-y-4 py-8">
@@ -96,4 +100,4 @@ function AboutFV() {
   )
 }
 
-export default AboutFV
+export default About

src/components/About/index.js

@@ -0,0 +1,3 @@
+import About from 'components/About/About'
+
+export default About

src/components/Alphabet/AlphabetPresentation.js

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'
 // FPCC
 import AlphabetPresentationSelected from 'components/Alphabet/AlphabetPresentationSelected'
 import SectionTitle from 'components/SectionTitle'
+import SiteDocHead from 'components/SiteDocHead'
 
 function AlphabetPresentation({
   characters,
@@ -20,6 +21,7 @@ function AlphabetPresentation({
       className="pt-2 md:pt-4 lg:pt-8 bg-white"
       data-testid="AlphabetPresentation"
     >
+      <SiteDocHead titleArray={['Alphabet']} />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <SectionTitle.Presentation title="ALPHABET" />
         {links && (