From 10d7fcd2c3707d6183db9802d8159fcb99b2504e Mon Sep 17 00:00:00 2001
From: Hoang Vo <40987398+hoangvvo@users.noreply.github.com>
Date: Tue, 5 May 2020 17:41:48 -0400
Subject: [PATCH] Feat: other user profile (#63)

* Fix some issues

* Add note at sign up

* rename useUser to useCurrentUser

* Move sendVerificationEmail

* eslint

* Move settings page

* add fields

* Change profile link in layout

* add _id field

* Add user page

* add an ugly default profile picture

* Add babel-eslint

* Move from profile to user/[userId]

* update roadmap

* Fix
---
 .env.example                               |  4 +-
 .eslintrc                                  |  5 +-
 README.md                                  | 12 ++++-
 components/layout.jsx                      | 12 ++---
 lib/api-helpers.js                         |  5 +-
 lib/db.js                                  | 20 ++++++++
 lib/hooks.jsx                              |  2 +-
 now.json                                   |  2 +-
 package.json                               |  3 +-
 pages/api/users.js                         |  6 ++-
 pages/index.jsx                            |  4 +-
 pages/login.jsx                            |  4 +-
 pages/{profile => }/settings.jsx           | 46 +++++++++++------
 pages/signup.jsx                           |  8 ++-
 pages/{profile => user/[userId]}/index.jsx | 57 +++++++++-------------
 15 files changed, 116 insertions(+), 74 deletions(-)
 create mode 100644 lib/db.js
 rename pages/{profile => }/settings.jsx (77%)
 rename pages/{profile => user/[userId]}/index.jsx (57%)

diff --git a/.env.example b/.env.example
index 666a92b..28c280c 100644
--- a/.env.example
+++ b/.env.example
@@ -2,5 +2,5 @@ MONGODB_URI=mongodb+srv://testuser:dontreusethis@cluster0-gc0a7.mongodb.net/next
 CLOUDINARY_URL=cloudinary://741947492169653:vkyuRmZ3EbSULnkfXJdtSqwhURw@dbplcha6k
 DB_NAME=nextjsmongodbapp
 SENDGRID_API_KEY=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
-EMAIL_FROM=averyniceguy@nextjs-mongodb-app.hoangvvo.now.sh
-WEB_URI=http://localhost:3000
\ No newline at end of file
+EMAIL_FROM=averyniceguy@nextjs-mongodb.now.sh
+WEB_URI=https://nextjs-mongodb.now.sh
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index d55ce37..4cb52e9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,5 +1,6 @@
 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true
@@ -31,6 +32,8 @@
     ],
     "jsx-a11y/click-events-have-key-events": "off",
     "react/prop-types": "off",
-    "react/jsx-props-no-spreading": "off"
+    "react/jsx-props-no-spreading": "off",
+    "import/prefer-default-export": "off",
+    "no-param-reassign": "off"
   }
 }
