Refactor new and extract NewHead
This commit is contained in:
parent
01af39fdfe
commit
c930bc348b
3 changed files with 107 additions and 58 deletions
31
components/NewHead/index.tsx
Normal file
31
components/NewHead/index.tsx
Normal 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
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Head from 'next/head'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import clonedeep from 'lodash.clonedeep'
|
||||
|
||||
import ErrorSection from '~components/ErrorSection'
|
||||
import Party from '~components/Party'
|
||||
import NewHead from '~components/NewHead'
|
||||
|
||||
import api from '~utils/api'
|
||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
||||
|
|
@ -13,24 +13,24 @@ import organizeRaids from '~utils/organizeRaids'
|
|||
import setUserToken from '~utils/setUserToken'
|
||||
import { appState, initialAppState } from '~utils/appState'
|
||||
import { groupWeaponKeys } from '~utils/groupWeaponKeys'
|
||||
import { printError } from '~utils/reportError'
|
||||
|
||||
import type { AxiosError } from 'axios'
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
|
||||
import type { PageContextObj, ResponseStatus } from '~types'
|
||||
|
||||
interface Props {
|
||||
jobs: Job[]
|
||||
jobSkills: JobSkill[]
|
||||
raids: Raid[]
|
||||
sortedRaids: Raid[][]
|
||||
weaponKeys: GroupedWeaponKeys
|
||||
context?: PageContextObj
|
||||
version: AppUpdate
|
||||
error: boolean
|
||||
status?: ResponseStatus
|
||||
}
|
||||
|
||||
const NewRoute: React.FC<Props> = (props: Props) => {
|
||||
// Import translations
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
const NewRoute: React.FC<Props> = ({
|
||||
context,
|
||||
version,
|
||||
error,
|
||||
status,
|
||||
}: Props) => {
|
||||
// Set up router
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -40,8 +40,14 @@ const NewRoute: React.FC<Props> = (props: Props) => {
|
|||
}
|
||||
|
||||
useEffect(() => {
|
||||
persistStaticData()
|
||||
}, [persistStaticData])
|
||||
if (context && context.jobs && context.jobSkills) {
|
||||
appState.raids = context.raids
|
||||
appState.jobs = context.jobs
|
||||
appState.jobSkills = context.jobSkills
|
||||
appState.weaponKeys = context.weaponKeys
|
||||
}
|
||||
appState.version = version
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
// Clean state
|
||||
|
|
@ -53,37 +59,24 @@ const NewRoute: React.FC<Props> = (props: Props) => {
|
|||
appState.party.editable = true
|
||||
}, [])
|
||||
|
||||
function persistStaticData() {
|
||||
appState.raids = props.raids
|
||||
appState.jobs = props.jobs
|
||||
appState.jobSkills = props.jobSkills
|
||||
appState.weaponKeys = props.weaponKeys
|
||||
appState.version = props.version
|
||||
// Methods: Page component rendering
|
||||
function pageHead() {
|
||||
if (context && context.user) return <NewHead />
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment key={router.asPath}>
|
||||
<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" />
|
||||
function pageError() {
|
||||
if (status) return <ErrorSection status={status} />
|
||||
else return <div />
|
||||
}
|
||||
|
||||
{/* 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>
|
||||
<Party new={true} raids={props.sortedRaids} pushHistory={callback} />
|
||||
</React.Fragment>
|
||||
)
|
||||
if (context) {
|
||||
return (
|
||||
<React.Fragment key={router.asPath}>
|
||||
{pageHead()}
|
||||
<Party new={true} raids={context.sortedRaids} pushHistory={callback} />
|
||||
</React.Fragment>
|
||||
)
|
||||
} else return pageError()
|
||||
}
|
||||
|
||||
export const getServerSidePaths = async () => {
|
||||
|
|
@ -101,39 +94,63 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
|||
// Set headers for server-side requests
|
||||
setUserToken(req, res)
|
||||
|
||||
try {
|
||||
// Fetch latest version
|
||||
const version = await fetchLatestVersion()
|
||||
// Fetch latest version
|
||||
const version = await fetchLatestVersion()
|
||||
|
||||
try {
|
||||
// Fetch and organize raids
|
||||
let { raids, sortedRaids } = await api.endpoints.raids
|
||||
.getAll()
|
||||
.then((response) => organizeRaids(response.data))
|
||||
|
||||
let jobs = await api.endpoints.jobs.getAll().then((response) => {
|
||||
return response.data
|
||||
})
|
||||
// Fetch jobs and job skills
|
||||
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
|
||||
.getAll()
|
||||
.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 {
|
||||
props: {
|
||||
jobs: jobs,
|
||||
jobSkills: jobSkills,
|
||||
raids: raids,
|
||||
sortedRaids: sortedRaids,
|
||||
weaponKeys: weaponKeys,
|
||||
context: context,
|
||||
version: version,
|
||||
error: false,
|
||||
...(await serverSideTranslations(locale, ['common', 'roadmap'])),
|
||||
// Will be passed to the page component as props
|
||||
},
|
||||
}
|
||||
} 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'])),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -124,7 +124,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
|||
.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
|
||||
|
|
|
|||
Loading…
Reference in a new issue