my-kaiqiuwang/src/routes.tsx
kyuuseiryuu 4453dd6430 refactor(service, routes, types): extract match summary and link to club
- Extract club information (clubId, clubName) from event page in `getEventInfo`.
- Update `getMatchDetail` to return both `detail` and `summary`.
- Introduce `MatchSummary` interface in `src/types/index.ts`.
- Update `EventPage` to display the club name and link to the club page.
- Adjust `EventSubscribeService` and loaders to handle the new return structure.
- Clean up test files and mock data loading logic.
2026-03-25 23:20:33 +09:00

104 lines
3.1 KiB
TypeScript

import { createBrowserRouter } from "react-router";
import ProfilePage from "./page/ProfilePage";
import EventPage from "./page/EventPage";
import type { MatchInfo, MatchSummary, XCXMember } from "./types";
import { FindUserPage } from "./page/FindUserPage";
import { FavePlayersPage } from "./page/FavPlayersPage";
import { UserCenter } from "./page/UserCenter";
import { CallbackPage } from "./page/Logto/Callback";
import App from "./App";
import { ClubEventsPage } from "./page/ClubEvents";
import { HydrateFallback } from "./components/HydrateFallback";
import { AppBarLayout } from './components/Layout';
export const route = createBrowserRouter([
{
path: '/',
element: <AppBarLayout />,
children: [
{
path: '',
index: true,
Component: App,
HydrateFallback: () => <HydrateFallback />
},
{
path: '/club/:id',
Component: ClubEventsPage,
HydrateFallback: () => <HydrateFallback />,
loader: async ({ params }) => {
const id = params.id;
const [info] = await Promise.all([
fetch(`/api/club/${id}`).then(r => r.json()),
]);
return { info };
},
},
{
path: '/fav-players',
Component: FavePlayersPage,
},
{
path: '/event/:matchId',
loader: async ({ params }) => {
const { detail: info, summary } = await fetch(`/api/match/${params.matchId}`)
.then(res => res.json())
.then(data => data as {
detail: MatchInfo,
summary: MatchSummary,
});
const members = info.itemId
? await (await fetch(`/api/match/${params.matchId}/${info.itemId}`)).json()
: info.players.map((e, i) => ({
number: i + 1,
uid: e.uid,
name: e.name,
score: e.score,
realname: e.name,
} as XCXMember));
const uids = info.players.map(e => e.uid);
const uidScore = await fetch(`/api/user/nowScores`, {
method: "POST",
body: JSON.stringify({ uids }),
}).then(res => res.json()).catch(() => ({}));
return { info, members, uidScore: new Map(Object.entries(uidScore)), summary };
},
Component: EventPage,
HydrateFallback: () => <HydrateFallback />
},
{
path: 'profile/:uid',
loader: async ({ params }) => {
const { uid } = params;
const profile = await (await fetch(`/api/user/${uid}`)).json();
const tags = await (await fetch(`/api/user/${uid}/tags`)).json();
return { profile, uid, tags };
},
Component: ProfilePage,
HydrateFallback: () => <HydrateFallback />
},
{
path: 'find',
Component: FindUserPage,
},
{
path: 'user-center',
Component: UserCenter,
},
{
path: 'auth',
children: [
{
path: 'callback',
Component: CallbackPage,
},
],
},
],
},
{
path: '/dev',
Component: HydrateFallback,
}
]);