feat(events): add nickname requirement dialog for events

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/events/nickname-needed.dialog.container.tsx

@@ -0,0 +1,15 @@
+import { useNavigate } from '@tanstack/react-router';
+import { isEmpty } from 'lodash-es';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
+import { Dialog } from '../ui/dialog';
+import { NicknameNeededDialogView } from './nickname-needed.dialog.view';
+
+export function NicknameNeededDialogContainer() {
+  const { data } = useUserInfo();
+  const navigate = useNavigate();
+  return (
+    <Dialog open={isEmpty(data?.data?.nickname)}>
+      <NicknameNeededDialogView onAction={() => void navigate({ to: '/profile' })} />
+    </Dialog>
+  );
+}

client/cms/src/components/events/nickname-needed.dialog.view.tsx

@@ -0,0 +1,24 @@
+import { HatGlasses } from 'lucide-react';
+import { Button } from '../ui/button';
+import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
+
+export function NicknameNeededDialogView({ onAction }: { onAction: () => void }) {
+  return (
+    <DialogContent
+      showCloseButton={false}
+    >
+      <DialogHeader>
+        <DialogTitle>请先填写昵称</DialogTitle>
+        <DialogDescription>
+          如要加入活动，请先于「个人资料」页面填写昵称。
+          <div className="flex justify-center my-12">
+            <HatGlasses size={100} className="stroke-[1.5]" />
+          </div>
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button onClick={onAction}>去填写</Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+}

client/cms/src/routes/_workbenchLayout/events/index.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { EventGridContainer } from '@/components/events/event-grid/event-grid.container';
+import { NicknameNeededDialogContainer } from '@/components/events/nickname-needed.dialog.container';
 
 export const Route = createFileRoute('/_workbenchLayout/events/')({
   component: RouteComponent,
@@ -8,6 +9,7 @@ export const Route = createFileRoute('/_workbenchLayout/events/')({
 function RouteComponent() {
   return (
     <div className="py-4 px-6 md:gap-6 md:py-6 h-full">
+      <NicknameNeededDialogContainer />
       <EventGridContainer />
     </div>
   );

client/cms/src/routes/_workbenchLayout/profile/index.tsx

@@ -1,7 +1,5 @@
 import { createFileRoute, Navigate } from '@tanstack/react-router';
-import { Suspense } from 'react';
 import { ProfileError } from '@/components/profile/profile.error';
-import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
 
 export const Route = createFileRoute('/_workbenchLayout/profile/')({
@@ -14,8 +12,6 @@ export const Route = createFileRoute('/_workbenchLayout/profile/')({
 function RouteComponent() {
   const { data } = useUserInfo();
   return (
-    <Suspense fallback={<ProfileSkeleton />}>
-      <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
-    </Suspense>
+    <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
   );
 }

client/cms/src/stories/events/nickname-needed-dialog.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NicknameNeededDialogView } from '@/components/events/nickname-needed.dialog.view';
+import { Dialog } from '@/components/ui/dialog';
+
+const meta = {
+  title: 'Events/NicknameNeededDialog',
+  component: NicknameNeededDialogView,
+  decorators: [
+    Story => (
+      <Dialog open={true}>
+        <Story />
+      </Dialog>
+    ),
+  ],
+} satisfies Meta<typeof NicknameNeededDialogView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    onAction: () => { },
+  },
+};