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

66 lines
2.1 KiB
TypeScript
Raw Normal View History

2024-03-23 00:10:42 +01:00
import { useNavigate } from "@solidjs/router";
import { JSXElement, createEffect, createSignal, useContext } from "solid-js";
import { Portal } from "solid-js/web";
2024-03-23 00:10:42 +01:00
import { LoginContext } from "../../Context/GlobalState";
import { RemovePostIcon } from "../../Util/Icons";
2024-03-23 00:10:42 +01:00
import { deletePost } from "../../Util/api";
export default function RemovePostButton(props: {
postId: string;
}): JSXElement {
const navigate = useNavigate();
const login_ctx = useContext(LoginContext)!;
// State to track whether the post has been deleted
const [isDeleted, setIsDeleted] = createSignal(false);
2024-03-23 00:10:42 +01:00
// 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, set isDeleted to true
setIsDeleted(true);
2024-03-23 00:10:42 +01:00
console.log("Post deleted successfully");
// Optional: You can also navigate to "/" after successful deletion
navigate("/");
2024-03-23 00:10:42 +01:00
} else {
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
}
};
// 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 (
2024-03-23 00:10:42 +01:00
<div class="flex p-1">
<button
class="rounded-base btn btn-xs hover:border-primary"
aria-label="Remove post"
onClick={handleDeletePost}
>
<RemovePostIcon />
</button>
</div>
);
}