Add Feature Edit Post #118

rkreddy99 · 2021-05-16T14:30:06Z

Users can edit their post by clicking on edit icon for their posts.

changeset-bot · 2021-05-16T14:30:07Z

⚠️ No Changeset found

Latest commit: 55911c1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2021-05-16T14:30:10Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hoangvvo/nextjs-mongodb-app/8oEopmVKAZQWdBHsMt4ogFzKWZpE
✅ Preview: https://nextjs-mongodb-app-git-fork-rkreddy99-master-hoangvvo.vercel.app

rkreddy99 · 2021-05-17T06:27:21Z

This pull request has two commits Add Feature Edit Post and Add Edit Post Feature.

Add Feature Edit Post

Edit the post in Post component from post.jsx

Add Edit Post Feature

Edit the post using PostEditor component from editor.jsx

Merge the commit based on the requirement.

ItaiAxelrad · 2021-05-20T17:10:47Z

Please be sure to check your editor and prettier config and align it with the one used for this project (single/double quotes, indents, etc.). Otherwise you end up with additional changes that make your commit harder to review.

rkreddy99 · 2021-05-22T05:56:05Z

@ItaiAxelrad Can you tell me how to get the original prettier configuration.
Before:

After: (my prettier configuration)

or is it fine to use my prettier configuration.

hoangvvo · 2021-05-22T06:18:23Z

Do you install prettier on your machine? @rkreddy99 If so try disabling and use eslint do to code formatting.

rkreddy99 · 2021-05-22T06:56:03Z

I wasn't able to format the code using eslint, but still tried to be consistent using prettier. @hoangvvo Is it ok?

hoangvvo · 2021-05-22T08:19:08Z

You can try running

npx eslint . --fix

rkreddy99 · 2021-05-22T08:49:49Z

You can try running
npx eslint . --fix

Done. @hoangvvo

rkreddy99 · 2021-06-08T05:35:48Z

Does anything more needed to be added in this commit @hoangvvo @ItaiAxelrad

hoangvvo · 2021-06-08T05:58:49Z

components/post/posts.jsx

        <small>{new Date(post.createdAt).toLocaleString()}</small>
+        {user?._id === currUser?._id && (


In this case, what if both user and currUser is undefined?

hoangvvo · 2021-06-08T06:03:07Z

components/post/editor.jsx

  }

+  const discard = () => {
+    makeEdit();


This call is not clear what it does.

hoangvvo · 2021-06-08T06:12:19Z

components/post/posts.jsx

+  const [edit, setEdit] = useState(false);
+  const [content, setContent] = useState(post.content);
+  const [msg, setMsg] = useState('');
  const user = useUser(post.creatorId);
+  const [currUser] = useCurrentUser();
+  const makeEdit = (msg, text) => {
+    setEdit(false);
+    setMsg(msg);
+    setTimeout(() => setMsg(null), 1500);
+    if (text) setContent(text);
+  };


I think this logic should be inside PostEditor. Howabout passing an id into it. something like:

<PostEditor editingId="foo" />

hoangvvo · 2021-06-08T06:12:58Z

components/post/posts.jsx

          }
          small {
            color: #777;
          }
        `}
      </style>
-      <div>
+      <div style={{ position: 'relative' }}>
+        <p style={{ color: '#0070f3', textAlign: 'center' }}>{msg}</p>


This should be inside PostEditor similar to the other comment

hoangvvo · 2021-06-08T06:13:58Z

Does anything more needed to be added in this commit @hoangvvo @ItaiAxelrad

I am really sorry. I have been really busy lately, but I just added some comments.

Thank you.

hoangvvo · 2021-06-08T06:15:32Z

components/post/posts.jsx

-  return useSWRInfinite((index, previousPageData) => {
-    // reached the end
-    if (previousPageData && previousPageData.posts.length === 0) return null;
+  return useSWRInfinite(
+    (index, previousPageData) => {
+      // reached the end
+      if (previousPageData && previousPageData.posts.length === 0) return null;

-    // first page, previousPageData is null
-    if (index === 0) {
-      return `/api/posts?limit=${PAGE_SIZE}${
-        creatorId ? `&by=${creatorId}` : ''
-      }`;
-    }
+      // first page, previousPageData is null
+      if (index === 0) {
+        return `/api/posts?limit=${PAGE_SIZE}${creatorId ? `&by=${creatorId}` : ''}`;
+      }

-    // using oldest posts createdAt date as cursor
-    // We want to fetch posts which has a datethat is
-    // before (hence the .getTime() - 1) the last post's createdAt
-    const from = new Date(
-      new Date(
-        previousPageData.posts[previousPageData.posts.length - 1].createdAt,
-      ).getTime() - 1,
-    ).toJSON();
+      // using oldest posts createdAt date as cursor
+      // We want to fetch posts which has a datethat is
+      // before (hence the .getTime() - 1) the last post's createdAt
+      const from = new Date(
+        new Date(previousPageData.posts[previousPageData.posts.length - 1].createdAt).getTime() - 1
+      ).toJSON();

-    return `/api/posts?from=${from}&limit=${PAGE_SIZE}${
-      creatorId ? `&by=${creatorId}` : ''
-    }`;
-  }, fetcher, {
-    refreshInterval: 10000, // Refresh every 10 seconds
-  });
+      return `/api/posts?from=${from}&limit=${PAGE_SIZE}${creatorId ? `&by=${creatorId}` : ''}`;
+    },
+    fetcher,
+    {
+      refreshInterval: 10000, // Refresh every 10 seconds
+    }
+  );
 }


Lots of these changes are stylistic changes (maybe because of some formatting tool on your local), which make it difficult to review.

Is it possible to undo these?

Will take care of it.

hoangvvo · 2021-06-08T06:15:57Z

components/post/posts.jsx

+        <button
+          type="button"
+          style={{
+            background: 'transparent',
+            color: '#000',
+          }}
+          onClick={() => setSize(size + 1)}
+          disabled={isReachingEnd || isLoadingMore}>
+          {isLoadingMore ? '. . .' : 'load more'}
+        </button>


Let's try avoid stylistic changes

hoangvvo · 2021-06-08T06:16:07Z

components/post/posts.jsx

+      {posts.map((post) => (
+        <Post key={post._id} post={post} />
+      ))}


Let's try avoid stylistic changes

hoangvvo · 2021-06-08T06:16:17Z

db/post.js

-  return db.collection('posts').insertOne({
-    _id: nanoid(12),
-    content,
-    creatorId,
-    createdAt: new Date(),
-  }).then(({ ops }) => ops[0]);
+  return db
+    .collection('posts')
+    .insertOne({
+      _id: nanoid(12),
+      content,
+      creatorId,
+      createdAt: new Date(),
+    })
+    .then(({ ops }) => ops[0]);


Let's try avoid stylistic changes

hoangvvo · 2021-06-08T06:16:46Z

pages/api/user/index.js

@@ -28,6 +28,7 @@ handler.get(async (req, res) => {
  if (!req.user) return res.json({ user: null });
  const { password, ...u } = req.user;
  res.json({ user: u });
+  return null;


Is it required?

hoangvvo · 2021-06-08T06:17:47Z

pages/api/posts/index.js

+  const post = await editPost(req.db, {
+    content: req.body.content,
+    postId: req.body.postId,
+  });


We need to authenticate this. Cannot let a user edit other people's posts

ItaiAxelrad

Will review more thoroughly once style conforms and existing requested changes have been made.

ItaiAxelrad · 2021-06-09T21:24:49Z

components/post/posts.jsx

 import { defaultProfilePicture } from '@/lib/default';
+import PostEditor from './editor';


change to import PostEditor from '@/components/post/editor'; per jsconfig

ItaiAxelrad · 2021-06-09T21:34:18Z

components/post/editor.jsx

+      <p style={{ color: '#0070f3', textAlign: 'center' }}>{msg}</p>
+      <form
+        onSubmit={hanldeSubmit}
+        onReset={discard}


Let's not abstract the logic too much, change to: onReset={() => setEdit(false)}

ItaiAxelrad · 2021-06-09T21:35:43Z

components/post/editor.jsx

  }

+  const discard = () => {


Remove discard in favor of passing in setEdit as prop

ItaiAxelrad · 2021-06-09T21:36:41Z

components/post/editor.jsx

@@ -1,51 +1,88 @@
 import React, { useState } from 'react';
 import { useCurrentUser } from '@/hooks/index';

-export default function PostEditor() {
+export default function PostEditor({ edit, makeEdit, text, Id }) {


add setEdit as prop: export default function PostEditor({ edit, makeEdit, setEdit, text, Id })

ItaiAxelrad · 2021-06-09T21:37:29Z

components/post/posts.jsx

-          {post.content}
-        </p>
+        {edit === true ? (
+          <PostEditor edit={edit} makeEdit={makeEdit} text={content} Id={post._id} />


Add setEdit={setEdit} to props

bikkimahato · 2022-04-24T18:17:02Z

components/post/editor.jsx

+        content: e.currentTarget.content.value,
+        postId: Id,
+      };
+      // if (!e.currentTarget.content.value) return;


Commented code should not be pushed.

Add Feature Edit Post

9b4814f

vercel bot deployed to Preview May 16, 2021 14:30 View deployment

Add Edit Post Feature

d69d549

vercel bot deployed to Preview May 17, 2021 06:21 View deployment

Make formatting consistent

5dea9d3

vercel bot deployed to Preview May 22, 2021 06:52 View deployment

rkreddy99 added 2 commits May 22, 2021 14:13

ESlint fix

aacb10c

ESlint fix

c79e6b2

vercel bot deployed to Preview May 22, 2021 08:44 View deployment

ESlint fix

0d7a50d

vercel bot deployed to Preview May 22, 2021 08:48 View deployment

ESlint fix

55911c1

vercel bot deployed to Preview May 22, 2021 08:50 View deployment

hoangvvo requested changes Jun 8, 2021

View reviewed changes

ItaiAxelrad suggested changes Jun 9, 2021

View reviewed changes

bikkimahato reviewed Apr 24, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Feature Edit Post #118

Add Feature Edit Post #118

rkreddy99 commented May 16, 2021 •

edited

Loading

changeset-bot bot commented May 16, 2021 •

edited

Loading

vercel bot commented May 16, 2021 •

edited

Loading

rkreddy99 commented May 17, 2021 •

edited

Loading

ItaiAxelrad commented May 20, 2021

rkreddy99 commented May 22, 2021 •

edited

Loading

hoangvvo commented May 22, 2021

rkreddy99 commented May 22, 2021

hoangvvo commented May 22, 2021

rkreddy99 commented May 22, 2021

rkreddy99 commented Jun 8, 2021

hoangvvo Jun 8, 2021

hoangvvo Jun 8, 2021

hoangvvo Jun 8, 2021

hoangvvo Jun 8, 2021

hoangvvo commented Jun 8, 2021

hoangvvo Jun 8, 2021

rkreddy99 Jun 8, 2021

hoangvvo Jun 8, 2021

rkreddy99 Jun 8, 2021

hoangvvo Jun 8, 2021

hoangvvo Jun 8, 2021

hoangvvo Jun 8, 2021

hoangvvo Jun 8, 2021

ItaiAxelrad left a comment

ItaiAxelrad Jun 9, 2021

ItaiAxelrad Jun 9, 2021

ItaiAxelrad Jun 9, 2021

ItaiAxelrad Jun 9, 2021

ItaiAxelrad Jun 9, 2021

bikkimahato Apr 24, 2022

		<small>{new Date(post.createdAt).toLocaleString()}</small>
		{user?._id === currUser?._id && (

		import { defaultProfilePicture } from '@/lib/default';
		import PostEditor from './editor';

Add Feature Edit Post #118

Are you sure you want to change the base?

Add Feature Edit Post #118

Conversation

rkreddy99 commented May 16, 2021 • edited Loading

changeset-bot bot commented May 16, 2021 • edited Loading

⚠️ No Changeset found

vercel bot commented May 16, 2021 • edited Loading

rkreddy99 commented May 17, 2021 • edited Loading

ItaiAxelrad commented May 20, 2021

rkreddy99 commented May 22, 2021 • edited Loading

hoangvvo commented May 22, 2021

rkreddy99 commented May 22, 2021

hoangvvo commented May 22, 2021

rkreddy99 commented May 22, 2021

rkreddy99 commented Jun 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hoangvvo commented Jun 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ItaiAxelrad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rkreddy99 commented May 16, 2021 •

edited

Loading

changeset-bot bot commented May 16, 2021 •

edited

Loading

vercel bot commented May 16, 2021 •

edited

Loading

rkreddy99 commented May 17, 2021 •

edited

Loading

rkreddy99 commented May 22, 2021 •

edited

Loading