Clicking Submit Post without uploading an image throws 404 Bad request from cloudinary.

This can be handled by checking if the user has uploaded any image and then sending the fetch request to cloudinary.

The following error message occurs.

Hello Sir,
Please I need help in home.js

My Code
import React, { useState, useEffect, useContext } from "react";
import { UserContext } from "../../App";
import {Link} from 'react-router-dom'

const Home = () => {
const [data, setData] = useState([]);
const { state, dispatch } = useContext(UserContext);
useEffect(() => {
fetch("/allpost", {
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => res.json())
.then((result) => {
console.log(result);
setData(result.posts);
});
}, []);

const likePost = (id) => {
fetch("/like", {
method: "put",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
body: JSON.stringify({
postId: id,
}),
})
.then((res) => res.json())
.then((result) => {
//console.log(result);
const newData = data.map((item) => {
if (item._id == result._id) {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};

const unlikePost = (id) => {
fetch("/unlike", {
method: "put",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
body: JSON.stringify({
postId: id,
}),
})
.then((res) => res.json())
.then((result) => {
//console.log(result);
const newData = data.map((item) => {
if (item._id == result._id) {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};

const makeComment = (text, postId) => {
fetch("/comment", {
method: "put",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
body: JSON.stringify({
postId,
text,
}),
})
.then((res) => res.json())
.then((result) => {
console.log(result);
const newData = data.map((item) => {
if (item._id == result._id) {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};

const deletePost = (postid) => {
fetch(/deletepost/${postid}, {
method: "delete",
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then(res=>res.json())
.then(result=> {
console.log(result)
const newData = data.filter(item=>{
return item._id !==result._id
})
setData(newData)
});
};

return (

{data.map((item) => {
return (

<Link to={item.postedBy._id !== state._id ? "/profile/"+item.postedBy._id :"/profile" }>{item.postedBy.name} {item.postedBy._id == state._id
&& <i className="material-icons" style={{ float: "right" }}
onClick={()=>deletePost(item._id)}>delete

}

<i className="material-icons" style={{ color: "red" }}>
favorite

{item.likes.includes(state._id) ? (
<i
className="material-icons"
onClick={() => {
unlikePost(item._id);
}}
>
thumb_down

) : (
<i
className="material-icons"
onClick={() => {
likePost(item._id);
}}
>
thumb_up

)}

          <h6>{item.likes.length} likes</h6>
          <h6>{item.title}</h6>
          <p>{item.body}</p>
          {item.comments.map((record) => {
            return (
              <h6 key={record._id}>
                <span style={{ fontWeight: "500" }}>
                  {record.postedBy.name}
                </span>{" "}
                {record.text}
              </h6>
            );
          })}
          <form
            onSubmit={(e) => {
              e.preventDefault();
              makeComment(e.target[0].value, item._id);
            }}
          >
            <input type="text" placeholder="Please Add a Comment" />
          </form>
        </div>
      </div>
    );
  })}
</div>

);
};

export default Home;

Proxy error: Could not proxy request /signup from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
--please advise on this

firstly id like to say that this tutorial is so in depth and very helpful. Thank you so much for the course.
I had a problem..even after logging in im not able to create a post, it says you need to be logged in

this is the console error it shows
it also logs in successfully

I've getting this error since i made the lession 40. Please, fix it!

follow all of your code and still same problem. why its happening?

Hello, I have taken your course from udemy and stuck at a place so can you please help me out regarding this project please ?

Check this issue.
The comment line must be empty after commenting.

hey,
Thanks for the tutorial on YT.
I'm facing an error called
"Failed to compile
./src/components/screens/signup.js
Line 35:11: Unexpected use of 'history' no-restricted-globals

Search for the keywords to learn more about each error."
can you help?

The implementation doesn't work that you developed earlier for UserProfile. When you follow someone on the main page and look at then look at your profile it will show the count but if you go back one page you can again follow him!

I think the logic for follow and unfollow is incomplete as when we follow a user and then we refresh , we can follow that user again .

ACCORIDING TO ME WE CAN USE THIS LOGIC TO AVOID FOLLOWING THE SAME PERSON AGAIN AND AGAIN

useEffect(() => {
    user &&
      mainUser &&
      (user.user.followers.includes(mainUser._id)
        ? setShowFollow(false)
        : setShowFollow(true));
  }, [user]);

I was trying to create logic to delete the comments... the logic however working but there are some issues

node route to delete comment ==>
router.delete("/deletecomment/:id/:comment_id", requireLogin,(req,res)=>{ const comment ={_id:req.params.comment_id}; Post.findByIdAndUpdate( req.params.id,{ $pull:{comments:comment}, }, { new:true, } ) .populate("comments.postedBy","_id name") .populate("postedBy","_id name") .exec((err, postComment)=>{ if(err || !postComment){ return res.status(422).json({error:err}); } else{ const result=postComment; res.json(result) } }); })

**front end code **
const deleteComment =(postid,commentid)=>{ fetch(/deletecomment/${postid}/${commentid}`,{
method:"delete",
headers:{
"Authorization":"Bearer "+localStorage.getItem("jwt")
},
}).then((res)=>{res.json()})
.then((result)=>{
const newData = data.map((item)=>{
if(item._id ==result._id){
return result
}
else{
return item
}
});
window.location.reload()
setData(newData);
window.location.reload()
})
}

// calling delete comment (Using material UI)

<span style={{fontWeight:"500"}}>{record.postedBy.name} {record.text}
{(item.postedBy._id || record.postedBy._id)== state._id &&
( <HighlightOffIcon onClick={()=>deleteComment(item._id,record._id)} style={{float:"right"}} /> )}

`
This works but requires refresh if I did not referesh it complains ......
Unhandled Rejection (TypeError): Cannot read property '_id' of undefined after refreshing page the comment gets deleted anyone knows better approach or solution to make this fixed

Hi,
I am facing a little issue and don't know how to solve it. I want to display the user profile picture in the post right beside the user name.
I write the state.pic in the src image but it displays the profile picture of the current login user all over the posts.
Don't know how to solve it.help

my code

<div className='card-header'>
              <div className='user-picandname'>
                {}
                <img className='user-profilepic' src={state ? state.pic : ""} />

                <h5 className='user-title'>
                  <Link
                    to={
                      item.postedBy._id !== state._id
                        ? "/profile/" + item.postedBy._id
                        : "/profile"
                    }
                  >
                    {item.postedBy.name}{" "}
                  </Link>
                </h5>
              </div>
              {item.postedBy._id === state._id && (
                <i
                  className='material-icons delete-icon'
                  onClick={() => {
                    deletepost(item._id);
                  }}
                >
                  delete
                </i>
              )}
            </div>

Cannot find module ./dev