Reddit Minimal

Hi guys

I have just started the reddit client project today, and I have ran into a bit of an issue.
I am wanting so that when i click on the comments button the comments drop down, I have tried various different methods but cant get anything working and dont really know what to type into google, I will link my git repo and if anyone is able to take the time to help I will greatly appreciate it. Thanks.

Cool app idea! I’m just diving into the world of React as well so I don’t have a solution necessarily, but I think I’ve spotted your problem.

In your App.js file, you’re rendering the Post components with map method on the posts array. With each rendering, you’re giving the Post a prop called comments and assigning it to the post's data.num_comments. For your app, it looks like a good idea to be handing the Post components the num_comments, but if you inspect the JSON that you’re fetching from, you can see that num_comments is assigned to a integer and nothing else.

From inspecting the JSON, I can’t see find any key/value pairs that could render the comments section. However, it does have one key called permalink that links directly to that post on reddit. Upon pressing the comments button in your app, you could possibly fetch another JSON file from that permalink that does contain a key assigned to the comments.

2 Likes

Hey

Post some sample code in a branch so we can see what you are doing. My initial guess is you want to have a new component called comments which has the css style feature display:none; Then when you click on a button it sets the display to visible. That way you can make the comments appear on a click.

I wouldn’t make it any more complicated than that until you have it working. Then you can start thinking about dynamically loading the comments from Reddit or adding animations to make it appear maybe?

Let me know if this helps.

1 Like

hey, man thanks for the reply finally got it working with lots of sweat and tears, i have it in a second branch called master

Thanks for the reply, finally got it working :slight_smile:

I am still trying to get my head around something. I noticed you passed in some code between curlbraces in your code.
I don’t understand how does the code know where to find those props?

 import React from 'react';
 


const UserReplies = ({coms, userName}) => {
    return( 
        <div className='getReplies'>
           <h3 className='userName'>{userName}</h3>
           <h6>{coms}</h6>
        </div>
     );
}
 
 export default UserReplies;

The following two commands are the same:

const coms = props.coms;

and

const { coms } = props;

So instead of assigning afterwards you can do so in the arguments for the function which is what has been done in the code you’ve quoted.

Let me know if that doesn’t make sense

Ok so they are just two different ways of writing it

1 Like

Hey, so a good way to a very simple explanation is from dec Ed’s recipe app tutorial, you can pass props outside of app.js but can’t pass them in from components? I could be wrong with that statement but that’s my understanding :slight_smile:

Hi Alex
I am still trying to get my head around exactly how the project gets the subreddits and number of subreddits from reddit.
Could you share a link to the webpage so I can review the code in chrome dev tools.
If you could explain what files are needed to get the content from the reddit api that would help alot.
It helps to learn when I can see some working examples and then reverse engineer the code to understand how things are done.
regards,

Patrick.

Hi patrick i have the app running on netlify, be aware images are super low res, which is something im going to go back and change but didnt want to get too hung up on this project, i think you might be able to use the dev tools to get a rough understanding, here is the link. https://redditminimalfirst.netlify.app/

thanks Alex

Hi
Has anyone implemented this requirement:
Users are shown a detail view (modal or new page/route) when they select an item

i cant find any example doing it .
can anybody send me a api url in json atleast

I have implemented this project, i just need to incorporate jest testing into it.

i used the following extra packages
1.react-bootstrap
2.react-icons
3.react-animated list

    extraReducers: {
      [fetchPosts.pending]: (state) => ({
        state.status = 'Loading...',
      }),

The error says Unexpected token, expected “,” and it is saying the ‘.’ between state and status is underlined.

I could be wrong but I think the “,” after “loading…” could be causing your error?

Thank you, but I tried replacing it with nothing and with a semi colon but the error with the ‘.’ persists.

Thanks for trying I appreciate the feedback.

1 Like

extraReducers: {
[fetchPosts.pending]: (state, action) => {
state.status = ‘loading’
},

Found that on the redux documentation hope it helps, I’m a bit useless with react, sorry man😂

No problem, Thanks for trying my friend
:sunglasses:

Hi All,

I hope you are well!

I am working on this project and cannot get through the first initial API call request to Reddit.com.

Please see below code which i tried to fetch the API data.

const loadAll = async () => {

const response = await fetch(`https://www.reddit.com/r/.json`);

const data = await response.json();

alert(data);

};

It keeps coming with below error messages on my Chrome console:

"Access to fetch at ‘https://www.reddit.com/r/.json’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled."

"GET https://www.reddit.com/r/.json net::ERR_FAILED"

I have no idea how to fix this as cannot get any data back from API.

Any suggestions on how this get works would be much appreciated?

Please let me know of your comments.

Thanks in advance for looking into this. :slight_smile:

Naiya

Maybe https://www.reddit.com/r/memes.json might work?
I think it is maybe because you used /.json