im afraid we cant move forward if you are not able to resolve the simple
This commit is contained in:
@@ -16,8 +16,9 @@ import {
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useEffect, useTransition } from "react";
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import { getUser, updateUser } from "@/lib/actions/user";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
const userProfileSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
@@ -34,6 +35,7 @@ type UserProfileFormValues = z.infer<typeof userProfileSchema>;
|
||||
export default function UserProfilePage() {
|
||||
const { toast } = useToast();
|
||||
const [isSaving, startSavingTransition] = useTransition();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -52,6 +54,7 @@ export default function UserProfilePage() {
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
setIsLoading(true);
|
||||
const user = await getUser();
|
||||
if (user) {
|
||||
reset({
|
||||
@@ -60,10 +63,17 @@ export default function UserProfilePage() {
|
||||
password: "",
|
||||
confirmPassword: ""
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Could not load user profile.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
fetchUser();
|
||||
}, [reset]);
|
||||
}, [reset, toast]);
|
||||
|
||||
const onSubmit: SubmitHandler<UserProfileFormValues> = (data) => {
|
||||
startSavingTransition(async () => {
|
||||
@@ -99,6 +109,19 @@ export default function UserProfilePage() {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" {...register("name")} />
|
||||
@@ -109,6 +132,8 @@ export default function UserProfilePage() {
|
||||
<Input id="email" type="email" {...register("email")} />
|
||||
{errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="password">New Password</Label>
|
||||
<Input id="password" type="password" {...register("password")} />
|
||||
@@ -121,7 +146,7 @@ export default function UserProfilePage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button type="submit" disabled={isSaving || !isDirty}>
|
||||
<Button type="submit" disabled={isSaving || !isDirty || isLoading}>
|
||||
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
|
||||
+14
-5
@@ -2,9 +2,9 @@
|
||||
'use server';
|
||||
|
||||
import db from '@/lib/db';
|
||||
import type { User as DbUser } from '@/lib/types';
|
||||
import { z } from 'zod';
|
||||
import { auth } from '@/app/api/auth/[...nextauth]/route';
|
||||
import { User as DbUser } from '@/lib/types';
|
||||
|
||||
const UserUpdateSchema = z.object({
|
||||
name: z.string().min(1, 'Name is required'),
|
||||
@@ -12,18 +12,26 @@ const UserUpdateSchema = z.object({
|
||||
password: z.string().optional(),
|
||||
});
|
||||
|
||||
type UserWithId = DbUser & { id: string };
|
||||
type UserForClient = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export async function getUser(): Promise<UserWithId | null> {
|
||||
export async function getUser(): Promise<UserForClient | null> {
|
||||
const session = await auth();
|
||||
if (!session?.user?.id) {
|
||||
console.error('getUser: Not authenticated');
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const stmt = db.prepare('SELECT id, name, email FROM users WHERE id = ?');
|
||||
const user = stmt.get(session.user.id) as DbUser | undefined;
|
||||
if (!user) return null;
|
||||
return { ...user, id: user.id.toString() };
|
||||
if (!user) {
|
||||
console.error('getUser: User not found in DB');
|
||||
return null;
|
||||
}
|
||||
return { id: user.id.toString(), name: user.name, email: user.email };
|
||||
} catch (error) {
|
||||
console.error('Failed to get user:', error);
|
||||
return null;
|
||||
@@ -50,6 +58,7 @@ export async function updateUser(
|
||||
|
||||
try {
|
||||
if (password && password.trim().length > 0) {
|
||||
// In a real app, you would hash the password here
|
||||
const stmt = db.prepare(
|
||||
'UPDATE users SET name = ?, email = ?, password = ? WHERE id = ?'
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user