Removal of posts added

client-solid/src/Components/Buttons/CommentsButton.tsx

@@ -7,7 +7,7 @@ export default function CommentsButton(): JSXElement {
     <div class="flex p-1">
       <CommentsIcon />
       <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
-        <p style={{ "--value": 12 }}></p>
+        <p style={{ "--value": 12 }} />
       </span>
     </div>
   );

client-solid/src/Components/Buttons/Engegament.tsx

@@ -1,31 +1,28 @@
-import { JSXElement, createSignal,onMount,useContext } from "solid-js";
+import { JSXElement, createSignal, onMount, useContext } from "solid-js";
 
-import { EngagementIcon } from "../../Util/Icons";
-import { engage } from "../../Util/api";
 import { LoginContext } from "../../Context/GlobalState";
-import { getEngagementCount } from "../../Util/api";
+import { EngagementIcon } from "../../Util/Icons";
+import { engage, getEngagementCount } from "../../Util/api";
 
-export default function EngagementButton({
+export default function EngagementButton(props: {
-  postId,
-}: {
   postId: string;
 }): JSXElement {
   const [engagementCount, setEngagementCount] = createSignal(0);
   const login_ctx = useContext(LoginContext)!;
 
   onMount((): void => {
-    void setUp()
+    void setUp();
-  })
+  });
 
-  const setUp = async () => {
+  const setUp = async (): Promise<void> => {
-    const r = await getEngagementCount(postId)
+    const r = await getEngagementCount(props.postId);
-    setEngagementCount(r)
+    setEngagementCount(r);
-  }
+  };
 
   // Function to handle engagement
-  const handleEngagement = async () => {
+  const handleEngagement = async (): Promise<void> => {
     try {
-      const response = await engage(postId, login_ctx.token()) ;
+      const response = await engage(props.postId, login_ctx.token());
       if (response.ok) {
         // Update engagement count if the request is successful
         setEngagementCount(await response.json());
@@ -47,7 +44,7 @@ export default function EngagementButton({
         <EngagementIcon />
       </button>
       <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
-        <p style={{ "--value": engagementCount() }}></p>
+        <p style={{ "--value": engagementCount() }} />
       </span>
     </div>
   );

client-solid/src/Components/Buttons/RemovePostButton.tsx

@@ -1,18 +1,44 @@
-import { JSXElement } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+import { JSXElement, useContext } from "solid-js";
 
+import { LoginContext } from "../../Context/GlobalState";
 import { RemovePostIcon } from "../../Util/Icons";
+import { deletePost } from "../../Util/api";
+
+export default function RemovePostButton(props: {
+  postId: string;
+}): JSXElement {
+  const navigate = useNavigate();
+  const login_ctx = useContext(LoginContext)!;
+
+  // Function to handle post deletion
+  const handleDeletePost = async (): Promise<void> => {
+    try {
+      const response = await deletePost(props.postId, login_ctx.token());
+      if (response.ok) {
+        // If deletion is successful, navigate to "/" or remount the component
+        console.log("Post deleted successfully");
+        navigate("/"); // Redirect to "/" after successful deletion
+      } else {
+        // If deletion fails, handle the error
+        console.error("Failed to delete post:", response.statusText);
+        // You may want to show an error message or handle the failure in some other way
+      }
+    } catch (error) {
+      console.error("Error deleting post:", error);
+      // Handle any unexpected errors that occur during the deletion process
+    }
+  };
 
-export default function RemovePostButton(): JSXElement {
   return (
-    <>
     <div class="flex p-1">
       <button
         class="rounded-base btn btn-xs hover:border-primary"
-          aria-label="Show sign of engagement"
+        aria-label="Remove post"
+        onClick={handleDeletePost}
       >
         <RemovePostIcon />
       </button>
     </div>
-    </>
   );
 }

client-solid/src/Components/Comment.tsx

@@ -13,7 +13,7 @@ export function Comment(props: CommentProps): JSXElement {
         <time class="text-xs opacity-50">{props.comment.created_at}</time>
       </div>
       <div class="">{props.comment.content}</div>
-      <div class="divider"></div>
+      <div class="divider" />
     </>
   );
 }

client-solid/src/Components/PostSegment.tsx

@@ -1,4 +1,5 @@
 import { JSXElement, Show } from "solid-js";
+
 import { Post } from "../Util/api";
 import CommentsButton from "./Buttons/CommentsButton";
 import EngagementButton from "./Buttons/Engegament";
@@ -23,7 +24,7 @@ export function PostSegment(props: { post: Post }): JSXElement {
                 <ReportButton />
               </li>
               <li>
-                <RemovePostButton />
+                <RemovePostButton postId={post.id} />
               </li>
             </ul>
           </details>