Check out your issue PART 1 ~ PART 5 here.

[mauvpark]

Hello, guys. Appreciate this great videos to Js Mastery. I made my cloned project following his videos. And modified some issues. If you got stuck some error, check out my project and read file. This project is till part 2 yet, so be careful who wants to find debug solution over part 2.

https://github.com/Mauv-hub/JsMastery-MERN-project

[mauvpark]

part 3,4,5 updated.

[fkhan698]

@Mauv-hub I'm having issues with my posts showing up. In my Posts.js page. I am able to console.log the data put nothing is showing up on my screen. I have the following code

import { useState, useEffect } from "react";
import { fetchPosts } from "../../api/posts";
import { Grid } from "@material-ui/core";
import { useSelector } from "react-redux";
import Post from "./Post/post.js";
import { useStyles } from "./Post/styles";
import styles from "../Posts/Posts.module.css";

export default function Posts() {
  const [postsData, setPostsData] = useState([]);
  const posts = useSelector(state => state.posts);
  const classes = useStyles();

  useEffect(() => {
    const getData = async () => {
      const response = await fetchPosts();
      const data = response.data;
      console.log(data);
      setPostsData(data);
    };
    getData();
  }, []);
  return (
    <div className={styles.grid}>
      {posts.map(post => (
        <div>
          <Post key={post._id} post={post} />
        </div>
      ))}
    </div>
  );
}

[mauvpark]

@fkhan698 Hello, getting posts from api has following work flow.

client

1. Call getPosts(actions/posts) and dispatch it to redux using redux-thunk in Home.js
2. getPosts(actions/posts) calls api request
3. fetchPosts(api/index.js but you are api/posts check out your module path) calls server "Get posts from server."

   server

4. router(server/routes/posts.js) calls getPosts from controllers.
5. getPosts(server/controllers/posts.js) calls posts from mongo DB, then return response. (Success: posts, Fail: error)

   back to client

6. asynchronous getPosts(actions/posts.js) gets response from server(what you are looking for "data") and send it to redux storage.
7. redux updates posts, send updated posts to Posts component(components/Posts/Posts.js).
8. Posts Component updates posts and show those.

You should check where is wrong if you don't get any response error( you should return something in server side using res.status ... something) it would probably occur in API side or would be your reference error. I suggest to use eslint for checking it.

Good luck!

[mozyao]

I am using port 8080 of my server due to the error: the 5000 is already in use, I tried many ways, but I failed.

All stuff work for me except the warning: src/reducers/posts.js Line 3:1: Assign arrow function to a variable before exporting as module default

Until I stuck at the last section of Video 1: create a post. I keep getting the error: POST http://localhost:8080/posts 404 (Not Found)

I am a newbie not familiar with the full stack. Thanks in advance if anyone one can help:)

[mauvpark]

@mozyao Hello, you can kill port npx kill-port 5000. Could you show me your code where exactly problem happens? If you got 404 error, you should check out your data flow. I suggest to use console.log for debugging for that. For example, you could check your req.body before create post to the mongo DB. If req.body has right value, then check your newPostMessage comes from PostMessage. You will find some error during giving arguments.

[rua02me]

@mauvpark YOU ARE A HERO!!!!!!!!

[bangkitdc]

@mozyao can you elaborate? I still got 404 error :((