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

Refactor [party] page

Browse source 
This is a blueprint for all the other pages
This commit is contained in:
Justin Edmund 2023-01-28 17:20:44 -08:00
parent 6f51e21b58
commit 5cf6d3fff3
6 changed files with 199 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
components/PartyHead/index.tsx Normal file
View file

@ -0,0 +1,73 @@
import React from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import generateTitle from '~utils/generateTitle'
interface Props {
party: Party
meta: { [key: string]: string }
}
const PartyHead = ({ party, meta }: Props) => {
// Import translations
const { t } = useTranslation('common')
// Set up router
const router = useRouter()
const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
return (
<Head>
{/* HTML */}
<title>
{generateTitle(meta.element, party.user?.username, party.name)}
</title>
<meta
name="description"
content={t('page.descriptions.team', {
username: party.user?.username,
raidName: party.raid ? party.raid.name[locale] : '',
})}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta
property="og:title"
content={generateTitle(meta.element, party.user?.username, party.name)}
/>
<meta
property="og:description"
content={t('page.descriptions.team', {
username: party.user?.username,
raidName: party.raid ? party.raid.name[locale] : '',
})}
/>
<meta
property="og:url"
content={`https://app.granblue.team/p/${party.shortcode}`}
/>
<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={generateTitle(meta.element, party.user?.username, party.name)}
/>
<meta
name="twitter:description"
content={t('page.descriptions.team', {
username: party.user?.username,
raidName: party.raid ? party.raid.name[locale] : '',
})}
/>
</Head>
)
}
export default PartyHead

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

@ -1,43 +1,40 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Head from 'next/head'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Party from '~components/Party' import Party from '~components/Party'
import ErrorSection from '~components/ErrorSection'
import PartyHead from '~components/PartyHead'
import api from '~utils/api' import api from '~utils/api'
import generateTitle from '~utils/generateTitle' import elementEmoji from '~utils/elementEmoji'
import fetchLatestVersion from '~utils/fetchLatestVersion'
import organizeRaids from '~utils/organizeRaids' import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken' import setUserToken from '~utils/setUserToken'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { groupWeaponKeys } from '~utils/groupWeaponKeys' import { groupWeaponKeys } from '~utils/groupWeaponKeys'
import { GridType } from '~utils/enums'
import { printError } from '~utils/reportError'
import { GridType } from '~utils/enums'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys' import type { PageContextObj, ResponseStatus } from '~types'
import type { AxiosError } from 'axios'
interface Props { interface Props {
party: Party context?: PageContextObj
jobs: Job[] version: AppUpdate
jobSkills: JobSkill[] error: boolean
raids: Raid[] status?: ResponseStatus
sortedRaids: Raid[][]
weaponKeys: GroupedWeaponKeys
meta: { [key: string]: string }
} }
const PartyRoute: React.FC<Props> = (props: Props) => { const PartyRoute: React.FC<Props> = ({
// Import translations context,
const { t } = useTranslation('common') version,
error,
// Set up router status,
}: Props) => {
// Set up state to save selected tab and
// update when router changes
const router = useRouter() const router = useRouter()
const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
// URL state
const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon) const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)
useEffect(() => { useEffect(() => {
@ -57,86 +54,45 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
} }
}, [router.asPath]) }, [router.asPath])
// Static data // Set the initial data from props
useEffect(() => { useEffect(() => {
persistStaticData() if (context && !error) {
}, [persistStaticData]) appState.raids = context.raids
appState.jobs = context.jobs ? context.jobs : []
function persistStaticData() { appState.jobSkills = context.jobSkills ? context.jobSkills : []
appState.raids = props.raids appState.weaponKeys = context.weaponKeys
appState.jobs = props.jobs
appState.jobSkills = props.jobSkills
appState.weaponKeys = props.weaponKeys
} }
if (status && error) {
appState.status = status
}
appState.version = version
}, [])
// Methods: Page component rendering
function pageHead() {
if (context && context.party && context.meta)
return <PartyHead party={context.party} meta={context.meta} />
}
function pageError() {
if (status) return <ErrorSection status={status} />
else return <div />
}
if (context) {
return ( return (
<React.Fragment key={router.asPath}> <React.Fragment key={router.asPath}>
{pageHead()}
<Party <Party
team={props.party} team={context.party}
raids={props.sortedRaids} raids={context.sortedRaids}
selectedTab={selectedTab} selectedTab={selectedTab}
/> />
<Head>
{/* HTML */}
<title>
{generateTitle(
props.meta.element,
props.party.user?.username,
props.party.name
)}
</title>
<meta
name="description"
content={t('page.descriptions.team', {
username: props.party.user?.username,
raidName: props.party.raid ? props.party.raid.name[locale] : '',
})}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta
property="og:title"
content={generateTitle(
props.meta.element,
props.party.user?.username,
props.party.name
)}
/>
<meta
property="og:description"
content={t('page.descriptions.team', {
username: props.party.user?.username,
raidName: props.party.raid ? props.party.raid.name[locale] : '',
})}
/>
<meta
property="og:url"
content={`https://app.granblue.team/p/${props.party.shortcode}`}
/>
<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={generateTitle(
props.meta.element,
props.party.user?.username,
props.party.name
)}
/>
<meta
name="twitter:description"
content={t('page.descriptions.team', {
username: props.party.user?.username,
raidName: props.party.raid ? props.party.raid.name[locale] : '',
})}
/>
</Head>
</React.Fragment> </React.Fragment>
) )
} else return pageError()
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -154,47 +110,28 @@ 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)
function getElement(party?: Party) { // Fetch latest version
if (party) { const version = await fetchLatestVersion()
const mainhand = party.weapons.find((weapon) => weapon.mainhand)
if (mainhand && mainhand.object.element === 0) {
return mainhand.element
} else {
return mainhand?.object.element
}
} else {
return 0
}
}
function elementEmoji(party?: Party) {
const element = getElement(party)
if (element === 0) return '⚪'
else if (element === 1) return '🟢'
else if (element === 2) return '🔴'
else if (element === 3) return '🔵'
else if (element === 4) return '🟤'
else if (element === 5) return '🟣'
else if (element === 6) return '🟡'
else return '⚪'
}
try { try {
// 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))
// Fetch the party
let party: Party | undefined = undefined let party: Party | undefined = undefined
if (query.party) { if (query.party) {
let response = await api.endpoints.parties.getOne({ let response = await api.endpoints.parties.getOne({
@ -202,11 +139,11 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
}) })
party = response.data.party party = response.data.party
} else { } else {
console.log('No party code') console.error('No party code')
} }
return { // Consolidate data into context object
props: { const context: PageContextObj = {
party: party, party: party,
jobs: jobs, jobs: jobs,
jobSkills: jobSkills, jobSkills: jobSkills,
@ -216,12 +153,35 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
meta: { meta: {
element: elementEmoji(party), element: elementEmoji(party),
}, },
}
// Pass to the page component as props
return {
props: {
context: context,
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,
version: version,
status: {
code: response?.status,
text: response?.statusText,
},
...(await serverSideTranslations(locale, ['common', 'roadmap'])),
},
}
} }
} }

