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

Merge pull request #183 from jedmund/error-handling

Browse source 
Add error handling to pages
This commit is contained in:
Justin Edmund 2023-01-28 18:18:05 -08:00 committed by GitHub
commit eb1f68e7b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 870 additions and 492 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/ErrorSection/index.scss Normal file
View file

@ -0,0 +1,22 @@
section.Error {
align-items: center;
display: flex;
flex-direction: column;
gap: $unit;
margin: 0 auto;
max-width: 30vw;
justify-content: center;
height: 60vh;
text-align: center;
.Code {
color: var(--text-secondary);
font-size: $font-tiny;
font-weight: $bold;
}
.Button {
margin-top: $unit-2x;
width: fit-content;
}
}

48
components/ErrorSection/index.tsx Normal file
View file

@ -0,0 +1,48 @@
import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import { useTranslation } from 'next-i18next'
import Button from '~components/Button'
import { ResponseStatus } from '~types'
import './index.scss'
interface Props {
status: ResponseStatus
}
const ErrorSection = ({ status }: Props) => {
// Import translations
const { t } = useTranslation('common')
const [statusText, setStatusText] = useState('')
useEffect(() => {
setStatusText(status.text.replaceAll(' ', '_').toLowerCase())
}, [status.text])
const errorBody = () => {
return (
<>
<div className="Code">{status.code}</div>
<h1>{t(`errors.${statusText}.title`)}</h1>
<p>{t(`errors.${statusText}.description`)}</p>
</>
)
}
return (
<section className="Error">
{errorBody()}
{[401, 404].includes(status.code) ? (
<Link href="/new">
<Button text={t('errors.not_found.button')} />
</Link>
) : (
''
)}
</section>
)
}
export default ErrorSection

10
components/Header/index.tsx
View file

@ -10,7 +10,6 @@ import Link from 'next/link'
import api from '~utils/api' import api from '~utils/api'
import { accountState, initialAccountState } from '~utils/accountState' import { accountState, initialAccountState } from '~utils/accountState'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
import { import {
DropdownMenu, DropdownMenu,
@ -303,7 +302,7 @@ const Header = () => {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
{pageTitle()} {!appState.errorCode ? pageTitle() : ''}
</section> </section>
) )
} }
@ -313,10 +312,13 @@ const Header = () => {
<section> <section>
{router.route === '/p/[party]' && {router.route === '/p/[party]' &&
account.user && account.user &&
(!party.user || party.user.id !== account.user.id) (!party.user || party.user.id !== account.user.id) &&
!appState.errorCode
? saveButton() ? saveButton()
: ''} : ''}
{router.route === '/p/[party]' ? remixButton() : ''} {router.route === '/p/[party]' && !appState.errorCode
? remixButton()
: ''}
<DropdownMenu <DropdownMenu
open={rightMenuOpen} open={rightMenuOpen}
onOpenChange={handleRightMenuOpenChange} onOpenChange={handleRightMenuOpenChange}

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

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

59
components/ProfileHead/index.tsx Normal file
View file

@ -0,0 +1,59 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
interface Props {
user: User
}
const ProfileHead = ({ user }: Props) => {
// Import translations
const { t } = useTranslation('common')
return (
<Head>
{/* HTML */}
<title>{t('page.titles.profile', { username: user.username })}</title>
<meta
name="description"
content={t('page.descriptions.profile', {
username: user.username,
})}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta
property="og:title"
content={t('page.titles.profile', { username: user.username })}
/>
<meta
property="og:description"
content={t('page.descriptions.profile', {
username: user.username,
})}
/>
<meta
property="og:url"
content={`https://app.granblue.team/${user.username}`}
/>
<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.profile', { username: user.username })}
/>
<meta
name="twitter:description"
content={t('page.descriptions.profile', {
username: user.username,
})}
/>
</Head>
)
}
export default ProfileHead

25
components/SavedHead/index.tsx Normal file
View file

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

37
components/TeamsHead/index.tsx Normal file
View file

@ -0,0 +1,37 @@
import React from 'react'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
const TeamsHead = () => {
// Import translations
const { t } = useTranslation('common')
return (
<Head>
{/* HTML */}
<title>{t('page.titles.discover')}</title>
<meta name="description" content={t('page.descriptions.discover')} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta property="og:title" content={t('page.titles.discover')} />
<meta
property="og:description"
content={t('page.descriptions.discover')}
/>
<meta property="og:url" content="https://app.granblue.team/teams" />
<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.discover')} />
<meta
name="twitter:description"
content={t('page.descriptions.discover')}
/>
</Head>
)
}
export default TeamsHead

2
package.json
View file

@ -7,7 +7,7 @@
"scripts": { "scripts": {
"dev": "next dev -p 1234", "dev": "next dev -p 1234",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start -p 2345",
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {

240
pages/[username].tsx
View file

@ -1,42 +1,48 @@
import React, { useCallback, useEffect, useState } from 'react' import React, { useCallback, useEffect, useState } from 'react'
import Head from 'next/head' import InfiniteScroll from 'react-infinite-scroll-component'
import { queryTypes, useQueryState } from 'next-usequerystate' import { queryTypes, useQueryState } from 'next-usequerystate'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import InfiniteScroll from 'react-infinite-scroll-component'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import api from '~utils/api' import api from '~utils/api'
import setUserToken from '~utils/setUserToken'
import extractFilters from '~utils/extractFilters' import extractFilters from '~utils/extractFilters'
import fetchLatestVersion from '~utils/fetchLatestVersion' import fetchLatestVersion from '~utils/fetchLatestVersion'
import organizeRaids from '~utils/organizeRaids' import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken'
import useDidMountEffect from '~utils/useDidMountEffect' import useDidMountEffect from '~utils/useDidMountEffect'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { elements, allElement } from '~data/elements' import { elements, allElement } from '~data/elements'
import { emptyPaginationObject } from '~utils/emptyStates' import { emptyPaginationObject } from '~utils/emptyStates'
import { printError } from '~utils/reportError'
import GridRep from '~components/GridRep' import GridRep from '~components/GridRep'
import GridRepCollection from '~components/GridRepCollection' import GridRepCollection from '~components/GridRepCollection'
import ErrorSection from '~components/ErrorSection'
import FilterBar from '~components/FilterBar' import FilterBar from '~components/FilterBar'
import ProfileHead from '~components/ProfileHead'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { FilterObject, PaginationObject } from '~types' import type {
FilterObject,
PageContextObj,
PaginationObject,
ResponseStatus,
} from '~types'
import { AxiosError } from 'axios'
interface Props { interface Props {
user?: User context?: PageContextObj
teams?: Party[]
meta: PaginationObject
raids: Raid[]
sortedRaids: Raid[][]
version: AppUpdate version: AppUpdate
error: boolean
status?: ResponseStatus
} }
const ProfileRoute: React.FC<Props> = (props: Props) => { const ProfileRoute: React.FC<Props> = ({
context,
version,
error,
status,
}: Props) => {
// Set up router // Set up router
const router = useRouter() const router = useRouter()
const { username } = router.query const { username } = router.query
@ -99,11 +105,11 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
// Set the initial parties from props // Set the initial parties from props
useEffect(() => { useEffect(() => {
if (props.teams) { if (context && context.teams && context.pagination) {
setTotalPages(props.meta.totalPages) setTotalPages(context.pagination.totalPages)
setRecordCount(props.meta.count) setRecordCount(context.pagination.count)
replaceResults(props.meta.count, props.teams) replaceResults(context.pagination.count, context.teams)
appState.version = props.version appState.version = version
} }
setCurrentPage(1) setCurrentPage(1)
}, []) }, [])
@ -229,6 +235,16 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
router.push(`/p/${shortcode}`) router.push(`/p/${shortcode}`)
} }
// Methods: Page component rendering
function pageHead() {
if (context && context.user) return <ProfileHead user={context.user} />
}
function pageError() {
if (status) return <ErrorSection status={status} />
else return <div />
}
// TODO: Add save functions // TODO: Add save functions
function renderParties() { function renderParties() {
@ -250,95 +266,54 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
}) })
} }
return ( if (context) {
<div id="Profile"> return (
<Head> <div id="Profile">
{/* HTML */} {pageHead()}
<title> <FilterBar
{t('page.titles.profile', { username: props.user?.username })} onFilter={receiveFilters}
</title> scrolled={scrolled}
<meta element={element}
name="description" raidSlug={raidSlug ? raidSlug : undefined}
content={t('page.descriptions.profile', { recency={recency}
username: props.user?.username,
})}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{/* OpenGraph */}
<meta
property="og:title"
content={t('page.titles.profile', { username: props.user?.username })}
/>
<meta
property="og:description"
content={t('page.descriptions.profile', {
username: props.user?.username,
})}
/>
<meta
property="og:url"
content={`https://app.granblue.team/${props.user?.username}`}
/>
<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.profile', { username: props.user?.username })}
/>
<meta
name="twitter:description"
content={t('page.descriptions.profile', {
username: props.user?.username,
})}
/>
</Head>
<FilterBar
onFilter={receiveFilters}
scrolled={scrolled}
element={element}
raidSlug={raidSlug ? raidSlug : undefined}
recency={recency}
>
<div className="UserInfo">
<img
alt={props.user?.avatar.picture}
className={`profile ${props.user?.avatar.element}`}
srcSet={`/profile/${props.user?.avatar.picture}.png,
/profile/${props.user?.avatar.picture}@2x.png 2x`}
src={`/profile/${props.user?.avatar.picture}.png`}
/>
<h1>{props.user?.username}</h1>
</div>
</FilterBar>
<section>
<InfiniteScroll
dataLength={parties && parties.length > 0 ? parties.length : 0}
next={() => setCurrentPage(currentPage + 1)}
hasMore={totalPages > currentPage}
loader={
<div id="NotFound">
<h2>Loading...</h2>
</div>
}
> >
<GridRepCollection>{renderParties()}</GridRepCollection> <div className="UserInfo">
</InfiniteScroll> <img
alt={context.user?.avatar.picture}
{parties.length == 0 ? ( className={`profile ${context.user?.avatar.element}`}
<div id="NotFound"> srcSet={`/profile/${context.user?.avatar.picture}.png,
<h2>{t('teams.not_found')}</h2> /profile/${context.user?.avatar.picture}@2x.png 2x`}
src={`/profile/${context.user?.avatar.picture}.png`}
/>
<h1>{context.user?.username}</h1>
</div> </div>
) : ( </FilterBar>
''
)} <section>
</section> <InfiniteScroll
</div> dataLength={parties && parties.length > 0 ? parties.length : 0}
) next={() => setCurrentPage(currentPage + 1)}
hasMore={totalPages > currentPage}
loader={
<div id="NotFound">
<h2>Loading...</h2>
</div>
}
>
<GridRepCollection>{renderParties()}</GridRepCollection>
</InfiniteScroll>
{parties.length == 0 ? (
<div id="NotFound">
<h2>{t('teams.not_found')}</h2>
</div>
) : (
''
)}
</section>
</div>
)
} else return pageError()
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -356,10 +331,10 @@ 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()
@ -372,9 +347,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
} }
// Set up empty variables // Set up empty variables
let user: User | null = null let user: User | undefined = undefined
let teams: Party[] | null = null let teams: Party[] | undefined = undefined
let meta: PaginationObject = emptyPaginationObject let pagination: PaginationObject = emptyPaginationObject
// Perform a request only if we received a username // Perform a request only if we received a username
if (query.username) { if (query.username) {
@ -389,25 +364,46 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
if (response.data.profile.parties) teams = response.data.profile.parties if (response.data.profile.parties) teams = response.data.profile.parties
else teams = [] else teams = []
meta.count = response.data.meta.count pagination.count = response.data.meta.count
meta.totalPages = response.data.meta.total_pages pagination.totalPages = response.data.meta.total_pages
meta.perPage = response.data.meta.per_page pagination.perPage = response.data.meta.per_page
} }
// Consolidate data into context object
const context: PageContextObj = {
user: user,
teams: teams,
raids: raids,
sortedRaids: sortedRaids,
pagination: pagination,
}
// Pass to the page component as props
return { return {
props: { props: {
user: user, context: context,
teams: teams,
meta: meta,
raids: raids,
sortedRaids: sortedRaids,
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'])),
},
}
} }
} }

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'])),
},
}
} }
} }

