Hi Guys,
Am pretty stuck in finding the reason why am not fetch comments api, the state return is empty. fetching the post was ok, please any one with a extra have a look, much appreciated…
Here my code too.
CommentsSlice.js
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { createAsyncThunk } from "@reduxjs/toolkit";
const limit = 10;
export const fetchComments = createAsyncThunk('redditComments/fetchComments', async (permalink) => {
try {
const response = await axios
.get(`https://www.reddit.com/r/${permalink}.json?limit=${limit}`);
return response.data.data[1].children.map((comment) => comment.data);
}catch (error) {
throw (error);
}
});
//create slice & reducer
const RedditCommentsSlice = createSlice({
name: 'redditComments',
initialState: {
loading: false,
error: false,
comments: [],
},
extraReducers: (builder) => {
builder.addCase(fetchComments.pending, (state) => {
state.loading = true;
state.error = false;
})
builder.addCase(fetchComments.fulfilled, (state, action) => {
state.loading = false;
state.comments = action.payload;
})
builder.addCase(fetchComments.rejected, (state, action) => {
state.loading = false;
state.error = action.error;
})
},
// reducers: {
// fetchCommentsPending: (state) => {
// state.loading = true;
// state.error = false;
// },
// fetchCommentsFulfilled: (state, action) => {
// state.loading = false;
// state.comments = action.payload.comments;
// },
// fetchCommentsRejected: (state, action) => {
// state.loading = false;
// state.error = action.error;
// },
// },
})
export const { fetchCommentsPending, fetchCommentsFulfilled, fetchCommentsRejected } = RedditCommentsSlice.actions;
export default RedditCommentsSlice.reducer;
Comments.js
import React, { useEffect } from "react";
import './Posts.css';
import { useSelector, useDispatch } from "react-redux";
import { fetchPosts } from "../../API/RedditSlice";
import { BiUpvote, BiDownvote } from "react-icons/bi";
import { useState } from "react";
import { TfiCommentAlt } from 'react-icons/tfi';
const Posts = () => {
const posts = useSelector((state) => state.redditPosts.posts)
const loading = useSelector((state) => state.redditPosts.loading);
const error = useSelector((state) => state.redditPosts.error);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchPosts())
}, [dispatch]);
// Voting section
const [votedPosts, setVotedPosts] = useState({});
const handleVote = (postId, value) => {
setVotedPosts((prevVotes) => {
const newVotes = { ...prevVotes };
if (newVotes[postId] === value) {
// If the user clicks the same vote button again, remove their vote
delete newVotes[postId];
} else {
// Otherwise, update their vote
newVotes[postId] = value;
}
return newVotes;
});
};
if (loading) {
return <div>Loading....</div>
}
if (error) {
return <div>Error: {error}</div>
}
return (
<div className="posts-container">
{posts.map((post) => (
<div className="card" key={post.id}>
<section className="card-header">
<div className="title-name"><p>{post.title}</p></div>
<br />
<hr />
</section>
<article>
<img className='post-image'
src={post.url} alt='content'
onError={(i) => i.target.style.display='none'} />
<hr />
<div>
<p><span className='subreddit-name'>Subreddit: </span>r/{post.subreddit}</p>
</div>
<br />
<div className="score-comment">
<button
onClick={() => handleVote(post.id, 1)}
className={votedPosts[post.id] === 1 ? "vote-up disabled" : ''}
disabled={votedPosts[post.id] === 1}>
<BiUpvote />
</button>
{post.score + (votedPosts[post.id] || 0)}
<button
onClick={() => handleVote(post.id, -1)}
className={votedPosts[post.id] === -1 ? "vote-down disabled" : ''}
disabled={votedPosts[post.id] === -1}>
<BiDownvote />
</button>
{/* Add your comments button here */}
<div className="comment-container">
<button className="comment-button">
<TfiCommentAlt />
</button>
</div>
</div>
</article>
</div>
))}
</div>
)
}
export default Posts;
Many thanks