I am coding a webpage and right now I am on the delete function that allows the user to delete the posts that they own. All of my other functions work, so Posting, Liking, Registering, Logging In, clicking on the post to go to it, however when I press the delete button on the post, it doesnt actually delete the post, it doesnt do anything actually. It is supposed to pop up a screen for confirmation that asks you to press OK to delete, and Cancel to cancel it. But it doesnt do any of that. There are many errors and I have no clue where to fix it because none of what I am doing/what I am finding can fix this.
Here is my DeleteButton.js
import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useMutation } from '@apollo/client';
import { Button, Confirm, Icon } from 'semantic-ui-react';
import { FETCH_POSTS_QUERY } from '../util/graphql'; // Import the query used to fetch posts
function DeleteButton({ postId }) {
const [confirmOpen, setConfirmOpen] = useState(false);
const [deletePost] = useMutation(DELETE_POST_MUTATION, {
variables: { postId },
update(proxy) {
setConfirmOpen(false);
// Update cache after post deletion
const data = proxy.readQuery({
query: FETCH_POSTS_QUERY
});
proxy.writeQuery({
query: FETCH_POSTS_QUERY,
data: {
getPosts: data.getPosts.filter(p => p.id !== postId)
}
});
},
onError(err) {
console.error('Error deleting post:', err);
}
});
return (
<>
<Button
as="div"
color="red"
floated="right"
onClick={() => setConfirmOpen(true)}
>
<Icon name="trash" style={{ margin: 0 }}/>
</Button>
<Confirm>
open={confirmOpen}
onCancel={() => setConfirmOpen(false)}
onConfirm={deletePost}
</Confirm>
</>
);
}
const DELETE_POST_MUTATION = gql`
mutation deletePost($postId: ID!) {
deletePost(postId: $postId)
}
`;
export default DeleteButton;
Here is my PostCard.js:
import React, { useContext} from 'react'
import { Button, Card, Icon, Label, Image } from 'semantic-ui-react'
import { Link } from 'react-router-dom'
import moment from 'moment'
import { AuthContext } from '../context/auth'
import LikeButton from './LikeButton'
import DeleteButton from './DeleteButton'
function PostCard({
post: { body, createdAt, id, username, likeCount, commentCount, likes }
}) {
const { user } = useContext(AuthContext);
return (
<Card fluid>
<Card.Content>
<Image
floated='right'
size='mini'
src='https://react.semantic-ui.com/images/avatar/large/molly.png'
/>
<Card.Header>{username}</Card.Header>
<Card.Meta as={Link} to={`/posts/${id}`}>
{moment(createdAt).fromNow()}
</Card.Meta>
<Card.Description>{body}</Card.Description>
</Card.Content>
<Card.Content extra>
<LikeButton user={user} post={{ id, likes, likeCount }}/>
<Button labelPosition='right' as={Link} to={`/posts/${id}`}>
<Button color='blue' basic>
<Icon name='comments' />
</Button>
<Label basic color='blue' pointing='left'>
{commentCount}
</Label>
</Button>
{user && user.username === username && <DeleteButton postId={id} />}
</Card.Content>
</Card>
);
}
export default PostCard
and here is my SinglePost.js:
import React, { useContext } from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/client';
import { useParams } from 'react-router-dom';
import moment from 'moment'
import { Button, Card, Grid, Image, Icon, Label } from 'semantic-ui-react'
import { AuthContext } from '../context/auth'
import LikeButton from '../components/LikeButton'
import DeleteButton from '../components/DeleteButton'
function SinglePost() {
const { postId } = useParams();
const { user } = useContext(AuthContext);
const { loading, data, error } = useQuery(FETCH_POST_QUERY, {
variables: { postId }
});
if (loading) return <p>Loading post...</p>;
if (error) return <p>Error loading post!</p>;
let postMarkup;
if (data.getPost) {
const { id, body, createdAt, username, comments, likes, likeCount, commentCount } = data.getPost;
postMarkup = (
<Grid>
<Grid.Row>
<Grid.Column width={2}>
<Image
src='https://react.semantic-ui.com/images/avatar/large/molly.png'
size = "small"
float = "right"/>
</Grid.Column>
<Grid.Column width={10}>
<Card fluid>
<Card.Content>
<Card.Header>{username}</Card.Header>
<Card.Meta>{moment(createdAt).fromNow()}</Card.Meta>
<Card.Description>{body}</Card.Description>
</Card.Content>
<hr/>
<Card.Content extra>
<LikeButton user={user} post={{ id, likeCount, likes }}/>
<Button
as="div"
labelPosition="right"
onClick={() => console.log('Comment on post')}
>
<Button basic color="purple">
<Icon name ="comments"/>
</Button>
<Label basic color="blue" pointing="left">
{commentCount}
</Label>
</Button>
{user && user.username === username && (
<DeleteButton postId={id} />
)}
</Card.Content>
</Card>
</Grid.Column>
</Grid.Row>
</Grid>
)
} else {
postMarkup = <p>Post not found</p>;
}
return postMarkup;
}
const FETCH_POST_QUERY = gql`
query($postId: ID!){
getPost(postId: $postId){
id
body
createdAt
username
likeCount
likes{
username
}
commentCount
comments{
id
username
createdAt
body
}
}
}
`
export default SinglePost
All of these use DeleteButton in some way shape or form.
I have tried using ChatGPT 4 (which has helped me all the way through this website through every error I have encountered, except for this one...), Bard AI, Google and GitHub and stack overflow's different posts that I can find, all of these avenues have come up to no help what so ever.
In DeleteButton.js, the return function that pops up the screen that displays the message to confirm the deletion this is how I have it,
<Confirm>
open={confirmOpen}
onCancel={() => setConfirmOpen(false)}
onConfirm={deletePost}
</Confirm>
The reason being is because when I write it like this (like how ChatGPT and the YouTube video Im following told me how to write it)
<Confirm
open={confirmOpen}
onCancel={() => setConfirmOpen(false)}
onConfirm={deletePost}
/>
I get this error on screen:
