This isn't a bug with the course content, but more an issue with the project design. This link sums up the arguments pretty well.

I got this error here below after running npm run dev.

"Proxy error: Could not proxy request /api/users from localhost:3000 to http://localhost:5000/.
[1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED)"

Unable to resolve it.
Note: I made sure that the the client and server is set to 5000. Here below is a
copy of the client code.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-moment": "^0.9.2",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"uuid": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}

server side here below:

const express = require('express');
const connectDB = require('./config/db');
const path = require('path');

const app = express();

// Connect Database
connectDB();

// Init Middleware
app.use(express.json({ extended: false }));

// Define Routes
app.use('/api/users', require('./routes/api/users'));
app.use('/api/auth', require('./routes/api/auth'));
app.use('/api/profile', require('./routes/api/profile'));
app.use('/api/posts', require('./routes/api/posts'));

// Serve static assets in production
if (process.env.NODE_ENV === 'production') {
// Set static folder
app.use(express.static('client/build'));

app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(Server started on port ${PORT}));

For some odd reason on the back-end I cannot log in, registration is fine. Ive changed the value of the x-auth-token as well. It user registered is stores upon MongoDB atlas. Ive checked the package.json to see if Bcrypt it working as well.
Below are screenshots of the errors I'm receiving as well as my code, seeking assistance to get this web application fully functioning. Please and thank you.

this is my alert/actions file

import { v4 as uuidv4 } from 'uuid';
import { SET_ALERT, REMOVE_ALERT } from './types';

export const setAlert = (msg, alertType, timeout = 5000) => dispatch => {
const id = uuidv4();
dispatch({
type: SET_ALERT,
paylaod: { msg, alertType, id },
});
setTimeout(() => dispatch({ type: REMOVE_ALERT, paylaod: id }), timeout);
};

this is my Ragister File

`import React, { Fragment, useState } from 'react';
//import axios from 'axios';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { setAlert } from '../../actions/alert';
import PropTypes from 'prop-types';

export const Register = ({ setAlert }) => {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
password2: '',
});
const { name, email, password, password2 } = formData;
const onChange = e =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = async e => {
e.preventDefault();
if (password !== password2) {
setAlert('passowrds do not match', 'danger');
} else {
console.log('SUCCESS');
}
};
return (

Sign Up

Create Your Account

Brad,

I've ran the install on demo and hooked it up to a fresh db. so everything is clean and i get these warnings in the terminal.

Compiled with warnings.

./src/components/profile/ProfileGithub.js
Line 10: React Hook useEffect has a missing dependency: 'username'. Either include it or remove the dependency array react-hooks/exhaustive-deps

./src/components/post/Post.js
Line 14: React Hook useEffect has a missing dependency: 'match.params.id'. Either include it or remove the dependency array react-hooks/exhaustive-deps

./src/actions/post.js
Line 158: 'res' is assigned a value but never used no-unused-vars

./src/components/post/CommentItem.js
Line 1: 'Fragment' is defined but never used no-unused-vars

./src/components/profile-forms/EditProfile.js
Line 48: React Hook useEffect has missing dependencies: 'profile.bio', 'profile.company', 'profile.githubusername', 'profile.location', 'profile.skills', 'profile.social', 'profile.status', and 'profile.website'. Either include them or remove the dependency array. If 'setFormData' needs the current value of 'profile.company', you can also switch to useReducer instead of useState and read 'profile.company' in the reducer react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

client/src/actions/profile.js:236

pemanantly should be spelled permanently.

Thanks for your great course.

What does the option 'extended' do?

Can't find it in the API Reference
https://expressjs.com/de/api.html#express.json

In ProfileForm.js (currently line 68) the createProfile call takes a boolean parameter "edit" to determine if this was a profile update (false means it is a newly created profile). In the current HEAD, this is always 'true' even for the creation flow.

createProfile(formData, history, true);

This affects the alert, where the "Profile updated" message is shown even for a newly created profile.
This also affects the redirect experience. As per the course, it was intended that the flow for a profile update will stay on the profile form component after the update in case the user wants/needs to make additional changes; where as a user creating a profile for the first time will be redirected to the dashboard after submission. Currently, if the user is creating there initial profile, they will remain in the ProfileForm component after submitting the form.

I am already working on a one line patch to resolve this issue.

Hi Brad,
I am trying to delete the post by id but on the postman I am getting server error. In the console terminal, it says cannot read property toString of undefined

There's a bug I've found on user authentication. So, when you're registering or logging in you'll be redirected to the login page, not the dashboard page and returns 401 (Authorization denied). It means that the headers aren't received a token nor the token is null. Any idea?

Hi my useEffect is not working when the loading flag is changing. I got this error

TypeError: Cannot read property 'company' of null

When component mounted value of profile was null. then useEffect ran stil state is not affected and setFormData gives the above error.

Brad,

In EditProfile I have changed line 48 to "}, [loading, getCurrentProfile]);"

Still I get a console warning:
./src/components/profile-forms/EditProfile.js
[1] Line 48: React Hook useEffect has missing dependencies: 'profile.bio', 'profile.company', 'profile.githubusername', 'profile.location', 'profile.skills', 'profile.social', 'profile.status', and 'profile.website'. Either include them or remove the dependency array. If 'setFormData' needs the current value of 'profile.company', you can also switch to useReducer instead of useState and read 'profile.company' in the reducer react-hooks/exhaustive-deps

What is the solution?

In Add Experience/Education, if "To" field is filled, i.e. the user has already selected "to" date, toggling "Current" only disables the "To" field on the surface, while its value has already been recorded and to be sent to the server. As a result, when the user adds this experience, it is shown with a clear end date, e.g. "20/11/2019 - 25/11/2019" instead of "20/11/2019 - Now".

I've just cloned repo, set mongodb uri, run both npm i and wanted to test your app. I registered without problems and got redirected to Dashboard with 'Create Profile' button. When I click it I get 400 from /api/profile/me with a response {"msg":"There is no profile for this user"}.

Hey guys,

Actually I am taking the course, and I'm on lecture 52

The problem is... when I click the button to delete experience or education, web page shows

Well, there're three problems, but I'm sure they are related. There're some problems other students asked on the course page, but there's no solution yet. I think it is the problem of map(), not the profile.js problem, but I don't know how to correct it.

Thanks a lot if your guys can help me! I have stuck at this for hours now.

Client side routing worked well on localhost, but does not work after deployed to heroku

It only shows a Not Found message

For rest end point "/user/:user_id"
e.g. http://localhost:3000/profile/5e691f0d416b0622f8148487
If user wish to logout from here, spinner occurs for infinite time and logout does not happen.

in dashboardActions it has several class rather than className

From the Udemy Video - Section 8, #42 and #43. After a successful login I am not being redirected to the '/dashboard' route. Video and repo need to be updated to fix this issue.

const app = express();
[0] ^
[0]
[0] TypeError: express is not a function
at Module._compile (internal/modules/cjs/loader.js:955:30)
[0] at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
[0] at Function.Module._load (internal/modules/cjs/loader.js:723:14)
[0] at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
[0] at internal/main/run_main_module.js:17:11
[0] [nodemon] app crashed - waiting for file changes before starting...

Hi everyone, I have this issue when going to 'Develo

pers' tab, do you have any solution for this?

  42 |   } catch (err) {
  43 |     dispatch({
  44 |       type: PROFILE_ERROR,
> 45 |       payload: { msg: err.response.statusText, status: err.response.status }
  46 |     });
  47 |   }
  48 | };

also, I have an issue with posts

Posts
src/components/posts/Posts.js:9
   6 | import PostForm from './PostForm';
   7 | import { getPosts } from '../../actions/post';
   8 | 
>  9 | const Posts = ({ getPosts, post: { posts, loading } }) => {
  10 |   useEffect(() => {
  11 |     getPosts();
  12 |   }, [getPosts]);

hey guys, I am getting this "server error" I try everything I made sure the code exactly same (Server runing on port 5000
MongoDB Connected...
Illegal arguments: number, string)

So I'm trying to create an Update by Id component using hooks. So far, I have created this route:
<PrivateRoute exact path="/admin/pages/update/:id" component={PageUpdate} />

Now in order to make it work and show the corresponding ID data. I have to use the match prop and then pass the match.params.id as a parameter into the function of getPost.

So far this is my code and it works when I preview the data corresponding to X Id using the Redux DevTools; in other hand, when I try to preview said data in the component, I can not see it.

This is my code:

import React, { useState, useEffect } from 'react';
import { Link, withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../../layout/Spinner';
import { getPost, updatePage } from '../../../actions/admin/page';

const Update = ({ getPost, updatePage, pages: { page, loading }, match, history }) => {

  const [formData, setFormData] = useState({
    text: '',
  });

  useEffect(() => {
    getPost(match.params.id);
    setFormData({
      text: !page ? '' : page.text,
    });

  }, [
      loading,
      // page,
      getPost,
      match.params.id
    ]);

  const {
    text,
  } = formData;

  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();
    updatePage(formData, history, true);
  };

  console.log(text);

  return loading || page === null ? (
    <Spinner />
  ) : (
      <section className="mb-3">
        <div className="container-fluid">
          <h1 className="border-bottom-dark pb-3 mb-3">Update Your Page</h1>
          <small>* = required field</small>
          <form className="form" onSubmit={e => onSubmit(e)}>
            <div className="form-group">
              <textarea
                placeholder="Write here"
                name="text"
                autoComplete="text"
                className="form-control"
                value={text}
                onChange={e => onChange(e)}
              />
              <small className="form-text">So what are you up to?</small>
            </div>
            <div className="btn-group">
              <input type="submit" className="btn btn-primary my-1" />
              <Link className="btn btn-dark my-1" to="/admin/pages">Go Back</Link>
            </div>
          </form>
        </div>
      </section>
    );
};

Update.propTypes = {
  updatePage: PropTypes.func.isRequired,
  getPost: PropTypes.func.isRequired,
  pages: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
  pages: state.page
});

export default connect(
  mapStateToProps,
  { getPost, updatePage }
)(withRouter(Update));

NOTE: I have a console.log(text); and it does not shows anything, so I'm assuming the problem resides in the useEffect:

[
      loading,
      // page,
      getPost,
      match.params.id
    ]

As you can see I have the 'page' commented, if I uncommented, it makes the state run forever and displays the data that I want but it does not let me change it(probably because the 'page' keeps running forever).

Can somebody tell me where is my error? Thanks in advance.

UPDATE

I had to modify my first useEffect and had to create a second one in order to be able to retrieve and edit the displayed data in the component. Here it is the code:

// useEffect to call the specific _id
  useEffect(() => {
    getPost(match.params.id);
  }, [getPost, match.params.id]);

  // useEffect to display data corresponding to said _id
  useEffect(() => {
    const _page = page || {}
    setFormData((value) => ({ ...value, ..._page }))
  }, [page]);

Token and User data is still present on logout .Steps to re-produce
Login with registered email id and password and click on logout .Now go to add-on redux tools if you check state two action were called clear_profile and logout .If you check state user data and token are still present now If you try to login with another user for some milliseconds it will show create profile button and after that it will show experience and another details.

TypeError: Cannot read property 'map' of undefined
Comments.render
src/components/scream/Comments.js:27
24 | render() {
25 | const { comments, classes } = this.props;
26 | return (

27 |
| ^ 28 | {comments.map((comment, index) => {
29 | const { body, createdAt, userImage, userHandle } = comment;
30 | return (

// @route DELETE api/profile
// @desc Delete api/profile, user & posts
// @access Private
router.delete('/', async (req, res) => {
try {
// @todo - remove users posts

//@Remove profile

await Profile.findOneAndRemove({ user: req.user.id });

//@Remove user
await User.findOneAndRemove({ _id: req.user.id });

res.json({ msg: 'User deleted' });

} catch (err) {
console.error(err.message);
res.status(500).send('Server Error');
}
});
module.exports = router;

Good afternoon, I was watching your tutorial in which I am currently at creating alerts in React with redux, but I have one issue:

Failed to compile.
[1]
[1] ./src/action/alert.js
[1] Attempted import error: 'uuid' does not contain a default export (imported as 'uuid').

Do you have any idea what is fix for this error?

Best regards,
Ivan Rener.

I have been stuck for a week trying to post to /api/users/register. I have followed the same steps as shown in the tutorials. The register api works fine when I register using postman.
My client package.json is the same as the one in the repository.
I have this on my onSubmit of Register form

axios
      .post('/api/users/register', newUser)
      .then(res => console.log(res.data))
      .catch(err => console.log(err))

newUser has all the form data i.e name email password and password2.
But I still get all four validation error from the server.
Help much needed please.

Hello, I would like to ask you something, yesterday I posted here an issue regarding uuid imports, well after my genius fix everything went down, I meant ID thing, so I restore main version of code from your github page, but error is showing once again, do you have any idea how should it be fixed?

Error:

./src/action/alert.js
Attempted import error: 'uuid' does not contain a default export (imported as 'uuid').

Best regards,
Sanady

hi Brad, im getting the following error when trying to connect to my mongodb. do you have any idea why?

server running

MongoTimeoutError: Server selection timed out after 30000 ms at Timeout._onTimeout (/Users/ishakertem/Desktop/test/node_modules/mongodb/lib/core/sdam/server_selection.js:308:9) at listOnTimeout (internal/timers.js:536:17) at processTimers (internal/timers.js:480:7) { name: 'MongoTimeoutError', }

A continuation of issue #85, after i reverted the changes made to routing in #75, pull request #83 breaks the refreshing on the /posts page as now I receive a error 401 with invalid authentication status

reference to the user in Post Schema is 'users' but it needs to be 'user' in likes, comments, and post as well

First, I'm absolutely loving this tutorial! However, I'm running into an issue.

In order to get my app to compile, I have to add "export" to the function definition at the beginning of each of the different "sub-components." This includes, DashboardActions, Experience, and Education. I.E.
export const Education = ({ education, deleteEducation }) => {
Is there a reason it isn't recognizing the "default" as a valid export?

In doing this, everything seemed to be functioning as expected, until I got to adding the functionality to the delete buttons on the dashboard for the Experience/education tables. I end up with the error:

Warning: Failed prop type: The prop deleteExperience is marked as required in Experience, but its value is undefined.

In order to get it to compile, I did this to my Dashboard.js component:
import { getCurrentProfile, deleteEducation, deleteExperience } from '../../actions/profile';

...and further down...

<Fragment> <DashboardActions /> <Experience experience={profile.experience} deleteExperience={deleteExperience()} /> <Education education={profile.education} deleteEducation={deleteEducation()} /> </Fragment>

But the--somewhat expected--result of this is that when I click the delete button, it simply fires deleteEducation on the first available Education element in the array, and throws an error:

Unhandled Rejection (TypeError): Cannot read property 'statusText' of undefined
(anonymous function)
C:/Users/Name/DevConnector/client/src/actions/profile.js:157
154 | } catch (err) {
155 | dispatch({
156 | type: PROFILE_ERROR,
-> 157 | payload: { msg: err.response.statusText, status: err.response.status }
158 | });
159 | }
160 | };

I don't think its a coincidence, I'm noticing this behavior seems to be specific to the components I'm attempting to deploy WITHIN a component. I simply don't know enough about the workings of react to figure this thing out!

I am not able to register.

Refreshing on /posts page brings user back to /dashboard

I think this might be related to the pull request #75 as there is no longer a check for loading, so the user is redirected to /login and since he is now authenticated, the user is redirected again to /dashboard

I got an error as the following:

[1] ./src/components/profile-forms/CreateProfile.js
[1] Line 228: 'CreateProfile' is not defined no-undef
[1] Line 239: 'CreateProfile' is not defined no-undef
[1]
[1] Search for the keywords to learn more about each error.
[0] Server started on port 5000
[0] Invalid connection string
[0] [nodemon] app crashed - waiting for file changes before starting...

but I found it in "../../actions/profile".

Steps to re-produce go to the following path "routes\api\auth.js" and in jwt.sign object change the value of expiresin to something very close ie 20seconds now after signing in after 20 seonds the page is not getting expired after refresh only it will redirect user to login page

Cannot set headers after they are sent to the client
[0] (node:13549) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
[0] at ServerResponse.setHeader (_http_outgoing.js:470:11)
[0] at ServerResponse.header (/opt/lampp/htdocs/practice-stuff/DevConnector/node_modules/express/lib/response.js:771:10)
[0] at ServerResponse.send (/opt/lampp/htdocs/practice-stuff/DevConnector/node_modules/express/lib/response.js:170:12)
[0] at router.get (/opt/lampp/htdocs/practice-stuff/DevConnector/routes/api/profile.js:26:19)
[0] at process._tickCallback (internal/process/next_tick.js:68:7)

I'm having the issue and I have it as exports, still not seeing connectDB as a function

my GitHub repo: https://github.com/aribambang/medusa

TypeError: connectDB is not a function
at Object. (/Users/aribambang/development/node/medusa/server.js:6:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
at internal/main/run_main_module.js:17:11

Hello! In the old code of this repository you can see how you set the token in the state once you receive it from the request. I don't see it being done anywhere now.. Is it just me that doesn't see it? Thank you very much for this magnificent example! (I am a paying student)

I completed the course up until the deployment, and stopped to clean up various console warnings in dev tools. I was able to take care of all of them except for the following two. Does anyone know what dependency might be causing these (if one of them is the cause) or what can be done about it?

Warning: componentWillMount has been renamed, and is not recommended for use.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

Hello Brad Traversy,
I took your udemy course of devconnector 2 using MERN
and I did exactly as you did but sending request using axios while login or registration, in console it shows that it is sending request to port 3000
like: http://localhost:3000/api/auth
Please help me with this..I spent 1 whole day to solve but no benifit.
Thank you..

After deployed to Heroku successfully, my website says "Invalid Host header", can anyone help? Thank you

When clicking Developers from inside the Dashboard, CLEAR_PROFILE is ran and returns that a logged in user no longer has a profile setup.

path == src/actions/profile.js

// Get all profiles
export const getProfiles = () => async dispatch => {
// dispatch({ type: CLEAR_PROFILE })

tanks for this Tutorial
why after user delete account(profile & user info) The token will not expire? if user use tokens his access route
Can it cause trouble?

Has anyone tried to make a mobile Devconnector?
I mean create a mobile app, and connect it to the devconnector's api and database. React Native or Flutter would be awesome!

I currently have this in my reducer as initial state:

const initialState = {
  posts: [],
  post: null,
  loading: true,
  error: {}
};

and then I have this method:

case DELETE_POST:
      return {
        ...state,
        posts: state.posts.filter(post => post._id !== payload),
        loading: false
      };

Every time I delete an entry from my database, an error is displayed stating that 'state.pages.filter is not a function'. I've been struggling with this quite some time already. Any help will be really appreciated!.

Hey Brad first off a big shout out to you to provide us with such amazing courses so easy to understand and learn.I would like to propose a small enhancement to the API handling functions.
I'd rather run a for in loop than destructuring.Anyways you know whats best and do let me know if you would like to me submit a pr on that I'll get working on it.