270 lines
9.4 KiB
TypeScript
270 lines
9.4 KiB
TypeScript
import { FC, ReactElement, useState, useEffect } from 'react';
|
|
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
|
|
import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
|
|
import { useNavigate } from 'react-router';
|
|
import { useForm, Controller } from 'react-hook-form';
|
|
import {
|
|
userOnboardingSchema,
|
|
TUserOnboardingForm,
|
|
useUpdateUserMe,
|
|
useUploadAvatar,
|
|
useUserMe,
|
|
useAuthStore,
|
|
} from '@imphnen-frontend-service/service';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { toast } from 'sonner';
|
|
|
|
import { CitySelect } from '../../../components/city-select';
|
|
import { Icon } from '@iconify/react';
|
|
|
|
const ROLE_OPTIONS = [
|
|
'Frontend Developer',
|
|
'Backend Developer',
|
|
'Full Stack Developer',
|
|
'DevOps Engineer',
|
|
'UI/UX Designer',
|
|
'Product Manager',
|
|
'Data Scientist',
|
|
'Mobile Developer',
|
|
];
|
|
|
|
const UserOnboardingPage: FC = (): ReactElement => {
|
|
const navigate = useNavigate();
|
|
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
|
const [avatarPreview, setAvatarPreview] = useState<string>('');
|
|
|
|
const { data: userData } = useUserMe();
|
|
const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
|
|
const { mutateAsync: uploadAvatar, isPending: isUploading } =
|
|
useUploadAvatar();
|
|
const { session } = useAuthStore();
|
|
|
|
const form = useForm<TUserOnboardingForm>({
|
|
resolver: zodResolver(userOnboardingSchema),
|
|
mode: 'all',
|
|
defaultValues: {
|
|
fullname: session?.user?.fullname || userData?.data?.fullname || '',
|
|
location: session?.user?.location || '',
|
|
bio: session?.user?.bio || '',
|
|
skills: session?.user?.skills || [],
|
|
},
|
|
});
|
|
|
|
// Set initial avatar preview from GitHub avatar if available
|
|
useEffect(() => {
|
|
if (session?.user?.avatar && !avatarPreview) {
|
|
setAvatarPreview(session.user.avatar);
|
|
}
|
|
}, [session?.user?.avatar, avatarPreview]);
|
|
|
|
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
setAvatarFile(file);
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setAvatarPreview(reader.result as string);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const onSubmit = form.handleSubmit(async (data) => {
|
|
try {
|
|
let avatarUrl = session?.user?.avatar || null;
|
|
|
|
// Upload avatar if a new file was selected
|
|
if (avatarFile) {
|
|
const uploadResult = await uploadAvatar(avatarFile);
|
|
avatarUrl = uploadResult.data.url;
|
|
}
|
|
|
|
// Update user in Supabase
|
|
await updateUser({
|
|
fullname: data.fullname,
|
|
avatar: avatarUrl,
|
|
location: data.location,
|
|
bio: data.bio,
|
|
skills: data.skills,
|
|
});
|
|
|
|
// Wait a bit for the onSuccess handler to update localStorage
|
|
// The updateUser mutation's onSuccess handler updates the Zustand store and localStorage
|
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
|
|
// Use window.location for a full page reload to ensure middleware sees updated localStorage
|
|
globalThis.location.href = '/dashboard';
|
|
} catch (error) {
|
|
toast.error(
|
|
error instanceof Error
|
|
? error.message
|
|
: 'Onboarding failed. Please try again.'
|
|
);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950 px-4 py-8">
|
|
<div className="bg-white dark:bg-neutral-900 w-full max-w-2xl p-8 rounded-xl shadow-lg dark:shadow-neutral-950/50">
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
Complete Your Profile
|
|
</h1>
|
|
<p className="text-gray-600 font-sans dark:text-neutral-400">
|
|
Tell us more about yourself to get started
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={onSubmit} className="space-y-6">
|
|
{/* Avatar Upload */}
|
|
<div className="flex flex-col items-center space-y-4">
|
|
<div className="relative">
|
|
{avatarPreview ? (
|
|
<img
|
|
src={avatarPreview}
|
|
alt="Avatar preview"
|
|
className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700"
|
|
/>
|
|
) : (
|
|
<div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center">
|
|
<Icon
|
|
icon="ic:baseline-person"
|
|
width="48"
|
|
height="48"
|
|
className="text-gray-400 dark:text-neutral-500"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<label htmlFor="avatar" className="cursor-pointer">
|
|
<span className="px-4 py-2 bg-primary-500 dark:bg-primary-600 text-white rounded-lg hover:bg-primary-600 dark:hover:bg-primary-700 inline-block">
|
|
{avatarPreview ? 'Change Photo' : 'Upload Photo'}
|
|
</span>
|
|
<input
|
|
id="avatar"
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={handleAvatarChange}
|
|
/>
|
|
</label>
|
|
<p className="text-xs text-gray-500 dark:text-neutral-500 mt-2 text-center">
|
|
Optional, but highly recommended
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Full Name */}
|
|
<ControlledInputField
|
|
control={form.control}
|
|
label="Full Name"
|
|
placeholder="Enter your full name"
|
|
name="fullname"
|
|
className="px-3 py-2 text-label2 rounded-lg max-h-auto text-base"
|
|
size="md"
|
|
isRequired={true}
|
|
/>
|
|
|
|
{/* City */}
|
|
<div className="space-y-2">
|
|
<label className="block text-base font-medium text-gray-700 dark:text-neutral-300">
|
|
City <span className="text-red-500">*</span>
|
|
</label>
|
|
<Controller
|
|
control={form.control}
|
|
name="location"
|
|
render={({ field, fieldState }) => (
|
|
<CitySelect
|
|
value={field.value}
|
|
onChange={field.onChange}
|
|
error={fieldState.error?.message}
|
|
placeholder="Search your city..."
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Role/Skills */}
|
|
<div className="space-y-2">
|
|
<label className="block text-base font-medium text-gray-700 dark:text-neutral-300">
|
|
Role / Skills
|
|
</label>
|
|
<Controller
|
|
control={form.control}
|
|
name="skills"
|
|
render={({ field }) => (
|
|
<div className="space-y-2">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{ROLE_OPTIONS.map((role) => (
|
|
<label
|
|
key={role}
|
|
className="flex items-center space-x-2 cursor-pointer"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={field.value?.includes(role)}
|
|
onChange={(e) => {
|
|
const newValue = e.target.checked
|
|
? [...(field.value || []), role]
|
|
: (field.value || []).filter((v) => v !== role);
|
|
field.onChange(newValue);
|
|
}}
|
|
className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 dark:text-primary-500 focus:ring-blue-500 dark:focus:ring-primary-500 dark:bg-neutral-800"
|
|
/>
|
|
<span className="text-sm dark:text-neutral-300">
|
|
{role}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Bio */}
|
|
<div className="space-y-2">
|
|
<label className="block text-base font-medium text-gray-700 dark:text-neutral-300">
|
|
Bio{' '}
|
|
<span className="text-gray-400 dark:text-neutral-500">
|
|
(Optional)
|
|
</span>
|
|
</label>
|
|
<Controller
|
|
control={form.control}
|
|
name="bio"
|
|
render={({ field, fieldState }) => (
|
|
<div className="flex">
|
|
<Textarea
|
|
{...field}
|
|
placeholder="Tell us about yourself..."
|
|
rows={4}
|
|
className="w-full rounded-lg text-sm"
|
|
style={{ resize: 'vertical' }}
|
|
/>
|
|
{fieldState.error && (
|
|
<p className="text-sm text-red-500 mt-1">
|
|
{fieldState.error.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
className="w-full"
|
|
type="submit"
|
|
disabled={!form.formState.isValid || isUpdating || isUploading}
|
|
>
|
|
{isUpdating || isUploading ? 'Saving...' : 'Complete Setup'}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserOnboardingPage;
|