Remove conflicting Pages Router files and fix App Router setup
- Remove duplicate route files that conflicted with App Router - Create client-side Providers wrapper for React context providers - Update app/layout.tsx to use client wrapper for providers - Fix next/font import in pages/_app.tsx This resolves the routing conflicts and React context errors when running the app with both Pages and App routers. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
b1472fd35d
commit
98604e698b
8 changed files with 25 additions and 1244 deletions
16
app/components/Providers.tsx
Normal file
16
app/components/Providers.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { ReactNode } from 'react'
|
||||||
|
import { ThemeProvider } from 'next-themes'
|
||||||
|
import { ToastProvider } from '@radix-ui/react-toast'
|
||||||
|
import { TooltipProvider } from '@radix-ui/react-tooltip'
|
||||||
|
|
||||||
|
export default function Providers({ children }: { children: ReactNode }) {
|
||||||
|
return (
|
||||||
|
<ThemeProvider>
|
||||||
|
<ToastProvider swipeDirection="right">
|
||||||
|
<TooltipProvider>{children}</TooltipProvider>
|
||||||
|
</ToastProvider>
|
||||||
|
</ThemeProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,11 @@
|
||||||
import { Metadata } from 'next'
|
import { Metadata } from 'next'
|
||||||
import localFont from 'next/font/local'
|
import localFont from 'next/font/local'
|
||||||
import { ToastProvider, Viewport } from '@radix-ui/react-toast'
|
import { Viewport } from '@radix-ui/react-toast'
|
||||||
import { TooltipProvider } from '@radix-ui/react-tooltip'
|
|
||||||
import { ThemeProvider } from 'next-themes'
|
|
||||||
|
|
||||||
import '../styles/globals.scss'
|
import '../styles/globals.scss'
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
import Providers from './components/Providers'
|
||||||
import Header from './components/Header'
|
import Header from './components/Header'
|
||||||
import UpdateToastClient from './components/UpdateToastClient'
|
import UpdateToastClient from './components/UpdateToastClient'
|
||||||
|
|
||||||
|
|
@ -32,16 +31,12 @@ export default function RootLayout({
|
||||||
return (
|
return (
|
||||||
<html lang="en" className={goalking.variable}>
|
<html lang="en" className={goalking.variable}>
|
||||||
<body className={goalking.className}>
|
<body className={goalking.className}>
|
||||||
<ThemeProvider>
|
<Providers>
|
||||||
<ToastProvider swipeDirection="right">
|
|
||||||
<TooltipProvider>
|
|
||||||
<Header />
|
<Header />
|
||||||
<UpdateToastClient />
|
<UpdateToastClient />
|
||||||
<main>{children}</main>
|
<main>{children}</main>
|
||||||
<Viewport className="ToastViewport" />
|
<Viewport className="ToastViewport" />
|
||||||
</TooltipProvider>
|
</Providers>
|
||||||
</ToastProvider>
|
|
||||||
</ThemeProvider>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -1,273 +0,0 @@
|
||||||
// Libraries
|
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { useTranslation } from 'next-i18next'
|
|
||||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
||||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
|
||||||
|
|
||||||
// Hooks
|
|
||||||
import { useFavorites } from '~hooks/useFavorites'
|
|
||||||
import { useTeamFilter } from '~hooks/useTeamFilter'
|
|
||||||
|
|
||||||
// Utils
|
|
||||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
|
||||||
import { appState } from '~utils/appState'
|
|
||||||
import { CollectionPage } from '~utils/enums'
|
|
||||||
import { permissiveFilterset } from '~utils/defaultFilters'
|
|
||||||
import { setHeaders } from '~utils/userToken'
|
|
||||||
import {
|
|
||||||
fetchRaidGroupsAndFilters,
|
|
||||||
fetchUserProfile,
|
|
||||||
} from '~utils/serverSideUtils'
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import type { AxiosError } from 'axios'
|
|
||||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
|
||||||
import type { PageContextObj, ResponseStatus } from '~types'
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import ErrorSection from '~components/ErrorSection'
|
|
||||||
import FilterBar from '~components/filters/FilterBar'
|
|
||||||
import GridRep from '~components/reps/GridRep'
|
|
||||||
import GridRepCollection from '~components/reps/GridRepCollection'
|
|
||||||
import LoadingRep from '~components/reps/LoadingRep'
|
|
||||||
import ProfileHead from '~components/head/ProfileHead'
|
|
||||||
import UserInfo from '~components/filters/UserInfo'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
context?: PageContextObj
|
|
||||||
version: AppUpdate
|
|
||||||
error: boolean
|
|
||||||
status?: ResponseStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProfileRoute: React.FC<Props> = ({
|
|
||||||
context,
|
|
||||||
version,
|
|
||||||
error,
|
|
||||||
status,
|
|
||||||
}: Props) => {
|
|
||||||
// Set up router
|
|
||||||
const router = useRouter()
|
|
||||||
const { username } = router.query
|
|
||||||
|
|
||||||
// Import translations
|
|
||||||
const { t } = useTranslation('common')
|
|
||||||
|
|
||||||
const [raids, setRaids] = useState<Raid[]>()
|
|
||||||
|
|
||||||
const {
|
|
||||||
element,
|
|
||||||
setElement,
|
|
||||||
raid,
|
|
||||||
setRaid,
|
|
||||||
recency,
|
|
||||||
setRecency,
|
|
||||||
advancedFilters,
|
|
||||||
setAdvancedFilters,
|
|
||||||
currentPage,
|
|
||||||
setCurrentPage,
|
|
||||||
totalPages,
|
|
||||||
recordCount,
|
|
||||||
parties,
|
|
||||||
setParties,
|
|
||||||
loaded,
|
|
||||||
fetching,
|
|
||||||
setFetching,
|
|
||||||
fetchError,
|
|
||||||
fetch,
|
|
||||||
processTeams,
|
|
||||||
setPagination,
|
|
||||||
} = useTeamFilter(CollectionPage.Profile, context)
|
|
||||||
|
|
||||||
const { toggleFavorite } = useFavorites(parties, setParties)
|
|
||||||
|
|
||||||
// Set the initial parties from props
|
|
||||||
useEffect(() => {
|
|
||||||
if (context) {
|
|
||||||
fetch(true)
|
|
||||||
|
|
||||||
appState.raidGroups = context.raidGroups
|
|
||||||
appState.version = version
|
|
||||||
}
|
|
||||||
|
|
||||||
setCurrentPage(1)
|
|
||||||
setFetching(false)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Fetch all raids on mount, then find the raid in the URL if present
|
|
||||||
useEffect(() => {
|
|
||||||
const raids = appState.raidGroups.flatMap((group) => group.raids)
|
|
||||||
setRaids(raids)
|
|
||||||
}, [setRaids])
|
|
||||||
|
|
||||||
// Receive filters from the filter bar
|
|
||||||
function receiveFilters(filters: FilterSet) {
|
|
||||||
if (filters.element == 0) setElement(0, { shallow: true })
|
|
||||||
else if (filters.element) setElement(filters.element, { shallow: true })
|
|
||||||
if (filters.recency) setRecency(filters.recency, { shallow: true })
|
|
||||||
if (filters.raid) setRaid(filters.raid, { shallow: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
function receiveAdvancedFilters(filters: FilterSet) {
|
|
||||||
setAdvancedFilters(filters)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Methods: Navigation
|
|
||||||
|
|
||||||
function goTo(shortcode: string) {
|
|
||||||
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 />
|
|
||||||
}
|
|
||||||
|
|
||||||
// Page component rendering methods
|
|
||||||
|
|
||||||
function renderParties() {
|
|
||||||
return parties.map((party, i) => {
|
|
||||||
return (
|
|
||||||
<GridRep
|
|
||||||
party={party}
|
|
||||||
key={`party-${i}`}
|
|
||||||
loading={fetching}
|
|
||||||
onClick={goTo}
|
|
||||||
onSave={(teamId, favorited) => toggleFavorite(teamId, favorited)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderLoading(number: number) {
|
|
||||||
return (
|
|
||||||
<GridRepCollection>
|
|
||||||
{Array.from(Array(number)).map((x, i) => (
|
|
||||||
<LoadingRep key={`loading-${i}`} />
|
|
||||||
))}
|
|
||||||
</GridRepCollection>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderInfiniteScroll = (
|
|
||||||
<>
|
|
||||||
{parties.length === 0 && !loaded && renderLoading(3)}
|
|
||||||
{parties.length === 0 && loaded && (
|
|
||||||
<div className="notFound">
|
|
||||||
<h2>There are no teams with your specified filters</h2>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<InfiniteScroll
|
|
||||||
dataLength={parties && parties.length > 0 ? parties.length : 0}
|
|
||||||
next={() => setCurrentPage(currentPage + 1)}
|
|
||||||
hasMore={totalPages > currentPage}
|
|
||||||
loader={renderLoading(3)}
|
|
||||||
>
|
|
||||||
<GridRepCollection>{renderParties()}</GridRepCollection>
|
|
||||||
</InfiniteScroll>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (context) {
|
|
||||||
return (
|
|
||||||
<div className="profile">
|
|
||||||
{pageHead()}
|
|
||||||
<FilterBar
|
|
||||||
defaultFilterset={permissiveFilterset}
|
|
||||||
onAdvancedFilter={receiveAdvancedFilters}
|
|
||||||
onFilter={receiveFilters}
|
|
||||||
persistFilters={false}
|
|
||||||
element={element}
|
|
||||||
raid={raid}
|
|
||||||
raidGroups={context.raidGroups}
|
|
||||||
recency={recency}
|
|
||||||
>
|
|
||||||
<UserInfo user={context.user!} />
|
|
||||||
</FilterBar>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
{renderInfiniteScroll}
|
|
||||||
|
|
||||||
{parties.length == 0 ? (
|
|
||||||
<div className="notFound">
|
|
||||||
<h2>{t('teams.not_found')}</h2>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else return pageError()
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getServerSidePaths = async () => {
|
|
||||||
return {
|
|
||||||
paths: [
|
|
||||||
// Object variant:
|
|
||||||
{ params: { party: 'string' } },
|
|
||||||
],
|
|
||||||
fallback: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
|
|
||||||
// Set headers for server-side requests
|
|
||||||
setHeaders(req, res)
|
|
||||||
|
|
||||||
// Fetch latest version
|
|
||||||
const version = await fetchLatestVersion()
|
|
||||||
|
|
||||||
try {
|
|
||||||
// We don't pre-load advanced filters here
|
|
||||||
const { raidGroups, filters } = await fetchRaidGroupsAndFilters(query)
|
|
||||||
|
|
||||||
let context: PageContextObj | undefined = undefined
|
|
||||||
|
|
||||||
// Perform a request only if we received a username
|
|
||||||
if (query.username) {
|
|
||||||
const { user } = await fetchUserProfile(query.username, {})
|
|
||||||
|
|
||||||
context = {
|
|
||||||
user: user,
|
|
||||||
raidGroups: raidGroups,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pass to the page component as props
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
context: context,
|
|
||||||
version: version,
|
|
||||||
error: false,
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// 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 ? response.status : -999,
|
|
||||||
text: response ? response.statusText : 'unspecified_error',
|
|
||||||
},
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProfileRoute
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { appWithTranslation } from 'next-i18next'
|
import { appWithTranslation } from 'next-i18next'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import localFont from '@next/font/local'
|
import localFont from 'next/font/local'
|
||||||
import { useIsomorphicLayoutEffect } from 'react-use'
|
import { useIsomorphicLayoutEffect } from 'react-use'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import { get } from 'local-storage'
|
import { get } from 'local-storage'
|
||||||
|
|
|
||||||
|
|
@ -1,236 +0,0 @@
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { getCookie } from 'cookies-next'
|
|
||||||
import { get, set } from 'local-storage'
|
|
||||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import clonedeep from 'lodash.clonedeep'
|
|
||||||
|
|
||||||
import ErrorSection from '~components/ErrorSection'
|
|
||||||
import Party from '~components/party/Party'
|
|
||||||
import NewHead from '~components/head/NewHead'
|
|
||||||
|
|
||||||
import api from '~utils/api'
|
|
||||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
|
||||||
import { setHeaders } from '~utils/userToken'
|
|
||||||
import { appState, initialAppState } from '~utils/appState'
|
|
||||||
import { createLocalId } from '~utils/localId'
|
|
||||||
import { groupWeaponKeys } from '~utils/groupWeaponKeys'
|
|
||||||
|
|
||||||
import type { AxiosError } from 'axios'
|
|
||||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
|
||||||
import type { PageContextObj, ResponseStatus } from '~types'
|
|
||||||
import { GridType } from '~utils/enums'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
context?: PageContextObj
|
|
||||||
version: AppUpdate
|
|
||||||
error: boolean
|
|
||||||
status?: ResponseStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
const NewRoute: React.FC<Props> = ({
|
|
||||||
context,
|
|
||||||
version,
|
|
||||||
error,
|
|
||||||
status,
|
|
||||||
}: Props) => {
|
|
||||||
// Set up router
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
function callback(path: string) {
|
|
||||||
router.push(path, undefined, { shallow: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCurrentTab = () => {
|
|
||||||
const parts = router.asPath.split('/')
|
|
||||||
const tab = parts[parts.length - 1]
|
|
||||||
|
|
||||||
switch (tab) {
|
|
||||||
case 'characters':
|
|
||||||
return GridType.Character
|
|
||||||
case 'weapons':
|
|
||||||
return GridType.Weapon
|
|
||||||
case 'summons':
|
|
||||||
return GridType.Summon
|
|
||||||
default:
|
|
||||||
return GridType.Weapon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const [selectedTab, setSelectedTab] = useState<GridType>(getCurrentTab())
|
|
||||||
|
|
||||||
const handleTabChange = (value: string) => {
|
|
||||||
const path = [
|
|
||||||
// Enable when using Next.js Router
|
|
||||||
// 'p',
|
|
||||||
router.asPath.split('/').filter((el) => el != '')[1],
|
|
||||||
value,
|
|
||||||
].join('/')
|
|
||||||
|
|
||||||
switch (value) {
|
|
||||||
case 'characters':
|
|
||||||
setSelectedTab(GridType.Character)
|
|
||||||
break
|
|
||||||
case 'weapons':
|
|
||||||
setSelectedTab(GridType.Weapon)
|
|
||||||
break
|
|
||||||
case 'summons':
|
|
||||||
setSelectedTab(GridType.Summon)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
if (router.asPath !== '/new' && router.asPath !== '/')
|
|
||||||
router.replace(path, undefined, { shallow: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const parts = router.asPath.split('/')
|
|
||||||
const tab = parts[parts.length - 1]
|
|
||||||
|
|
||||||
switch (tab) {
|
|
||||||
case 'characters':
|
|
||||||
setSelectedTab(GridType.Character)
|
|
||||||
break
|
|
||||||
case 'weapons':
|
|
||||||
setSelectedTab(GridType.Weapon)
|
|
||||||
break
|
|
||||||
case 'summons':
|
|
||||||
setSelectedTab(GridType.Summon)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}, [router.asPath])
|
|
||||||
|
|
||||||
// Persist generated userId in storage
|
|
||||||
useEffect(() => {
|
|
||||||
const cookie = getCookie('account')
|
|
||||||
const data: AccountCookie = JSON.parse(cookie as string)
|
|
||||||
if (!get('userId') && data && !data.token) set('userId', data.userId)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (context && context.jobs && context.jobSkills) {
|
|
||||||
appState.raidGroups = context.raidGroups
|
|
||||||
appState.jobs = context.jobs
|
|
||||||
appState.jobSkills = context.jobSkills
|
|
||||||
appState.weaponKeys = context.weaponKeys
|
|
||||||
}
|
|
||||||
appState.version = version
|
|
||||||
}, [context, version])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Clean state
|
|
||||||
const resetState = clonedeep(initialAppState)
|
|
||||||
appState.party = resetState.party
|
|
||||||
appState.grid = resetState.grid
|
|
||||||
|
|
||||||
// Old method kept in case we need it later
|
|
||||||
// Object.keys(resetState).forEach((key) => {
|
|
||||||
// appState[key] = resetState[key]
|
|
||||||
// })
|
|
||||||
|
|
||||||
// Set party to be editable
|
|
||||||
appState.party.editable = true
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Methods: Page component rendering
|
|
||||||
function pageHead() {
|
|
||||||
return <NewHead />
|
|
||||||
}
|
|
||||||
|
|
||||||
function pageError() {
|
|
||||||
if (status) return <ErrorSection status={status} />
|
|
||||||
else return <div />
|
|
||||||
}
|
|
||||||
|
|
||||||
if (context) {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={router.asPath}>
|
|
||||||
{pageHead()}
|
|
||||||
<Party
|
|
||||||
new={true}
|
|
||||||
pushHistory={callback}
|
|
||||||
selectedTab={selectedTab}
|
|
||||||
raidGroups={context.raidGroups}
|
|
||||||
handleTabChanged={handleTabChange}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
|
||||||
} else return pageError()
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getServerSidePaths = async () => {
|
|
||||||
return {
|
|
||||||
paths: [
|
|
||||||
// Object variant:
|
|
||||||
{ params: { party: 'string' } },
|
|
||||||
],
|
|
||||||
fallback: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
|
|
||||||
// Set headers for API calls
|
|
||||||
setHeaders(req, res)
|
|
||||||
|
|
||||||
// If there is no account entry in cookies, create a UUID and store it
|
|
||||||
createLocalId(req, res)
|
|
||||||
|
|
||||||
// Fetch latest version
|
|
||||||
const version = await fetchLatestVersion()
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Fetch and organize raids
|
|
||||||
let raidGroups: RaidGroup[] = await api.raidGroups().then((response) => response.data)
|
|
||||||
|
|
||||||
// Fetch jobs and job skills
|
|
||||||
let jobs = await api.endpoints.jobs
|
|
||||||
.getAll()
|
|
||||||
.then((response) => response.data)
|
|
||||||
|
|
||||||
let jobSkills = await api.allJobSkills()
|
|
||||||
.then((response) => response.data)
|
|
||||||
|
|
||||||
// Fetch and organize weapon keys
|
|
||||||
let weaponKeys = await api.endpoints.weapon_keys
|
|
||||||
.getAll()
|
|
||||||
.then((response) => groupWeaponKeys(response.data))
|
|
||||||
|
|
||||||
// Consolidate data into context object
|
|
||||||
const context: PageContextObj = {
|
|
||||||
jobs: jobs,
|
|
||||||
jobSkills: jobSkills,
|
|
||||||
raidGroups: raidGroups,
|
|
||||||
weaponKeys: weaponKeys,
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pass to the page component as props
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
context: context,
|
|
||||||
version: version,
|
|
||||||
error: false,
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// 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'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NewRoute
|
|
||||||
|
|
@ -1,229 +0,0 @@
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
||||||
|
|
||||||
import Party from '~components/party/Party'
|
|
||||||
import ErrorSection from '~components/ErrorSection'
|
|
||||||
import PartyHead from '~components/party/PartyHead'
|
|
||||||
|
|
||||||
import api from '~utils/api'
|
|
||||||
import elementEmoji from '~utils/elementEmoji'
|
|
||||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
|
||||||
import { setHeaders } from '~utils/userToken'
|
|
||||||
import { appState } from '~utils/appState'
|
|
||||||
import { groupWeaponKeys } from '~utils/groupWeaponKeys'
|
|
||||||
|
|
||||||
import { GridType } from '~utils/enums'
|
|
||||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
|
||||||
import type { PageContextObj, ResponseStatus } from '~types'
|
|
||||||
import type { AxiosError } from 'axios'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
context?: PageContextObj
|
|
||||||
version: AppUpdate
|
|
||||||
error: boolean
|
|
||||||
status?: ResponseStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
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()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const parts = router.asPath.split('/')
|
|
||||||
const tab = parts[parts.length - 1]
|
|
||||||
|
|
||||||
switch (tab) {
|
|
||||||
case 'characters':
|
|
||||||
setSelectedTab(GridType.Character)
|
|
||||||
break
|
|
||||||
case 'weapons':
|
|
||||||
setSelectedTab(GridType.Weapon)
|
|
||||||
break
|
|
||||||
case 'summons':
|
|
||||||
setSelectedTab(GridType.Summon)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const getCurrentTab = () => {
|
|
||||||
const parts = router.asPath.split('/')
|
|
||||||
const tab = parts[parts.length - 1]
|
|
||||||
|
|
||||||
switch (tab) {
|
|
||||||
case 'characters':
|
|
||||||
return GridType.Character
|
|
||||||
case 'weapons':
|
|
||||||
return GridType.Weapon
|
|
||||||
case 'summons':
|
|
||||||
return GridType.Summon
|
|
||||||
default:
|
|
||||||
return GridType.Weapon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const [selectedTab, setSelectedTab] = useState<GridType>(getCurrentTab())
|
|
||||||
|
|
||||||
const handleTabChange = (value: string) => {
|
|
||||||
const path = [
|
|
||||||
// Enable when using Next.js Router
|
|
||||||
// 'p',
|
|
||||||
router.asPath.split('/').filter((el) => el != '')[1],
|
|
||||||
value,
|
|
||||||
].join('/')
|
|
||||||
|
|
||||||
switch (value) {
|
|
||||||
case 'characters':
|
|
||||||
setSelectedTab(GridType.Character)
|
|
||||||
break
|
|
||||||
case 'weapons':
|
|
||||||
setSelectedTab(GridType.Weapon)
|
|
||||||
break
|
|
||||||
case 'summons':
|
|
||||||
setSelectedTab(GridType.Summon)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
// if (router.asPath !== '/new' && router.asPath !== '/')
|
|
||||||
// router.replace(path, undefined, { shallow: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the initial data from props
|
|
||||||
useEffect(() => {
|
|
||||||
if (context && !error) {
|
|
||||||
appState.raidGroups = context.raidGroups
|
|
||||||
appState.jobs = context.jobs ? context.jobs : []
|
|
||||||
appState.jobSkills = context.jobSkills ? context.jobSkills : []
|
|
||||||
appState.weaponKeys = context.weaponKeys
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status && error) {
|
|
||||||
appState.status = status
|
|
||||||
}
|
|
||||||
|
|
||||||
appState.version = version
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Methods: Page component rendering
|
|
||||||
function pageHead() {
|
|
||||||
if (context && context.party && context.meta)
|
|
||||||
return <PartyHead party={context.party} meta={context.meta} />
|
|
||||||
}
|
|
||||||
|
|
||||||
function pageError() {
|
|
||||||
if (status) return <ErrorSection status={status} />
|
|
||||||
else return <div />
|
|
||||||
}
|
|
||||||
|
|
||||||
if (context) {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={router.asPath}>
|
|
||||||
{pageHead()}
|
|
||||||
<Party
|
|
||||||
team={context.party}
|
|
||||||
selectedTab={selectedTab}
|
|
||||||
raidGroups={context.raidGroups}
|
|
||||||
handleTabChanged={handleTabChange}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
|
||||||
} else return pageError()
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getServerSidePaths = async () => {
|
|
||||||
return {
|
|
||||||
paths: [
|
|
||||||
// Object variant:
|
|
||||||
{ params: { party: 'string' } },
|
|
||||||
],
|
|
||||||
fallback: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
|
|
||||||
// Set headers for server-side requests
|
|
||||||
setHeaders(req, res)
|
|
||||||
|
|
||||||
// Fetch latest version
|
|
||||||
const version = await fetchLatestVersion()
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Fetch and organize raids
|
|
||||||
let raidGroups: RaidGroup[] = await api
|
|
||||||
.raidGroups()
|
|
||||||
.then((response) => response.data)
|
|
||||||
|
|
||||||
// Fetch jobs and job skills
|
|
||||||
let jobs = await api.endpoints.jobs
|
|
||||||
.getAll()
|
|
||||||
.then((response) => response.data)
|
|
||||||
|
|
||||||
let jobSkills = await api.allJobSkills()
|
|
||||||
.then((response) => response.data)
|
|
||||||
|
|
||||||
// Fetch and organize weapon keys
|
|
||||||
let weaponKeys = await api.endpoints.weapon_keys
|
|
||||||
.getAll()
|
|
||||||
.then((response) => groupWeaponKeys(response.data))
|
|
||||||
|
|
||||||
// Fetch the party
|
|
||||||
let party: Party | undefined = undefined
|
|
||||||
if (query.party) {
|
|
||||||
let response = await api.endpoints.parties.getOne({
|
|
||||||
id: query.party,
|
|
||||||
})
|
|
||||||
party = response.data.party
|
|
||||||
} else {
|
|
||||||
console.error('No party code')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Consolidate data into context object
|
|
||||||
const context: PageContextObj = {
|
|
||||||
party: party,
|
|
||||||
jobs: jobs,
|
|
||||||
jobSkills: jobSkills,
|
|
||||||
raidGroups: raidGroups,
|
|
||||||
weaponKeys: weaponKeys,
|
|
||||||
meta: {
|
|
||||||
element: elementEmoji(party),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pass to the page component as props
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
context: context,
|
|
||||||
version: version,
|
|
||||||
error: false,
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// 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'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PartyRoute
|
|
||||||
254
pages/saved.tsx
254
pages/saved.tsx
|
|
@ -1,254 +0,0 @@
|
||||||
// Libraries
|
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { useTranslation } from 'next-i18next'
|
|
||||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
||||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
|
||||||
|
|
||||||
// Hooks
|
|
||||||
import { useFavorites } from '~hooks/useFavorites'
|
|
||||||
import { useTeamFilter } from '~hooks/useTeamFilter'
|
|
||||||
|
|
||||||
// Utils
|
|
||||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
|
||||||
import { appState } from '~utils/appState'
|
|
||||||
import { CollectionPage } from '~utils/enums'
|
|
||||||
import { permissiveFilterset } from '~utils/defaultFilters'
|
|
||||||
import { setHeaders } from '~utils/userToken'
|
|
||||||
import { fetchRaidGroups } from '~utils/serverSideUtils'
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import type { AxiosError } from 'axios'
|
|
||||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
|
||||||
import type { PageContextObj, ResponseStatus } from '~types'
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import ErrorSection from '~components/ErrorSection'
|
|
||||||
import FilterBar from '~components/filters/FilterBar'
|
|
||||||
import GridRep from '~components/reps/GridRep'
|
|
||||||
import GridRepCollection from '~components/reps/GridRepCollection'
|
|
||||||
import LoadingRep from '~components/reps/LoadingRep'
|
|
||||||
import SavedHead from '~components/head/SavedHead'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
context?: PageContextObj
|
|
||||||
version: AppUpdate
|
|
||||||
error: boolean
|
|
||||||
status?: ResponseStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
const SavedRoute: React.FC<Props> = ({
|
|
||||||
context,
|
|
||||||
version,
|
|
||||||
error,
|
|
||||||
status,
|
|
||||||
}: Props) => {
|
|
||||||
// Set up router
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
// Import translations
|
|
||||||
const { t } = useTranslation('common')
|
|
||||||
|
|
||||||
const [raids, setRaids] = useState<Raid[]>()
|
|
||||||
|
|
||||||
const {
|
|
||||||
element,
|
|
||||||
setElement,
|
|
||||||
raid,
|
|
||||||
setRaid,
|
|
||||||
recency,
|
|
||||||
setRecency,
|
|
||||||
advancedFilters,
|
|
||||||
setAdvancedFilters,
|
|
||||||
currentPage,
|
|
||||||
setCurrentPage,
|
|
||||||
totalPages,
|
|
||||||
recordCount,
|
|
||||||
parties,
|
|
||||||
setParties,
|
|
||||||
loaded,
|
|
||||||
fetching,
|
|
||||||
setFetching,
|
|
||||||
fetchError,
|
|
||||||
fetch,
|
|
||||||
processTeams,
|
|
||||||
setPagination,
|
|
||||||
} = useTeamFilter(CollectionPage.Saved, context)
|
|
||||||
|
|
||||||
const { toggleFavorite } = useFavorites(parties, setParties)
|
|
||||||
|
|
||||||
// Set the initial parties from props
|
|
||||||
useEffect(() => {
|
|
||||||
if (context) {
|
|
||||||
fetch(true)
|
|
||||||
|
|
||||||
appState.raidGroups = context.raidGroups
|
|
||||||
appState.version = version
|
|
||||||
}
|
|
||||||
|
|
||||||
setCurrentPage(1)
|
|
||||||
setFetching(false)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Fetch all raids on mount, then find the raid in the URL if present
|
|
||||||
useEffect(() => {
|
|
||||||
const raids = appState.raidGroups.flatMap((group) => group.raids)
|
|
||||||
setRaids(raids)
|
|
||||||
}, [setRaids])
|
|
||||||
|
|
||||||
// Receive filters from the filter bar
|
|
||||||
function receiveFilters(filters: FilterSet) {
|
|
||||||
if (filters.element == 0) setElement(0, { shallow: true })
|
|
||||||
else if (filters.element) setElement(filters.element, { shallow: true })
|
|
||||||
if (filters.recency) setRecency(filters.recency, { shallow: true })
|
|
||||||
if (filters.raid) setRaid(filters.raid, { shallow: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
function receiveAdvancedFilters(filters: FilterSet) {
|
|
||||||
setAdvancedFilters(filters)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Methods: Navigation
|
|
||||||
|
|
||||||
function goTo(shortcode: string) {
|
|
||||||
router.push(`/p/${shortcode}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Methods: Page component rendering
|
|
||||||
function pageHead() {
|
|
||||||
return <SavedHead />
|
|
||||||
}
|
|
||||||
|
|
||||||
function pageError() {
|
|
||||||
if (status) return <ErrorSection status={status} />
|
|
||||||
else return <div />
|
|
||||||
}
|
|
||||||
|
|
||||||
// Page component rendering methods
|
|
||||||
|
|
||||||
function renderParties() {
|
|
||||||
return parties.map((party, i) => {
|
|
||||||
return (
|
|
||||||
<GridRep
|
|
||||||
party={party}
|
|
||||||
key={`party-${i}`}
|
|
||||||
loading={fetching}
|
|
||||||
onClick={goTo}
|
|
||||||
onSave={toggleFavorite}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderLoading(number: number) {
|
|
||||||
return (
|
|
||||||
<GridRepCollection>
|
|
||||||
{Array.from(Array(number)).map((x, i) => (
|
|
||||||
<LoadingRep key={`loading-${i}`} />
|
|
||||||
))}
|
|
||||||
</GridRepCollection>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderInfiniteScroll = (
|
|
||||||
<>
|
|
||||||
{parties.length === 0 && !loaded && renderLoading(3)}
|
|
||||||
{parties.length === 0 && loaded && (
|
|
||||||
<div className="notFound">
|
|
||||||
<h2>There are no teams with your specified filters</h2>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<InfiniteScroll
|
|
||||||
dataLength={parties && parties.length > 0 ? parties.length : 0}
|
|
||||||
next={() => setCurrentPage(currentPage + 1)}
|
|
||||||
hasMore={totalPages > currentPage}
|
|
||||||
loader={renderLoading(3)}
|
|
||||||
>
|
|
||||||
<GridRepCollection>{renderParties()}</GridRepCollection>
|
|
||||||
</InfiniteScroll>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (context) {
|
|
||||||
return (
|
|
||||||
<div className="teams">
|
|
||||||
{pageHead()}
|
|
||||||
<FilterBar
|
|
||||||
defaultFilterset={permissiveFilterset}
|
|
||||||
onFilter={receiveFilters}
|
|
||||||
onAdvancedFilter={receiveAdvancedFilters}
|
|
||||||
persistFilters={false}
|
|
||||||
element={element}
|
|
||||||
raid={raid}
|
|
||||||
raidGroups={context.raidGroups}
|
|
||||||
recency={recency}
|
|
||||||
>
|
|
||||||
<h1>{t('saved.title')}</h1>
|
|
||||||
</FilterBar>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
{renderInfiniteScroll}
|
|
||||||
|
|
||||||
{parties.length == 0 ? (
|
|
||||||
<div className="notFound">
|
|
||||||
<h2>{t('saved.not_found')}</h2>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else return pageError()
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getServerSidePaths = async () => {
|
|
||||||
return {
|
|
||||||
paths: [
|
|
||||||
// Object variant:
|
|
||||||
{ params: { party: 'string' } },
|
|
||||||
],
|
|
||||||
fallback: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
|
|
||||||
// Set headers for server-side requests
|
|
||||||
setHeaders(req, res)
|
|
||||||
|
|
||||||
// Fetch latest version
|
|
||||||
const version = await fetchLatestVersion()
|
|
||||||
|
|
||||||
try {
|
|
||||||
// We don't pre-load advanced filters here
|
|
||||||
const raidGroups= await fetchRaidGroups()
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
context: { raidGroups },
|
|
||||||
version,
|
|
||||||
error: false,
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// 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 ? response.status : -999,
|
|
||||||
text: response ? response.statusText : 'unspecified_error',
|
|
||||||
},
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default SavedRoute
|
|
||||||
238
pages/teams.tsx
238
pages/teams.tsx
|
|
@ -1,238 +0,0 @@
|
||||||
// Libraries
|
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import { useRouter } from 'next/router'
|
|
||||||
import { useTranslation } from 'next-i18next'
|
|
||||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
||||||
import axios, { AxiosResponse } from 'axios'
|
|
||||||
import InfiniteScroll from 'react-infinite-scroll-component'
|
|
||||||
|
|
||||||
// Hooks
|
|
||||||
import { useFavorites } from '~hooks/useFavorites'
|
|
||||||
import { useTeamFilter } from '~hooks/useTeamFilter'
|
|
||||||
|
|
||||||
// Utils
|
|
||||||
import fetchLatestVersion from '~utils/fetchLatestVersion'
|
|
||||||
import { appState } from '~utils/appState'
|
|
||||||
import { defaultFilterset } from '~utils/defaultFilters'
|
|
||||||
import { setHeaders } from '~utils/userToken'
|
|
||||||
import { fetchRaidGroups } from '~utils/serverSideUtils'
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
|
||||||
import type { PageContextObj, ResponseStatus } from '~types'
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import ErrorSection from '~components/ErrorSection'
|
|
||||||
import FilterBar from '~components/filters/FilterBar'
|
|
||||||
import GridRep from '~components/reps/GridRep'
|
|
||||||
import GridRepCollection from '~components/reps/GridRepCollection'
|
|
||||||
import LoadingRep from '~components/reps/LoadingRep'
|
|
||||||
import TeamsHead from '~components/head/TeamsHead'
|
|
||||||
import { CollectionPage } from '~utils/enums'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
context?: PageContextObj
|
|
||||||
version: AppUpdate
|
|
||||||
error: boolean
|
|
||||||
status?: ResponseStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
const TeamsRoute: React.FC<Props> = ({
|
|
||||||
context,
|
|
||||||
version,
|
|
||||||
error,
|
|
||||||
status,
|
|
||||||
}: Props) => {
|
|
||||||
const router = useRouter()
|
|
||||||
const { t } = useTranslation('common')
|
|
||||||
|
|
||||||
const [raids, setRaids] = useState<Raid[]>()
|
|
||||||
|
|
||||||
const {
|
|
||||||
element,
|
|
||||||
setElement,
|
|
||||||
raid,
|
|
||||||
setRaid,
|
|
||||||
recency,
|
|
||||||
setRecency,
|
|
||||||
advancedFilters,
|
|
||||||
setAdvancedFilters,
|
|
||||||
currentPage,
|
|
||||||
setCurrentPage,
|
|
||||||
totalPages,
|
|
||||||
recordCount,
|
|
||||||
parties,
|
|
||||||
setParties,
|
|
||||||
loaded,
|
|
||||||
fetching,
|
|
||||||
setFetching,
|
|
||||||
fetchError,
|
|
||||||
fetch,
|
|
||||||
processTeams,
|
|
||||||
setPagination,
|
|
||||||
} = useTeamFilter(CollectionPage.Teams, context)
|
|
||||||
|
|
||||||
const { toggleFavorite } = useFavorites(parties, setParties)
|
|
||||||
|
|
||||||
// Set the initial parties from props
|
|
||||||
useEffect(() => {
|
|
||||||
if (context) {
|
|
||||||
fetch(true)
|
|
||||||
|
|
||||||
appState.raidGroups = context.raidGroups
|
|
||||||
appState.version = version
|
|
||||||
}
|
|
||||||
|
|
||||||
setCurrentPage(1)
|
|
||||||
setFetching(false)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Fetch all raids on mount, then find the raid in the URL if present
|
|
||||||
useEffect(() => {
|
|
||||||
const raids = appState.raidGroups.flatMap((group) => group.raids)
|
|
||||||
setRaids(raids)
|
|
||||||
}, [setRaids])
|
|
||||||
|
|
||||||
// Receive filters from the filter bar
|
|
||||||
function receiveFilters(filters: FilterSet) {
|
|
||||||
if (filters.element == 0) setElement(0, { shallow: true })
|
|
||||||
else if (filters.element) setElement(filters.element, { shallow: true })
|
|
||||||
if (filters.recency) setRecency(filters.recency, { shallow: true })
|
|
||||||
if (filters.raid) setRaid(filters.raid, { shallow: true })
|
|
||||||
}
|
|
||||||
|
|
||||||
function receiveAdvancedFilters(filters: FilterSet) {
|
|
||||||
setAdvancedFilters(filters)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Methods: Navigation
|
|
||||||
|
|
||||||
function goTo(shortcode: string) {
|
|
||||||
router.push(`/p/${shortcode}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Methods: Page component rendering
|
|
||||||
function pageHead() {
|
|
||||||
return <TeamsHead />
|
|
||||||
}
|
|
||||||
|
|
||||||
function pageError() {
|
|
||||||
if (status) return <ErrorSection status={status} />
|
|
||||||
else return <div />
|
|
||||||
}
|
|
||||||
|
|
||||||
// Page component rendering methods
|
|
||||||
function renderParties() {
|
|
||||||
return parties.map((party, i) => (
|
|
||||||
<GridRep
|
|
||||||
party={party}
|
|
||||||
key={`party-${i}`}
|
|
||||||
loading={fetching}
|
|
||||||
onClick={() => goTo(party.shortcode)}
|
|
||||||
onSave={(teamId, favorited) => toggleFavorite(teamId, favorited)}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderLoading(number: number) {
|
|
||||||
return (
|
|
||||||
<GridRepCollection>
|
|
||||||
{Array.from({ length: number }, (_, i) => (
|
|
||||||
<LoadingRep key={`loading-${i}`} />
|
|
||||||
))}
|
|
||||||
</GridRepCollection>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderInfiniteScroll = (
|
|
||||||
<>
|
|
||||||
{parties.length === 0 && !loaded && renderLoading(3)}
|
|
||||||
{parties.length === 0 && loaded && (
|
|
||||||
<div className="notFound">
|
|
||||||
<h2>There are no teams with your specified filters</h2>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<InfiniteScroll
|
|
||||||
dataLength={parties && parties.length > 0 ? parties.length : 0}
|
|
||||||
next={() => setCurrentPage(currentPage + 1)}
|
|
||||||
hasMore={totalPages > currentPage}
|
|
||||||
loader={renderLoading(3)}
|
|
||||||
>
|
|
||||||
<GridRepCollection>{renderParties()}</GridRepCollection>
|
|
||||||
</InfiniteScroll>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (context) {
|
|
||||||
return (
|
|
||||||
<div className="teams">
|
|
||||||
{pageHead()}
|
|
||||||
<FilterBar
|
|
||||||
defaultFilterset={defaultFilterset}
|
|
||||||
onFilter={receiveFilters}
|
|
||||||
onAdvancedFilter={receiveAdvancedFilters}
|
|
||||||
persistFilters={true}
|
|
||||||
element={element}
|
|
||||||
raid={raid}
|
|
||||||
raidGroups={context.raidGroups}
|
|
||||||
recency={recency}
|
|
||||||
>
|
|
||||||
<h1>{t('teams.title')}</h1>
|
|
||||||
</FilterBar>
|
|
||||||
|
|
||||||
<section>{renderInfiniteScroll}</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else return pageError()
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getServerSidePaths = async () => {
|
|
||||||
return {
|
|
||||||
paths: [
|
|
||||||
// Object variant:
|
|
||||||
{ params: { party: 'string' } },
|
|
||||||
],
|
|
||||||
fallback: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
|
|
||||||
// Set headers for server-side requests
|
|
||||||
setHeaders(req, res)
|
|
||||||
|
|
||||||
// Fetch latest version
|
|
||||||
const version = await fetchLatestVersion()
|
|
||||||
|
|
||||||
try {
|
|
||||||
const raidGroups = await fetchRaidGroups()
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
context: { raidGroups },
|
|
||||||
version,
|
|
||||||
error: false,
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// If error is of type AxiosError, extract the response into a variable
|
|
||||||
let response: AxiosResponse<any, any> | undefined = axios.isAxiosError(error)
|
|
||||||
? error.response
|
|
||||||
: undefined
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
context: null,
|
|
||||||
error: true,
|
|
||||||
status: {
|
|
||||||
code: response?.status ?? -999,
|
|
||||||
text: response?.statusText ?? 'unspecified_error',
|
|
||||||
},
|
|
||||||
...(await serverSideTranslations(locale, ['common'])),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TeamsRoute
|
|
||||||
Loading…
Reference in a new issue