235
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 : []
appState.jobSkills = context.jobSkills ? context.jobSkills : []
appState.weaponKeys = context.weaponKeys
}
function persistStaticData() { if (status && error) {
appState.raids = props.raids appState.status = status
appState.jobs = props.jobs }
appState.jobSkills = props.jobSkills
appState.weaponKeys = props.weaponKeys appState.version = version
}, [])
// Methods: Page component rendering
function pageHead() {
if (context && context.party && context.meta)
return <PartyHead party={context.party} meta={context.meta} />
} }
return ( function pageError() {
<React.Fragment key={router.asPath}> if (status) return <ErrorSection status={status} />
<Party else return <div />
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" />
{/* OpenGraph */} if (context) {
<meta return (
property="og:title" <React.Fragment key={router.asPath}>
content={generateTitle( {pageHead()}
props.meta.element, <Party
props.party.user?.username, team={context.party}
props.party.name raids={context.sortedRaids}
)} selectedTab={selectedTab}
/> />
<meta </React.Fragment>
property="og:description" )
content={t('page.descriptions.team', { } else return pageError()
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>
)
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -154,47 +110,29 @@ 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,26 +140,49 @@ 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')
} }
// 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 { return {
props: { props: {
party: party, context: context,
jobs: jobs, version: version,
jobSkills: jobSkills, error: false,
raids: raids,
sortedRaids: sortedRaids,
weaponKeys: weaponKeys,
meta: {
element: elementEmoji(party),
},
...(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'])),
},
}
} }
} }

