From 589c9e59c4f3b847c1801a4c431e3ac546cc2368 Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Tue, 21 May 2024 11:34:32 -0500 Subject: [PATCH] update profile route and updated user page functionality --- .../src/app/api/profile/route.js | 45 ++++++++----- donutshop_ecommerce/src/app/login/page.js | 2 +- donutshop_ecommerce/src/app/profile/page.js | 67 ++----------------- donutshop_ecommerce/src/app/register/page.js | 2 +- .../src/app/users/[id]/page.js | 29 +++++++- donutshop_ecommerce/src/app/users/page.js | 2 +- .../src/components/layout/UserForm.js | 62 +++++++++++++++++ 7 files changed, 128 insertions(+), 81 deletions(-) create mode 100644 donutshop_ecommerce/src/components/layout/UserForm.js diff --git a/donutshop_ecommerce/src/app/api/profile/route.js b/donutshop_ecommerce/src/app/api/profile/route.js index 75010ff..819f848 100644 --- a/donutshop_ecommerce/src/app/api/profile/route.js +++ b/donutshop_ecommerce/src/app/api/profile/route.js @@ -7,27 +7,42 @@ import { UserInfo } from "../models/UserInfo" export async function PUT(req){ mongoose.connect(process.env.MONGO_URL) const data = await req.json(); - const session = await getServerSession(authOptions) - const email = session.user.email - const {name, image, ...otherUserInfo} = data - - await User.updateOne({email}, {name, image}); - - //update userInfo - await UserInfo.findOneAndUpdate({email}, otherUserInfo, {upsert:true}); + const {_id, name, image, ...otherUserInfo} = data; + let filter = {}; + if(_id) { + filter = {_id} + } else { + const session = await getServerSession(authOptions); + const email = session.user.email; + filter = {email}; + } + const user = await User.findOne(filter); + await User.updateOne(filter, {name, image}); + await UserInfo.findOneAndUpdate({email:user.email}, otherUserInfo, {upsert:true}); return Response.json(true) } -export async function GET(){ +export async function GET(req){ mongoose.connect(process.env.MONGO_URL) - const session = await getServerSession(authOptions) - const email = session?.user?.email - if(!email){ - return Response.json({}) + const url = new URL(req.url); + const _id = url.searchParams.get('_id'); + + let filterUser = {} + if(_id) { + filterUser={_id} + + } else { + const session = await getServerSession(authOptions) + const email = session?.user?.email + if(!email){ + return Response.json({}) + } + filterUser = {email} } - const user = await User.findOne({email}).lean() - const userInfo = await UserInfo.findOne({email}).lean() + const user = await User.findOne(filterUser).lean() + const userInfo = await UserInfo.findOne({email:user.email}).lean() + return Response.json({...user, ...userInfo}) } \ No newline at end of file diff --git a/donutshop_ecommerce/src/app/login/page.js b/donutshop_ecommerce/src/app/login/page.js index c1c18bd..85eda25 100644 --- a/donutshop_ecommerce/src/app/login/page.js +++ b/donutshop_ecommerce/src/app/login/page.js @@ -21,7 +21,7 @@ const LoginPage = () => { } return ( -
+

Login

setEmail(ev.target.value)} disabled={loginInProgress} className=' disabled:bg-gray-300 disabled:cursor-not-allowed'/> diff --git a/donutshop_ecommerce/src/app/profile/page.js b/donutshop_ecommerce/src/app/profile/page.js index 8a7e2fa..3cf42c8 100644 --- a/donutshop_ecommerce/src/app/profile/page.js +++ b/donutshop_ecommerce/src/app/profile/page.js @@ -6,36 +6,22 @@ import React, { useEffect, useState } from 'react' import toast from 'react-hot-toast'; import UserTabs from "../../components/layout/UserTab" import EditImage from "../../components/layout/EditImage" +import UserForm from "../../components/layout/UserForm" const ProfilePage = () => { //use session const session = useSession(); const {status} = session; - //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(''); + const [user, setUser] = useState(null); const [isAdmin, setIsAdmin] = useState(false); const [profileFetchd, setProfileFetched] = useState(false); 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); + setUser(data) setIsAdmin(data.admin); setProfileFetched(true); }) @@ -44,14 +30,14 @@ const ProfilePage = () => { },[session, status]) - async function handleInfoUpdate(ev){ + async function handleInfoUpdate(ev, data){ ev.preventDefault() const savingPromise = new Promise(async (resolve, reject) => { const response = await fetch('/api/profile', { method: 'PUT', headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({name:userName, image, phoneNumber, streetAddress, city, stateProvince, zipCode, country}), + body: JSON.stringify({data}), }); if(response.ok) resolve() @@ -78,48 +64,7 @@ const ProfilePage = () => { return (
-
-
- -
- -
- - setUserName(ev.target.value)}/> -
-
- - -
-
- - setPhoneNumber(ev.target.value)}/> -
-
- - setStreetAddress(ev.target.value)}/> -
-
- - setCity(ev.target.value)}/> -
-
-
- - setStateProvince(ev.target.value)}/> -
-
- - setZipCode(ev.target.value)}/> -
-
-
- - setCountry(ev.target.value)}/> -
- - -
+
) } diff --git a/donutshop_ecommerce/src/app/register/page.js b/donutshop_ecommerce/src/app/register/page.js index 0396a6b..fa3726b 100644 --- a/donutshop_ecommerce/src/app/register/page.js +++ b/donutshop_ecommerce/src/app/register/page.js @@ -31,7 +31,7 @@ const RegisterPage = () => { } return ( -
+

Register

{userCreated && (
diff --git a/donutshop_ecommerce/src/app/users/[id]/page.js b/donutshop_ecommerce/src/app/users/[id]/page.js index bbe84af..ec81751 100644 --- a/donutshop_ecommerce/src/app/users/[id]/page.js +++ b/donutshop_ecommerce/src/app/users/[id]/page.js @@ -1,10 +1,32 @@ "use client" -import React from 'react' +import React, { use, useEffect, useState } from 'react' import UserTab from '../../../components/layout/UserTab' import useProfile from '../../../components/UseProfile'; +import UserForm from '../../../components/layout/UserForm'; +import { useParams } from 'next/navigation'; const EditUsersPage = () => { const {data, loading} = useProfile(); + const {id} = useParams(); + const [user, setUser] = useState(null); + + + useEffect(() => { + fetch('/api/profile?_id='+id).then(res => { + res.json().then(user => { + setUser(user) + }) + }) + }, []) + + function handleSaveButton(ev, data){ + ev.preventDefault(); + fetch('/api/profile', { + method: 'PUT', + headers: {'Content-Type':'application/json'}, + body: JSON.stringify({...data, _id:id}), + }) + } @@ -16,8 +38,11 @@ const EditUsersPage = () => { } return ( -
+
+
+ +
) } diff --git a/donutshop_ecommerce/src/app/users/page.js b/donutshop_ecommerce/src/app/users/page.js index 93bedc8..7a4c418 100644 --- a/donutshop_ecommerce/src/app/users/page.js +++ b/donutshop_ecommerce/src/app/users/page.js @@ -28,7 +28,7 @@ const Userspage = () => { return ( -
+
{users?.length > 0 && users.map(user => ( diff --git a/donutshop_ecommerce/src/components/layout/UserForm.js b/donutshop_ecommerce/src/components/layout/UserForm.js new file mode 100644 index 0000000..7ae9ab8 --- /dev/null +++ b/donutshop_ecommerce/src/components/layout/UserForm.js @@ -0,0 +1,62 @@ +"use client" +import React, { useState } from 'react' +import EditImage from '../../components/layout/EditImage' + +const UserForm = ({user, onSave}) => { + const [userName, setUserName] = useState(user?.name || ''); + const [image, setImage] = useState(user?.image || ''); + const [phoneNumber, setPhoneNumber] = useState(user?.phoneNumber || ''); + const [streetAddress, setStreetAddress] = useState(user?.streetAddress || ''); + const [city, setCity] = useState(user?.city || ''); + const [stateProvince, setStateProvince] = useState(user?.stateProvince || ''); + const [zipCode, setZipCode] = useState(user?.zipCode || ''); + const [country, setCountry] = useState(user?.country || ''); + + + return ( +
+
+ +
+
onSave(ev, {name:userName, image, phoneNumber, streetAddress, city, stateProvince, zipCode, country,})}> +
+ + setUserName(ev.target.value)}/> +
+
+ + +
+
+ + setPhoneNumber(ev.target.value)}/> +
+
+ + setStreetAddress(ev.target.value)}/> +
+
+ + setCity(ev.target.value)}/> +
+
+
+ + setStateProvince(ev.target.value)}/> +
+
+ + setZipCode(ev.target.value)}/> +
+
+
+ + setCountry(ev.target.value)}/> +
+ +
+
+ ) +} + +export default UserForm \ No newline at end of file