added updated profile functionality

donutshop_ecommerce/src/app/api/models/User.js

@@ -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});
 

donutshop_ecommerce/src/app/api/profile/route.js

@@ -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
+    await User.updateOne({email}, data);
-    }
-    if('image' in data){
-        update.image = data.image
-    }
-    if(Object.keys(update).length > 0){
-        await User.updateOne({email}, update);
-    }
-
 
     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})
+    )
 }

donutshop_ecommerce/src/app/globals.css

@@ -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]
 }
 

donutshop_ecommerce/src/app/profile/page.js

@@ -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',
+        method: 'POST',
-          body: data,
+        body: data,
-        }).then(response => {
+      }).then(response => {
-          if(response.ok){
+        if(response.ok){
-            return response.json().then(link => {
+          return response.json().then(link => {
-              setImage(link)
+            setImage(link)
-            });
+          });
-          }
+        }
-          throw new Error('Something went wrong!')
+        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}>
+        <form className='mt-5 text-sm sm:text-base flex flex-col gap-0 sm:gap-1' onSubmit={handleInfoUpdate}>
-          <input type='text' placeholder='Name' value={userName} onChange={ev => setUserName(ev.target.value)}/>
+          <div>
-          <input type='text' value={session.data.user.email} disabled={true} className='disabled:bg-gray-200 disabled:text-gray-400'/>
+            <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>