184
pages/saved.tsx
View file

@ -1,11 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react' import React, { useCallback, useEffect, useState } from 'react'
import Head from 'next/head' import InfiniteScroll from 'react-infinite-scroll-component'
import { queryTypes, useQueryState } from 'next-usequerystate' import { queryTypes, useQueryState } from 'next-usequerystate'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import InfiniteScroll from 'react-infinite-scroll-component'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import clonedeep from 'lodash.clonedeep' import clonedeep from 'lodash.clonedeep'
@ -18,24 +15,35 @@ import useDidMountEffect from '~utils/useDidMountEffect'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { elements, allElement } from '~data/elements' import { elements, allElement } from '~data/elements'
import { emptyPaginationObject } from '~utils/emptyStates' import { emptyPaginationObject } from '~utils/emptyStates'
import { printError } from '~utils/reportError'
import ErrorSection from '~components/ErrorSection'
import GridRep from '~components/GridRep' import GridRep from '~components/GridRep'
import GridRepCollection from '~components/GridRepCollection' import GridRepCollection from '~components/GridRepCollection'
import FilterBar from '~components/FilterBar' import FilterBar from '~components/FilterBar'
import SavedHead from '~components/SavedHead'
import type { AxiosError } from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { FilterObject, PaginationObject } from '~types' import type {
FilterObject,
PageContextObj,
PaginationObject,
ResponseStatus,
} from '~types'
interface Props { interface Props {
teams?: Party[] context?: PageContextObj
meta: PaginationObject
raids: Raid[]
sortedRaids: Raid[][]
version: AppUpdate version: AppUpdate
error: boolean
status?: ResponseStatus
} }
const SavedRoute: React.FC<Props> = (props: Props) => { const SavedRoute: React.FC<Props> = ({
context,
version,
error,
status,
}: Props) => {
// Set up router // Set up router
const router = useRouter() const router = useRouter()
@ -97,11 +105,11 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
// Set the initial parties from props // Set the initial parties from props
useEffect(() => { useEffect(() => {
if (props.teams) { if (context && context.teams && context.pagination) {
setTotalPages(props.meta.totalPages) setTotalPages(context.pagination.totalPages)
setRecordCount(props.meta.count) setRecordCount(context.pagination.count)
replaceResults(props.meta.count, props.teams) replaceResults(context.pagination.count, context.teams)
appState.version = props.version appState.version = version
} }
setCurrentPage(1) setCurrentPage(1)
}, []) }, [])
@ -269,6 +277,16 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
router.push(`/p/${shortcode}`) router.push(`/p/${shortcode}`)
} }
// Methods: Page component rendering
function pageHead() {
if (context && context.user) return <SavedHead />
}
function pageError() {
if (status) return <ErrorSection status={status} />
else return <div />
}
function renderParties() { function renderParties() {
return parties.map((party, i) => { return parties.map((party, i) => {
return ( return (
@ -291,55 +309,45 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
}) })
} }
return ( if (context) {
<div id="Teams"> return (
<Head> <div id="Teams">
<title>{t('page.titles.saved')}</title> {pageHead()}
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <FilterBar
onFilter={receiveFilters}
<meta property="og:title" content={t('page.titles.saved')} /> scrolled={scrolled}
<meta property="og:url" content="https://app.granblue.team/saved" /> element={element}
<meta property="og:type" content="website" /> raidSlug={raidSlug ? raidSlug : undefined}
recency={recency}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="app.granblue.team" />
<meta name="twitter:title" content={t('page.titles.saved')} />
</Head>
<FilterBar
onFilter={receiveFilters}
scrolled={scrolled}
element={element}
raidSlug={raidSlug ? raidSlug : undefined}
recency={recency}
>
<h1>{t('saved.title')}</h1>
</FilterBar>
<section>
<InfiniteScroll
dataLength={parties && parties.length > 0 ? parties.length : 0}
next={() => setCurrentPage(currentPage + 1)}
hasMore={totalPages > currentPage}
loader={
<div id="NotFound">
<h2>Loading...</h2>
</div>
}
> >
<GridRepCollection>{renderParties()}</GridRepCollection> <h1>{t('saved.title')}</h1>
</InfiniteScroll> </FilterBar>
{parties.length == 0 ? ( <section>
<div id="NotFound"> <InfiniteScroll
<h2>{t('saved.not_found')}</h2> dataLength={parties && parties.length > 0 ? parties.length : 0}
</div> next={() => setCurrentPage(currentPage + 1)}
) : ( hasMore={totalPages > currentPage}
'' loader={
)} <div id="NotFound">
</section> <h2>Loading...</h2>
</div> </div>
) }
>
<GridRepCollection>{renderParties()}</GridRepCollection>
</InfiniteScroll>
{parties.length == 0 ? (
<div id="NotFound">
<h2>{t('saved.not_found')}</h2>
</div>
) : (
''
)}
</section>
</div>
)
} else return pageError()
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -357,10 +365,10 @@ 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()
@ -373,32 +381,52 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
} }
// Set up empty variables // Set up empty variables
let teams: Party[] | null = null let teams: Party[] | undefined = undefined
let meta: PaginationObject = emptyPaginationObject let pagination: PaginationObject = emptyPaginationObject
// Fetch initial set of saved parties // Fetch initial set of saved parties
const response = await api.savedTeams(params) const response = await api.savedTeams(params)
// Assign values to pass to props // Assign values to pass to props
teams = response.data.results teams = response.data.results
meta.count = response.data.meta.count pagination.count = response.data.meta.count
meta.totalPages = response.data.meta.total_pages pagination.totalPages = response.data.meta.total_pages
meta.perPage = response.data.meta.per_page pagination.perPage = response.data.meta.per_page
// Consolidate data into context object
const context: PageContextObj = {
teams: teams,
raids: raids,
sortedRaids: sortedRaids,
pagination: pagination,
}
// Pass to the page component as props
return { return {
props: { props: {
teams: teams, context: context,
meta: meta,
raids: raids,
sortedRaids: sortedRaids,
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'])),
},
}
} }
} }
export default SavedRoute export default SavedRoute

