From 6411268090e6d91a7cf2e2e4f4b90877d189b230 Mon Sep 17 00:00:00 2001 From: Noa Virellia Date: Fri, 6 Feb 2026 20:41:50 +0800 Subject: [PATCH] refactor: extract empty state and update basepath to /app/ Signed-off-by: Noa Virellia --- .../events/event-grid.container.tsx | 43 ++++++------------- .../components/events/event-grid.empty.tsx | 16 +++++++ .../src/components/events/event-grid.view.tsx | 18 +++++--- client/cms/src/lib/client.ts | 2 +- client/cms/src/lib/router.ts | 2 +- .../src/stories/events/event-grid.stories.tsx | 17 ++++++-- client/cms/vite.config.ts | 7 +-- 7 files changed, 60 insertions(+), 45 deletions(-) create mode 100644 client/cms/src/components/events/event-grid.empty.tsx diff --git a/client/cms/src/components/events/event-grid.container.tsx b/client/cms/src/components/events/event-grid.container.tsx index 926191d..1392e4c 100644 --- a/client/cms/src/components/events/event-grid.container.tsx +++ b/client/cms/src/components/events/event-grid.container.tsx @@ -1,10 +1,8 @@ import type { EventInfo } from './types'; -import { FileQuestionMark } from 'lucide-react'; import PlaceholderImage from '@/assets/event-placeholder.png'; import { useGetEvents } from '@/hooks/data/useGetEvents'; import { Button } from '../ui/button'; import { DialogTrigger } from '../ui/dialog'; -import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../ui/empty'; import { EventGridView } from './event-grid.view'; import { KycDialogContainer } from './kyc/kyc.dialog.container'; @@ -25,35 +23,18 @@ export function EventGridContainer() { } satisfies EventInfo)); return ( - <> - {allEvents.length > 0 && ( - (eventInfo.isJoined - ? - : ( - - - - - - ) - )} - /> - )} - { - allEvents.length === 0 && ( - - - - - - 暂无活动 - 前面的区域 以后再来探索吧 - - + (eventInfo.isJoined + ? + : ( + + + + + ) - } - + )} + /> ); } diff --git a/client/cms/src/components/events/event-grid.empty.tsx b/client/cms/src/components/events/event-grid.empty.tsx new file mode 100644 index 0000000..6938e48 --- /dev/null +++ b/client/cms/src/components/events/event-grid.empty.tsx @@ -0,0 +1,16 @@ +import { FileQuestionMark } from 'lucide-react'; +import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../ui/empty'; + +export function EventGridEmpty() { + return ( + + + + + + 暂无活动 + 前面的区域 以后再来探索吧 + + + ); +} diff --git a/client/cms/src/components/events/event-grid.view.tsx b/client/cms/src/components/events/event-grid.view.tsx index e5186bd..8f1e517 100644 --- a/client/cms/src/components/events/event-grid.view.tsx +++ b/client/cms/src/components/events/event-grid.view.tsx @@ -1,12 +1,18 @@ import type { EventInfo } from './types'; import { EventCardView } from './event-card.view'; +import { EventGridEmpty } from './event-grid.empty'; -export function EventGridView({ events, assembleFooter }: { events: EventInfo[]; assembleFooter: (event: EventInfo) => React.ReactNode }) { +export function EventGridView({ events, footer }: { events: EventInfo[]; footer: (event: EventInfo) => React.ReactNode }) { return ( -
- {events.map(event => ( - - ))} -
+ <> + {events.length > 0 && ( +
+ {events.map(event => ( + + ))} +
+ )} + {events.length === 0 && } + ); } diff --git a/client/cms/src/lib/client.ts b/client/cms/src/lib/client.ts index c061f8f..0b968ed 100644 --- a/client/cms/src/lib/client.ts +++ b/client/cms/src/lib/client.ts @@ -11,7 +11,7 @@ import { export function configInternalApiClient() { client.setConfig({ - baseUrl: '/api/v1/', + baseUrl: '/app/api/v1/', headers: { 'X-Api-Version': 'latest', }, diff --git a/client/cms/src/lib/router.ts b/client/cms/src/lib/router.ts index 056fa33..051de0d 100644 --- a/client/cms/src/lib/router.ts +++ b/client/cms/src/lib/router.ts @@ -3,7 +3,7 @@ import { createRouter } from '@tanstack/react-router'; import { routeTree } from '../routeTree.gen'; // Create a new router instance -export const router = createRouter({ routeTree }); +export const router = createRouter({ routeTree, basepath: '/app/' }); // Register the router instance for type safety declare module '@tanstack/react-router' { diff --git a/client/cms/src/stories/events/event-grid.stories.tsx b/client/cms/src/stories/events/event-grid.stories.tsx index 055ed05..6762cf5 100644 --- a/client/cms/src/stories/events/event-grid.stories.tsx +++ b/client/cms/src/stories/events/event-grid.stories.tsx @@ -60,14 +60,25 @@ export const Primary: Story = { endTime: new Date('2026-06-14T04:00:00.000Z'), }, ], - assembleFooter: () => , + footer: () => , }, }; -export const Skeleton: Story = { +export const Empty: Story = { + decorators: [Story =>
{Story()}
], + args: { + events: [], + footer: () => , + }, + parameters: { + layout: 'fullscreen', + }, +}; + +export const Loading: Story = { render: () => , args: { events: [], - assembleFooter: () => , + footer: () => , }, }; diff --git a/client/cms/vite.config.ts b/client/cms/vite.config.ts index 32346a7..b6ae18b 100644 --- a/client/cms/vite.config.ts +++ b/client/cms/vite.config.ts @@ -15,6 +15,7 @@ const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(file // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon export default defineConfig({ + base: '/app/', plugins: [tanstackRouter({ target: 'react', autoCodeSplitting: true, @@ -26,7 +27,7 @@ export default defineConfig({ }, server: { proxy: { - '/api': 'http://10.0.0.10:8000', + '/app/api': 'http://10.0.0.10:8000', }, host: '0.0.0.0', port: 5173, @@ -36,8 +37,8 @@ export default defineConfig({ projects: [{ extends: true, plugins: [ - // The plugin will run tests for the stories defined in your Storybook config - // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest + // The plugin will run tests for the stories defined in your Storybook config + // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest storybookTest({ configDir: path.join(dirname, '.storybook'), }),