muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added updated profile functionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-15 20:25:35 -05:00
parent dd24fd8ae4
commit a144271255
4 changed files with 96 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
donutshop_ecommerce/src/app/api/models/User.js
View file

@ -16,6 +16,25 @@ const UserSchema = new Schema({
image:{
type: String,
},
phoneNumber: {
type: String,
},
streetAddress: {
type: String,
},
city: {
type: String,
},
stateProvince: {
type: String,
},
zipCode: {
type: String,
},
country: {
type: String,
},
}, {timestamps: true});

24
donutshop_ecommerce/src/app/api/profile/route.js
View file

@ -8,17 +8,19 @@ export async function PUT(req){
const data = await req.json();
const session = await getServerSession(authOptions)
const email = session.user.email
const update = {};
if('name' in data){
update.name = data.name
}
if('image' in data){
update.image = data.image
}
if(Object.keys(update).length > 0){
await User.updateOne({email}, update);
}
await User.updateOne({email}, data);
return Response.json(true)
}
export async function GET(){
mongoose.connect(process.env.MONGO_URL)
const session = await getServerSession(authOptions)
const email = session.user.email
return Response.json(
await User.findOne({email})
)
}

2
donutshop_ecommerce/src/app/globals.css
View file

@ -10,7 +10,7 @@ body{
overflow-x: hidden;
}
/*===== general setup =====*/
input[type="email"], input[type="password"], input[type="text"]{
input[type="email"], input[type="password"], input[type="text"], input[type="tel"]{
@apply border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]
}

81
donutshop_ecommerce/src/app/profile/page.js
View file

@ -13,12 +13,28 @@ const ProfilePage = () => {
//profile update
const [userName, setUserName] = useState('');
const [image, setImage] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [streetAddress, setStreetAddress] = useState('');
const [city, setCity] = useState('');
const [stateProvince, setStateProvince] = useState('');
const [zipCode, setZipCode] = useState('');
const [country, setCountry] = useState('');
useEffect(() => {
if(status === 'authenticated'){
setUserName(session.data.user.name)
setImage(session.data.user.image)
fetch('/api/profile').then(response => {
response.json().then(data => {
setPhoneNumber(data.phoneNumber);
setStreetAddress(data.streetAddress);
setCity(data.city);
setStateProvince(data.stateProvince);
setZipCode(data.zipCode);
setCountry(data.country);
})
})
}
},[session, status])
@ -30,7 +46,7 @@ const ProfilePage = () => {
const response = await fetch('/api/profile', {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name:userName, image}),
body: JSON.stringify({name:userName, image, phoneNumber, streetAddress, city, stateProvince, zipCode, country}),
});
if(response.ok)
resolve()
@ -52,18 +68,16 @@ const ProfilePage = () => {
const uploadPromise = fetch('/api/upload', {
method: 'POST',
body: data,
}).then(response => {
if(response.ok){
return response.json().then(link => {
setImage(link)
});
}
throw new Error('Something went wrong!')
});
method: 'POST',
body: data,
}).then(response => {
if(response.ok){
return response.json().then(link => {
setImage(link)
});
}
throw new Error('Something went wrong!')
});
await toast.promise(uploadPromise, {
loading: 'Uploading',
success: 'An image is uploaded',
@ -73,7 +87,6 @@ const ProfilePage = () => {
}
}
if(status === 'loading'){
return 'Loading...'
}
@ -84,7 +97,7 @@ const ProfilePage = () => {
return (
<div className='px-5'>
<div className='px-5 mb-10'>
<p className='text-center text-2xl font-semibold uppercase mb-5 text-[#FF5580]'>Profile</p>
<div className='max-w-md mx-auto'>
<div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto'>
@ -96,9 +109,41 @@ const ProfilePage = () => {
<span className='px-2 py-1 border border-[#DCA0AE] rounded-md text-sm cursor-pointer'>Edit</span>
</label>
</div>
<form className='mt-5' onSubmit={handleInfoUpdate}>
<input type='text' placeholder='Name' value={userName} onChange={ev => setUserName(ev.target.value)}/>
<input type='text' value={session.data.user.email} disabled={true} className='disabled:bg-gray-200 disabled:text-gray-400'/>
<form className='mt-5 text-sm sm:text-base flex flex-col gap-0 sm:gap-1' onSubmit={handleInfoUpdate}>
<div>
<label className='text-gray-700 text-sm font-semibold'>Name</label>
<input type='text' placeholder='Name' value={userName} onChange={ev => setUserName(ev.target.value)}/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Email</label>
<input type='text' value={session.data.user.email} disabled={true} className='disabled:bg-gray-200 disabled:text-gray-400'/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Phone number</label>
<input type='tel' placeholder='Phone number' value={phoneNumber} onChange={ev => setPhoneNumber(ev.target.value)}/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Street Address</label>
<input type='text' placeholder='Address' value={streetAddress} onChange={ev => setStreetAddress(ev.target.value)}/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>City</label>
<input type='text' placeholder='City' value={city} onChange={ev => setCity(ev.target.value)}/>
</div>
<div className='flex flex-col sm:flex-row gap-0 sm:gap-2'>
<div>
<label className='text-gray-700 text-sm font-semibold'>State/Province</label>
<input type='text' placeholder='State/Province' value={stateProvince} onChange={ev => setStateProvince(ev.target.value)}/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Zip/Postal code</label>
<input type='text' placeholder='Zip/Postal code' value={zipCode} onChange={ev => setZipCode(ev.target.value)}/>
</div>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Country</label>
<input type='text' placeholder='Country' value={country} onChange={ev => setCountry(ev.target.value)}/>
</div>
<button className='rounded-md bg-[#DCA0AE] text-white hover:opacity-80 duration-300 p-2 font-semibold block w-full disabled:cursor-not-allowed'>Save</button>
</form>
</div>