feat(client): add storybook and workbench profile flow
Signed-off-by: Noa Virellia <noa@requiem.garden>
This commit is contained in:
@@ -3,8 +3,8 @@
|
||||
import { type InfiniteData, infiniteQueryOptions, queryOptions, type UseMutationOptions } from '@tanstack/react-query';
|
||||
|
||||
import { client } from '../client.gen';
|
||||
import { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from '../sdk.gen';
|
||||
import type { GetAuthRedirectData, GetAuthRedirectError, GetEventCheckinData, GetEventCheckinError, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryResponse, GetEventCheckinResponse, GetEventInfoData, GetEventInfoError, GetEventInfoResponse, GetEventListData, GetEventListError, GetEventListResponse, GetUserInfoData, GetUserInfoError, GetUserInfoResponse, GetUserListData, GetUserListError, GetUserListResponse, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateResponse, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeResponse, PostAuthMagicData, PostAuthMagicError, PostAuthMagicResponse, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshResponse, PostAuthTokenData, PostAuthTokenError, PostAuthTokenResponse, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitResponse } from '../types.gen';
|
||||
import { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from '../sdk.gen';
|
||||
import type { GetAuthRedirectData, GetAuthRedirectError, GetEventCheckinData, GetEventCheckinError, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryResponse, GetEventCheckinResponse, GetEventInfoData, GetEventInfoError, GetEventInfoResponse, GetEventListData, GetEventListError, GetEventListResponse, GetUserInfoByUserIdData, GetUserInfoByUserIdError, GetUserInfoByUserIdResponse, GetUserInfoData, GetUserInfoError, GetUserInfoResponse, GetUserListData, GetUserListError, GetUserListResponse, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateResponse, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeResponse, PostAuthMagicData, PostAuthMagicError, PostAuthMagicResponse, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshResponse, PostAuthTokenData, PostAuthTokenError, PostAuthTokenResponse, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitResponse } from '../types.gen';
|
||||
|
||||
/**
|
||||
* Exchange Auth Code
|
||||
@@ -312,6 +312,26 @@ export const getUserInfoOptions = (options?: Options<GetUserInfoData>) => queryO
|
||||
queryKey: getUserInfoQueryKey(options)
|
||||
});
|
||||
|
||||
export const getUserInfoByUserIdQueryKey = (options: Options<GetUserInfoByUserIdData>) => createQueryKey('getUserInfoByUserId', options);
|
||||
|
||||
/**
|
||||
* Get Other User Information
|
||||
*
|
||||
* Fetches the complete profile data for the user associated with the provided session/token.
|
||||
*/
|
||||
export const getUserInfoByUserIdOptions = (options: Options<GetUserInfoByUserIdData>) => queryOptions<GetUserInfoByUserIdResponse, GetUserInfoByUserIdError, GetUserInfoByUserIdResponse, ReturnType<typeof getUserInfoByUserIdQueryKey>>({
|
||||
queryFn: async ({ queryKey, signal }) => {
|
||||
const { data } = await getUserInfoByUserId({
|
||||
...options,
|
||||
...queryKey[0],
|
||||
signal,
|
||||
throwOnError: true
|
||||
});
|
||||
return data;
|
||||
},
|
||||
queryKey: getUserInfoByUserIdQueryKey(options)
|
||||
});
|
||||
|
||||
export const getUserListQueryKey = (options: Options<GetUserListData>) => createQueryKey('getUserList', options);
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// This file is auto-generated by @hey-api/openapi-ts
|
||||
|
||||
export { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
|
||||
export type { ClientOptions, DataEventIndexDoc, DataUserIndexDoc, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetEventListData, GetEventListError, GetEventListErrors, GetEventListResponse, GetEventListResponses, GetUserInfoData, GetUserInfoError, GetUserInfoErrors, GetUserInfoResponse, GetUserInfoResponses, GetUserListData, GetUserListError, GetUserListErrors, GetUserListResponse, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateErrors, PatchUserUpdateResponse, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeErrors, PostAuthExchangeResponse, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicError, PostAuthMagicErrors, PostAuthMagicResponse, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshErrors, PostAuthRefreshResponse, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenError, PostAuthTokenErrors, PostAuthTokenResponse, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponse, PostEventCheckinSubmitResponses, ServiceAuthExchangeData, ServiceAuthExchangeResponse, ServiceAuthMagicData, ServiceAuthMagicResponse, ServiceAuthRefreshData, ServiceAuthTokenData, ServiceAuthTokenResponse, ServiceEventCheckinQueryResponse, ServiceEventCheckinResponse, ServiceEventCheckinSubmitData, ServiceEventEventInfoResponse, ServiceUserUserInfoData, UtilsRespStatus } from './types.gen';
|
||||
export { getAuthRedirect, getEventCheckin, getEventCheckinQuery, getEventInfo, getEventList, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchUserUpdate, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit } from './sdk.gen';
|
||||
export type { ClientOptions, DataEventIndexDoc, DataUserIndexDoc, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetEventListData, GetEventListError, GetEventListErrors, GetEventListResponse, GetEventListResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdError, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponse, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoError, GetUserInfoErrors, GetUserInfoResponse, GetUserInfoResponses, GetUserListData, GetUserListError, GetUserListErrors, GetUserListResponse, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateErrors, PatchUserUpdateResponse, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeErrors, PostAuthExchangeResponse, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicError, PostAuthMagicErrors, PostAuthMagicResponse, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshErrors, PostAuthRefreshResponse, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenError, PostAuthTokenErrors, PostAuthTokenResponse, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponse, PostEventCheckinSubmitResponses, ServiceAuthExchangeData, ServiceAuthExchangeResponse, ServiceAuthMagicData, ServiceAuthMagicResponse, ServiceAuthRefreshData, ServiceAuthTokenData, ServiceAuthTokenResponse, ServiceEventCheckinQueryResponse, ServiceEventCheckinResponse, ServiceEventCheckinSubmitData, ServiceUserUserInfoData, UtilsRespStatus } from './types.gen';
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import type { Client, Options as Options2, TDataShape } from './client';
|
||||
import { client } from './client.gen';
|
||||
import type { GetAuthRedirectData, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryErrors, GetEventCheckinQueryResponses, GetEventCheckinResponses, GetEventInfoData, GetEventInfoErrors, GetEventInfoResponses, GetEventListData, GetEventListErrors, GetEventListResponses, GetUserInfoData, GetUserInfoErrors, GetUserInfoResponses, GetUserListData, GetUserListErrors, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateErrors, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeErrors, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicErrors, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshErrors, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenErrors, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponses } from './types.gen';
|
||||
import type { GetAuthRedirectData, GetAuthRedirectErrors, GetEventCheckinData, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryErrors, GetEventCheckinQueryResponses, GetEventCheckinResponses, GetEventInfoData, GetEventInfoErrors, GetEventInfoResponses, GetEventListData, GetEventListErrors, GetEventListResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoErrors, GetUserInfoResponses, GetUserListData, GetUserListErrors, GetUserListResponses, PatchUserUpdateData, PatchUserUpdateErrors, PatchUserUpdateResponses, PostAuthExchangeData, PostAuthExchangeErrors, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicErrors, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshErrors, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenErrors, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponses } from './types.gen';
|
||||
|
||||
export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
|
||||
/**
|
||||
@@ -130,6 +130,13 @@ export const getEventList = <ThrowOnError extends boolean = false>(options: Opti
|
||||
*/
|
||||
export const getUserInfo = <ThrowOnError extends boolean = false>(options?: Options<GetUserInfoData, ThrowOnError>) => (options?.client ?? client).get<GetUserInfoResponses, GetUserInfoErrors, ThrowOnError>({ url: '/user/info', ...options });
|
||||
|
||||
/**
|
||||
* Get Other User Information
|
||||
*
|
||||
* Fetches the complete profile data for the user associated with the provided session/token.
|
||||
*/
|
||||
export const getUserInfoByUserId = <ThrowOnError extends boolean = false>(options: Options<GetUserInfoByUserIdData, ThrowOnError>) => (options.client ?? client).get<GetUserInfoByUserIdResponses, GetUserInfoByUserIdErrors, ThrowOnError>({ url: '/user/info/{user_id}', ...options });
|
||||
|
||||
/**
|
||||
* List Users
|
||||
*
|
||||
|
||||
@@ -10,6 +10,7 @@ export type DataEventIndexDoc = {
|
||||
event_id?: string;
|
||||
name?: string;
|
||||
start_time?: string;
|
||||
thumbnail?: string;
|
||||
type?: string;
|
||||
};
|
||||
|
||||
@@ -71,12 +72,6 @@ export type ServiceEventCheckinSubmitData = {
|
||||
checkin_code?: string;
|
||||
};
|
||||
|
||||
export type ServiceEventEventInfoResponse = {
|
||||
end_time?: string;
|
||||
name?: string;
|
||||
start_time?: string;
|
||||
};
|
||||
|
||||
export type ServiceUserUserInfoData = {
|
||||
allow_public?: boolean;
|
||||
avatar?: string;
|
||||
@@ -370,6 +365,14 @@ export type GetEventCheckinErrors = {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Missing User ID / Unauthorized
|
||||
*/
|
||||
401: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Internal Server Error
|
||||
*/
|
||||
@@ -494,6 +497,14 @@ export type GetEventInfoErrors = {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Missing User ID / Unauthorized
|
||||
*/
|
||||
401: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Event Not Found
|
||||
*/
|
||||
@@ -519,7 +530,7 @@ export type GetEventInfoResponses = {
|
||||
* Successful retrieval
|
||||
*/
|
||||
200: UtilsRespStatus & {
|
||||
data?: ServiceEventEventInfoResponse;
|
||||
data?: DataEventIndexDoc;
|
||||
};
|
||||
};
|
||||
|
||||
@@ -550,6 +561,14 @@ export type GetEventListErrors = {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Missing User ID / Unauthorized
|
||||
*/
|
||||
401: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Internal Server Error (Database query failed)
|
||||
*/
|
||||
@@ -584,7 +603,7 @@ export type GetUserInfoErrors = {
|
||||
/**
|
||||
* Missing User ID / Unauthorized
|
||||
*/
|
||||
403: UtilsRespStatus & {
|
||||
401: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
@@ -620,6 +639,66 @@ export type GetUserInfoResponses = {
|
||||
|
||||
export type GetUserInfoResponse = GetUserInfoResponses[keyof GetUserInfoResponses];
|
||||
|
||||
export type GetUserInfoByUserIdData = {
|
||||
body?: never;
|
||||
path: {
|
||||
/**
|
||||
* Other user id
|
||||
*/
|
||||
user_id: string;
|
||||
};
|
||||
query?: never;
|
||||
url: '/user/info/{user_id}';
|
||||
};
|
||||
|
||||
export type GetUserInfoByUserIdErrors = {
|
||||
/**
|
||||
* Missing User ID / Unauthorized
|
||||
*/
|
||||
401: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* User Not Public
|
||||
*/
|
||||
403: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* User Not Found
|
||||
*/
|
||||
404: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Internal Server Error (UUID Parse Failed)
|
||||
*/
|
||||
500: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export type GetUserInfoByUserIdError = GetUserInfoByUserIdErrors[keyof GetUserInfoByUserIdErrors];
|
||||
|
||||
export type GetUserInfoByUserIdResponses = {
|
||||
/**
|
||||
* Successful profile retrieval
|
||||
*/
|
||||
200: UtilsRespStatus & {
|
||||
data?: ServiceUserUserInfoData;
|
||||
};
|
||||
};
|
||||
|
||||
export type GetUserInfoByUserIdResponse = GetUserInfoByUserIdResponses[keyof GetUserInfoByUserIdResponses];
|
||||
|
||||
export type GetUserListData = {
|
||||
body?: never;
|
||||
path?: never;
|
||||
@@ -645,6 +724,14 @@ export type GetUserListErrors = {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Missing User ID / Unauthorized
|
||||
*/
|
||||
401: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Internal Server Error (Search Engine or Missing Offset)
|
||||
*/
|
||||
@@ -690,7 +777,7 @@ export type PatchUserUpdateErrors = {
|
||||
/**
|
||||
* Missing User ID / Unauthorized
|
||||
*/
|
||||
403: UtilsRespStatus & {
|
||||
401: UtilsRespStatus & {
|
||||
data?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ export const zDataEventIndexDoc = z.object({
|
||||
event_id: z.optional(z.string()),
|
||||
name: z.optional(z.string()),
|
||||
start_time: z.optional(z.string()),
|
||||
thumbnail: z.optional(z.string()),
|
||||
type: z.optional(z.string())
|
||||
});
|
||||
|
||||
@@ -69,12 +70,6 @@ export const zServiceEventCheckinSubmitData = z.object({
|
||||
checkin_code: z.optional(z.string())
|
||||
});
|
||||
|
||||
export const zServiceEventEventInfoResponse = z.object({
|
||||
end_time: z.optional(z.string()),
|
||||
name: z.optional(z.string()),
|
||||
start_time: z.optional(z.string())
|
||||
});
|
||||
|
||||
export const zServiceUserUserInfoData = z.object({
|
||||
allow_public: z.optional(z.boolean()),
|
||||
avatar: z.optional(z.string()),
|
||||
@@ -212,7 +207,7 @@ export const zGetEventInfoData = z.object({
|
||||
* Successful retrieval
|
||||
*/
|
||||
export const zGetEventInfoResponse = zUtilsRespStatus.and(z.object({
|
||||
data: z.optional(zServiceEventEventInfoResponse)
|
||||
data: z.optional(zDataEventIndexDoc)
|
||||
}));
|
||||
|
||||
export const zGetEventListData = z.object({
|
||||
@@ -244,6 +239,21 @@ export const zGetUserInfoResponse = zUtilsRespStatus.and(z.object({
|
||||
data: z.optional(zServiceUserUserInfoData)
|
||||
}));
|
||||
|
||||
export const zGetUserInfoByUserIdData = z.object({
|
||||
body: z.optional(z.never()),
|
||||
path: z.object({
|
||||
user_id: z.string()
|
||||
}),
|
||||
query: z.optional(z.never())
|
||||
});
|
||||
|
||||
/**
|
||||
* Successful profile retrieval
|
||||
*/
|
||||
export const zGetUserInfoByUserIdResponse = zUtilsRespStatus.and(z.object({
|
||||
data: z.optional(zServiceUserUserInfoData)
|
||||
}));
|
||||
|
||||
export const zGetUserListData = z.object({
|
||||
body: z.optional(z.never()),
|
||||
path: z.optional(z.never()),
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { ServiceUserUserInfoData } from '@/client';
|
||||
import { useForm } from '@tanstack/react-form';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
@@ -21,7 +22,6 @@ import {
|
||||
Input,
|
||||
} from '@/components/ui/input';
|
||||
import { useUpdateUser } from '@/hooks/data/useUpdateUser';
|
||||
import { useUserInfo } from '@/hooks/data/useUserInfo';
|
||||
import { Switch } from '../ui/switch';
|
||||
|
||||
const formSchema = z.object({
|
||||
@@ -31,9 +31,7 @@ const formSchema = z.object({
|
||||
avatar: z.url().or(z.literal('')),
|
||||
allow_public: z.boolean(),
|
||||
});
|
||||
export function EditProfileDialog() {
|
||||
const { data } = useUserInfo();
|
||||
const user = data.data!;
|
||||
export function EditProfileDialog({ user }: { user: ServiceUserUserInfoData }) {
|
||||
const { mutateAsync } = useUpdateUser();
|
||||
|
||||
const form = useForm({
|
||||
|
||||
30
client/cms/src/components/profile/profile.error.tsx
Normal file
30
client/cms/src/components/profile/profile.error.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Mail } from 'lucide-react';
|
||||
import { Skeleton } from '../ui/skeleton';
|
||||
|
||||
export function ProfileError({ reason }: { reason: string }) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
|
||||
<div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<div className="flex flex-row gap-3 w-full lg:flex-col">
|
||||
<Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
|
||||
<div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
|
||||
<Skeleton className="w-32 h-8" />
|
||||
<Skeleton className="w-20 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
|
||||
<Mail className="h-4 w-4 stroke-muted-foreground" />
|
||||
<Skeleton className="w-32 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="w-64 h-[40px]" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center flex items-center justify-center">
|
||||
{reason}
|
||||
</Skeleton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
client/cms/src/components/profile/profile.skeleton.tsx
Normal file
29
client/cms/src/components/profile/profile.skeleton.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Mail } from 'lucide-react';
|
||||
import { Skeleton } from '../ui/skeleton';
|
||||
|
||||
export function ProfileSkeleton() {
|
||||
return (
|
||||
<div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
|
||||
<div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<div className="flex flex-row gap-3 w-full lg:flex-col">
|
||||
<Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
|
||||
<div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
|
||||
<Skeleton className="w-32 h-8" />
|
||||
<Skeleton className="w-20 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
|
||||
<Mail className="h-4 w-4 stroke-muted-foreground" />
|
||||
<Skeleton className="w-32 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="w-64 h-[40px]" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
|
||||
</Skeleton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +1,22 @@
|
||||
import type { ServiceUserUserInfoData } from '@/client';
|
||||
import { identicon } from '@dicebear/collection';
|
||||
import { createAvatar } from '@dicebear/core';
|
||||
import MDEditor from '@uiw/react-md-editor';
|
||||
import { isNil } from 'lodash-es';
|
||||
import {
|
||||
isEmpty,
|
||||
isNil,
|
||||
} from 'lodash-es';
|
||||
import { Mail, Pencil } from 'lucide-react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
import { toast } from 'sonner';
|
||||
import { Avatar, AvatarImage } from '@/components/ui/avatar';
|
||||
import { useUpdateUser } from '@/hooks/data/useUpdateUser';
|
||||
import { useUserInfo } from '@/hooks/data/useUserInfo';
|
||||
import { base64ToUtf8, utf8ToBase64 } from '@/lib/utils';
|
||||
import { Button } from '../ui/button';
|
||||
import { EditProfileDialog } from './edit-profile-dialog';
|
||||
|
||||
export function MainProfile() {
|
||||
const { data } = useUserInfo();
|
||||
const user = data.data!;
|
||||
export function Profile({ user }: { user: ServiceUserUserInfoData }) {
|
||||
const [bio, setBio] = useState<string | undefined>(() => base64ToUtf8(user.bio ?? ''));
|
||||
const [enableBioEdit, setEnableBioEdit] = useState(false);
|
||||
const { mutateAsync } = useUpdateUser();
|
||||
@@ -35,7 +36,7 @@ export function MainProfile() {
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<div className="flex flex-row gap-3 w-full lg:flex-col">
|
||||
<Avatar className="size-16 rounded-full border-2 border-muted lg:size-64">
|
||||
{user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
|
||||
{!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
|
||||
</Avatar>
|
||||
<div className="flex flex-1 flex-col justify-center lg:mt-3">
|
||||
<span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
|
||||
@@ -47,19 +48,19 @@ export function MainProfile() {
|
||||
{user.email}
|
||||
</div>
|
||||
</div>
|
||||
<EditProfileDialog />
|
||||
<EditProfileDialog user={user} />
|
||||
</div>
|
||||
</div>
|
||||
<section className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
|
||||
{/* Bio */}
|
||||
{enableBioEdit
|
||||
? (
|
||||
<MDEditor
|
||||
value={bio}
|
||||
onChange={setBio}
|
||||
height="100%"
|
||||
/>
|
||||
)
|
||||
<MDEditor
|
||||
value={bio}
|
||||
onChange={setBio}
|
||||
height="100%"
|
||||
/>
|
||||
)
|
||||
: <div className="p-6 prose dark:prose-invert"><Markdown>{bio}</Markdown></div>}
|
||||
<Button
|
||||
className="absolute bottom-4 right-4"
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
IconDotsVertical,
|
||||
IconLogout,
|
||||
} from '@tabler/icons-react';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import { useMemo } from 'react';
|
||||
import {
|
||||
Avatar,
|
||||
@@ -53,7 +54,7 @@ function NavUser_() {
|
||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
>
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
{user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
|
||||
{!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{user.nickname}</span>
|
||||
@@ -73,7 +74,7 @@ function NavUser_() {
|
||||
<DropdownMenuLabel className="p-0 font-normal">
|
||||
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
{user.avatar !== undefined ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
|
||||
{!isEmpty(user.avatar) ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{user.nickname}</span>
|
||||
|
||||
39
client/cms/src/components/workbenchCards/event-card.tsx
Normal file
39
client/cms/src/components/workbenchCards/event-card.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
export function EventCard({ type, coverImage, eventName, description, startTime, endTime }:
|
||||
{
|
||||
type: 'official' | 'party',
|
||||
coverImage: string, eventName: string, description: string, startTime: string, endTime: string
|
||||
}) {
|
||||
return (
|
||||
<Card className="relative mx-auto w-full max-w-sm pt-0">
|
||||
<div className="absolute inset-0 z-30 aspect-video bg-black/35" />
|
||||
<img
|
||||
src="https://avatar.vercel.sh/shadcn1"
|
||||
alt="Event cover"
|
||||
className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
|
||||
/>
|
||||
<CardHeader>
|
||||
<CardAction>
|
||||
<Badge variant="secondary">Featured</Badge>
|
||||
</CardAction>
|
||||
<CardTitle>Design systems meetup</CardTitle>
|
||||
<CardDescription>
|
||||
A practical talk on component APIs, accessibility, and shipping
|
||||
faster.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter>
|
||||
<Button className="w-full">View Event</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import { useSuspenseQuery } from '@tanstack/react-query';
|
||||
import { getUserInfoOptions } from '@/client/@tanstack/react-query.gen';
|
||||
import {
|
||||
getUserInfoByUserIdOptions,
|
||||
getUserInfoOptions,
|
||||
} from '@/client/@tanstack/react-query.gen';
|
||||
|
||||
export function useUserInfo() {
|
||||
return useSuspenseQuery({
|
||||
@@ -7,3 +10,11 @@ export function useUserInfo() {
|
||||
staleTime: 10 * 60 * 1000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useOtherUserInfo(userId: string) {
|
||||
return useSuspenseQuery({
|
||||
...getUserInfoByUserIdOptions({ path: { user_id: userId } }),
|
||||
staleTime: 10 * 60 * 1000,
|
||||
retry: (_failureCount, error) => error.code !== 403,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
IconCalendarEvent,
|
||||
IconDashboard,
|
||||
IconUser,
|
||||
} from '@tabler/icons-react';
|
||||
@@ -10,6 +11,11 @@ export const navData = {
|
||||
url: '/',
|
||||
icon: IconDashboard,
|
||||
},
|
||||
{
|
||||
title: '活动列表',
|
||||
url: '/events',
|
||||
icon: IconCalendarEvent,
|
||||
},
|
||||
],
|
||||
navSecondary: [
|
||||
{
|
||||
|
||||
@@ -12,9 +12,11 @@ import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as TokenRouteImport } from './routes/token'
|
||||
import { Route as MagicLinkSentRouteImport } from './routes/magicLinkSent'
|
||||
import { Route as AuthorizeRouteImport } from './routes/authorize'
|
||||
import { Route as SidebarLayoutRouteImport } from './routes/_sidebarLayout'
|
||||
import { Route as SidebarLayoutIndexRouteImport } from './routes/_sidebarLayout/index'
|
||||
import { Route as SidebarLayoutProfileRouteImport } from './routes/_sidebarLayout/profile'
|
||||
import { Route as WorkbenchLayoutRouteImport } from './routes/_workbenchLayout'
|
||||
import { Route as WorkbenchLayoutIndexRouteImport } from './routes/_workbenchLayout/index'
|
||||
import { Route as WorkbenchLayoutEventsRouteImport } from './routes/_workbenchLayout/events'
|
||||
import { Route as WorkbenchLayoutProfileIndexRouteImport } from './routes/_workbenchLayout/profile.index'
|
||||
import { Route as WorkbenchLayoutProfileUserIdRouteImport } from './routes/_workbenchLayout/profile.$userId'
|
||||
|
||||
const TokenRoute = TokenRouteImport.update({
|
||||
id: '/token',
|
||||
@@ -31,61 +33,95 @@ const AuthorizeRoute = AuthorizeRouteImport.update({
|
||||
path: '/authorize',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const SidebarLayoutRoute = SidebarLayoutRouteImport.update({
|
||||
id: '/_sidebarLayout',
|
||||
const WorkbenchLayoutRoute = WorkbenchLayoutRouteImport.update({
|
||||
id: '/_workbenchLayout',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const SidebarLayoutIndexRoute = SidebarLayoutIndexRouteImport.update({
|
||||
const WorkbenchLayoutIndexRoute = WorkbenchLayoutIndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => SidebarLayoutRoute,
|
||||
getParentRoute: () => WorkbenchLayoutRoute,
|
||||
} as any)
|
||||
const SidebarLayoutProfileRoute = SidebarLayoutProfileRouteImport.update({
|
||||
id: '/profile',
|
||||
path: '/profile',
|
||||
getParentRoute: () => SidebarLayoutRoute,
|
||||
const WorkbenchLayoutEventsRoute = WorkbenchLayoutEventsRouteImport.update({
|
||||
id: '/events',
|
||||
path: '/events',
|
||||
getParentRoute: () => WorkbenchLayoutRoute,
|
||||
} as any)
|
||||
const WorkbenchLayoutProfileIndexRoute =
|
||||
WorkbenchLayoutProfileIndexRouteImport.update({
|
||||
id: '/profile/',
|
||||
path: '/profile/',
|
||||
getParentRoute: () => WorkbenchLayoutRoute,
|
||||
} as any)
|
||||
const WorkbenchLayoutProfileUserIdRoute =
|
||||
WorkbenchLayoutProfileUserIdRouteImport.update({
|
||||
id: '/profile/$userId',
|
||||
path: '/profile/$userId',
|
||||
getParentRoute: () => WorkbenchLayoutRoute,
|
||||
} as any)
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof SidebarLayoutIndexRoute
|
||||
'/': typeof WorkbenchLayoutIndexRoute
|
||||
'/authorize': typeof AuthorizeRoute
|
||||
'/magicLinkSent': typeof MagicLinkSentRoute
|
||||
'/token': typeof TokenRoute
|
||||
'/profile': typeof SidebarLayoutProfileRoute
|
||||
'/events': typeof WorkbenchLayoutEventsRoute
|
||||
'/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
|
||||
'/profile/': typeof WorkbenchLayoutProfileIndexRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/authorize': typeof AuthorizeRoute
|
||||
'/magicLinkSent': typeof MagicLinkSentRoute
|
||||
'/token': typeof TokenRoute
|
||||
'/profile': typeof SidebarLayoutProfileRoute
|
||||
'/': typeof SidebarLayoutIndexRoute
|
||||
'/events': typeof WorkbenchLayoutEventsRoute
|
||||
'/': typeof WorkbenchLayoutIndexRoute
|
||||
'/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
|
||||
'/profile': typeof WorkbenchLayoutProfileIndexRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/_sidebarLayout': typeof SidebarLayoutRouteWithChildren
|
||||
'/_workbenchLayout': typeof WorkbenchLayoutRouteWithChildren
|
||||
'/authorize': typeof AuthorizeRoute
|
||||
'/magicLinkSent': typeof MagicLinkSentRoute
|
||||
'/token': typeof TokenRoute
|
||||
'/_sidebarLayout/profile': typeof SidebarLayoutProfileRoute
|
||||
'/_sidebarLayout/': typeof SidebarLayoutIndexRoute
|
||||
'/_workbenchLayout/events': typeof WorkbenchLayoutEventsRoute
|
||||
'/_workbenchLayout/': typeof WorkbenchLayoutIndexRoute
|
||||
'/_workbenchLayout/profile/$userId': typeof WorkbenchLayoutProfileUserIdRoute
|
||||
'/_workbenchLayout/profile/': typeof WorkbenchLayoutProfileIndexRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/' | '/authorize' | '/magicLinkSent' | '/token' | '/profile'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/authorize' | '/magicLinkSent' | '/token' | '/profile' | '/'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/_sidebarLayout'
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/authorize'
|
||||
| '/magicLinkSent'
|
||||
| '/token'
|
||||
| '/_sidebarLayout/profile'
|
||||
| '/_sidebarLayout/'
|
||||
| '/events'
|
||||
| '/profile/$userId'
|
||||
| '/profile/'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
| '/authorize'
|
||||
| '/magicLinkSent'
|
||||
| '/token'
|
||||
| '/events'
|
||||
| '/'
|
||||
| '/profile/$userId'
|
||||
| '/profile'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/_workbenchLayout'
|
||||
| '/authorize'
|
||||
| '/magicLinkSent'
|
||||
| '/token'
|
||||
| '/_workbenchLayout/events'
|
||||
| '/_workbenchLayout/'
|
||||
| '/_workbenchLayout/profile/$userId'
|
||||
| '/_workbenchLayout/profile/'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
SidebarLayoutRoute: typeof SidebarLayoutRouteWithChildren
|
||||
WorkbenchLayoutRoute: typeof WorkbenchLayoutRouteWithChildren
|
||||
AuthorizeRoute: typeof AuthorizeRoute
|
||||
MagicLinkSentRoute: typeof MagicLinkSentRoute
|
||||
TokenRoute: typeof TokenRoute
|
||||
@@ -114,46 +150,64 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AuthorizeRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/_sidebarLayout': {
|
||||
id: '/_sidebarLayout'
|
||||
'/_workbenchLayout': {
|
||||
id: '/_workbenchLayout'
|
||||
path: ''
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof SidebarLayoutRouteImport
|
||||
preLoaderRoute: typeof WorkbenchLayoutRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/_sidebarLayout/': {
|
||||
id: '/_sidebarLayout/'
|
||||
'/_workbenchLayout/': {
|
||||
id: '/_workbenchLayout/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof SidebarLayoutIndexRouteImport
|
||||
parentRoute: typeof SidebarLayoutRoute
|
||||
preLoaderRoute: typeof WorkbenchLayoutIndexRouteImport
|
||||
parentRoute: typeof WorkbenchLayoutRoute
|
||||
}
|
||||
'/_sidebarLayout/profile': {
|
||||
id: '/_sidebarLayout/profile'
|
||||
'/_workbenchLayout/events': {
|
||||
id: '/_workbenchLayout/events'
|
||||
path: '/events'
|
||||
fullPath: '/events'
|
||||
preLoaderRoute: typeof WorkbenchLayoutEventsRouteImport
|
||||
parentRoute: typeof WorkbenchLayoutRoute
|
||||
}
|
||||
'/_workbenchLayout/profile/': {
|
||||
id: '/_workbenchLayout/profile/'
|
||||
path: '/profile'
|
||||
fullPath: '/profile'
|
||||
preLoaderRoute: typeof SidebarLayoutProfileRouteImport
|
||||
parentRoute: typeof SidebarLayoutRoute
|
||||
fullPath: '/profile/'
|
||||
preLoaderRoute: typeof WorkbenchLayoutProfileIndexRouteImport
|
||||
parentRoute: typeof WorkbenchLayoutRoute
|
||||
}
|
||||
'/_workbenchLayout/profile/$userId': {
|
||||
id: '/_workbenchLayout/profile/$userId'
|
||||
path: '/profile/$userId'
|
||||
fullPath: '/profile/$userId'
|
||||
preLoaderRoute: typeof WorkbenchLayoutProfileUserIdRouteImport
|
||||
parentRoute: typeof WorkbenchLayoutRoute
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface SidebarLayoutRouteChildren {
|
||||
SidebarLayoutProfileRoute: typeof SidebarLayoutProfileRoute
|
||||
SidebarLayoutIndexRoute: typeof SidebarLayoutIndexRoute
|
||||
interface WorkbenchLayoutRouteChildren {
|
||||
WorkbenchLayoutEventsRoute: typeof WorkbenchLayoutEventsRoute
|
||||
WorkbenchLayoutIndexRoute: typeof WorkbenchLayoutIndexRoute
|
||||
WorkbenchLayoutProfileUserIdRoute: typeof WorkbenchLayoutProfileUserIdRoute
|
||||
WorkbenchLayoutProfileIndexRoute: typeof WorkbenchLayoutProfileIndexRoute
|
||||
}
|
||||
|
||||
const SidebarLayoutRouteChildren: SidebarLayoutRouteChildren = {
|
||||
SidebarLayoutProfileRoute: SidebarLayoutProfileRoute,
|
||||
SidebarLayoutIndexRoute: SidebarLayoutIndexRoute,
|
||||
const WorkbenchLayoutRouteChildren: WorkbenchLayoutRouteChildren = {
|
||||
WorkbenchLayoutEventsRoute: WorkbenchLayoutEventsRoute,
|
||||
WorkbenchLayoutIndexRoute: WorkbenchLayoutIndexRoute,
|
||||
WorkbenchLayoutProfileUserIdRoute: WorkbenchLayoutProfileUserIdRoute,
|
||||
WorkbenchLayoutProfileIndexRoute: WorkbenchLayoutProfileIndexRoute,
|
||||
}
|
||||
|
||||
const SidebarLayoutRouteWithChildren = SidebarLayoutRoute._addFileChildren(
|
||||
SidebarLayoutRouteChildren,
|
||||
const WorkbenchLayoutRouteWithChildren = WorkbenchLayoutRoute._addFileChildren(
|
||||
WorkbenchLayoutRouteChildren,
|
||||
)
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
SidebarLayoutRoute: SidebarLayoutRouteWithChildren,
|
||||
WorkbenchLayoutRoute: WorkbenchLayoutRouteWithChildren,
|
||||
AuthorizeRoute: AuthorizeRoute,
|
||||
MagicLinkSentRoute: MagicLinkSentRoute,
|
||||
TokenRoute: TokenRoute,
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { MainProfile } from '@/components/profile/main-profile';
|
||||
|
||||
export const Route = createFileRoute('/_sidebarLayout/profile')({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-6 px-4 py-6">
|
||||
<MainProfile />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { AppSidebar } from '@/components/sidebar/app-sidebar';
|
||||
import { SiteHeader } from '@/components/site-header';
|
||||
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
|
||||
|
||||
export const Route = createFileRoute('/_sidebarLayout')({
|
||||
export const Route = createFileRoute('/_workbenchLayout')({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
9
client/cms/src/routes/_workbenchLayout/events.tsx
Normal file
9
client/cms/src/routes/_workbenchLayout/events.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
|
||||
export const Route = createFileRoute('/_workbenchLayout/events')({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebarLayout/events"!</div>;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
|
||||
export const Route = createFileRoute('/_sidebarLayout/')({
|
||||
export const Route = createFileRoute('/_workbenchLayout/')({
|
||||
component: Index,
|
||||
});
|
||||
|
||||
34
client/cms/src/routes/_workbenchLayout/profile.$userId.tsx
Normal file
34
client/cms/src/routes/_workbenchLayout/profile.$userId.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { Suspense } from 'react';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import { Profile } from '@/components/profile/profile';
|
||||
import { ProfileError } from '@/components/profile/profile.error';
|
||||
import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
|
||||
import { useOtherUserInfo } from '@/hooks/data/useUserInfo';
|
||||
|
||||
export const Route = createFileRoute('/_workbenchLayout/profile/$userId')({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function ProfileByUserId({ userId }: { userId: string }) {
|
||||
const { data } = useOtherUserInfo(userId);
|
||||
return <Profile user={data.data!} />;
|
||||
}
|
||||
|
||||
function RouteComponent() {
|
||||
const { userId } = Route.useParams();
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-6 px-4 py-6">
|
||||
<ErrorBoundary fallbackRender={(error) => {
|
||||
if ((error.error as { code: number }).code === 403)
|
||||
return <ProfileError reason="用户个人资料未公开" />;
|
||||
else return <ProfileError reason="获取用户个人资料失败" />;
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<ProfileSkeleton />}>
|
||||
<ProfileByUserId userId={userId} />
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
client/cms/src/routes/_workbenchLayout/profile.index.tsx
Normal file
13
client/cms/src/routes/_workbenchLayout/profile.index.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createFileRoute, Navigate } from '@tanstack/react-router';
|
||||
import { useUserInfo } from '@/hooks/data/useUserInfo';
|
||||
|
||||
export const Route = createFileRoute('/_workbenchLayout/profile/')({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { data } = useUserInfo();
|
||||
return (
|
||||
<Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
|
||||
);
|
||||
}
|
||||
12
client/cms/src/stories/event-card.stories.ts
Normal file
12
client/cms/src/stories/event-card.stories.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { EventCard } from '@/components/workbenchCards/event-card';
|
||||
|
||||
const meta = {
|
||||
title: 'Cards/EventCard',
|
||||
component: EventCard,
|
||||
} satisfies Meta<typeof EventCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Primary: Story = {};
|
||||
51
client/cms/src/stories/profile.stories.tsx
Normal file
51
client/cms/src/stories/profile.stories.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Profile } from '@/components/profile/profile';
|
||||
import { ProfileError } from '@/components/profile/profile.error';
|
||||
import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
const meta = {
|
||||
title: 'Profile',
|
||||
component: Profile,
|
||||
decorators: [
|
||||
Story => (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Story />
|
||||
</QueryClientProvider>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof Profile>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
user: {
|
||||
username: 'nvirellia',
|
||||
nickname: 'Noa Virellia',
|
||||
subtitle: '天生骄傲',
|
||||
email: 'noa@requiem.garden',
|
||||
bio: '',
|
||||
avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Skeleton: Story = {
|
||||
render: () => <ProfileSkeleton />,
|
||||
args: {
|
||||
user: {},
|
||||
},
|
||||
};
|
||||
|
||||
export const Error: Story = {
|
||||
render: () => <ProfileError reason="用户个人资料未公开" />,
|
||||
args: {
|
||||
user: {
|
||||
allow_public: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user