fix: button only appears if authenticated user is the owner of the post

Author: cskartikey

components/post.js

@@ -7,7 +7,7 @@ import Content from './content'
 import Video from './video'
 import Image from 'next/image'
 import Reaction from './reaction'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import EmojiPicker from 'emoji-picker-react'
 
 const imageFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp']
@@ -34,31 +34,44 @@ const Post = ({
     displayStreak: false,
     streakCount: 0
   },
+  sessionID = 'abc',
   text,
   attachments = [],
   mux = [],
   reactions = [],
   postedAt,
   slackUrl,
   muted = false,
-  openEmojiPicker = () => {},
+  openEmojiPicker = () => { },
   authStatus,
   swrKey,
   authSession
 }) => {
   const [isVisible, setIsVisible] = useState(true);
-  
+  const [sessionUserId, setSessionUserId] = useState(null);
+
+  useEffect(() => {
+    if (authStatus === 'authenticated') {
+        const fetchSessionUserID = async () => {
+            const id = await getSessionUserID(user.id);
+            setSessionUserId(id);
+        };
+        fetchSessionUserID();
+    }
+}, [user.id, authStatus]);
+
+
   const deletePost = async (id) => {
     try {
       const response = await fetch('/api/web/post/delete', {
         method: 'DELETE',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ id }) 
+        body: JSON.stringify({ id })
       });
       const responseText = await response.text()
-      if (responseText.includes("Post Deleted")){
+      if (responseText.includes("Post Deleted")) {
         setIsVisible(false);
       }
     } catch (error) {
@@ -67,7 +80,7 @@ const Post = ({
   };
 
   if (!isVisible) {
-    return null; 
+    return null;
   }
 
   return (
@@ -107,11 +120,10 @@ const Post = ({
                 <span className="post-header-name">
                   <strong>@{user.username}</strong>
                   <span
-                    className={`badge post-header-streak ${
-                      !user.displayStreak || user.streakCount === 0
-                        ? 'header-streak-zero'
-                        : ''
-                    }`}
+                    className={`badge post-header-streak ${!user.displayStreak || user.streakCount === 0
+                      ? 'header-streak-zero'
+                      : ''
+                      }`}
                     title={`${user.streakCount}-day streak`}
                   >
                     {`${user.streakCount <= 7 ? user.streakCount : '7+'}`}
@@ -182,28 +194,45 @@ const Post = ({
           </div>
         )}
         <footer className="post-reactions" aria-label="Emoji reactions">
-        <div style={{ display: 'flex', flexWrap: 'wrap', flexGrow: 1 }}>
-          {reactions.map(reaction => (
-            <Reaction
-              key={id + reaction.name}
-              {...reaction}
-              postID={id}
-              authStatus={authStatus}
-              authSession={authSession}
-              swrKey={swrKey}
-            />
-          ))}
-          {authStatus == 'authenticated' && (
-            <div className="post-reaction" onClick={() => openEmojiPicker(id)}>
-              +
-            </div>
-          )}
+          <div style={{ display: 'flex', flexWrap: 'wrap', flexGrow: 1 }}>
+            {reactions.map(reaction => (
+              <Reaction
+                key={id + reaction.name}
+                {...reaction}
+                postID={id}
+                authStatus={authStatus}
+                authSession={authSession}
+                swrKey={swrKey}
+              />
+            ))}
+            {authStatus == 'authenticated' && (
+              <div className="post-reaction" onClick={() => openEmojiPicker(id)}>
+                +
+              </div>
+            )}
           </div>
-          <Icon glyph="delete" size={32} className="delete-button post-reaction" onClick={() => deletePost(id)} />
+          {( authStatus == 'authenticated' && sessionUserId === user.id) && <Icon glyph="delete" size={32} className="delete-button post-reaction" onClick={() => deletePost(id)} />}
         </footer>
       </section>
     </>
   )
 }
 
 export default Post
+
+const getSessionUserID = async (id) => {
+  try {
+    const response = await fetch('/api/web/session/get', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ id })
+    });
+
+    const responseText = JSON.parse(await response.text());
+    return responseText.message;
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}

pages/api/web/session/get.js

@@ -0,0 +1,31 @@
+import { getServerSession } from 'next-auth/next';
+import { authOptions } from '../../auth/[...nextauth]';
+import prisma from '../../../../lib/prisma';
+
+export default async (req, res) => {
+    const session = await getServerSession(req, res, authOptions);
+
+    if (!session?.user) {
+        console.log('Unauthorized access attempt');
+        return res.status(401).send({ message: "Unauthorized" });
+    }
+
+    try {
+        const update = await prisma.session.findFirst({
+            where: {
+                userId: req.body.id
+            },
+            orderBy: {
+                expires: 'desc'
+            }
+        });
+        if (update) {
+            const userId = update.userId;
+            return res.status(200).send({ message: userId });
+        }
+        return res.status(200).send({ message: false });
+    } catch (e) {
+        console.error('Error deleting post:', e);
+        return res.status(500).json({ error: true, message: 'Internal Server Error' });
+    }
+};