Merge pull request #183 from jedmund/error-handling
Add error handling to pages
This commit is contained in:
GitHub
commit
eb1f68e7b5
22 changed files with 870 additions and 492 deletions
22
components/ErrorSection/index.scss
Normal file
22
components/ErrorSection/index.scss
Normal 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
48
components/ErrorSection/index.tsx
Normal 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,7 +10,6 @@ import Link from 'next/link'
|
|||
import api from '~utils/api'
|
||||
import { accountState, initialAccountState } from '~utils/accountState'
|
||||
import { appState } from '~utils/appState'
|
||||
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
|
|
@ -303,7 +302,7 @@ const Header = () => {
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{pageTitle()}
|
||||
{!appState.errorCode ? pageTitle() : ''}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -313,10 +312,13 @@ const Header = () => {
|
|||
<section>
|
||||
{router.route === '/p/[party]' &&
|
||||
account.user &&
|
||||
(!party.user || party.user.id !== account.user.id)
|
||||
(!party.user || party.user.id !== account.user.id) &&
|
||||
!appState.errorCode
|
||||
? saveButton()
|
||||
: ''}
|
||||
{router.route === '/p/[party]' ? remixButton() : ''}
|
||||
{router.route === '/p/[party]' && !appState.errorCode
|
||||
? remixButton()
|
||||
: ''}
|
||||
<DropdownMenu
|
||||
open={rightMenuOpen}
|
||||
onOpenChange={handleRightMenuOpenChange}
|
||||
|
|
|
|||
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
|
||||
73
components/PartyHead/index.tsx
Normal file
73
components/PartyHead/index.tsx
Normal 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
59
components/ProfileHead/index.tsx
Normal 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
25
components/SavedHead/index.tsx
Normal 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
37
components/TeamsHead/index.tsx
Normal 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
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
"scripts": {
|
||||
"dev": "next dev -p 1234",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"start": "next start -p 2345",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,48 @@
|
|||
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 { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
|
||||
import api from '~utils/api'
|
||||
|
||||
import setUserToken from '~utils/setUserToken'
|
||||
import extractFilters from '~utils/extractFilters'
|
||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
||||
import organizeRaids from '~utils/organizeRaids'
|
||||
import setUserToken from '~utils/setUserToken'
|
||||
import useDidMountEffect from '~utils/useDidMountEffect'
|
||||
import { appState } from '~utils/appState'
|
||||
import { elements, allElement } from '~data/elements'
|
||||
import { emptyPaginationObject } from '~utils/emptyStates'
|
||||
import { printError } from '~utils/reportError'
|
||||
|
||||
import GridRep from '~components/GridRep'
|
||||
import GridRepCollection from '~components/GridRepCollection'
|
||||
import ErrorSection from '~components/ErrorSection'
|
||||
import FilterBar from '~components/FilterBar'
|
||||
import ProfileHead from '~components/ProfileHead'
|
||||
|
||||
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 {
|
||||
user?: User
|
||||
teams?: Party[]
|
||||
meta: PaginationObject
|
||||
raids: Raid[]
|
||||
sortedRaids: Raid[][]
|
||||
context?: PageContextObj
|
||||
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
|
||||
const router = useRouter()
|
||||
const { username } = router.query
|
||||
|
|
@ -99,11 +105,11 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
|
|||
|
||||
// Set the initial parties from props
|
||||
useEffect(() => {
|
||||
if (props.teams) {
|
||||
setTotalPages(props.meta.totalPages)
|
||||
setRecordCount(props.meta.count)
|
||||
replaceResults(props.meta.count, props.teams)
|
||||
appState.version = props.version
|
||||
if (context && context.teams && context.pagination) {
|
||||
setTotalPages(context.pagination.totalPages)
|
||||
setRecordCount(context.pagination.count)
|
||||
replaceResults(context.pagination.count, context.teams)
|
||||
appState.version = version
|
||||
}
|
||||
setCurrentPage(1)
|
||||
}, [])
|
||||
|
|
@ -229,6 +235,16 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
|
|||
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
|
||||
|
||||
function renderParties() {
|
||||
|
|
@ -250,95 +266,54 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
|
|||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="Profile">
|
||||
<Head>
|
||||
{/* HTML */}
|
||||
<title>
|
||||
{t('page.titles.profile', { username: props.user?.username })}
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={t('page.descriptions.profile', {
|
||||
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>
|
||||
}
|
||||
if (context) {
|
||||
return (
|
||||
<div id="Profile">
|
||||
{pageHead()}
|
||||
<FilterBar
|
||||
onFilter={receiveFilters}
|
||||
scrolled={scrolled}
|
||||
element={element}
|
||||
raidSlug={raidSlug ? raidSlug : undefined}
|
||||
recency={recency}
|
||||
>
|
||||
<GridRepCollection>{renderParties()}</GridRepCollection>
|
||||
</InfiniteScroll>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('teams.not_found')}</h2>
|
||||
<div className="UserInfo">
|
||||
<img
|
||||
alt={context.user?.avatar.picture}
|
||||
className={`profile ${context.user?.avatar.element}`}
|
||||
srcSet={`/profile/${context.user?.avatar.picture}.png,
|
||||
/profile/${context.user?.avatar.picture}@2x.png 2x`}
|
||||
src={`/profile/${context.user?.avatar.picture}.png`}
|
||||
/>
|
||||
<h1>{context.user?.username}</h1>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</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>
|
||||
</InfiniteScroll>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('teams.not_found')}</h2>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
} else return pageError()
|
||||
}
|
||||
|
||||
export const getServerSidePaths = async () => {
|
||||
|
|
@ -356,10 +331,10 @@ 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()
|
||||
|
|
@ -372,9 +347,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
|||
}
|
||||
|
||||
// Set up empty variables
|
||||
let user: User | null = null
|
||||
let teams: Party[] | null = null
|
||||
let meta: PaginationObject = emptyPaginationObject
|
||||
let user: User | undefined = undefined
|
||||
let teams: Party[] | undefined = undefined
|
||||
let pagination: PaginationObject = emptyPaginationObject
|
||||
|
||||
// Perform a request only if we received a 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
|
||||
else teams = []
|
||||
|
||||
meta.count = response.data.meta.count
|
||||
meta.totalPages = response.data.meta.total_pages
|
||||
meta.perPage = response.data.meta.per_page
|
||||
pagination.count = response.data.meta.count
|
||||
pagination.totalPages = response.data.meta.total_pages
|
||||
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 {
|
||||
props: {
|
||||
user: user,
|
||||
teams: teams,
|
||||
meta: meta,
|
||||
raids: raids,
|
||||
sortedRaids: sortedRaids,
|
||||
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'])),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'])),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,29 @@ 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)
|
||||
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 +140,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'])),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
184
pages/saved.tsx
184
pages/saved.tsx
|
|
@ -1,11 +1,8 @@
|
|||
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 { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import clonedeep from 'lodash.clonedeep'
|
||||
|
||||
|
|
@ -18,24 +15,35 @@ import useDidMountEffect from '~utils/useDidMountEffect'
|
|||
import { appState } from '~utils/appState'
|
||||
import { elements, allElement } from '~data/elements'
|
||||
import { emptyPaginationObject } from '~utils/emptyStates'
|
||||
import { printError } from '~utils/reportError'
|
||||
|
||||
import ErrorSection from '~components/ErrorSection'
|
||||
import GridRep from '~components/GridRep'
|
||||
import GridRepCollection from '~components/GridRepCollection'
|
||||
import FilterBar from '~components/FilterBar'
|
||||
import SavedHead from '~components/SavedHead'
|
||||
|
||||
import type { AxiosError } from 'axios'
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import type { FilterObject, PaginationObject } from '~types'
|
||||
import type {
|
||||
FilterObject,
|
||||
PageContextObj,
|
||||
PaginationObject,
|
||||
ResponseStatus,
|
||||
} from '~types'
|
||||
|
||||
interface Props {
|
||||
teams?: Party[]
|
||||
meta: PaginationObject
|
||||
raids: Raid[]
|
||||
sortedRaids: Raid[][]
|
||||
context?: PageContextObj
|
||||
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
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -97,11 +105,11 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
|
|||
|
||||
// Set the initial parties from props
|
||||
useEffect(() => {
|
||||
if (props.teams) {
|
||||
setTotalPages(props.meta.totalPages)
|
||||
setRecordCount(props.meta.count)
|
||||
replaceResults(props.meta.count, props.teams)
|
||||
appState.version = props.version
|
||||
if (context && context.teams && context.pagination) {
|
||||
setTotalPages(context.pagination.totalPages)
|
||||
setRecordCount(context.pagination.count)
|
||||
replaceResults(context.pagination.count, context.teams)
|
||||
appState.version = version
|
||||
}
|
||||
setCurrentPage(1)
|
||||
}, [])
|
||||
|
|
@ -269,6 +277,16 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
|
|||
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() {
|
||||
return parties.map((party, i) => {
|
||||
return (
|
||||
|
|
@ -291,55 +309,45 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
|
|||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="Teams">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
}
|
||||
if (context) {
|
||||
return (
|
||||
<div id="Teams">
|
||||
{pageHead()}
|
||||
<FilterBar
|
||||
onFilter={receiveFilters}
|
||||
scrolled={scrolled}
|
||||
element={element}
|
||||
raidSlug={raidSlug ? raidSlug : undefined}
|
||||
recency={recency}
|
||||
>
|
||||
<GridRepCollection>{renderParties()}</GridRepCollection>
|
||||
</InfiniteScroll>
|
||||
<h1>{t('saved.title')}</h1>
|
||||
</FilterBar>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('saved.not_found')}</h2>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
<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>
|
||||
</InfiniteScroll>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('saved.not_found')}</h2>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
} else return pageError()
|
||||
}
|
||||
|
||||
export const getServerSidePaths = async () => {
|
||||
|
|
@ -357,10 +365,10 @@ 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()
|
||||
|
|
@ -373,32 +381,52 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
|||
}
|
||||
|
||||
// Set up empty variables
|
||||
let teams: Party[] | null = null
|
||||
let meta: PaginationObject = emptyPaginationObject
|
||||
let teams: Party[] | undefined = undefined
|
||||
let pagination: PaginationObject = emptyPaginationObject
|
||||
|
||||
// Fetch initial set of saved parties
|
||||
const response = await api.savedTeams(params)
|
||||
|
||||
// Assign values to pass to props
|
||||
teams = response.data.results
|
||||
meta.count = response.data.meta.count
|
||||
meta.totalPages = response.data.meta.total_pages
|
||||
meta.perPage = response.data.meta.per_page
|
||||
pagination.count = response.data.meta.count
|
||||
pagination.totalPages = response.data.meta.total_pages
|
||||
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 {
|
||||
props: {
|
||||
teams: teams,
|
||||
meta: meta,
|
||||
raids: raids,
|
||||
sortedRaids: sortedRaids,
|
||||
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'])),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default SavedRoute
|
||||
|
|
|
|||
194
pages/teams.tsx
194
pages/teams.tsx
|
|
@ -1,11 +1,8 @@
|
|||
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 { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
||||
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import clonedeep from 'lodash.clonedeep'
|
||||
|
||||
|
|
@ -18,23 +15,35 @@ import useDidMountEffect from '~utils/useDidMountEffect'
|
|||
import { appState } from '~utils/appState'
|
||||
import { elements, allElement } from '~data/elements'
|
||||
import { emptyPaginationObject } from '~utils/emptyStates'
|
||||
import { printError } from '~utils/reportError'
|
||||
|
||||
import ErrorSection from '~components/ErrorSection'
|
||||
import GridRep from '~components/GridRep'
|
||||
import GridRepCollection from '~components/GridRepCollection'
|
||||
import FilterBar from '~components/FilterBar'
|
||||
import TeamsHead from '~components/TeamsHead'
|
||||
|
||||
import type { AxiosError } from 'axios'
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import type { FilterObject, PaginationObject } from '~types'
|
||||
import type {
|
||||
FilterObject,
|
||||
PageContextObj,
|
||||
PaginationObject,
|
||||
ResponseStatus,
|
||||
} from '~types'
|
||||
|
||||
interface Props {
|
||||
teams?: Party[]
|
||||
meta: PaginationObject
|
||||
sortedRaids: Raid[][]
|
||||
context?: PageContextObj
|
||||
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
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -96,11 +105,11 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
|
|||
|
||||
// Set the initial parties from props
|
||||
useEffect(() => {
|
||||
if (props.teams) {
|
||||
setTotalPages(props.meta.totalPages)
|
||||
setRecordCount(props.meta.count)
|
||||
replaceResults(props.meta.count, props.teams)
|
||||
appState.version = props.version
|
||||
if (context && context.teams && context.pagination) {
|
||||
setTotalPages(context.pagination.totalPages)
|
||||
setRecordCount(context.pagination.count)
|
||||
replaceResults(context.pagination.count, context.teams)
|
||||
appState.version = version
|
||||
}
|
||||
setCurrentPage(1)
|
||||
}, [])
|
||||
|
|
@ -268,6 +277,16 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
|
|||
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() {
|
||||
return parties.map((party, i) => {
|
||||
return (
|
||||
|
|
@ -290,67 +309,45 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
|
|||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="Teams">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
}
|
||||
if (context) {
|
||||
return (
|
||||
<div id="Teams">
|
||||
{pageHead()}
|
||||
<FilterBar
|
||||
onFilter={receiveFilters}
|
||||
scrolled={scrolled}
|
||||
element={element}
|
||||
raidSlug={raidSlug ? raidSlug : undefined}
|
||||
recency={recency}
|
||||
>
|
||||
<GridRepCollection>{renderParties()}</GridRepCollection>
|
||||
</InfiniteScroll>
|
||||
<h1>{t('teams.title')}</h1>
|
||||
</FilterBar>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('teams.not_found')}</h2>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
<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>
|
||||
</InfiniteScroll>
|
||||
|
||||
{parties.length == 0 ? (
|
||||
<div id="NotFound">
|
||||
<h2>{t('teams.not_found')}</h2>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
} else return pageError()
|
||||
}
|
||||
|
||||
export const getServerSidePaths = async () => {
|
||||
|
|
@ -368,10 +365,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
|||
// Set headers for server-side requests
|
||||
setUserToken(req, res)
|
||||
|
||||
// Fetch latest version
|
||||
const version = await fetchLatestVersion()
|
||||
|
||||
try {
|
||||
// Fetch latest version
|
||||
const version = await fetchLatestVersion()
|
||||
|
||||
// Fetch and organize raids
|
||||
let { raids, sortedRaids } = await api.endpoints.raids
|
||||
.getAll()
|
||||
|
|
@ -384,31 +381,52 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
|
|||
}
|
||||
|
||||
// Set up empty variables
|
||||
let teams: Party[] | null = null
|
||||
let meta: PaginationObject = emptyPaginationObject
|
||||
let teams: Party[] | undefined = undefined
|
||||
let pagination: PaginationObject = emptyPaginationObject
|
||||
|
||||
// Fetch initial set of parties
|
||||
const response = await api.endpoints.parties.getAll(params)
|
||||
|
||||
// Assign values to pass to props
|
||||
teams = response.data.results
|
||||
meta.count = response.data.meta.count
|
||||
meta.totalPages = response.data.meta.total_pages
|
||||
meta.perPage = response.data.meta.per_page
|
||||
pagination.count = response.data.meta.count
|
||||
pagination.totalPages = response.data.meta.total_pages
|
||||
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 {
|
||||
props: {
|
||||
teams: teams,
|
||||
meta: meta,
|
||||
raids: raids,
|
||||
sortedRaids: sortedRaids,
|
||||
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'])),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -54,9 +54,6 @@
|
|||
},
|
||||
"remove": "Remove from grid"
|
||||
},
|
||||
"errors": {
|
||||
"unauthorized": "You don't have permission to perform that action"
|
||||
},
|
||||
"filters": {
|
||||
"labels": {
|
||||
"element": "Element",
|
||||
|
|
@ -94,6 +91,18 @@
|
|||
"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": {
|
||||
"sabre": "Sabre",
|
||||
"dagger": "Dagger",
|
||||
|
|
|
|||
|
|
@ -63,6 +63,15 @@
|
|||
}
|
||||
},
|
||||
"errors": {
|
||||
"internal_server_error": {
|
||||
"title": "サーバーエラー",
|
||||
"description": "サーバーから届いたエラーは自動的に復されなかったため、再びリクエストを行なってください"
|
||||
},
|
||||
"not_found": {
|
||||
"title": "見つかりませんでした",
|
||||
"description": "探しているページは見つかりませんでした",
|
||||
"button": "新しい編成を作成"
|
||||
},
|
||||
"unauthorized": "行ったアクションを実行する権限がありません"
|
||||
},
|
||||
"header": {
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ h2,
|
|||
h3,
|
||||
p {
|
||||
color: var(--text-primary);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
18
types/index.d.ts
vendored
18
types/index.d.ts
vendored
|
|
@ -70,3 +70,21 @@ interface PerpetuityObject {
|
|||
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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { proxy } from 'valtio'
|
||||
import { JobSkillObject } from '~types'
|
||||
import { JobSkillObject, ResponseStatus } from '~types'
|
||||
import { GroupedWeaponKeys } from './groupWeaponKeys'
|
||||
|
||||
const emptyJob: Job = {
|
||||
|
|
@ -86,6 +86,7 @@ interface AppState {
|
|||
jobSkills: JobSkill[]
|
||||
weaponKeys: GroupedWeaponKeys
|
||||
version: AppUpdate
|
||||
status?: ResponseStatus
|
||||
}
|
||||
|
||||
export const initialAppState: AppState = {
|
||||
|
|
@ -156,6 +157,7 @@ export const initialAppState: AppState = {
|
|||
update_type: '',
|
||||
updated_at: '',
|
||||
},
|
||||
status: undefined,
|
||||
}
|
||||
|
||||
export const appState = proxy(initialAppState)
|
||||
|
|
|
|||
14
utils/elementEmoji.tsx
Normal file
14
utils/elementEmoji.tsx
Normal 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 '⚪'
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
export default function generateTitle(
|
||||
element: string,
|
||||
element?: string,
|
||||
username?: string,
|
||||
name?: string
|
||||
) {
|
||||
|
|
|
|||
8
utils/getElementForParty.tsx
Normal file
8
utils/getElementForParty.tsx
Normal 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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue