Boilerplate UI for removal of post, Portal implementation

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

@@ -1,5 +1,6 @@
 import { useNavigate } from "@solidjs/router";
-import { JSXElement, useContext } from "solid-js";
+import { JSXElement, createEffect, createSignal, useContext } from "solid-js";
+import { Portal } from "solid-js/web";
 
 import { LoginContext } from "../../Context/GlobalState";
 import { RemovePostIcon } from "../../Util/Icons";
@@ -11,16 +12,20 @@ export default function RemovePostButton(props: {
   const navigate = useNavigate();
   const login_ctx = useContext(LoginContext)!;
 
+  // State to track whether the post has been deleted
+  const [isDeleted, setIsDeleted] = createSignal(false);
+
   // 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
+        // If deletion is successful, set isDeleted to true
+        setIsDeleted(true);
         console.log("Post deleted successfully");
-        navigate("/"); // Redirect to "/" after successful deletion
+        // Optional: You can also navigate to "/" after successful deletion
+        navigate("/");
       } 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
       }
@@ -30,6 +35,22 @@ export default function RemovePostButton(props: {
     }
   };
 
+  // Effect to display modal when post is deleted
+  createEffect(() => {
+    if (isDeleted()) {
+      // Display modal here
+      <Portal mount={document.body}>
+        <div class="w-100 h-100 -z-20">
+          <div class="fixed inset-0 z-20 w-1/4 items-center justify-center">
+            <div role="alert" class="alert alert-success">
+              <p>Post was successfully removed</p>
+            </div>
+          </div>
+        </div>
+      </Portal>;
+    }
+  });
+
   return (
     <div class="flex p-1">
       <button