4149: Changed naming BackToContentButton to BackToRegionButton and replaced useRef with useState

Author: bahaaTuffaha

…b/src/components/BackToContentButton.tsx web/src/components/BackToRegionButton.tsxweb/src/components/BackToContentButton.tsx renamed to web/src/components/BackToRegionButton.tsx web/src/components/BackToContentButton.tsx renamed to web/src/components/BackToRegionButton.tsx

@@ -1,6 +1,6 @@
 import Button from '@mui/material/Button'
 import { styled } from '@mui/material/styles'
-import React, { ReactElement, useRef } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router'
 
@@ -12,29 +12,27 @@ const StyledButton = styled(Button)({
   alignSelf: 'flex-start',
 })
 
-const historyIndex = (): number => window.history.state?.idx ?? 0
-
-const BackToContentButton = (): ReactElement | null => {
+const BackToRegionButton = (): ReactElement | null => {
   const navigate = useNavigate()
   const { mobile } = useDimensions()
   const { t } = useTranslation('layout')
+  const currentHistoryIndex = window.history.state?.idx ?? 0
 
-  // Index of the content page we arrived from so that we can navigate back even if the language changed.
-  const entryIndex = useRef(historyIndex()).current
+  // Initial history index to account for language changes or other user interactions on this page.
+  const [initialHistoryIndex] = useState(currentHistoryIndex)
 
-  if (!mobile || entryIndex === 0) {
+  if (!mobile || initialHistoryIndex === 0) {
     return null
   }
 
   return (
     <StyledButton
-      onClick={() => navigate(entryIndex - historyIndex() - 1)}
+      onClick={() => navigate(initialHistoryIndex - currentHistoryIndex - 1)}
       startIcon={<DirectionDependentBackIcon />}
-      color='inherit'
-      aria-label={t('backToContent')}>
+      color='inherit'>
       {t('backToContent')}
     </StyledButton>
   )
 }
 
-export default BackToContentButton
+export default BackToRegionButton

web/src/components/__tests__/BackToContentButton.spec.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { mockDimensions } from '../../__mocks__/useDimensions'
 import useDimensions from '../../hooks/useDimensions'
 import { renderWithRouterAndTheme } from '../../testing/render'
-import BackToContentButton from '../BackToContentButton'
+import BackToRegionButton from '../BackToRegionButton'
 
 const mockNavigate = jest.fn()
 jest.mock('react-i18next')
@@ -14,7 +14,7 @@ jest.mock('react-router', () => ({
   useNavigate: () => mockNavigate,
 }))
 
-describe('BackToContentButton', () => {
+describe('BackToRegionButton', () => {
   const { mocked } = jest
 
   const setHistoryIndex = (idx: number) => window.history.replaceState({ idx }, '')
@@ -26,7 +26,7 @@ describe('BackToContentButton', () => {
   })
 
   it('should render on mobile and navigate back on click', () => {
-    const { getByText } = renderWithRouterAndTheme(<BackToContentButton />)
+    const { getByText } = renderWithRouterAndTheme(<BackToRegionButton />)
 
     fireEvent.click(getByText('layout:backToContent'))
 
@@ -35,7 +35,7 @@ describe('BackToContentButton', () => {
 
   it('should render nothing when there is no history to go back to', () => {
     setHistoryIndex(0)
-    const { queryByText } = renderWithRouterAndTheme(<BackToContentButton />)
+    const { queryByText } = renderWithRouterAndTheme(<BackToRegionButton />)
 
     expect(queryByText('layout:backToContent')).toBeFalsy()
   })

web/src/routes/RegionsPage.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 
 import { createRegionsEndpoint } from 'shared/api'
 
-import BackToContentButton from '../components/BackToContentButton'
+import BackToRegionButton from '../components/BackToRegionButton'
 import FailureSwitcherWithHelmet from '../components/FailureSwitcherWithHelmet'
 import Footer from '../components/Footer'
 import GeneralHeader from '../components/GeneralHeader'
@@ -45,7 +45,7 @@ const RegionsPage = ({ languageCode }: RegionsPageProps): ReactElement => {
         </>
       }>
       <Helmet pageTitle={pageTitle} metaDescription={metaDescription} rootPage />
-      <BackToContentButton />
+      <BackToRegionButton />
       <RegionSelector regions={regions ?? []} language={languageCode} stickyTop={stickyTop} loading={isPending} />
     </Layout>
   )