2024-03-23 00:10:42 +01:00
|
|
|
import { useNavigate } from "@solidjs/router";
|
2024-03-25 14:15:37 +01:00
|
|
|
import { JSXElement, createEffect, createSignal, useContext } from "solid-js";
|
|
|
|
import { Portal } from "solid-js/web";
|
2024-03-22 11:45:52 +01:00
|
|
|
|
2024-03-23 00:10:42 +01:00
|
|
|
import { LoginContext } from "../../Context/GlobalState";
|
2024-03-22 11:45:52 +01:00
|
|
|
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)!;
|
|
|
|
|
2024-03-25 14:15:37 +01:00
|
|
|
// 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) {
|
2024-03-25 14:15:37 +01:00
|
|
|
// If deletion is successful, set isDeleted to true
|
|
|
|
setIsDeleted(true);
|
2024-03-23 00:10:42 +01:00
|
|
|
console.log("Post deleted successfully");
|
2024-03-25 14:15:37 +01:00
|
|
|
// 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
|
|
|
|
}
|
|
|
|
};
|
2024-03-22 11:45:52 +01:00
|
|
|
|
2024-03-25 14:15:37 +01:00
|
|
|
// 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>;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2024-03-22 11:45:52 +01:00
|
|
|
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>
|
2024-03-22 11:45:52 +01:00
|
|
|
);
|
|
|
|
}
|