stylejy / jamming-feature-request Goto Github PK

Overall met expectations.

This is a great feature request.

A couple things I would suggest from this point on.

Work on autocomplete search since this is a common feature in a lot of web apps.

See what you can do to refine your code and make it more efficient. In the end this makes a better presentation for future employers.

Take a look at a React style guide, I prefer Airbnb but there are others. Your components should be dropped down to multiple lines. Below is my reformatting for your render section of your app.js as an example. Good luck.

render() {
    return (
      <div>
        <h1>
          Ja<span className="highlight">mmm</span>ing
        </h1>
        <div className="App">
          <h2 className="user" id="user">
            Hi! {this.getUserName()}
          </h2>
          <SearchBar
            loginStatus={this.loginStatus}
            searchSpotify={this.searchSpotify}
            login={this.login}
          />
          <div className="App-playlist">
            <SearchResults add={this.addToList} songs={this.state.songs} />
            <Playlist
              loginStatus={this.loginStatus}
              addedSongs={this.state.addedSongs}
              remove={this.removeFromAddedSongs}
              createPlaylist={this.createPlaylist}
            />
          </div>
        </div>
      </div>
    );
  }
}

The issue here is I never set a display name in Spotify, but I do have a user name so you may have to grab it off this endpoint https://api.spotify.com/v1/me.

In react it is consider a better practice to use componentDidMount to trigger this function

https://reactjs.org/docs/react-component.html#componentdidmount

If you look at the constructor information about this section you can see your this.init can lead to side effects. For myself I can see this causing additional renders.

I would also think it might be cleaner to the init code to the Spotify.js file and then just call Spotify.init()