feat: add document title for item detail view

package.json

@@ -14,6 +14,7 @@
     "prism-react-renderer": "^1.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-helmet": "^6.1.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.1",
     "react-scripts": "^3.3.0",

src/components/ItemScreen/ItemScreen.js

 import css from '@styled-system/css'
-import React, { useEffect } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Route, Switch, useRouteMatch } from 'react-router-dom'
 import 'styled-components/macro'
@@ -12,6 +12,7 @@ import { createPath } from '../../utils'
 import ItemEditScreen from '../ItemEditScreen/ItemEditScreen'
 import ProtectedRoute from '../ProtectedRoute/ProtectedRoute'
 import { fetchItemCategories } from '../../store/actions/itemCategories'
+import Helmet from 'react-helmet'
 
 const ItemScreenContainer = ({ fetchItem, id }) => {
   const dispatch = useDispatch()
@@ -56,26 +57,36 @@ const ItemScreenContainer = ({ fetchItem, id }) => {
 }
 
 export const ItemScreen = ({ request, resource, itemCategories }) => (
-  <Flex css={css({ my: 6 })}>
-    <Box css={{ flex: 3 }}>
-      <ItemDetails
-        request={request}
-        resource={resource}
-        itemCategories={itemCategories}
-      />
-    </Box>
-    <aside
-      css={css({
-        flexBasis: 'sidebar',
-        flexGrow: 0,
-        flexShrink: 1,
-        pl: 4,
-        minWidth: 0,
-      })}
-    >
-      <ItemSidebar resource={resource} itemCategories={itemCategories} />
-    </aside>
-  </Flex>
+  <Fragment>
+    <Helmet
+      title={[
+        resource ? resource.label : undefined,
+        'Social Sciences & Humanities Open Marketplace',
+      ]
+        .filter(Boolean)
+        .join(' | ')}
+    />
+    <Flex css={css({ my: 6 })}>
+      <Box css={{ flex: 3 }}>
+        <ItemDetails
+          request={request}
+          resource={resource}
+          itemCategories={itemCategories}
+        />
+      </Box>
+      <aside
+        css={css({
+          flexBasis: 'sidebar',
+          flexGrow: 0,
+          flexShrink: 1,
+          pl: 4,
+          minWidth: 0,
+        })}
+      >
+        <ItemSidebar resource={resource} itemCategories={itemCategories} />
+      </aside>
+    </Flex>
+  </Fragment>
 )
 
 export default ItemScreenContainer

src/components/Screen/Screen.js

 import css from '@styled-system/css'
-import React from 'react'
+import React, { Fragment } from 'react'
 import 'styled-components/macro'
 import SearchBar from '../../components/SearchBar/SearchBar'
 import Breadcrumbs from '../../elements/Breadcrumbs/Breadcrumbs'
 import Container from '../../elements/Container/Container'
 import Flex from '../../elements/Flex/Flex'
+import Helmet from 'react-helmet'
 
 const Screen = ({
   breadcrumbs,
@@ -12,18 +13,21 @@ const Screen = ({
   onSearchParamsChange,
   searchParams,
 }) => (
-  <Container
-    as={Flex}
-    css={css({ flexDirection: 'column', height: '100%', pb: 0 })}
-  >
-    <SearchBar
-      css={{ alignSelf: 'flex-end', width: '50%' }}
-      onSearchParamsChange={onSearchParamsChange}
-      {...searchParams}
-    />
-    <Breadcrumbs paths={breadcrumbs} />
-    {children}
-  </Container>
+  <Fragment>
+    <Helmet title={'Social Sciences & Humanities Open Marketplace'} />
+    <Container
+      as={Flex}
+      css={css({ flexDirection: 'column', height: '100%', pb: 0 })}
+    >
+      <SearchBar
+        css={{ alignSelf: 'flex-end', width: '50%' }}
+        onSearchParamsChange={onSearchParamsChange}
+        {...searchParams}
+      />
+      <Breadcrumbs paths={breadcrumbs} />
+      {children}
+    </Container>
+  </Fragment>
 )
 
 export default Screen

src/pages/Home/Home.js

-import React from 'react'
+import React, { Fragment } from 'react'
 import 'styled-components/macro'
 import HomeScreen from '../../components/HomeScreen/HomeScreen'
 import Container from '../../elements/Container/Container'
@@ -6,26 +6,32 @@ import Main from '../../elements/Main/Main'
 import BackgroundImage from '../../images/bg_home.jpg'
 import BackgroundImageHiDPI from '../../images/bg_home@2x.jpg'
 import { useNavigationFocusScroll } from '../../utils'
+import Helmet from 'react-helmet'
 
 const HomePage = () => {
   const focusRef = useNavigationFocusScroll()
 
   return (
-    <Main
-      css={{
-        backgroundImage: `url(${
-          window.devicePixelRatio >= 1 ? BackgroundImageHiDPI : BackgroundImage
-        })`,
-        backgroundSize: 'contain',
-        backgroundPosition: 'top center',
-        backgroundRepeat: 'no-repeat',
-      }}
-      ref={focusRef}
-    >
-      <Container>
-        <HomeScreen />
-      </Container>
-    </Main>
+    <Fragment>
+      <Helmet title={'Social Sciences & Humanities Open Marketplace'} />
+      <Main
+        css={{
+          backgroundImage: `url(${
+            window.devicePixelRatio >= 1
+              ? BackgroundImageHiDPI
+              : BackgroundImage
+          })`,
+          backgroundSize: 'contain',
+          backgroundPosition: 'top center',
+          backgroundRepeat: 'no-repeat',
+        }}
+        ref={focusRef}
+      >
+        <Container>
+          <HomeScreen />
+        </Container>
+      </Main>
+    </Fragment>
   )
 }
 

src/pages/NotFound/NotFound.js

-import React from 'react'
+import React, { Fragment } from 'react'
 import 'styled-components/macro'
 import Container from '../../elements/Container/Container'
 import Heading from '../../elements/Heading/Heading'
 import Main from '../../elements/Main/Main'
 import { useNavigationFocusScroll } from '../../utils'
+import Helmet from 'react-helmet'
 
 const NotFoundPage = () => {
   const focusRef = useNavigationFocusScroll()
 
   return (
-    <Main ref={focusRef}>
-      <Container>
-        <Heading>Not Found</Heading>
-      </Container>
-    </Main>
+    <Fragment>
+      <Helmet
+        title={'Not Found | Social Sciences & Humanities Open Marketplace'}
+      />
+      <Main ref={focusRef}>
+        <Container>
+          <Heading>Not Found</Heading>
+        </Container>
+      </Main>
+    </Fragment>
   )
 }
 

yarn.lock

@@ -13269,6 +13269,11 @@ react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-focus-lock@^1.18.3:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.19.1.tgz#2f3429793edaefe2d077121f973ce5a3c7a0651a"
@@ -13290,6 +13295,16 @@ react-helmet-async@^1.0.2:
     react-fast-compare "^2.0.4"
     shallowequal "^1.1.0"
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-hotkeys@2.0.0-pre4:
   version "2.0.0-pre4"
   resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0-pre4.tgz#a1c248a51bdba4282c36bf3204f80d58abc73333"
@@ -13469,6 +13484,11 @@ react-select@^3.0.0:
     react-input-autosize "^2.2.2"
     react-transition-group "^2.2.1"
+react-side-effect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
 react-sizeme@^2.5.2, react-sizeme@^2.6.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.10.tgz#9993dcb5e67fab94a8e5d078a0d3820609010f17"