feat: add option to delete posts from web UI

Author: cskartikey

components/post.js

@@ -7,6 +7,7 @@ import Content from './content'
 import Video from './video'
 import Image from 'next/image'
 import Reaction from './reaction'
+import { useState } from 'react'
 import EmojiPicker from 'emoji-picker-react'
 
 const imageFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp']
@@ -28,6 +29,7 @@ const Post = ({
   profile = false,
   user = {
     username: 'abc',
+    id: 'abc',
     avatar: '',
     displayStreak: false,
     streakCount: 0
@@ -44,6 +46,30 @@ const Post = ({
   swrKey,
   authSession
 }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  
+  const deletePost = async (id) => {
+    try {
+      const response = await fetch('/api/web/post/delete', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id }) 
+      });
+      const responseText = await response.text()
+      if (responseText.includes("Post Deleted")){
+        setIsVisible(false);
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  if (!isVisible) {
+    return null; 
+  }
+
   return (
     <>
       <section
@@ -156,6 +182,7 @@ 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}
@@ -171,6 +198,8 @@ const Post = ({
               +
             </div>
           )}
+          </div>
+          <Icon glyph="delete" size={32} className="delete-button post-reaction" onClick={() => deletePost(id)} />
         </footer>
       </section>
     </>

components/posts.js

@@ -70,6 +70,7 @@ const Posts = ({ posts = [], swrKey = null }) => {
         {posts.map(post => (
           <Post
             key={post.id}
+            userID={post.user.id}
             openEmojiPicker={openEmojiPicker}
             authStatus={status}
             authSession={session}

pages/api/web/post/delete.js

@@ -0,0 +1,25 @@
+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.updates.delete({
+      where: { id: req.body.id },
+    });
+
+    console.log('API Response:', update);
+
+    return res.status(200).send({message: "Post Deleted"});
+  } catch (e) {
+    console.error('Error deleting post:', e);
+    return res.status(500).json({ error: true, message: 'Internal Server Error' });
+  }
+};

public/posts.css

@@ -24,6 +24,7 @@
   text-decoration: none;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 8px;
   line-height: 1;
 }
@@ -40,6 +41,7 @@
 
 .post-header-container {
   padding-left: 8px;
+  flex-grow: 1;
 }
 
 .post-header-name {
@@ -122,6 +124,7 @@ a.post-text-mention {
   align-items: center;
   margin-top: 16px;
 }
+
 .post-attachment {
   border-radius: 6px;
   overflow: hidden;
@@ -160,6 +163,7 @@ a.post-attachment:first-child:last-child {
   flex-wrap: wrap;
   margin-top: 16px;
   margin-bottom: -12px;
+  justify-content: space-between;
 }
 
 .post-reaction {
@@ -198,3 +202,24 @@ a.post-attachment:first-child:last-child {
   width: 24px;
   height: 24px;
 }
+
+.delete-button {
+  color: var(--colors-background);
+  background-color: #ec3750;
+  border-color: black;
+}
+
+.delete-button:hover {
+  transform: scale(1.2);
+  color: var(--colors-background);
+  animation: wiggle 0.5s ease-in-out infinite;
+}
+
+@keyframes wiggle {
+  0%, 100% {
+    transform: rotate(-5deg) scale(1.2);
+  }
+  50% {
+    transform: rotate(5deg) scale(1.2);
+  }
+}