diff --git a/components/NewHead/index.tsx b/components/NewHead/index.tsx
new file mode 100644
index 00000000..1864b7c4
--- /dev/null
+++ b/components/NewHead/index.tsx
@@ -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 (
+
+ {/* HTML */}
+ {t('page.titles.new')}
+
+
+
+ {/* OpenGraph */}
+
+
+
+
+
+ {/* Twitter */}
+
+
+
+
+
+ )
+}
+
+export default NewHead
diff --git a/pages/new/index.tsx b/pages/new/index.tsx
index b3c2c225..86907577 100644
--- a/pages/new/index.tsx
+++ b/pages/new/index.tsx
@@ -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) => {
- // Import translations
- const { t } = useTranslation('common')
-
+const NewRoute: React.FC = ({
+ context,
+ version,
+ error,
+ status,
+}: Props) => {
// Set up router
const router = useRouter()
@@ -40,8 +40,14 @@ const NewRoute: React.FC = (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) => {
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
}
- return (
-
-
- {/* HTML */}
- {t('page.titles.new')}
-
-
+ function pageError() {
+ if (status) return
+ else return
+ }
- {/* OpenGraph */}
-
-
-
-
-
- {/* Twitter */}
-
-
-
-
-
-
-
- )
+ if (context) {
+ return (
+
+ {pageHead()}
+
+
+ )
+ } 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'])),
+ },
+ }
}
}
diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx
index 0722556f..3a85a1fc 100644
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@@ -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