Refactoring stage issues

[GPorter43]

I have followed your steps for refactoring but after the appService stage i get errors when i try logging in or creating new post

could you have a look at my project and let me know what i’ve done wrong i’m stumped

https://github.com/GPorter43/React-Explained-blog.git

[Zac Gordon]

Can you give me a bit more to go on here, like the specific errors you might be getting?

[GPorter43]

If i try to create a new post on save i get the error message

×
Error: Reference.push failed: first argument contains undefined in property ‘posts.slug’
▶ 6 stack frames were collapsed.
AppService.savePost
C:/Users/gport/Desktop/React-Practice/react-project/src/appService.js:41
38 | };
39 |
40 | savePost = post => {
> 41 | return firebase
| ^ 42 | .database()
43 | .ref(“posts”)
44 | .push({
View compiled
App._this.addNewPost
C:/Users/gport/Desktop/React-Practice/react-project/src/App.js:50
47 | .catch(error => console.error(error));
48 | };
49 | addNewPost = post => {
> 50 | this.props.appService.savePost(post);
| ^ 51 | this.displayMessage(“saved”);
52 | };
53 | updatePost = post => {
View compiled
PostForm._this.handleAddNewPost
C:/Users/gport/Desktop/React-Practice/react-project/src/components/PostForm.js:33
30 | if (this.props.updatePost) {
31 | this.props.updatePost(this.state.post);
32 | } else {
> 33 | this.props.addNewPost(this.state.post);
| ^ 34 | }
35 | this.setState({ saved: true });
36 | } else {
View compiled
▶ 20 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

[Zac Gordon]

Okay, great. Are you able to follow what this error is saying?

first argument contains undefined in property ‘posts.slug’

It means the post you are passing doesn’t have a slug. So you need to trace back to where that function is called and see why the post does not have a slug.

Let me know how that goes.

[GPorter43]

I found one thing on the app service which didn’t work but wasn’t that

in appService.js

you have

logout() {
    return firebase.auth.signOut();
  }

i got it working with

logout() {
    return firebase.auth().signOut();
  }

in App.js

you have

onLogout = () => {
this.props.appService
.signOut()
.then(() => {
this.setState({ isAuthenticated: false });
})
.catch(error => console.error(error));
};

i got it working with

onLogout = () => {
    this.props.appService
      .logout()
      .then(() => {
        this.setState({ isAuthenticated: false });
      })
      .catch(error => console.error(error));
  };

[GPorter43]

the getNewSlugFromTitle function/method does not appear to be passing the converted slug to the save.post function/method.

i changed the code in the book from

getNewSlugFromTitle = (title) => {
encodeURIComponent(
title
.toLowerCase()
.split(" ")
.join("-")
);
}

to

getNewSlugFromTitle = title => {
    return encodeURIComponent(
      title
        .toLowerCase()
        .split(" ")
        .join("-")
    );
  };

and it seems to have fixed it, yet it worked when it was in the App.js, is that beacuse one is a class and the other is pure js

[GPorter43]

The last thing that doesn’t seem to work in the refactoring section is when we put

<Route
exact
path="/login"
render={() =>
this.renderAuthRoute(Login, {
onLogin: this.onLogin
})
}
/>

I think this is beacuse renderAuthRoute is checking we are authenticated and if not sending us to ‘/’ obviously this will never work as you would need login to work when not authenticated.

am i missing something

[Author]

Posts