I have been struggling with this problem for days and at this point I am frustrated. Nothing I have tried is working. I am trying to change the subreddit when you click on a subreddit.
full code : https://github.com/EmmaSecrest/redditApp
feed.js
import { useSelector , useDispatch} from "react-redux";
import { useEffect } from "react";
import { selectFeed } from "./feedSlice";
import { getPosts } from "./feedSlice";
// import {selectSubreddit, subredditsReducer} from '../subreddits/subredditSlice'
import "./feed.css"
import '../subreddits/Subreddit'
import { selectSelectedSubreddit } from "../subreddits/subredditSlice";
// import { isLoading } from "./feedSlice";
// import Subreddits from "../subreddits/Subreddit";
export default function Feed() {
// const subreddits = useSelector(selectSubreddit);
const feed = useSelector(selectFeed);
const dispatch = useDispatch()
useEffect(() => {
dispatch(getPosts(selectSelectedSubreddit))
},[dispatch])
// if(isLoading) return <div>Loading</div>
// if(!feed) return null;
function commentClick(){
//place a use effect here for comments
}
return (
<section>
<ul className = 'posts'>
{feed.map((post, index) => (
<li className = 'feed'key = {index} >
r/{post.subreddit}<br/>
<h2>{post.title}</h2>
{/*less of a space here */}
u/{post.author_fullname} <br />
{post.selftext? post.selftext: null} <br/>
{post.url? <a href = {post.url} className ='link'>Click me!</a>:null}
{ post.post_hint === 'image' &&
<img
alt = ''
src = {post.url}
className = 'image'
/>
}
{ post.post_hint === 'video' &&
<video
alt = ''
src = {post.videoUrl}
className = 'image'
controls
autoPlay
> video is not supported </video>
}
<div className = 'bottom-inline'>
Upvotes:{post.ups}
<button onClick ={commentClick}>Comments</button>
</div>
</li>
))}
</ul>
</section>
)
}
subredditSlice.js
import { createSlice } from "@reduxjs/toolkit";
const subredditSlice = createSlice({
name: 'subreddits',
initialState: { subreddits: [
{data: {id:1,name: "Home", search:'hot'}},
{data: {id:1,name: "Memes", search: 'memes'}},
{data:{id:3,name:"Ask Reddit",search: 'AskReddit'}},
{data:{id:4, name: 'Aww',search:'aww'}},
{data:{id:5, name:'Funny', search: 'funny'}},
{data:{id:6, name: 'SW Galaxy of Heroes',search:'SWGalaxyofHeroes'}},
{data:{id:7, name: 'Pics',search:'pics'}},
{data:{id:8, name: 'Music', search: 'music'}},
{data:{id:9, name: 'No stupid Question',search:'NostupidQuestion'}},
{data:{id:10, name: "Explain like I'm five", search:'ExplainlikeImfive'}},
{data:{id:11, name: 'Life Pro Tips',search:'LifeProTips'}},
{data:{id:12, name: 'Netflix', search:'netflix'}},
{data:{id:13, name: "Ask Science",search:'askScience'}},
{data:{id: 14, name: 'BTS',search: 'bangtan'}},
{data:{id:15, name: 'iPhone',search:'iphone'}},
{data:{id:16, name:'Android', search: 'android'}},
{data:{id:17, name: 'Starbucks', search:'starbucks'}},
{data:{id:18,name: 'Twitch',search:'twitch'}},
{data:{id:19, name: "Mildy Interesting", search:'MildyInteresting'}},
{data:{id:20, name: "gaming" , search: 'gaming'}}
],
error: false,
isLoading: false,
},
reducers:{
addSubreddit(state,action){
// may need to be adjusted
state.subreddits.push(action.payload)
},
selectSubredditUpdated(state,action){
state.selectedSubreddit = action.payload
}
},
})
export const {addSubreddit, selectSubredditUpdated } = subredditSlice.actions;
export const subredditsReducer = subredditSlice.reducer
export const selectSubreddit = state => state.subreddits.subreddits
export const selectSelectedSubreddit = state => state.subreddits.subreddits.selectSubreddit
feedSlice.js
import { createSlice , createAsyncThunk } from "@reduxjs/toolkit";
export const getPosts = createAsyncThunk('posts/getPosts',
async (argument) => {
let res
if (argument !== null){
res = await fetch(`https://www.reddit.com/r/${argument}.json`)
} else {
res = await fetch(`https://www.reddit.com/hot.json`)
}
const resJson = await res.json();
return resJson.data.children.map(post=> post.data);
}
)
export const getComments = createAsyncThunk('comments/getComments',
async () => {
//adjust this link
const res = await fetch(``)
const resJson = await res.json();
return resJson.data.children.map(post=> post.data);
}
)
const feedSlice = createSlice({
name: 'feed',
initialState: {
posts: [],
feed: [
// {data: {id:1 , subredditId:1,title: 'title 1' ,post: 'post 1'}},
// {data: {id:2, subredditId:1, title: "title 2" ,post: 'post 2'}},
// {data: {id:3, subredditId: 2,title: 'title 3' ,post: "post 3"}},
// {data: {id:4, subredditId:2,title: 'title 4' ,post:"post 4"}}
],
error: false,
isLoading: false,
},
extraReducers: {
[getPosts.pending] (state,action){
state.isLoading = true;
state.error = false;
},
[getPosts.rejected] (state,action){
state.isLoading = false;
state.error = true;
},
[getPosts.fulfilled](state,action){
state.isLoading = false;
state.error = false;
state.posts = action.payload;
},
//add an extra reducer for the comments
}
})
export const feedReducer = feedSlice.reducer
export const isLoading = (state) => state.feed.isLoading
export const feedError = (state) => state.feed.error
export const selectFeed = state => state.feed.posts;
feed.js
import { useSelector , useDispatch} from "react-redux";
import { useEffect } from "react";
import { selectFeed } from "./feedSlice";
import { getPosts } from "./feedSlice";
// import {selectSubreddit, subredditsReducer} from '../subreddits/subredditSlice'
import "./feed.css"
import '../subreddits/Subreddit'
import { selectSelectedSubreddit } from "../subreddits/subredditSlice";
// import { isLoading } from "./feedSlice";
// import Subreddits from "../subreddits/Subreddit";
export default function Feed() {
// const subreddits = useSelector(selectSubreddit);
const feed = useSelector(selectFeed);
const dispatch = useDispatch()
useEffect(() => {
dispatch(getPosts(selectSelectedSubreddit))
},[dispatch])
// if(isLoading) return <div>Loading</div>
// if(!feed) return null;
function commentClick(){
//place a use effect here for comments
}
return (
<section>
<ul className = 'posts'>
{feed.map((post, index) => (
<li className = 'feed'key = {index} >
r/{post.subreddit}<br/>
<h2>{post.title}</h2>
{/*less of a space here */}
u/{post.author_fullname} <br />
{post.selftext? post.selftext: null} <br/>
{post.url? <a href = {post.url} className ='link'>Click me!</a>:null}
{ post.post_hint === 'image' &&
<img
alt = ''
src = {post.url}
className = 'image'
/>
}
{ post.post_hint === 'video' &&
<video
alt = ''
src = {post.videoUrl}
className = 'image'
controls
autoPlay
> video is not supported </video>
}
<div className = 'bottom-inline'>
Upvotes:{post.ups}
<button onClick ={commentClick}>Comments</button>
</div>
</li>
))}
</ul>
</section>
)
}