194
pages/teams.tsx
View file

@ -1,11 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react' import React, { useCallback, useEffect, useState } from 'react'
import Head from 'next/head' import InfiniteScroll from 'react-infinite-scroll-component'
import { queryTypes, useQueryState } from 'next-usequerystate' import { queryTypes, useQueryState } from 'next-usequerystate'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import InfiniteScroll from 'react-infinite-scroll-component'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import clonedeep from 'lodash.clonedeep' import clonedeep from 'lodash.clonedeep'
@ -18,23 +15,35 @@ import useDidMountEffect from '~utils/useDidMountEffect'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import { elements, allElement } from '~data/elements' import { elements, allElement } from '~data/elements'
import { emptyPaginationObject } from '~utils/emptyStates' import { emptyPaginationObject } from '~utils/emptyStates'
import { printError } from '~utils/reportError'
import ErrorSection from '~components/ErrorSection'
import GridRep from '~components/GridRep' import GridRep from '~components/GridRep'
import GridRepCollection from '~components/GridRepCollection' import GridRepCollection from '~components/GridRepCollection'
import FilterBar from '~components/FilterBar' import FilterBar from '~components/FilterBar'
import TeamsHead from '~components/TeamsHead'
import type { AxiosError } from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next'
import type { FilterObject, PaginationObject } from '~types' import type {
FilterObject,
PageContextObj,
PaginationObject,
ResponseStatus,
} from '~types'
interface Props { interface Props {
teams?: Party[] context?: PageContextObj
meta: PaginationObject
sortedRaids: Raid[][]
version: AppUpdate version: AppUpdate
error: boolean
status?: ResponseStatus
} }
const TeamsRoute: React.FC<Props> = (props: Props) => { const TeamsRoute: React.FC<Props> = ({
context,
version,
error,
status,
}: Props) => {
// Set up router // Set up router
const router = useRouter() const router = useRouter()
@ -96,11 +105,11 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
// Set the initial parties from props // Set the initial parties from props
useEffect(() => { useEffect(() => {
if (props.teams) { if (context && context.teams && context.pagination) {
setTotalPages(props.meta.totalPages) setTotalPages(context.pagination.totalPages)
setRecordCount(props.meta.count) setRecordCount(context.pagination.count)
replaceResults(props.meta.count, props.teams) replaceResults(context.pagination.count, context.teams)
appState.version = props.version appState.version = version
} }
setCurrentPage(1) setCurrentPage(1)
}, []) }, [])
@ -268,6 +277,16 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
router.push(`/p/${shortcode}`) router.push(`/p/${shortcode}`)
} }
// Methods: Page component rendering
function pageHead() {
if (context && context.user) return <TeamsHead />
}
function pageError() {
if (status) return <ErrorSection status={status} />
else return <div />
}
function renderParties() { function renderParties() {
return parties.map((party, i) => { return parties.map((party, i) => {
return ( return (
@ -290,67 +309,45 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
}) })
} }
return ( if (context) {
<div id="Teams"> return (
<Head> <div id="Teams">
{/* HTML */} {pageHead()}
<title>{t('page.titles.discover')}</title> <FilterBar
<meta name="description" content={t('page.descriptions.discover')} /> onFilter={receiveFilters}
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> scrolled={scrolled}
element={element}
{/* OpenGraph */} raidSlug={raidSlug ? raidSlug : undefined}
<meta property="og:title" content={t('page.titles.discover')} /> recency={recency}
<meta
property="og:description"
content={t('page.descriptions.discover')}
/>
<meta property="og:url" content="https://app.granblue.team/teams" />
<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.discover')} />
<meta
name="twitter:description"
content={t('page.descriptions.discover')}
/>
</Head>
<FilterBar
onFilter={receiveFilters}
scrolled={scrolled}
element={element}
raidSlug={raidSlug ? raidSlug : undefined}
recency={recency}
>
<h1>{t('teams.title')}</h1>
</FilterBar>
<section>
<InfiniteScroll
dataLength={parties && parties.length > 0 ? parties.length : 0}
next={() => setCurrentPage(currentPage + 1)}
hasMore={totalPages > currentPage}
loader={
<div id="NotFound">
<h2>Loading...</h2>
</div>
}
> >
<GridRepCollection>{renderParties()}</GridRepCollection> <h1>{t('teams.title')}</h1>
</InfiniteScroll> </FilterBar>
{parties.length == 0 ? ( <section>
<div id="NotFound"> <InfiniteScroll
<h2>{t('teams.not_found')}</h2> dataLength={parties && parties.length > 0 ? parties.length : 0}
</div> next={() => setCurrentPage(currentPage + 1)}
) : ( hasMore={totalPages > currentPage}
'' loader={
)} <div id="NotFound">
</section> <h2>Loading...</h2>
</div> </div>
) }
>
<GridRepCollection>{renderParties()}</GridRepCollection>
</InfiniteScroll>
{parties.length == 0 ? (
<div id="NotFound">
<h2>{t('teams.not_found')}</h2>
</div>
) : (
''
)}
</section>
</div>
)
} else return pageError()
} }
export const getServerSidePaths = async () => { export const getServerSidePaths = async () => {
@ -368,10 +365,10 @@ 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)
// Fetch latest version
const version = await fetchLatestVersion()
try { try {
// Fetch latest version
const version = await fetchLatestVersion()
// Fetch and organize raids // Fetch and organize raids
let { raids, sortedRaids } = await api.endpoints.raids let { raids, sortedRaids } = await api.endpoints.raids
.getAll() .getAll()
@ -384,31 +381,52 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
} }
// Set up empty variables // Set up empty variables
let teams: Party[] | null = null let teams: Party[] | undefined = undefined
let meta: PaginationObject = emptyPaginationObject let pagination: PaginationObject = emptyPaginationObject
// Fetch initial set of parties // Fetch initial set of parties
const response = await api.endpoints.parties.getAll(params) const response = await api.endpoints.parties.getAll(params)
// Assign values to pass to props // Assign values to pass to props
teams = response.data.results teams = response.data.results
meta.count = response.data.meta.count pagination.count = response.data.meta.count
meta.totalPages = response.data.meta.total_pages pagination.totalPages = response.data.meta.total_pages
meta.perPage = response.data.meta.per_page pagination.perPage = response.data.meta.per_page
// Consolidate data into context object
const context: PageContextObj = {
teams: teams,
raids: raids,
sortedRaids: sortedRaids,
pagination: pagination,
}
// Pass to the page component as props
return { return {
props: { props: {
teams: teams, context: context,
meta: meta,
raids: raids,
sortedRaids: sortedRaids,
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'])),
},
}
} }
} }

