Boilerplate UI for removal of post, Portal implementation

This commit is contained in:
Hollgy 2024-03-25 14:15:37 +01:00
parent 3b52b1b7e8
commit 27b2be3213

View file

@ -1,5 +1,6 @@
import { useNavigate } from "@solidjs/router"; 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 { LoginContext } from "../../Context/GlobalState";
import { RemovePostIcon } from "../../Util/Icons"; import { RemovePostIcon } from "../../Util/Icons";
@ -11,16 +12,20 @@ export default function RemovePostButton(props: {
const navigate = useNavigate(); const navigate = useNavigate();
const login_ctx = useContext(LoginContext)!; const login_ctx = useContext(LoginContext)!;
// State to track whether the post has been deleted
const [isDeleted, setIsDeleted] = createSignal(false);
// Function to handle post deletion // Function to handle post deletion
const handleDeletePost = async (): Promise<void> => { const handleDeletePost = async (): Promise<void> => {
try { try {
const response = await deletePost(props.postId, login_ctx.token()); const response = await deletePost(props.postId, login_ctx.token());
if (response.ok) { 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"); console.log("Post deleted successfully");
navigate("/"); // Redirect to "/" after successful deletion // Optional: You can also navigate to "/" after successful deletion
navigate("/");
} else { } else {
// If deletion fails, handle the error
console.error("Failed to delete post:", response.statusText); console.error("Failed to delete post:", response.statusText);
// You may want to show an error message or handle the failure in some other way // 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 ( return (
<div class="flex p-1"> <div class="flex p-1">
<button <button