Hi Guys,
Am having trouble in rendering the search post in the UI, and also same with the subreddit button. both Api call is fetch with data returning, but i just cant seem to pull it off.
anyone has the chance to have a look.
much appreciated
Posts.js
import React, { useEffect, useState } from "react";
import './Posts.css';
import { useSelector, useDispatch } from "react-redux";
import { fetchPosts, searchPosts } from "../../API/RedditSlice";
import { BiUpvote, BiDownvote } from "react-icons/bi";
import { TfiCommentAlt } from 'react-icons/tfi';
import Comments from "../Comments/Comments";
const Posts = ({ subreddit }) => {
// Select relevant state from the Redux store
const posts = useSelector((state) => state.redditPosts.posts);
const searchResults = useSelector((state) => state.redditPosts.searchResults);
const loading = useSelector((state) => state.redditPosts.loading);
const error = useSelector((state) => state.redditPosts.error);
// Initialize local state variables
const [showComments, setShowComments] = useState({});
const [votedPosts, setVotedPosts] = useState({});
const dispatch = useDispatch();
//Fetch posts on component mount or when subreddit changes
useEffect(() => {
const fetchData = async () => {
try {
if (!searchResults || searchResults.length === 0) {
await dispatch(fetchPosts(subreddit));
} else {
searchPosts(searchResults);
}
} catch (error) {
console.error("Error fetching posts:", error);
}
};
fetchData();
}, [dispatch, subreddit, searchResults]);
// Voting sections
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;
});
};
// Comment section
const toggleComments = (postId) => {
setShowComments((prevState) => ({
...prevState,
[postId]: !prevState[postId],
}));
};
if (loading) {
return <div>Loading....</div>
}
if (error) {
return <div>Error: {error}</div>
}
const renderPosts = posts || searchResults || [];
return (
<div className="posts-container" id="subreddit-homepage">
{renderPosts.map((post) => (
<div className='card-container' key={post.id}>
<section className="card-header">
<div>
<p className="subreddit-name-p"><span className='subreddit-name'>Subreddit: </span>r/{post.subreddit}</p>
</div>
<br></br>
<div className="title-name">
<p>{post.title}</p>
</div>
<br />
</section>
<article>
{post.media && post.media.reddit_video && (
<video width={post.media.reddit_video.width} height={post.media.reddit_video.height} controls>
<source src={post.media.reddit_video.fallback_url} type="video/mp4" />
Your browser does not support the video tag.
</video>
)}
<img className='post-image'
src={post.url} alt='content'
onError={(i) => i.target.style.display = 'none'} />
<br />
<div>
<p className="subreddit-author-p"><span className='subreddit-author'>Author: </span>r/{post.author}</p>
</div>
<br />
<aside className="scoreboard-container">
<div className="score-comment">
<button id="rate-button-up"
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 id="rate-button-down"
onClick={() => handleVote(post.id, -1)}
className={votedPosts[post.id] === -1 ? "vote-down disabled" : ''}
disabled={votedPosts[post.id] === -1}>
<BiDownvote />
</button>
</div>
<div className="num-comments">
{post.num_comments}
</div>
{/* Add your comments button here */}
<div className="comment-container">
<button className="comment-button"
onClick={()=> toggleComments(post.id)}>
<TfiCommentAlt />
{showComments[post.id] ? "" : ""}
</button>
</div>
</aside>
{/* Display comments if the showComments state is true */}
{showComments[post.id] && (
<div className="comments-container">
<Comments permalink={post.permalink} />
</div>
)}
</article>
</div>
))}
</div>
)
}
export default Posts;
searchbar.js
import React, { useState } from "react";
import './Searchbar.css';
import { BiSearchAlt } from 'react-icons/bi';
import { useDispatch } from "react-redux";
import { searchPosts } from "../../API/RedditSlice";
function SearchBar() {
const [searchResults, setSearchResults] = useState('');
const dispatch = useDispatch();
const handleSearch = (e) => {
e.preventDefault();
dispatch(searchPosts(searchResults));
}
const handleKeyPress = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
dispatch(searchPosts(searchResults));
}
}
return (
<div className="Search-Bar">
<form id='search-form'>
<input
type="text"
id='search-input'
placeholder="Search"
value={searchResults}
onChange={(e) => setSearchResults(e.target.value)}
onKeyPress={handleKeyPress}
/>
<button
type="submit"
className="Search-button"
onClick={handleSearch}
>
<BiSearchAlt className="Search-icon" />
</button>
</form>
</div>
)
}
export default SearchBar;
subreddit.js
import React, { useEffect, useState } from 'react';
import './Subreddit.css';
import { fetchSubredditData } from '../../API/SubredditSlice';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from '../../API/RedditSlice';
const Subreddit = () => {
// const posts = useSelector((state) => state.redditPosts.posts);
const subreddits = useSelector((state) => state.redditsSub.reddits);
const loading = useSelector((state) => state.redditsSub.loading);
const error = useSelector((state) => state.redditsSub.error);
const dispatch = useDispatch();
const [selectedSubreddit, setSelectedSubreddit] = useState('');
useEffect(() => {
dispatch(fetchSubredditData(selectedSubreddit));
}, [dispatch, selectedSubreddit]);
const handleSubredditSelect = (subreddit) => {
setSelectedSubreddit(subreddit);
dispatch(fetchPosts(subreddit)); // Fetch posts for the selected subreddit
};
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
// const filteredPosts = posts.filter((post) => post.subreddit === selectedSubreddit);
return (
<div className='subreddit-container'>
<div className='subreddit-list'>
<h1>Subreddits</h1>
<br></br>
<div className='subreddit-items'>
<ul>
{subreddits.map((subreddit) => (
<li key={subreddit.id} className='subreddit-li'>
<button className='subreddit-button' onClick={() => handleSubredditSelect(subreddit.display_name)}>
<img src={subreddit.icon_img} alt='' className='users-icon'/>
<p className='subreddit-title'>{subreddit.display_name}</p>
</button>
</li>
))}
</ul>
</div>
</div>
</div>
);
};
export default Subreddit;