JavaScript for WordPress Forums React Explained Refactoring stage issues

This topic contains 6 replies, has 2 voices, and was last updated by  GPorter43 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #107243

    GPorter43
    Participant

    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

    #107455

    Zac Gordon
    Keymaster

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

    #107515

    GPorter43
    Participant

    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.

    #107517

    Zac Gordon
    Keymaster

    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.

    #107527

    GPorter43
    Participant

    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));
      };
    #107528

    GPorter43
    Participant

    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

    #107598

    GPorter43
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.