feat: add option to delete posts from web UI

components/post.js

@@ -1,13 +1,13 @@
 import { convertTimestampToDate } from '../lib/dates'
-import { proxy } from '../lib/images'
 import { filter } from 'lodash'
 import Icon from '@hackclub/icons'
 import Link from 'next/link'
 import Content from './content'
 import Video from './video'
 import Image from 'next/image'
 import Reaction from './reaction'
-import EmojiPicker from 'emoji-picker-react'
+import { useState, useEffect } from 'react'
+import toast from 'react-hot-toast'
 
 const imageFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp']
 
@@ -28,22 +28,51 @@ const Post = ({
   profile = false,
   user = {
     username: 'abc',
+    id: 'abc',
     avatar: '',
     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 deletePost = async (id) => {
+    toast.promise(
+      fetch('/api/web/post/delete', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id })
+      }).then(response => response.text()).then(responseText => {
+        if (responseText.includes("Post Deleted")) {
+          setIsVisible(false);
+        }
+      }),
+      {
+        loading: 'Deleting post...',
+        success: 'Post Deleted Successfully!',
+        error: 'Error deleting post.',
+      }
+    );
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
   return (
     <>
       <section
@@ -80,11 +109,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+'}`}
@@ -154,25 +182,28 @@ const Post = ({
           </div>
         )}
         <footer className="post-reactions" aria-label="Emoji reactions">
-          {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>
+          {( authStatus == 'authenticated' && authSession.user.id === user.id) && <Icon glyph="delete" size={32} className="delete-button post-reaction" onClick={() => deletePost(id)} />}
         </footer>
       </section>
     </>
   )
 }
 
-export default Post
+export default Post

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);
+  }
+}