From 57359333e7902d85b9872e0e93064494e4326be7 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 26 Dec 2022 05:55:19 -0800 Subject: [PATCH] Add title/description to new page --- pages/new/index.tsx | 29 ++++++++++++++++++++- pages/p/[party].tsx | 47 +++++++++++++++++++---------------- public/locales/en/common.json | 6 +++-- public/locales/ja/common.json | 6 +++-- utils/generateTitle.tsx | 20 +++++++++++++++ 5 files changed, 81 insertions(+), 27 deletions(-) create mode 100644 utils/generateTitle.tsx diff --git a/pages/new/index.tsx b/pages/new/index.tsx index 0fe8bb7e..33fb515e 100644 --- a/pages/new/index.tsx +++ b/pages/new/index.tsx @@ -1,10 +1,13 @@ import React, { useEffect } from 'react' +import Head from 'next/head' +import { useTranslation } from 'next-i18next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import Party from '~components/Party' import { appState } from '~utils/appState' import { groupWeaponKeys } from '~utils/groupWeaponKeys' +import generateTitle from '~utils/generateTitle' import organizeRaids from '~utils/organizeRaids' import setUserToken from '~utils/setUserToken' import api from '~utils/api' @@ -21,6 +24,9 @@ interface Props { } const NewRoute: React.FC = (props: Props) => { + // Import translations + const { t } = useTranslation('common') + function callback(path: string) { // This is scuffed, how do we do this natively? window.history.replaceState(null, `Grid Tool`, `${path}`) @@ -37,7 +43,28 @@ const NewRoute: React.FC = (props: Props) => { appState.weaponKeys = props.weaponKeys } - return + return ( + + + {/* HTML */} + {t('page.titles.new')} + + + {/* OpenGraph */} + + + + + + {/* Twitter */} + + + + + + + + ) } export const getServerSidePaths = async () => { diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx index 63da88bf..2186dc7f 100644 --- a/pages/p/[party].tsx +++ b/pages/p/[party].tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react' import Head from 'next/head' +import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' @@ -7,15 +8,13 @@ import Party from '~components/Party' import { appState } from '~utils/appState' import { groupWeaponKeys } from '~utils/groupWeaponKeys' +import generateTitle from '~utils/generateTitle' import organizeRaids from '~utils/organizeRaids' import setUserToken from '~utils/setUserToken' import api from '~utils/api' import type { NextApiRequest, NextApiResponse } from 'next' import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys' -import { useSnapshot } from 'valtio' -import { raidGroups } from '~utils/raidGroups' -import { useRouter } from 'next/router' interface Props { party: Party @@ -47,28 +46,18 @@ const PartyRoute: React.FC = (props: Props) => { appState.weaponKeys = props.weaponKeys } - function generateTitle() { - const teamName = - props.party && props.party.name ? props.party.name : t('no_title') - const username = props.party - ? `@${props.party.user.username}` - : t('no_user') - - const title = t('page.titles.team', { - username: username, - teamName: teamName, - emoji: props.meta.element, - }) - - return title - } - return ( {/* HTML */} - {generateTitle()} + + {generateTitle( + props.meta.element, + props.party.user?.username, + props.party.name + )} + = (props: Props) => { /> {/* OpenGraph */} - + = (props: Props) => { {/* Twitter */} - +