granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor new and extract NewHead

Browse source
This commit is contained in:
Justin Edmund 2023-01-28 18:15:25 -08:00
parent 01af39fdfe
commit c930bc348b
3 changed files with 107 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/NewHead/index.tsx Normal file
View file

@ -0,0 +1,31 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
const NewHead = () => {
// Import translations
const { t } = useTranslation('common')
return (
<Head>
{/* HTML */}
<title>{t('page.titles.new')}</title>
<meta name="description" content={t('page.descriptions.new')} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta property="og:title" content={t('page.titles.new')} />
<meta property="og:description" content={t('page.descriptions.new')} />
<meta property="og:url" content={`https://app.granblue.team/`} />
<meta property="og:type" content="website" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content={t('page.titles.new')} />
<meta name="twitter:description" content={t('page.descriptions.new')} />
</Head>
)
}
export default NewHead

131
pages/new/index.tsx
View file

@ -1,11 +1,11 @@
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import clonedeep from 'lodash.clonedeep' import clonedeep from 'lodash.clonedeep'
import ErrorSection from '~components/ErrorSection'
import Party from '~components/Party' import Party from '~components/Party'
import NewHead from '~components/NewHead'
import api from '~utils/api' import api from '~utils/api'
import fetchLatestVersion from '~utils/fetchLatestVersion' import fetchLatestVersion from '~utils/fetchLatestVersion'
@ -13,24 +13,24 @@ import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken' import setUserToken from '~utils/setUserToken'
import { appState, initialAppState } from '~utils/appState' import { appState, initialAppState } from '~utils/appState'
import { groupWeaponKeys } from '~utils/groupWeaponKeys' import { groupWeaponKeys } from '~utils/groupWeaponKeys'
import { printError } from '~utils/reportError'
import type { AxiosError } from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys' import type { PageContextObj, ResponseStatus } from '~types'
interface Props { interface Props {
jobs: Job[] context?: PageContextObj
jobSkills: JobSkill[]
raids: Raid[]
sortedRaids: Raid[][]
weaponKeys: GroupedWeaponKeys
version: AppUpdate version: AppUpdate
error: boolean
status?: ResponseStatus
} }
const NewRoute: React.FC<Props> = (props: Props) => { const NewRoute: React.FC<Props> = ({
// Import translations context,
const { t } = useTranslation('common') version,
error,
status,
}: Props) => {
// Set up router // Set up router
const router = useRouter() const router = useRouter()
@ -40,8 +40,14 @@ const NewRoute: React.FC<Props> = (props: Props) => {
} }
useEffect(() => { useEffect(() => {
persistStaticData() if (context && context.jobs && context.jobSkills) {
}, [persistStaticData]) appState.raids = context.raids
appState.jobs = context.jobs
appState.jobSkills = context.jobSkills
appState.weaponKeys = context.weaponKeys
}
appState.version = version
}, [])
useEffect(() => { useEffect(() => {
// Clean state // Clean state
@ -53,37 +59,24 @@ const NewRoute: React.FC<Props> = (props: Props) => {
appState.party.editable = true appState.party.editable = true
}, []) }, [])
function persistStaticData() { // Methods: Page component rendering
appState.raids = props.raids function pageHead() {
appState.jobs = props.jobs if (context && context.user) return <NewHead />
appState.jobSkills = props.jobSkills
appState.weaponKeys = props.weaponKeys
appState.version = props.version
} }
return ( function pageError() {
<React.Fragment key={router.asPath}> if (status) return <ErrorSection status={status} />
<Head> else return <div />
{/* HTML */} }
<title>{t('page.titles.new')}</title>
<meta name="description" content={t('page.descriptions.new')} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */} if (context) {
<meta property="og:title" content={t('page.titles.new')} /> return (
<meta property="og:description" content={t('page.descriptions.new')} /> <React.Fragment key={router.asPath}>
<meta property="og:url" content={`https://app.granblue.team/`} /> {pageHead()}
<meta property="og:type" content="website" /> <Party new={true} raids={context.sortedRaids} pushHistory={callback} />
</React.Fragment>
{/* Twitter */} )
<meta name="twitter:card" content="summary_large_image" /> } else return pageError()
<meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content={t('page.titles.new')} />
<meta name="twitter:description" content={t('page.descriptions.new')} />
</Head>
<Party new={true} raids={props.sortedRaids} pushHistory={callback} />
</React.Fragment>
)
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -101,39 +94,63 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
// Set headers for server-side requests // Set headers for server-side requests
setUserToken(req, res) setUserToken(req, res)
try { // Fetch latest version
// Fetch latest version const version = await fetchLatestVersion()
const version = await fetchLatestVersion()
try {
// Fetch and organize raids // Fetch and organize raids
let { raids, sortedRaids } = await api.endpoints.raids let { raids, sortedRaids } = await api.endpoints.raids
.getAll() .getAll()
.then((response) => organizeRaids(response.data)) .then((response) => organizeRaids(response.data))
let jobs = await api.endpoints.jobs.getAll().then((response) => { // Fetch jobs and job skills
return response.data let jobs = await api.endpoints.jobs
}) .getAll()
.then((response) => response.data)
let jobSkills = await api.allJobSkills().then((response) => response.data) let jobSkills = await api.allJobSkills()
.then((response) => response.data)
// Fetch and organize weapon keys
let weaponKeys = await api.endpoints.weapon_keys let weaponKeys = await api.endpoints.weapon_keys
.getAll() .getAll()
.then((response) => groupWeaponKeys(response.data)) .then((response) => groupWeaponKeys(response.data))
// Consolidate data into context object
const context: PageContextObj = {
jobs: jobs,
jobSkills: jobSkills,
raids: raids,
sortedRaids: sortedRaids,
weaponKeys: weaponKeys,
}
// Pass to the page component as props
return { return {
props: { props: {
jobs: jobs, context: context,
jobSkills: jobSkills,
raids: raids,
sortedRaids: sortedRaids,
weaponKeys: weaponKeys,
version: version, version: version,
error: false,
...(await serverSideTranslations(locale, ['common', 'roadmap'])), ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
// Will be passed to the page component as props
}, },
} }
} catch (error) { } catch (error) {
printError(error, 'axios') // Extract the underlying Axios error
const axiosError = error as AxiosError
const response = axiosError.response
// Pass to the page component as props
return {
props: {
context: null,
error: true,
status: {
code: response?.status,
text: response?.statusText,
},
...(await serverSideTranslations(locale, ['common', 'roadmap'])),
},
}
} }
} }

3
pages/p/[party].tsx
View file

@ -124,7 +124,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
.getAll() .getAll()
.then((response) => response.data) .then((response) => response.data)
let jobSkills = await api.allJobSkills().then((response) => response.data) let jobSkills = await api.allJobSkills()
.then((response) => response.data)
// Fetch and organize weapon keys // Fetch and organize weapon keys
let weaponKeys = await api.endpoints.weapon_keys let weaponKeys = await api.endpoints.weapon_keys