Added Profile Edit option

tsaxena4k · tsaxena4k · commit 7a8453f4b455 · 2020-11-10T12:29:22.000+05:30
diff --git a/components/setting.jsx b/components/setting.jsx
@@ -17,15 +17,19 @@ const ProfileSection = () => {
 
     const handleSubmit = async (event) => {
         event.preventDefault();
-        if (isUpdating) return;
-        setIsUpdating(true);
+
+        console.log(nameRef.current.value);
+
         const formData = new FormData();
+
         if (profilePictureRef.current.files[0]) { formData.append('profilePicture', profilePictureRef.current.files[0]); }
         formData.append('name', nameRef.current.value);
         formData.append('bio', bioRef.current.value);
+
+
         const res = await fetch('/api/user', {
             method: 'PATCH',
-            body: formData,
+            body:formData,
         });
         if (res.status === 200) {
             const userData = await res.json();
@@ -63,12 +67,6 @@ const ProfileSection = () => {
         }
     };
 
-    async function sendVerificationEmail() {
-        await fetch('/api/user/email/verify', {
-            method: 'POST',
-        });
-    }
-
     return (
         <>
             <Head>
@@ -78,17 +76,6 @@ const ProfileSection = () => {
                 <h2>Edit Profile</h2>
                 {msg.message ? <p style={{ color: msg.isError ? 'red' : '#0070f3', textAlign: 'center' }}>{msg.message}</p> : null}
                 <form onSubmit={handleSubmit} className="col s12">
-                    {!user.emailVerified ? (
-                        <p>
-                            Your email has not been verify.
-                            {' '}
-                            {/* eslint-disable-next-line */}
-                            <a role="button" className="blue-text" onClick={sendVerificationEmail}>
-                                Send verification email
-                </a>
-                        </p>
-                    ) : null}
-
                     <div className="divider"></div>
                     <label htmlFor="name" className="input-field col s6">
                         Name
@@ -113,8 +100,8 @@ const ProfileSection = () => {
                         />
                     </label>
                     <label htmlFor="avatar">
-                        <span>Profile picture &nbsp; </span> 
-                         <div className="btn-small file-field input-field blue">
+                        <span>Profile picture &nbsp; </span>
+                        <div className="btn-small file-field input-field blue">
                             <span>Choose file</span>
                             <input
                                 type="file"
@@ -126,7 +113,7 @@ const ProfileSection = () => {
                         </div>
                     </label>
                     <br />
-                    <button disabled={isUpdating} type="submit" className="btn blue">Save</button>
+                    <button type="submit" className="btn blue">Save</button>
                 </form>
                 <form onSubmit={handleSubmitPasswordChange}>
                     <label htmlFor="oldpassword">
diff --git a/lib/fetch.js b/lib/fetch.js
diff --git a/next.config.js b/next.config.js
@@ -3,7 +3,8 @@ require('dotenv').config();
 module.exports = {
     env: {
         MONGODB_URI:process.env.MONGODB_URI,
-        MONGODB_DB:process.env.MONGODB_DB
+        MONGODB_DB:process.env.MONGODB_DB,
+        CLOUDINARY_URL:process.env.CLOUDINARY_URL
     }
 }
     
diff --git a/pages/api/user/index.js b/pages/api/user/index.js
@@ -1,9 +1,64 @@
 import nextConnect from 'next-connect';
 import middleware from '../../../middlewares/middleware';
 import { extractUser } from '../../../lib/api-helpers';
+import multer from 'multer';
+import { v2 as cloudinary } from 'cloudinary'
 
+const upload = multer({ dest: '/tmp' });
 const handler = nextConnect();
+
+const {
+    hostname: cloud_name,
+    username: api_key,
+    password: api_secret,
+} = new URL(process.env.CLOUDINARY_URL);
+
+cloudinary.config({
+    cloud_name,
+    api_key,
+    api_secret,
+});
+
 handler.use(middleware);
 handler.get(async (req, res) => res.json({ user: extractUser(req) }));
 
+handler.patch(upload.single('profilePicture'), async (req, res) => {
+    if (!req.user) {
+        req.status(401).end();
+        return;
+    }
+
+    let profilePicture;
+    if (req.file) {
+        const image = await cloudinary.uploader.upload(req.file.path, {
+            width: 512,
+            height: 512,
+            crop: 'fill',
+            folder: 'Nextjs-Mongodb-Authentication-App',
+            use_filename: true
+        });
+        profilePicture = image.secure_url;
+    }
+
+    const { name, bio } = req.body;
+
+    await req.db.collection('users').updateOne(
+        { _id: req.user._id },
+        {
+            $set: {
+                name: name,
+                bio: bio,
+                profilePicture: profilePicture
+            },
+        },
+    );
+    res.json({ user: { name, bio } });
+});
+
+export const config = {
+    api: {
+        bodyParser: false,
+    },
+};
+
 export default handler;

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,8 @@ require('dotenv').config();`
`3`	`3`	`module.exports = {`
`4`	`4`	`env: {`
`5`	`5`	`MONGODB_URI:process.env.MONGODB_URI,`
`6`		`- MONGODB_DB:process.env.MONGODB_DB`
	`6`	`+ MONGODB_DB:process.env.MONGODB_DB,`
	`7`	`+ CLOUDINARY_URL:process.env.CLOUDINARY_URL`
`7`	`8`	`}`
`8`	`9`	`}`
`9`	`10`