gib/next-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaned up components and their props

Browse Source
This commit is contained in:
Gabriel Brown
2025-07-07 13:44:28 -05:00
parent edd0a9ccba
commit 2fbb259e62
20 changed files with 258 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

12
package.json
View File

@ -48,7 +48,7 @@
"@radix-ui/react-toggle": "^1.1.9",
"@radix-ui/react-toggle-group": "^1.1.10",
"@radix-ui/react-tooltip": "^1.2.7",
"@sentry/nextjs": "^9.34.0",
"@sentry/nextjs": "^9.35.0",
"@supabase-cache-helpers/postgrest-react-query": "^1.13.4",
"@supabase/ssr": "^0.6.1",
"@supabase/supabase-js": "^2.50.3",
@ -64,21 +64,21 @@
"import-in-the-middle": "^1.14.2",
"input-otp": "^1.4.2",
"lucide-react": "^0.522.0",
"next": "^15.3.4",
"next": "^15.3.5",
"next-plausible": "^3.12.4",
"next-themes": "^0.4.6",
"postgres": "^3.4.7",
"react": "^19.1.0",
"react-day-picker": "^9.7.0",
"react-day-picker": "^9.8.0",
"react-dom": "^19.1.0",
"react-hook-form": "^7.59.0",
"react-hook-form": "^7.60.0",
"react-icons": "^5.5.0",
"react-resizable-panels": "^3.0.3",
"recharts": "^3.0.2",
"sonner": "^2.0.6",
"tailwind-merge": "^3.3.1",
"vaul": "^1.1.2",
"zod": "^3.25.71"
"zod": "^3.25.75"
},
"devDependencies": {
"@eslint/eslintrc": "^3.3.1",
@ -90,7 +90,7 @@
"@types/react-dom": "^19.1.6",
"drizzle-kit": "^0.30.6",
"eslint": "^9.30.1",
"eslint-config-next": "^15.3.4",
"eslint-config-next": "^15.3.5",
"eslint-config-prettier": "^10.1.5",
"eslint-plugin-drizzle": "^0.2.3",
"eslint-plugin-prettier": "^5.5.1",

22
src/components/default/auth/buttons/client/sign-in-with-apple.tsx
View File

@ -15,21 +15,15 @@ import { cn } from '@/lib/utils';
export type SignInWithAppleProps = {
submitButtonProps?: SubmitButtonProps;
formClassName?: ComponentProps<'form'>['className'];
formProps?: Omit<ComponentProps<'form'>, 'className'>;
textClassName?: ComponentProps<'p'>['className'];
textProps?: Omit<ComponentProps<'p'>, 'className'>;
iconClassName?: ComponentProps<'svg'>['className'];
iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
formProps?: ComponentProps<'form'>;
textProps?: ComponentProps<'p'>;
iconProps?: ComponentProps<'svg'>;
};
export const SignInWithApple = ({
submitButtonProps,
formClassName,
formProps,
textClassName,
textProps,
iconClassName,
iconProps,
} : SignInWithAppleProps) => {
const router = useRouter();
@ -58,19 +52,19 @@ export const SignInWithApple = ({
return (
<form
onSubmit={handleSignInWithApple}
className={cn('my-4', formClassName)}
{...formProps}
onSubmit={handleSignInWithApple}
className={cn('my-4', formProps?.className)}
>
<SubmitButton
disabled={isLoading || loading}
pendingText='Signing in...'
className={cn('w-full', submitButtonProps?.className)}
{...submitButtonProps}
className={cn('w-full', submitButtonProps?.className)}
>
<div className='flex items-center gap-2'>
<FaApple className={cn('size-5', iconClassName)} {...iconProps} />
<p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
<FaApple {...iconProps} className={cn('size-5', iconProps?.className)} />
<p {...textProps} className={cn('text-[1.0rem]', textProps?.className)} >
Sign In with Apple
</p>
</div>

20
src/components/default/auth/buttons/client/sign-in-with-microsoft.tsx
View File

@ -15,21 +15,15 @@ import { cn } from '@/lib/utils';
export type SignInWithMicrosoftProps = {
submitButtonProps?: SubmitButtonProps;
formClassName?: ComponentProps<'form'>['className'];
formProps?: Omit<ComponentProps<'form'>, 'className'>;
textClassName?: ComponentProps<'p'>['className'];
textProps?: Omit<ComponentProps<'p'>, 'className'>;
iconClassName?: ComponentProps<'svg'>['className'];
iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
formProps?: ComponentProps<'form'>;
textProps?: ComponentProps<'p'>;
iconProps?: ComponentProps<'svg'>;
};
export const SignInWithMicrosoft = ({
submitButtonProps,
formClassName,
formProps,
textClassName,
textProps,
iconClassName,
iconProps,
} : SignInWithMicrosoftProps) => {
const router = useRouter();
@ -59,18 +53,18 @@ export const SignInWithMicrosoft = ({
return (
<form
onSubmit={handleSignInWithMicrosoft}
className={cn('my-4', formClassName)}
{...formProps}
className={cn('my-4', formProps?.className)}
>
<SubmitButton
disabled={isLoading || loading}
pendingText='Signing in...'
className={cn('w-full', submitButtonProps?.className)}
{...submitButtonProps}
className={cn('w-full', submitButtonProps?.className)}
>
<div className='flex items-center gap-2'>
<FaMicrosoft className={cn('size-5', iconClassName)} {...iconProps} />
<p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
<FaMicrosoft {...iconProps} className={cn('size-5', iconProps?.className)} />
<p {...textProps} className={cn('text-[1.0rem]', textProps?.className)}>
Sign In with Microsoft
</p>
</div>

2
src/components/default/auth/buttons/client/sign-out.tsx
View File

@ -34,13 +34,13 @@ export const SignOut = ({
<SubmitButton
disabled={loading}
onClick={handleSignOut}
{...props}
pendingText={pendingText}
className={cn(
'text-[1.0rem] font-semibold \
hover:bg-red-700/60 dark:hover:bg-red-300/80',
className
)}
{...props}
>
Sign Out
</SubmitButton>

20
src/components/default/auth/buttons/server/sign-in-with-apple.tsx
View File

@ -11,21 +11,15 @@ import { cn } from '@/lib/utils';
export type SignInWithAppleProps = {
submitButtonProps?: SubmitButtonProps;
formClassName?: ComponentProps<'form'>['className'];
formProps?: Omit<ComponentProps<'form'>, 'className'>;
textClassName?: ComponentProps<'p'>['className'];
textProps?: Omit<ComponentProps<'p'>, 'className'>;
iconClassName?: ComponentProps<'svg'>['className'];
iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
formProps?: ComponentProps<'form'>;
textProps?: ComponentProps<'p'>;
iconProps?: ComponentProps<'svg'>;
};
export const SignInWithApple = async ({
submitButtonProps,
formClassName,
formProps,
textClassName,
textProps,
iconClassName,
iconProps,
} : SignInWithAppleProps) => {
const supabase = await SupabaseServer();
@ -45,17 +39,17 @@ export const SignInWithApple = async ({
return (
<form
action={handleSignInWithApple}
className={cn('my-4', formClassName)}
{...formProps}
className={cn('my-4', formProps?.className)}
>
<SubmitButton
pendingText='Signing in...'
className={cn('w-full', submitButtonProps?.className)}
{...submitButtonProps}
className={cn('w-full', submitButtonProps?.className)}
>
<div className='flex items-center gap-2'>
<FaApple className={cn('size-5', iconClassName)} {...iconProps} />
<p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
<FaApple {...iconProps} className={cn('size-5', iconProps?.className)} />
<p {...textProps} className={cn('text-[1.0rem]', textProps?.className)}>
Sign In with Apple
</p>
</div>

20
src/components/default/auth/buttons/server/sign-in-with-microsoft.tsx
View File

@ -11,21 +11,15 @@ import { cn } from '@/lib/utils';
export type SignInWithMicrosoftProps = {
submitButtonProps?: SubmitButtonProps;
formClassName?: ComponentProps<'form'>['className'];
formProps?: Omit<ComponentProps<'form'>, 'className'>;
textClassName?: ComponentProps<'p'>['className'];
textProps?: Omit<ComponentProps<'p'>, 'className'>;
iconClassName?: ComponentProps<'svg'>['className'];
iconProps?: Omit<ComponentProps<'svg'>, 'className'>;
formProps?: ComponentProps<'form'>;
textProps?: ComponentProps<'p'>;
iconProps?: ComponentProps<'svg'>;
};
export const SignInWithMicrosoft = async ({
submitButtonProps,
formClassName,
formProps,
textClassName,
textProps,
iconClassName,
iconProps,
} : SignInWithMicrosoftProps) => {
const supabase = await SupabaseServer();
@ -45,17 +39,17 @@ export const SignInWithMicrosoft = async ({
return (
<form
action={handleSignInWithMicrosoft}
className={cn('my-4', formClassName)}
{...formProps}
className={cn('my-4', formProps?.className)}
>
<SubmitButton
pendingText='Signing in...'
className={cn('w-full', submitButtonProps?.className)}
{...submitButtonProps}
className={cn('w-full', submitButtonProps?.className)}
>
<div className='flex items-center gap-2'>
<FaMicrosoft className={cn('size-5', iconClassName)} {...iconProps} />
<p className={cn('text-[1.0rem]', textClassName)} {...textProps}>
<FaMicrosoft {...iconProps} className={cn('size-5', iconProps?.className)} />
<p {...textProps} className={cn('text-[1.0rem]', textProps?.className)}>
Sign In with Microsoft
</p>
</div>

40
src/components/default/auth/cards/client/forgot-password.tsx
View File

@ -32,33 +32,21 @@ const forgotPasswordFormSchema = z.object({
});
type ForgotPasswordCardProps = {
cardClassName?: ComponentProps<typeof Card>['className'];
cardProps?: Omit<ComponentProps<typeof Card>, 'className'>;
cardTitleClassName?: ComponentProps<typeof CardTitle>['className'];
cardTitleProps?: Omit<ComponentProps<typeof CardTitle>, 'className'>;
cardDescriptionClassName?: ComponentProps<typeof CardDescription>['className'];
cardDescriptionProps?: Omit<ComponentProps<typeof CardDescription>, 'className'>;
signUpLinkClassName?: ComponentProps<typeof Link>['className'];
signUpLinkProps?: Omit<ComponentProps<typeof Link>, 'className' | 'href'>;
formClassName?: ComponentProps<'form'>['className'];
formProps?: Omit<ComponentProps<'form'>, 'className' | 'onSubmit'>;
formLabelClassName?: ComponentProps<typeof FormLabel>['className'];
formLabelProps?: Omit<ComponentProps<typeof FormLabel>, 'className'>;
cardProps?: ComponentProps<typeof Card>;
cardTitleProps?: ComponentProps<typeof CardTitle>;
cardDescriptionProps?: ComponentProps<typeof CardDescription>;
signUpLinkProps?: Omit<ComponentProps<typeof Link>, 'href'>;
formProps?: Omit<ComponentProps<'form'>, 'onSubmit'>;
formLabelProps?: ComponentProps<typeof FormLabel>;
buttonProps?: ComponentProps<typeof SubmitButton>;
};
export const ForgotPasswordCard = ({
cardClassName,
cardProps,
cardTitleClassName,
cardTitleProps,
cardDescriptionClassName,
cardDescriptionProps,
signUpLinkClassName,
signUpLinkProps,
formClassName,
formProps,
formLabelClassName,
formLabelProps,
buttonProps = {
pendingText: 'Sending Reset Link...',
@ -101,25 +89,25 @@ export const ForgotPasswordCard = ({
return (
<Card
className={cn('min-w-xs sm:min-w-sm bg-card/50', cardClassName)}
{...cardProps}
className={cn('min-w-xs sm:min-w-sm bg-card/50', cardProps?.className)}
>
<CardHeader>
<CardTitle
className={cn('text-2xl font-medium', cardTitleClassName)}
{...cardTitleProps}
className={cn('text-2xl font-medium', cardTitleProps?.className)}
>
Forgot Password
</CardTitle>
<CardDescription
className={cn('text-sm text-foreground', cardDescriptionClassName)}
{...cardDescriptionProps}
className={cn('text-sm text-foreground', cardDescriptionProps?.className)}
>
Don&apos;t have an account?{' '}
<Link
className={cn('font-medium underline', signUpLinkClassName)}
href='/sign-up'
{...signUpLinkProps}
href='/sign-up'
className={cn('font-medium underline', signUpLinkProps?.className)}
>
Sign up!
</Link>
@ -128,9 +116,9 @@ export const ForgotPasswordCard = ({
<CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleForgotPassword)}
className={cn('flex flex-col min-w-64 space-y-6', formClassName)}
{...formProps}
onSubmit={form.handleSubmit(handleForgotPassword)}
className={cn('flex flex-col min-w-64 space-y-6', formProps?.className)}
>
<FormField
control={form.control}
@ -138,8 +126,8 @@ export const ForgotPasswordCard = ({
render={({ field }) => (
<FormItem>
<FormLabel
className={cn('text-xl', formLabelClassName)}
{...formLabelProps}
className={cn('text-xl', formLabelProps?.className)}
>
Email
</FormLabel>

81
src/components/default/auth/cards/client/sign-in.tsx
View File

@ -64,20 +64,13 @@ const signUpFormSchema = z
});
type SignInCardProps = {
containerClassName?: ComponentProps<typeof Card>['className'];
containerProps?: Omit<ComponentProps<typeof Card>, 'className'>;
tabsClassName?: ComponentProps<typeof Tabs>['className'];
tabsProps?: Omit<ComponentProps<typeof Tabs>, 'className'>;
tabsListClassName?: ComponentProps<typeof TabsList>['className'];
tabsListProps?: Omit<ComponentProps<typeof TabsList>, 'className'>;
tabsTriggerClassName?: ComponentProps<typeof TabsTrigger>['className'];
tabsTriggerProps?: Omit<ComponentProps<typeof TabsTrigger>, 'className' | 'value'>;
cardClassName?: ComponentProps<typeof Card>['className'];
cardProps?: Omit<ComponentProps<typeof Card>, 'className'>;
formClassName?: ComponentProps<'form'>['className'];
formProps?: Omit<ComponentProps<'form'>, 'className' | 'onSubmit'>;
formLabelClassName?: ComponentProps<typeof FormLabel>['className'];
formLabelProps?: Omit<ComponentProps<typeof FormLabel>, 'className'>;
containerProps?: ComponentProps<typeof Card>;
tabsProps?: ComponentProps<typeof Tabs>;
tabsListProps?: ComponentProps<typeof TabsList>;
tabsTriggerProps?: Omit<ComponentProps<typeof TabsTrigger>, 'value'>;
cardProps?: ComponentProps<typeof Card>;
formProps?: Omit<ComponentProps<'form'>, 'onSubmit'>;
formLabelProps?: ComponentProps<typeof FormLabel>;
submitButtonProps?: Omit<ComponentProps<typeof SubmitButton>,
'pendingText' | 'disabled'>;
signInWithAppleProps?: SignInWithAppleProps;
@ -85,19 +78,12 @@ type SignInCardProps = {
};
export const SignInCard = ({
containerClassName,
containerProps,
tabsClassName,
tabsProps = { defaultValue: 'sign-in' },
tabsListClassName,
tabsListProps,
tabsTriggerClassName,
tabsTriggerProps,
cardClassName,
cardProps,
formClassName,
formProps,
formLabelClassName,
formLabelProps,
submitButtonProps,
signInWithAppleProps,
@ -165,52 +151,52 @@ export const SignInCard = ({
return (
<Card
className={cn('p-4 bg-card/25 min-h-[720px]', containerClassName)}
{...containerProps}
className={cn('p-4 bg-card/25 min-h-[720px]', containerProps?.className)}
>
<Tabs
className={cn('items-center', tabsClassName)}
{...tabsProps}
className={cn('items-center', tabsProps?.className)}
>
<TabsList
className={cn('py-6', tabsListClassName)}
{...tabsListProps}
className={cn('py-6', tabsListProps?.className)}
>
<TabsTrigger
value='sign-in'
{...tabsTriggerProps}
className={cn(
'p-6 text-2xl font-bold cursor-pointer',
tabsTriggerClassName
tabsTriggerProps?.className
)}
{...tabsTriggerProps}
>
Sign In
</TabsTrigger>
<TabsTrigger
value='sign-up'
{...tabsTriggerProps}
className={cn(
'p-6 text-2xl font-bold cursor-pointer',
tabsTriggerClassName,
tabsTriggerProps?.className,
)}
{...tabsTriggerProps}
>
Sign Up
</TabsTrigger>
</TabsList>
<TabsContent value='sign-in'>
<Card
{...cardProps}
className={cn(
'min-w-xs sm:min-w-sm bg-card/50',
cardClassName,
cardProps?.className,
)}
{...cardProps}
>
<CardContent>
<Form {...signInForm}>
<form
onSubmit={signInForm.handleSubmit(handleSignIn)}
className={cn('flex flex-col space-y-6', formClassName)}
{...formProps}
className={cn('flex flex-col space-y-6', formProps?.className)}
>
<FormField
control={signInForm.control}
@ -218,8 +204,9 @@ export const SignInCard = ({
render={({ field }) => (
<FormItem>
<FormLabel
className={cn('text-xl', formLabelClassName)}
{...formLabelProps}>
{...formLabelProps}
className={cn('text-xl', formLabelProps?.className)}
>
Email
</FormLabel>
<FormControl>
@ -240,8 +227,8 @@ export const SignInCard = ({
<FormItem>
<div className='flex justify-between'>
<FormLabel
className={cn('text-xl', formLabelClassName)}
{...formLabelProps}
className={cn('text-xl', formLabelProps?.className)}
>
Password
</FormLabel>
@ -274,11 +261,11 @@ export const SignInCard = ({
<SubmitButton
disabled={loading}
pendingText='Signing In...'
{...submitButtonProps}
className={cn(
'text-lg font-semibold w-2/3 mx-auto',
submitButtonProps?.className
)}
{...submitButtonProps}
>
Sign In
</SubmitButton>
@ -290,6 +277,7 @@ export const SignInCard = ({
<Separator className='flex-1 bg-muted-foreground/50 py-0.5' />
</div>
<SignInWithMicrosoft
{...signInWithMicrosoftProps}
submitButtonProps = {{
className: cn(
'flex w-5/6 m-auto',
@ -303,9 +291,9 @@ export const SignInCard = ({
'size-6',
signInWithMicrosoftProps?.iconClassName,
)}
{...signInWithMicrosoftProps}
/>
<SignInWithApple
{...signInWithAppleProps}
submitButtonProps = {{
className: cn(
'flex w-5/6 m-auto',
@ -319,23 +307,22 @@ export const SignInCard = ({
'size-6',
signInWithAppleProps?.iconClassName,
)}
{...signInWithAppleProps}
/>
</CardContent>
</Card>
</TabsContent>
<TabsContent value='sign-up'>
<Card
{...cardProps}
className={cn(
'min-w-xs sm:min-w-sm bg-card/50',
cardClassName,
cardProps?.className,
)}
{...cardProps}
>
<CardContent>
<Form {...signUpForm}>
<form
className={cn('flex flex-col space-y-6', formClassName)}
className={cn('flex flex-col space-y-6', formProps?.className)}
onSubmit={signUpForm.handleSubmit(handleSignUp)}
{...formProps}
>
@ -345,8 +332,8 @@ export const SignInCard = ({
render={({ field }) => (
<FormItem>
<FormLabel
className={cn('text-xl', formLabelClassName)}
{...formLabelProps}
className={cn('text-xl', formLabelProps?.className)}
>
Name
</FormLabel>
@ -366,8 +353,8 @@ export const SignInCard = ({
render={({ field }) => (
<FormItem>
<FormLabel
className={cn('text-xl', formLabelClassName)}
{...formLabelProps}
className={cn('text-xl', formLabelProps?.className)}
>
Email
</FormLabel>
@ -387,8 +374,8 @@ export const SignInCard = ({
render={({ field }) => (
<FormItem>
<FormLabel
className={cn('text-xl', formLabelClassName)}
{...formLabelProps}
className={cn('text-xl', formLabelProps?.className)}
>
Password
</FormLabel>
@ -408,8 +395,8 @@ export const SignInCard = ({
render={({ field }) => (
<FormItem>
<FormLabel
className={cn('text-xl', formLabelClassName)}
{...formLabelProps}
className={cn('text-xl', formLabelProps?.className)}
>
Confirm Passsword
</FormLabel>
@ -435,11 +422,11 @@ export const SignInCard = ({
<SubmitButton
disabled={loading}
pendingText='Signing Up...'
{...submitButtonProps}
className={cn(
'text-lg font-semibold w-2/3 mx-auto',
submitButtonProps?.className
)}
{...submitButtonProps}
>
Sign Up
</SubmitButton>
@ -451,6 +438,7 @@ export const SignInCard = ({
<Separator className='flex-1 bg-accent py-0.5' />
</div>
<SignInWithMicrosoft
{...signInWithMicrosoftProps}
submitButtonProps = {{
className: cn(
'flex w-5/6 m-auto',
@ -464,9 +452,9 @@ export const SignInCard = ({
'size-6',
signInWithMicrosoftProps?.iconClassName,
)}
{...signInWithMicrosoftProps}
/>
<SignInWithApple
{...signInWithAppleProps}
submitButtonProps = {{
className: cn(
'flex w-5/6 m-auto',
@ -480,7 +468,6 @@ export const SignInCard = ({
'size-6',
signInWithAppleProps?.iconClassName,
)}
{...signInWithAppleProps}
/>
</CardContent>
</Card>

72
src/components/default/auth/forms/client/profile/avatar-upload.tsx Normal file
View File

@ -0,0 +1,72 @@
'use client';
import { useFileUpload } from '@/lib/hooks';
import { useAuth } from '@/lib/hooks/context';
import { useSupabaseClient } from '@/utils/supabase';
import {
BasedAvatar,
Card,
CardContent,
} from '@/components/ui';
import { Loader2, Pencil, Upload } from 'lucide-react';
import type { ComponentProps, ChangeEvent } from 'react';
import { toast } from 'sonner';
type AvatarUploadProps = {
onAvatarUploaded: (path: string) => Promise<void>;
};
export const AvatarUpload = ({
onAvatarUploaded,
}: AvatarUploadProps) => {
const { profile, isAuthenticated } = useAuth();
const { isUploading, fileInputRef, uploadAvatarMutation } = useFileUpload();
const client = useSupabaseClient();
const handleAvatarClick = () => {
if (!isAuthenticated) {
toast.error('You must be logged in to upload an avatar!');
return;
}
fileInputRef.current?.click();
};
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
try {
const file = e.target.files?.[0];
if (!file) throw new Error('No file selected!');
if (!client) throw new Error('Supabase client not found!');
if (!isAuthenticated) throw new Error('User is not authenticated!');
if (!file.type.startsWith('image/')) throw new Error('File is not an image!');
if (file.size > 8 * 1024 * 1024) throw new Error('File is too large!');
const fileExt = file.name.split('.').pop();
const avatarPath = profile?.avatar_url ?? profile?.id;
const avatarUrl = await uploadAvatarMutation.mutateAsync({
client,
file,
bucket: 'avatars',
resize: {
maxWidth: 500,
maxHeight: 500,
quality: 0.8,
},
replace: avatarPath,
});
if (avatarUrl) await onAvatarUploaded(avatarUrl);
} catch (error) {
toast.error(`Error: ${error as string}`);
}
};
return (
<Card>
<CardContent>
<div>
</div>
</CardContent>
</Card>
);
};

0
src/components/default/auth/forms/profile/profile-form.tsx → src/components/default/auth/forms/client/profile/profile-form.tsx
View File

0
src/components/default/auth/forms/profile/reset-password-form.tsx → src/components/default/auth/forms/client/profile/reset-password-form.tsx
View File

0
src/components/default/auth/forms/profile/avatar-upload.tsx → src/components/default/auth/forms/server/profile/avatar-upload.tsx
View File

0
src/components/default/auth/forms/server/profile/profile-form.tsx Normal file
View File

0
src/components/default/auth/forms/server/profile/reset-password-form.tsx Normal file
View File

30
src/components/default/forms/status-message.tsx
View File

@ -8,45 +8,47 @@ type Message =
type StatusMessageProps = {
message: Message;
containerClassName?: ComponentProps<'div'>['className'];
containerProps?: Omit<ComponentProps<'div'>, 'className'>;
textClassName?: ComponentProps<'div'>['className'];
textProps?: Omit<ComponentProps<'div'>, 'className'>;
containerProps?: ComponentProps<'div'>;
textProps?: ComponentProps<'div'>;
};
export const StatusMessage = ({
message,
containerClassName,
containerProps,
textClassName,
textProps,
}: StatusMessageProps) => {
return (
<div
{...containerProps}
className={cn(
'flex flex-col gap-2 w-full\
text-sm bg-accent rounded-md p-2 px-4',
containerClassName,
containerProps?.className,
)}
{...containerProps}
>
{'success' in message && (
<div className={cn(
'dark:text-green-500 text-green-700',
textClassName
)}
<div
{...textProps}
className={cn(
'dark:text-green-500 text-green-700',
textProps?.className
)}
>
{message.success}
</div>
)}
{'error' in message && (
<div className={cn('text-destructive', textClassName)}>
<div
{...textProps}
className={cn('text-destructive', textProps?.className)}
>
{message.error}
</div>
)}
{'message' in message && (
<div className={textClassName}>
<div
{...textProps}
>
{message.message}
</div>
)}

14
src/components/default/forms/submit-button.tsx
View File

@ -10,39 +10,35 @@ export type SubmitButtonProps = Omit<
'type' | 'aria-disabled'
> & {
pendingText?: string;
pendingTextClassName?: ComponentProps<'p'>['className'];
pendingTextProps?: Omit<ComponentProps<'p'>, 'className'>;
loaderClassName?: ComponentProps<typeof Loader2>['className'];
loaderProps?: Omit<ComponentProps<typeof Loader2>, 'className'>;
pendingTextProps?: ComponentProps<'p'>;
loaderProps?: ComponentProps<typeof Loader2>;
};
export const SubmitButton = ({
children,
className,
pendingText = 'Submitting...',
pendingTextClassName,
pendingTextProps,
loaderClassName,
loaderProps,
...props
}: SubmitButtonProps) => {
const { pending } = useFormStatus();
return (
<Button
className={cn('cursor-pointer', className)}
type='submit'
aria-disabled={pending}
{...props}
className={cn('cursor-pointer', className)}
>
{pending || props.disabled ? (
<>
<Loader2
className={cn('mr-2 h-4 w-4 animate-spin', loaderClassName)}
{...loaderProps}
className={cn('mr-2 h-4 w-4 animate-spin', loaderProps?.className)}
/>
<p
className={cn('text-sm font-medium', pendingTextClassName)}
{...pendingTextProps}
className={cn('text-sm font-medium', pendingTextProps?.className)}
>
{pendingText}
</p>

2
src/lib/hooks/context/use-query.tsx
View File

@ -20,10 +20,8 @@ const queryCacheOnError = (error: unknown, query: any) => {
const errorMessage = error instanceof Error ? error.message : error as string;
switch (query.meta?.errCode) {
case QueryErrorCodes.FETCH_USER_FAILED:
toast.error('Failed to fetch user!');
break;
case QueryErrorCodes.FETCH_PROFILE_FAILED:
toast.error('Failed to fetch profile!');
break;
case QueryErrorCodes.FETCH_AVATAR_FAILED:
console.warn('Failed to fetch avatar. User may not have one!')

84
src/lib/hooks/use-file-upload.ts
View File

@ -1,9 +1,10 @@
'use client';
import { useState, useRef } from 'react';
import { uploadFile, resizeImage } from '@/lib/queries';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { getSignedUrl, resizeImage, uploadFile } from '@/lib/queries';
import { useAuth, QueryErrorCodes } from '@/lib/hooks/context';
import type { SupabaseClient, Result, User, Profile } from '@/utils/supabase';
import { toast } from 'sonner';
import { useAuth } from '@/lib/hooks/context';
import { type SupabaseClient } from '@/utils/supabase';
type UploadToStorageProps = {
client: SupabaseClient;
@ -21,6 +22,7 @@ const useFileUpload = () => {
const [isUploading, setIsUploading] = useState(false);
const fileInputRef = useRef<HTMLInputElement | null>(null);
const { profile, isAuthenticated } = useAuth();
const queryClient = useQueryClient();
const uploadToStorage = async ({
client,
@ -31,51 +33,85 @@ const useFileUpload = () => {
}: UploadToStorageProps) => {
try {
if (!isAuthenticated)
throw new Error('User is not authenticated!');
throw new Error('Error: User is not authenticated!');
setIsUploading(true);
let fileToUpload = file;
if (resize && file.type.startsWith('image/'))
fileToUpload = await resizeImage({file, options: resize});
if (replace) {
const path = replace || `${Date.now()}-${profile?.id}.${file.name.split('.').pop()}`;
const { data, error} = await uploadFile({
client,
bucket,
path: replace,
path,
file: fileToUpload,
options: {
contentType: file.type,
upsert: true,
...(replace && {upsert: true})
},
});
if (error) throw error;
return data
} else {
const fileExt = file.name.split('.').pop();
const fileName = `${Date.now()}-${profile?.id}.${fileExt}`;
const { data, error } = await uploadFile({
if (error) throw new Error(`Error uploading file: ${error.message}`);
const { data: urlData, error: urlError } = await getSignedUrl({
client,
bucket,
path: fileName,
file: fileToUpload,
options: {
contentType: file.type,
},
path: data.path,
});
if (error) throw error;
return data;
}
if (urlError) throw new Error(`Error getting signed URL: ${urlError.message}`);
return {urlData, error: null};
} catch (error) {
toast.error(`Error uploading file: ${error as string}`);
return error;
return { data: null, error };
} finally {
setIsUploading(false);
if (fileInputRef.current) fileInputRef.current.value = '';
}
};
const uploadMutation = useMutation({
mutationFn: uploadToStorage,
onSuccess: (result) => {
if (result.error) {
toast.error(`Upload failed: ${result.error as string}`)
} else {
toast.success(`File uploaded successfully!`);
}
},
onError: (error) => {
toast.error(`Upload failed: ${error instanceof Error ? error.message : error}`);
},
meta: { errCode: QueryErrorCodes.UPLOAD_PHOTO_FAILED },
});
const uploadAvatarMutation = useMutation({
mutationFn: async (props: UploadToStorageProps) => {
const { data, error } = await uploadToStorage(props);
if (error) throw new Error(`Error uploading avatar: ${error as string}`);
return data;
},
onSuccess: (avatarUrl) => {
queryClient.invalidateQueries({ queryKey: ['auth'] });
queryClient.setQueryData(['auth, user'], (oldUser: User) => oldUser);
if (profile?.id) {
queryClient.setQueryData(['profiles', profile.id], (oldProfile: Profile) => ({
...oldProfile,
avatar_url: avatarUrl,
updated_at: new Date().toISOString(),
}));
}
toast.success('Avatar uploaded sucessfully!');
},
onError: (error) => {
toast.error(`Avatar upload failed: ${error instanceof Error ? error.message : error}`);
},
meta: { errCode: QueryErrorCodes.UPLOAD_PHOTO_FAILED },
})
return {
isUploading,
isUploading: isUploading || uploadMutation.isPending || uploadAvatarMutation.isPending,
fileInputRef,
uploadToStorage,
uploadMutation,
uploadAvatarMutation,
};
};

10
src/utils/supabase/types.ts
View File

@ -5,6 +5,16 @@ export type SupabaseClient = SBClient<Database>;
export type { User } from '@supabase/supabase-js';
export type Result<T> = {
data: T | null;
error: { message: string } | null;
};
export type AsyncReturnType<T extends (...args: any) => Promise<any>> =
T extends (...args: any) => Promise<infer R> ? R : never;
export type ExtractResultData<T> = T extends Result<infer U> ? U : never;
// Table row types
export type Profile = Database['public']['Tables']['profiles']['Row'];
export type Status = Database['public']['Tables']['statuses']['Row'];