diff --git a/README.md b/README.md
index 64c976c..2bd3510 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,16 @@ A full-fledged app made with [**Next.js**](https://github.com/zeit/next.js/) and
 
 </div>
 
+<h3 align="center">:eyes: Users and social</h3>
+
+<div align="center">
+
+- [x] Other user profile
+- [ ] Posting
+- [ ] PM?
+
+</div>
+
 <div align="center">
   
 <sup>Have any features that interest you, [make an issue](https://github.com/hoangvvo/nextjs-mongodb-app/issues). Would like to work on a feature, [make a PR](https://github.com/hoangvvo/nextjs-mongodb-app/pulls).<sup>
@@ -101,8 +111,6 @@ Required environmental variables in this project include:
 
 Start the development server by running `yarn dev` or `npm run dev`. The project supports using `.env`. Getting started by create a `.env` file with the above variables.
 
-**Styles (CSS):** This project does not contain any stylesheets, and no component has classes. To remove the style, simply remove all `<style jsx>` and `<style jsx global>` tags.
-
 #### `.env`
 
 I include my own MongoDB, Cloudinary, SendGrid environment variables in [.env.example](.env.example) for experimentation purposes. Please replace them with your owns and refrain from sabotaging them. You can try them in development by renaming it into `.env`.
diff --git a/components/layout.jsx b/components/layout.jsx
index 0f72bc7..2e6511e 100644
--- a/components/layout.jsx
+++ b/components/layout.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import { useUser } from '../lib/hooks';
+import { useCurrentUser } from '../lib/hooks';
 
 export default ({ children }) => {
-  const [user, { mutate }] = useUser();
+  const [user, { mutate }] = useCurrentUser();
   const handleLogout = async () => {
     await fetch('/api/auth', {
       method: 'DELETE',
@@ -161,7 +161,7 @@ export default ({ children }) => {
               </>
             ) : (
               <>
-                <Link href="/profile">
+                <Link href="/user/[userId]" as={`/user/${user._id}`}>
                   <a>Profile</a>
                 </Link>
                 {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
@@ -189,14 +189,14 @@ export default ({ children }) => {
           </span>
           , and a keyboard by
           {' '}
-          <a href="https://www.hoangvvo.com/">Hoang Vo</a>
-.
+          <a href="https://hoangvvo.com/">Hoang Vo</a>
+          .
         </p>
         <p>
           Source code is on
           {' '}
           <a href="https://github.com/hoangvvo/nextjs-mongodb-app">Github</a>
-.
+          .
         </p>
       </footer>
     </>
diff --git a/lib/api-helpers.js b/lib/api-helpers.js
index 6eff7d4..823c25e 100644
--- a/lib/api-helpers.js
+++ b/lib/api-helpers.js
@@ -1,11 +1,10 @@
-/* eslint-disable import/prefer-default-export */
 // take only needed user fields to avoid sensitive ones (such as password)
 export function extractUser(req) {
   if (!req.user) return null;
   const {
-    name, email, bio, profilePicture, emailVerified,
+    _id, name, email, bio, profilePicture, emailVerified,
   } = req.user;
   return {
-    name, email, bio, profilePicture, emailVerified,
+    _id, name, email, bio, profilePicture, emailVerified,
   };
 }
diff --git a/lib/db.js b/lib/db.js
new file mode 100644
index 0000000..70238d0
--- /dev/null
+++ b/lib/db.js
@@ -0,0 +1,20 @@
+import { ObjectId } from 'mongodb';
+
+export async function getUser(req, userId) {
+  const user = await req.db.collection('users').findOne({
+    _id: ObjectId(userId),
+  });
+  if (!user) return null;
+  const {
+    _id, name, email, bio, profilePicture, emailVerified,
+  } = user;
+  const isAuth = _id.toString() === req.user?._id.toString();
+  return {
+    _id: _id.toString(),
+    name,
+    email: isAuth ? email : null,
+    bio,
+    profilePicture: profilePicture || "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E",
+    emailVerified: isAuth ? emailVerified : null,
+  };
+}
diff --git a/lib/hooks.jsx b/lib/hooks.jsx
index fd3e90c..913fc54 100644
--- a/lib/hooks.jsx
+++ b/lib/hooks.jsx
@@ -2,7 +2,7 @@ import useSWR from 'swr';
 
 const fetcher = (url) => fetch(url).then((r) => r.json());
 
-export function useUser() {
+export function useCurrentUser() {
   const { data, mutate } = useSWR('/api/user', fetcher);
   const user = data && data.user;
   return [user, { mutate }];
diff --git a/now.json b/now.json
index ba549ac..bd3ebc6 100644
--- a/now.json
+++ b/now.json
@@ -7,7 +7,7 @@
       "CLOUDINARY_URL": "cloudinary://741947492169653:vkyuRmZ3EbSULnkfXJdtSqwhURw@dbplcha6k",
       "DB_NAME": "nextjsmongodbapp",
       "SENDGRID_API_KEY": "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",
-      "EMAIL_FROM": "averyniceguy@nextjs-mongodb-app.hoangvvo.now.sh",
+      "EMAIL_FROM": "averyniceguy@nextjs-mongodb.now.sh",
       "WEB_URI": "https://nextjs-mongodb.now.sh",
       "USING_SECRETS": "Consider using Zeit Now Secrets instead."
     }
diff --git a/package.json b/package.json
index 6de9da6..d9cf7e1 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "type": "git",
     "url": "git+https://github.com/hoangvvo/nextjs-mongodb-app.git"
   },
-  "author": "Hoang Vo (https://www.hoangvvo.com)",
+  "author": "Hoang Vo (https://hoangvvo.com)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/hoangvvo/nextjs-mongodb-app/issues"
@@ -38,6 +38,7 @@
     "validator": "^13.0.0"
   },
   "devDependencies": {
+    "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.1",
diff --git a/pages/api/users.js b/pages/api/users.js
index 77f8b7c..5792848 100644
--- a/pages/api/users.js
+++ b/pages/api/users.js
@@ -27,12 +27,14 @@ handler.post(async (req, res) => {
   const hashedPassword = await bcrypt.hash(password, 10);
   const user = await req.db
     .collection('users')
-    .insertOne({ email, password: hashedPassword, name })
+    .insertOne({
+      email, password: hashedPassword, name, emailVerified: false, bio: '', profilePicture: null,
+    })
     .then(({ ops }) => ops[0]);
   req.logIn(user, (err) => {
     if (err) throw err;
     res.status(201).json({
-      user: extractUser(req.user),
+      user: extractUser(req),
     });
   });
 });
diff --git a/pages/index.jsx b/pages/index.jsx
index 4dc6a0a..6b08484 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useUser } from '../lib/hooks';
+import { useCurrentUser } from '../lib/hooks';
 
 const IndexPage = () => {
-  const [user] = useUser();
+  const [user] = useCurrentUser();
 
   return (
     <>
diff --git a/pages/login.jsx b/pages/login.jsx
index b0c70b5..68fdc5b 100644
--- a/pages/login.jsx
+++ b/pages/login.jsx
@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useUser } from '../lib/hooks';
+import { useCurrentUser } from '../lib/hooks';
 
 const LoginPage = () => {
   const router = useRouter();
   const [errorMsg, setErrorMsg] = useState('');
-  const [user, { mutate }] = useUser();
+  const [user, { mutate }] = useCurrentUser();
   useEffect(() => {
     // redirect to home if user is authenticated
     if (user) router.push('/');
diff --git a/pages/profile/settings.jsx b/pages/settings.jsx
similarity index 77%
rename from pages/profile/settings.jsx
rename to pages/settings.jsx
index 1abde50..c570d5e 100644
--- a/pages/profile/settings.jsx
+++ b/pages/settings.jsx
@@ -1,18 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Head from 'next/head';
-import { useUser } from '../../lib/hooks';
+import { useCurrentUser } from '../lib/hooks';
 
 const ProfileSection = () => {
-  const [user, { mutate }] = useUser();
+  const [user, { mutate }] = useCurrentUser();
   const [isUpdating, setIsUpdating] = useState(false);
-  const [name, setName] = useState(user.name);
-  const [bio, setBio] = useState(user.bio);
-  const profilePictureRef = React.createRef();
+  const nameRef = useRef();
+  const bioRef = useRef();
+  const profilePictureRef = useRef();
   const [msg, setMsg] = useState({ message: '', isError: false });
 
   useEffect(() => {
-    setName(user.name);
-    setBio(user.bio);
+    nameRef.current.value = user.name;
+    bioRef.current.value = user.bio;
   }, [user]);
 
   const handleSubmit = async (event) => {
@@ -21,8 +21,8 @@ const ProfileSection = () => {
     setIsUpdating(true);
     const formData = new FormData();
     if (profilePictureRef.current.files[0]) { formData.append('profilePicture', profilePictureRef.current.files[0]); }
-    formData.append('name', name);
-    formData.append('bio', bio);
+    formData.append('name', nameRef.current.value);
+    formData.append('bio', bioRef.current.value);
     const res = await fetch('/api/user', {
       method: 'PATCH',
       body: formData,
@@ -63,6 +63,12 @@ const ProfileSection = () => {
     }
   };
 
+  async function sendVerificationEmail() {
+    await fetch('/api/user/email/verify', {
+      method: 'POST',
+    });
+  }
+
   return (
     <>
       <Head>
@@ -72,6 +78,16 @@ const ProfileSection = () => {
         <h2>Edit Profile</h2>
         {msg.message ? <p style={{ color: msg.isError ? 'red' : '#0070f3', textAlign: 'center' }}>{msg.message}</p> : null}
         <form onSubmit={handleSubmit}>
+          {!user.emailVerified ? (
+            <p>
+              Your email has not been verify.
+              {' '}
+              {/* eslint-disable-next-line */}
+                <a role="button" onClick={sendVerificationEmail}>
+                  Send verification email
+                </a>
+            </p>
+          ) : null}
           <label htmlFor="name">
             Name
             <input
@@ -80,8 +96,7 @@ const ProfileSection = () => {
               name="name"
               type="text"
               placeholder="Your name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
+              ref={nameRef}
             />
           </label>
           <label htmlFor="bio">
@@ -91,8 +106,7 @@ const ProfileSection = () => {
               name="bio"
               type="text"
               placeholder="Bio"
-              value={bio}
-              onChange={(e) => setBio(e.target.value)}
+              ref={bioRef}
             />
           </label>
           <label htmlFor="avatar">
@@ -134,7 +148,7 @@ const ProfileSection = () => {
 };
 
 const SettingPage = () => {
-  const [user] = useUser();
+  const [user] = useCurrentUser();
 
   if (!user) {
     return (
@@ -146,7 +160,7 @@ const SettingPage = () => {
   return (
     <>
       <h1>Settings</h1>
-      <ProfileSection user={user} />
+      <ProfileSection />
     </>
   );
 };
diff --git a/pages/signup.jsx b/pages/signup.jsx
index 503b751..d74e3f7 100644
--- a/pages/signup.jsx
+++ b/pages/signup.jsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import Head from 'next/head';
 import Router from 'next/router';
-import { useUser } from '../lib/hooks';
+import { useCurrentUser } from '../lib/hooks';
 
 const SignupPage = () => {
-  const [user, { mutate }] = useUser();
+  const [user, { mutate }] = useCurrentUser();
   const [errorMsg, setErrorMsg] = useState('');
   useEffect(() => {
     // redirect to home if user is authenticated
@@ -66,6 +66,10 @@ const SignupPage = () => {
           </label>
           <button type="submit">Sign up</button>
         </form>
+        <p style={{ color: '#777', textAlign: 'center' }}>
+          Note: The database is public. For your privacy,
+          please avoid using your personal, work email.
+        </p>
       </div>
     </>
   );
diff --git a/pages/profile/index.jsx b/pages/user/[userId]/index.jsx
similarity index 57%
rename from pages/profile/index.jsx
rename to pages/user/[userId]/index.jsx
index 58cd29c..d321926 100644
--- a/pages/profile/index.jsx
+++ b/pages/user/[userId]/index.jsx
@@ -1,25 +1,18 @@
 import React from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import { useUser } from '../../lib/hooks';
+import Error from 'next/error';
+import middleware from '../../../middlewares/middleware';
+import { useCurrentUser } from '../../../lib/hooks';
+import { getUser } from '../../../lib/db';
 
-const ProfilePage = () => {
-  const [user] = useUser();
+export default function UserPage({ user }) {
+  if (!user) return <Error statusCode={404} />;
   const {
-    name, email, bio, profilePicture, emailVerified,
+    name, email, bio, profilePicture,
   } = user || {};
-
-  async function sendVerificationEmail() {
-    await fetch('/api/user/email/verify', {
-      method: 'POST',
-    });
-  }
-
-  if (!user) {
-    return (
-      <p>Please sign in</p>
-    );
-  }
+  const [currentUser] = useCurrentUser();
+  const isCurrentUser = currentUser?._id === user._id;
   return (
     <>
       <style jsx>
@@ -57,37 +50,35 @@ const ProfilePage = () => {
         <title>{name}</title>
       </Head>
       <div>
-        {profilePicture ? (
-          <img src={profilePicture} width="256" height="256" alt={name} />
-        ) : null}
+        <img src={profilePicture} width="256" height="256" alt={name} />
         <section>
           <div>
             <h2>{name}</h2>
-            <Link href="/profile/settings">
+            {isCurrentUser && (
+            <Link href="/settings">
               <button type="button">Edit</button>
             </Link>
+            )}
           </div>
           Bio
           <p>{bio}</p>
           Email
           <p>
             {email}
-            {!emailVerified ? (
-              <>
-                {' '}
-                unverified
-                {' '}
-                {/* eslint-disable-next-line */}
-                <a role="button" onClick={sendVerificationEmail}>
-                  Send verification email
-                </a>
-              </>
-            ) : null}
           </p>
         </section>
       </div>
     </>
   );
-};
+}
 
-export default ProfilePage;
+export async function getServerSideProps(context) {
+  await middleware.apply(context.req, context.res);
+  const user = await getUser(context.req, context.params.userId);
+  if (!user) context.res.statusCode = 404;
+  return {
+    props: {
+      user,
+    }, // will be passed to the page component as props
+  };
+}