15
public/locales/en/common.json
View file

@ -54,9 +54,6 @@
}, },
"remove": "Remove from grid" "remove": "Remove from grid"
}, },
"errors": {
"unauthorized": "You don't have permission to perform that action"
},
"filters": { "filters": {
"labels": { "labels": {
"element": "Element", "element": "Element",
@ -94,6 +91,18 @@
"light": "Light" "light": "Light"
} }
}, },
"errors": {
"internal_server_error": {
"title": "Internal Server Error",
"description": "The server reported a problem that we couldn't automatically recover from. Please try your request again."
},
"not_found": {
"title": "Not found",
"description": "The page you're looking for couldn't be found",
"button": "Create a new party"
},
"unauthorized": "You don't have permission to perform that action"
},
"proficiencies": { "proficiencies": {
"sabre": "Sabre", "sabre": "Sabre",
"dagger": "Dagger", "dagger": "Dagger",

9
public/locales/ja/common.json
View file

@ -63,6 +63,15 @@
} }
}, },
"errors": { "errors": {
"internal_server_error": {
"title": "サーバーエラー",
"description": "サーバーから届いたエラーは自動的に復されなかったため、再びリクエストを行なってください"
},
"not_found": {
"title": "見つかりませんでした",
"description": "探しているページは見つかりませんでした",
"button": "新しい編成を作成"
},
"unauthorized": "行ったアクションを実行する権限がありません" "unauthorized": "行ったアクションを実行する権限がありません"
}, },
"header": { "header": {

1
styles/globals.scss
View file

@ -75,6 +75,7 @@ h2,
h3, h3,
p { p {
color: var(--text-primary); color: var(--text-primary);
line-height: 1.3;
} }
h1 { h1 {

18
types/index.d.ts vendored
View file

@ -70,3 +70,21 @@ interface PerpetuityObject {
perpetuity: boolean perpetuity: boolean
} }
} }
interface PageContextObj {
user?: User
teams?: Party[]
party?: Party
jobs?: Job[]
jobSkills?: JobSkill[]
raids: Raid[]
sortedRaids: Raid[][]
weaponKeys?: GroupedWeaponKeys
pagination?: PaginationObject
meta?: { [key: string]: string }
}
interface ResponseStatus {
code: number
text: string
}

4
utils/appState.tsx
View file

@ -1,5 +1,5 @@
import { proxy } from 'valtio' import { proxy } from 'valtio'
import { JobSkillObject } from '~types' import { JobSkillObject, ResponseStatus } from '~types'
import { GroupedWeaponKeys } from './groupWeaponKeys' import { GroupedWeaponKeys } from './groupWeaponKeys'
const emptyJob: Job = { const emptyJob: Job = {
@ -86,6 +86,7 @@ interface AppState {
jobSkills: JobSkill[] jobSkills: JobSkill[]
weaponKeys: GroupedWeaponKeys weaponKeys: GroupedWeaponKeys
version: AppUpdate version: AppUpdate
status?: ResponseStatus
} }
export const initialAppState: AppState = { export const initialAppState: AppState = {
@ -156,6 +157,7 @@ export const initialAppState: AppState = {
update_type: '', update_type: '',
updated_at: '', updated_at: '',
}, },
status: undefined,
} }
export const appState = proxy(initialAppState) export const appState = proxy(initialAppState)

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
}
}