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 localFont from 'next/font/local'
|
||||
import { ToastProvider, Viewport } from '@radix-ui/react-toast'
|
||||
import { TooltipProvider } from '@radix-ui/react-tooltip'
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
import { Viewport } from '@radix-ui/react-toast'
|
||||
|
||||
import '../styles/globals.scss'
|
||||
|
||||
// Components
|
||||
import Providers from './components/Providers'
|
||||
import Header from './components/Header'
|
||||
import UpdateToastClient from './components/UpdateToastClient'
|
||||
|
||||
|
|
@ -32,16 +31,12 @@ export default function RootLayout({
|
|||
return (
|
||||
<html lang="en" className={goalking.variable}>
|
||||
<body className={goalking.className}>
|
||||
<ThemeProvider>
|
||||
<ToastProvider swipeDirection="right">
|
||||
<TooltipProvider>
|
||||
<Providers>
|
||||
<Header />
|
||||
<UpdateToastClient />
|
||||
<main>{children}</main>
|
||||
<Viewport className="ToastViewport" />
|
||||
</TooltipProvider>
|
||||
</ToastProvider>
|
||||
</ThemeProvider>
|
||||
</Providers>
|
||||
</body>
|
||||
</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 Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import localFont from '@next/font/local'
|
||||
import localFont from 'next/font/local'
|
||||
import { useIsomorphicLayoutEffect } from 'react-use'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
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