From 98604e698bd55fe8df02847dc919f2ad463bc289 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 1 Sep 2025 16:24:09 -0700 Subject: [PATCH] Remove conflicting Pages Router files and fix App Router setup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/components/Providers.tsx | 16 ++ app/layout.tsx | 21 +-- pages/[username].tsx | 273 ----------------------------------- pages/_app.tsx | 2 +- pages/new/index.tsx | 236 ------------------------------ pages/p/[party].tsx | 229 ----------------------------- pages/saved.tsx | 254 -------------------------------- pages/teams.tsx | 238 ------------------------------ 8 files changed, 25 insertions(+), 1244 deletions(-) create mode 100644 app/components/Providers.tsx delete mode 100644 pages/[username].tsx delete mode 100644 pages/new/index.tsx delete mode 100644 pages/p/[party].tsx delete mode 100644 pages/saved.tsx delete mode 100644 pages/teams.tsx diff --git a/app/components/Providers.tsx b/app/components/Providers.tsx new file mode 100644 index 00000000..c55e85bf --- /dev/null +++ b/app/components/Providers.tsx @@ -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 ( + + + {children} + + + ) +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index ab1e7169..7cf549ff 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -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 ( - - - -
- -
{children}
- - - - + +
+ +
{children}
+ + ) diff --git a/pages/[username].tsx b/pages/[username].tsx deleted file mode 100644 index f112e1c6..00000000 --- a/pages/[username].tsx +++ /dev/null @@ -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 = ({ - 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() - - 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 - } - - function pageError() { - if (status) return - else return
- } - - // Page component rendering methods - - function renderParties() { - return parties.map((party, i) => { - return ( - toggleFavorite(teamId, favorited)} - /> - ) - }) - } - - function renderLoading(number: number) { - return ( - - {Array.from(Array(number)).map((x, i) => ( - - ))} - - ) - } - - const renderInfiniteScroll = ( - <> - {parties.length === 0 && !loaded && renderLoading(3)} - {parties.length === 0 && loaded && ( -
-

There are no teams with your specified filters

-
- )} - 0 ? parties.length : 0} - next={() => setCurrentPage(currentPage + 1)} - hasMore={totalPages > currentPage} - loader={renderLoading(3)} - > - {renderParties()} - - - ) - - if (context) { - return ( -
- {pageHead()} - - - - -
- {renderInfiniteScroll} - - {parties.length == 0 ? ( -
-

{t('teams.not_found')}

-
- ) : ( - '' - )} -
-
- ) - } 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 diff --git a/pages/_app.tsx b/pages/_app.tsx index e978aaf1..99e7cec2 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -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' diff --git a/pages/new/index.tsx b/pages/new/index.tsx deleted file mode 100644 index 6b05e951..00000000 --- a/pages/new/index.tsx +++ /dev/null @@ -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 = ({ - 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(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 - } - - function pageError() { - if (status) return - else return
- } - - if (context) { - return ( - - {pageHead()} - - - ) - } 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 diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx deleted file mode 100644 index 00bc379a..00000000 --- a/pages/p/[party].tsx +++ /dev/null @@ -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 = ({ - 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(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 - } - - function pageError() { - if (status) return - else return
- } - - if (context) { - return ( - - {pageHead()} - - - ) - } 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 diff --git a/pages/saved.tsx b/pages/saved.tsx deleted file mode 100644 index 69130f87..00000000 --- a/pages/saved.tsx +++ /dev/null @@ -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 = ({ - context, - version, - error, - status, -}: Props) => { - // Set up router - const router = useRouter() - - // Import translations - const { t } = useTranslation('common') - - const [raids, setRaids] = useState() - - 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 - } - - function pageError() { - if (status) return - else return
- } - - // Page component rendering methods - - function renderParties() { - return parties.map((party, i) => { - return ( - - ) - }) - } - - function renderLoading(number: number) { - return ( - - {Array.from(Array(number)).map((x, i) => ( - - ))} - - ) - } - - const renderInfiniteScroll = ( - <> - {parties.length === 0 && !loaded && renderLoading(3)} - {parties.length === 0 && loaded && ( -
-

There are no teams with your specified filters

-
- )} - 0 ? parties.length : 0} - next={() => setCurrentPage(currentPage + 1)} - hasMore={totalPages > currentPage} - loader={renderLoading(3)} - > - {renderParties()} - - - ) - - if (context) { - return ( -
- {pageHead()} - -

{t('saved.title')}

- - -
- {renderInfiniteScroll} - - {parties.length == 0 ? ( -
-

{t('saved.not_found')}

-
- ) : ( - '' - )} -
-
- ) - } 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 diff --git a/pages/teams.tsx b/pages/teams.tsx deleted file mode 100644 index 0d3dbfd1..00000000 --- a/pages/teams.tsx +++ /dev/null @@ -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 = ({ - context, - version, - error, - status, -}: Props) => { - const router = useRouter() - const { t } = useTranslation('common') - - const [raids, setRaids] = useState() - - 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 - } - - function pageError() { - if (status) return - else return
- } - - // Page component rendering methods - function renderParties() { - return parties.map((party, i) => ( - goTo(party.shortcode)} - onSave={(teamId, favorited) => toggleFavorite(teamId, favorited)} - /> - )) - } - - function renderLoading(number: number) { - return ( - - {Array.from({ length: number }, (_, i) => ( - - ))} - - ) - } - - const renderInfiniteScroll = ( - <> - {parties.length === 0 && !loaded && renderLoading(3)} - {parties.length === 0 && loaded && ( -
-

There are no teams with your specified filters

-
- )} - 0 ? parties.length : 0} - next={() => setCurrentPage(currentPage + 1)} - hasMore={totalPages > currentPage} - loader={renderLoading(3)} - > - {renderParties()} - - - ) - - if (context) { - return ( -
- {pageHead()} - -

{t('teams.title')}

- - -
{renderInfiniteScroll}
-
- ) - } 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 | 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