Skip to content

Commit

Permalink
add personal info
Browse files Browse the repository at this point in the history
  • Loading branch information
@MustaphaJAM
MustaphaJAM committed Jun 12, 2024
1 parent d42d118 commit 34a2cbe
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 64 deletions.
16 changes: 8 additions & 8 deletions app/api/profile/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,23 @@ export async function PUT(request: Request) {
// Parse the request body as JSON
const body = await request.json();

// Destructure the image URL from the request body
const { image } = body;
// Destructure the fields from the request body
const { username, name, surname, email, tel, dateOfBirth, gender } = body;

// Update the user's profile image in the database
// Update the user's profile in the database
const user = await prisma.user.update({
where: { id: currentUser.id },
data: { image },
data: { username, name, surname, email, tel, dateOfBirth, gender },
});

// Return the updated user profile as a JSON response
return NextResponse.json(user);
} catch (error) {
console.error('Error updating profile image:', error);
console.error('Error updating profile:', error);
return NextResponse.error();
}
}


// Handler for the GET request
export async function GET(request: Request) {
try {
Expand All @@ -50,7 +49,7 @@ export async function GET(request: Request) {
name: true,
surname: true,
email: true,
telephone: true,
tel: true,
dateOfBirth: true,
gender: true,
createdAt: true,
Expand All @@ -68,6 +67,7 @@ export async function GET(request: Request) {
return NextResponse.error();
}
}

// Handler for the DELETE request
export async function DELETE(request: Request) {
try {
Expand All @@ -91,4 +91,4 @@ export async function DELETE(request: Request) {
console.error('Error deleting profile image:', error);
return NextResponse.error();
}
}
}
219 changes: 167 additions & 52 deletions app/components/profile/PersonalInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,176 @@
import { useState, useEffect } from "react";
import ProfileFrameElement from "./profileFrame";
import { toast } from "react-hot-toast";

interface UserProfileCardProps {
user: {
name: string | null;
email: string | null;
}
interface UserProfile {
username: string;
name: string;
surname: string;
email: string;
tel: string;
dateOfBirth: string;
gender: string;
}

const PersonalInfo = () => {
const [userData, setUserData] = useState<UserProfile>({
username: "",
name: "",
surname: "",
email: "",
tel: "",
dateOfBirth: "",
gender: ""
});

useEffect(() => {
const fetchUserData = async () => {
const response = await fetch('../api/profile');
const data = await response.json();
setUserData(data);
};

fetchUserData();
}, []);

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setUserData({
...userData,
[name]: value
});
};

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();

const response = await fetch('../api/profile', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData),
});

if (response.ok) {
const updatedUser = await response.json();
setUserData(updatedUser);
toast.success('Profile updated successfully');
} else {
toast.error('Failed to update profile');
}
};

return (
<ProfileFrameElement text="Personal information">
<form className="space-y-4 m-4 px-8">
<div className="flex flex-col">
<label className="mb-1 font-medium">Username</label>
<input type="text" placeholder="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
</div>

<div className="grid grid-cols-2">
<div className="flex flex-col mr-2">
<label className="mb-1 font-medium">Name</label>
<input type="text" value="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
</div>
<div className="flex flex-col ml-2">
<label className="mb-1 font-medium">Surname</label>
<input type="text" placeholder="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
</div>
</div>

<div className="flex flex-col">
<label className="mb-1 font-medium">Email</label>
<input type="email" value="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
</div>
<div className="flex flex-col">
<label className="mb-1 font-medium">Contact Number</label>
<input type="text" placeholder="+212 123456789" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
</div>
<div className="grid grid-cols-2 mr-2">
<div className="flex flex-col">
<label className="mb-1 font-medium">Date of Birth</label>
<input type="date" value="" className="p-2 border rounded focus:border-pink-500 focus:outline-none" />
</div>
<div className="flex flex-col ml-2">
<label className="mb-1 font-medium">Gender</label>
<select className="p-2 border rounded focus:border-pink-500 focus:outline-none">
<option>Female</option>
<option>Male</option>
</select>
</div>
</div>
<div className="flex justify-end mt-8 space-x-2 ">
<button type="reset" className="border border-pink-500 text-pink-500 px-4 py-1 rounded">
cancel
</button>
<button type="submit" className="bg-pink-500 text-white px-5 py-1 rounded">save</button>
</div>
</form>
<form className="space-y-4 m-4 px-8" onSubmit={handleSubmit}>
<div className="flex flex-col">
<label className="mb-1 font-medium">Username</label>
<input
type="text"
name="username"
value={userData.username || ''}
onChange={handleChange}
className="p-2 border rounded focus:border-pink-500 focus:outline-none"
/>
</div>

<div className="grid grid-cols-2">
<div className="flex flex-col mr-2">
<label className="mb-1 font-medium">Name</label>
<input
type="text"
name="name"
value={userData.name || ''}
onChange={handleChange}
className="p-2 border rounded focus:border-pink-500 focus:outline-none"
/>
</div>
<div className="flex flex-col ml-2">
<label className="mb-1 font-medium">Surname</label>
<input
type="text"
name="surname"
value={userData.surname || ''}
onChange={handleChange}
className="p-2 border rounded focus:border-pink-500 focus:outline-none"
/>
</div>
</div>

<div className="flex flex-col">
<label className="mb-1 font-medium">Email</label>
<input
type="email"
name="email"
value={userData.email || ''}
onChange={handleChange}
className="p-2 border rounded focus:border-pink-500 focus:outline-none"
/>
</div>

<div className="flex flex-col">
<label className="mb-1 font-medium">Contact Number</label>
<input
type="number"
name="tel"
value={userData.tel || ''}
onChange={handleChange}
className="p-2 border rounded focus:border-pink-500 focus:outline-none"
/>
</div>

<div className="grid grid-cols-2 mr-2">
<div className="flex flex-col">
<label className="mb-1 font-medium">Date of Birth</label>
<input
type="date"
name="dateOfBirth"
value={userData.dateOfBirth || ''}
onChange={handleChange}
className="p-2 border rounded focus:border-pink-500 focus:outline-none"
/>
</div>
<div className="flex flex-col ml-2">
<label className="mb-1 font-medium">Gender</label>
<select
name="gender"
value={userData.gender || ''}
onChange={handleChange}
className="p-2 border rounded focus:border-pink-500 focus:outline-none"
>
<option value="Female">Female</option>
<option value="Male">Male</option>
</select>
</div>
</div>

<div className="flex justify-end mt-8 space-x-2">
<button
type="reset"
className="border border-pink-500 text-pink-500 px-4 py-1 rounded"
onClick={() => setUserData({
username: "",
name: "",
surname: "",
email: "",
tel: "",
dateOfBirth: "",
gender: ""
})}
>
Cancel
</button>
<button
type="submit"
className="bg-pink-500 text-white px-5 py-1 rounded"
>
Save
</button>
</div>
</form>
</ProfileFrameElement>
);
}
export default PersonalInfo;
};

export default PersonalInfo;
6 changes: 2 additions & 4 deletions prisma/schema.prisma
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


generator client {
provider = "prisma-client-js"
}
Expand All @@ -17,7 +15,7 @@ model User {
dateOfBirth String?
email String? @unique
emailVerified DateTime?
telephone Int?
tel String?
recoveryEmail String?
gender String?
image String?
Expand All @@ -43,7 +41,7 @@ model Account {
providerAccountId String
refresh_token String? @db.String
access_token String? @db.String
expires_at Int?
expires_at String?
token_type String?
scope String?
id_token String? @db.String
Expand Down

0 comments on commit 34a2cbe

Please sign in to comment.