Save current page to use for translations

This commit is contained in:
Justin Edmund 2023-01-25 23:22:29 -08:00
parent c20922165f
commit c75e5052ad

View file

@ -26,6 +26,7 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
const { t } = useTranslation('common') const { t } = useTranslation('common')
const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About) const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About)
const [currentPage, setCurrentPage] = useState('')
useEffect(() => { useEffect(() => {
const parts = router.asPath.split('/') const parts = router.asPath.split('/')
@ -34,31 +35,38 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
switch (tab) { switch (tab) {
case 'about': case 'about':
setCurrentTab(AboutTabs.About) setCurrentTab(AboutTabs.About)
setCurrentPage(parts[1])
break break
case 'updates': case 'updates':
setCurrentTab(AboutTabs.Updates) setCurrentTab(AboutTabs.Updates)
setCurrentPage(parts[1])
break break
case 'roadmap': case 'roadmap':
setCurrentTab(AboutTabs.Roadmap) setCurrentTab(AboutTabs.Roadmap)
setCurrentPage(parts[1])
break break
} }
}, [router.asPath]) }, [router.asPath])
function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) { function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
const parts = router.asPath.split('/')
const path = `/${event.target.value}` const path = `/${event.target.value}`
switch (event.target.value) { switch (event.target.value) {
case 'about': case 'about':
router.replace(path) router.replace(path)
setCurrentTab(AboutTabs.About) setCurrentTab(AboutTabs.About)
setCurrentPage(parts[1])
break break
case 'updates': case 'updates':
router.replace(path) router.replace(path)
setCurrentTab(AboutTabs.Updates) setCurrentTab(AboutTabs.Updates)
setCurrentPage(parts[1])
break break
case 'roadmap': case 'roadmap':
router.replace(path) router.replace(path)
setCurrentTab(AboutTabs.Roadmap) setCurrentTab(AboutTabs.Roadmap)
setCurrentPage(parts[1])
break break
default: default:
break break
@ -80,26 +88,32 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
<div id="About"> <div id="About">
<Head> <Head>
{/* HTML */} {/* HTML */}
<title>{t('page.titles.about')}</title> <title>{t(`page.titles.${currentPage}`)}</title>
<meta name="description" content={t('page.descriptions.about')} /> <meta
name="description"
content={t(`page.descriptions.${currentPage}`)}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */} {/* OpenGraph */}
<meta property="og:title" content={t('page.titles.about')} /> <meta property="og:title" content={t(`page.titles.${currentPage}`)} />
<meta <meta
property="og:description" property="og:description"
content={t('page.descriptions.about')} content={t('page.descriptions.about')}
/> />
<meta property="og:url" content="https://app.granblue.team/about" /> <meta
property="og:url"
content={`https://app.granblue.team/${currentPage}`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
{/* Twitter */} {/* Twitter */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" /> <meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content={t('page.titles.about')} /> <meta name="twitter:title" content={t(`page.titles.${currentPage}`)} />
<meta <meta
name="twitter:description" name="twitter:description"
content={t('page.descriptions.about')} content={t(`page.descriptions.${currentPage}`)}
/> />
</Head> </Head>