11
types/index.d.ts vendored
View file

@ -72,13 +72,16 @@ interface PerpetuityObject {
} }
interface PageContextObj { interface PageContextObj {
user?: User
teams?: Party[]
party?: Party party?: Party
jobs: Job[] jobs?: Job[]
jobSkills: JobSkill[] jobSkills?: JobSkill[]
raids: Raid[] raids: Raid[]
sortedRaids: Raid[][] sortedRaids: Raid[][]
weaponKeys: GroupedWeaponKeys weaponKeys?: GroupedWeaponKeys
meta: { [key: string]: string } pagination?: PaginationObject
meta?: { [key: string]: string }
} }
interface ResponseStatus { interface ResponseStatus {

14
utils/elementEmoji.tsx Normal file
View file

@ -0,0 +1,14 @@
import getElementForParty from './getElementForParty'
export default function elementEmoji(party?: Party) {
const element = party ? getElementForParty(party) : 0
if (element === 0) return '⚪'
else if (element === 1) return '🟢'
else if (element === 2) return '🔴'
else if (element === 3) return '🔵'
else if (element === 4) return '🟤'
else if (element === 5) return '🟣'
else if (element === 6) return '🟡'
else return '⚪'
}

2
utils/generateTitle.tsx
View file

@ -1,7 +1,7 @@
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
export default function generateTitle( export default function generateTitle(
element: string, element?: string,
username?: string, username?: string,
name?: string name?: string
) { ) {

8
utils/getElementForParty.tsx Normal file
View file

@ -0,0 +1,8 @@
export default function getElementForParty(party: Party) {
const mainhand = party.weapons.find((weapon) => weapon.mainhand)
if (mainhand && mainhand.object.element === 0) {
return mainhand.element
} else {
return mainhand?.object.element
}
}