Refactor [party] page

This is a blueprint for all the other pages
2023-01-28 17:20:44 -08:00 · 2023-01-28 17:20:44 -08:00 · 5cf6d3fff3
commit 5cf6d3fff3
parent 6f51e21b58
6 changed files with 199 additions and 141 deletions
--- a/components/PartyHead/index.tsx
+++ b/components/PartyHead/index.tsx
@ -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
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@ -1,43 +1,40 @@
 import React, { useEffect, useState } from 'react'
-import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

 import Party from '~components/Party'
+import ErrorSection from '~components/ErrorSection'
+import PartyHead from '~components/PartyHead'

 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 setUserToken from '~utils/setUserToken'
 import { appState } from '~utils/appState'
 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 { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
+import type { PageContextObj, ResponseStatus } from '~types'
+import type { AxiosError } from 'axios'

 interface Props {
-  party: Party
-  jobs: Job[]
-  jobSkills: JobSkill[]
-  raids: Raid[]
-  sortedRaids: Raid[][]
-  weaponKeys: GroupedWeaponKeys
-  meta: { [key: string]: string }
+  context?: PageContextObj
+  version: AppUpdate
+  error: boolean
+  status?: ResponseStatus
 }

-const PartyRoute: React.FC<Props> = (props: Props) => {
-  // Import translations
-  const { t } = useTranslation('common')
-
-  // Set up router
+const PartyRoute: React.FC<Props> = ({
+  context,
+  version,
+  error,
+  status,
+}: Props) => {
+  // Set up state to save selected tab and
+  // update when router changes
  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
-
-  // URL state
  const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)

  useEffect(() => {
@ -57,86 +54,45 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
    }
  }, [router.asPath])

-  // Static data
+  // Set the initial data from props
  useEffect(() => {
-    persistStaticData()
-  }, [persistStaticData])
+    if (context && !error) {
+      appState.raids = context.raids
+      appState.jobs = context.jobs ? context.jobs : []
+      appState.jobSkills = context.jobSkills ? context.jobSkills : []
+      appState.weaponKeys = context.weaponKeys
+    }

-  function persistStaticData() {
-    appState.raids = props.raids
-    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} />
  }

-  return (
-    <React.Fragment key={router.asPath}>
-      <Party
-        team={props.party}
-        raids={props.sortedRaids}
-        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" />
+  function pageError() {
+    if (status) return <ErrorSection status={status} />
+    else return <div />
+  }

-        {/* OpenGraph */}
-        <meta
-          property="og:title"
-          content={generateTitle(
-            props.meta.element,
-            props.party.user?.username,
-            props.party.name
-          )}
+  if (context) {
+    return (
+      <React.Fragment key={router.asPath}>
+        {pageHead()}
+        <Party
+          team={context.party}
+          raids={context.sortedRaids}
+          selectedTab={selectedTab}
        />
-        <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 () => {
@ -154,47 +110,28 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
  // Set headers for server-side requests
  setUserToken(req, res)

-  function getElement(party?: Party) {
-    if (party) {
-      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 '⚪'
-  }
+  // 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)

+    // Fetch and organize weapon keys
    let weaponKeys = await api.endpoints.weapon_keys
      .getAll()
      .then((response) => groupWeaponKeys(response.data))

+    // Fetch the party
    let party: Party | undefined = undefined
    if (query.party) {
      let response = await api.endpoints.parties.getOne({
@ -202,26 +139,49 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
      })
      party = response.data.party
    } else {
-      console.log('No party code')
+      console.error('No party code')
    }

+    // Consolidate data into context object
+    const context: PageContextObj = {
+      party: party,
+      jobs: jobs,
+      jobSkills: jobSkills,
+      raids: raids,
+      sortedRaids: sortedRaids,
+      weaponKeys: weaponKeys,
+      meta: {
+        element: elementEmoji(party),
+      },
+    }
+
+    // Pass to the page component as props
    return {
      props: {
-        party: party,
-        jobs: jobs,
-        jobSkills: jobSkills,
-        raids: raids,
-        sortedRaids: sortedRaids,
-        weaponKeys: weaponKeys,
-        meta: {
-          element: elementEmoji(party),
-        },
+        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,
+        version: version,
+        status: {
+          code: response?.status,
+          text: response?.statusText,
+        },
+        ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
+      },
+    }
  }
 }

--- a/types/index.d.ts
+++ b/types/index.d.ts
@ -72,13 +72,16 @@ interface PerpetuityObject {
 }

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

 interface ResponseStatus {
--- a/utils/elementEmoji.tsx
+++ b/utils/elementEmoji.tsx
@ -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 '⚪'
+}
--- a/utils/generateTitle.tsx
+++ b/utils/generateTitle.tsx
@ -1,7 +1,7 @@
 import { useTranslation } from 'next-i18next'

 export default function generateTitle(
-  element: string,
+  element?: string,
  username?: string,
  name?: string
 ) {
--- a/utils/getElementForParty.tsx
+++ b/utils/getElementForParty.tsx
@ -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
+  }
+}