jeffmedd/jammming

jammming's Issues

Summary

Needs Improvement

You should re-do this with a less-trivial feature idea.

Is there anything in the Spotify API that might inspire you to make a more involved feature? Perhaps adding the ability to preview audio tracks?

Objective

To give users the ability to trigger a search on the Jammming app using an ‘enter’ key press as well as a click

This is not so much a React feature as much as it is... an HTML form feature. 😕

Still worth implementing, but the idea of a feature request is to propose a more-involved feature or application.

Indentations

For example

this.setState({playlistName:'New Playlist', playlistTracks:[]});

should be formatted like so

this.setState({
        playlistName: 'New Playlist',
        playlistTracks: []
});

It makes it easier to follow and trace

Thoughts

Another approach is to change the anchor tag to a button with a type "submit". This will give the button the default behavior of a form submit, which triggers on enter.

If you can solve a problem within the scope of HTML, it's probably better to do so that way than to involve any additional JavaScript.

If the desired feature can be implemented by basically changing a couple of elements in an HTML form, you probably don't need to write a feature request. In the workplace, this might be something that you add on the fly.

readme.md

Use the readme file to add name and description of project. You can leave instructions on how to run the app.

Caveats

Not Labelled
The user may be unaware of the option to press enter to submit a search. A label could be added to the right of the search box ‘press enter to search’ or within the Input Placeholder

Well, in that case they do still have the search button that they can click. This seems like a very minor caveat.

Background

The ability to use an enter key press interchangeably with clicking submit is a feature used widely across software and websites around the world. It has become second nature to a great number of web users who now would assume this functionality to be present.

Definitely a good reason to implement this feature.

Summary

The project ran successfully. The features work as intended. No major errors detected. Corrections were in regards to styling and best practices. Great job.

Technical design

Within the SearchBar.js component we will need to add an event handler method to handle when a key is pressed. Method should be called something easy to comprehend such as handleKeyPress().
Within this method we need to isolate the fact the enter / return key is being pressed and not any other key. By default the synthetic event onKeyPress within React is triggered when any key on the keyboard is pressed (bar some special keys eg. Shift, Control etc).
Within the handleKeyPress() function we should add an IF statement to ensure that the input is only submitted IF the key pressed is enter.
Therefore we should pass event in as an argument handleKeyPress(event) and use an if statement to only progress if the enter key is pressed. This can be done with an event.key expression. E.g. event.key == “Enter”. If this is found to be true it should then execute the search() method. E.g. if(event.key == "Enter") {this.search()};
We will need to bind the event handler to be able to use the “this.” functionality in the constructor. This can be done by adding a bind function for the method into the constructor part of the component as below:
this.handleKeyPress=this.handleKeyPress.bind(this);
The final method should look like below:
handleKeyPress(event){
if(event.key == "Enter") {this.search()}; }

Yep, this is definitely how you'd go about adding a second event handler to this component 👍