[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

[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]

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]

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.

[GPorter43]

Its better practice to use button, as there was a bug in firefox which prevented you setting line height for Input type button.

Plus <button> has a much wider range of rendering possibilities, for example Input type button can only have text where as button can have images,icons ,etc

[GPorter43]

I have tried similar with some php, in functions.php

add_action('wp_enqueue_scripts','Load_BlockTemplate');
function Load_BlockTemplate(){
    if ( is_page_template('custom-page.php') ) {
        wp_enqueue_script('BlockTemplate-script', 'path/to/script.js');
    } 
}

The problem i found was that when you create the new page its default until you publish and then when you edit the page all templates are present.
Would love to know how to do this in js so it is dynamic and more user friendly

[Author]

Posts