Jamming

Hello!

In my jamming project, I will be able to pull up the jamming page but when i search for an artist it will have me log into my spotify account. Once I log into my account I will get the error, Illegal redirect_uri. I figured out that the majority of the problem is in my spotify.JS file, but the warnings I get are not making since since I DO think I have formatted the page properly.

Errors on command Line:
src\Components\SearchBar\SearchBar.js
Line 25:5: Duplicate name ‘handleTermChange’ no-dupe-class-members

src\util\Spotify.js
Line 1:7: ‘clientId’ is assigned a value but never used no-unused-vars
Line 2:7: ‘redirectUri’ is assigned a value but never used no-unused-vars
Line 25:31: Unexpected template string expression no-template-curly-in-string
Line 31:15: ‘accessToken’ is assigned a value but never used no-unused-vars
Line 32:22: Unexpected template string expression no-template-curly-in-string
Line 34:27: Unexpected template string expression no-template-curly-in-string
Line 57:15: ‘accessToken’ is assigned a value but never used no-unused-vars
Line 58:41: Unexpected template string expression no-template-curly-in-string
Line 64:13: ‘userId’ is assigned a value but never used no-unused-vars
Line 65:27: Unexpected template string expression no-template-curly-in-string
Line 72:23: ‘playlistId’ is assigned a value but never used no-unused-vars
Line 73:30: Unexpected template string expression no-template-curly-in-string

This is the code in my Spotify.js file:

const clientId = '5e56a43c5001426189eda044053e2d30';
const redirectUri = 'http://localhost:3000/'

let accessToken;

const Spotify = {
    getAccessToken() {
        if (accessToken) {
            return accessToken;
        }

        // check for access token match
        const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
        const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);

        if(accessTokenMatch && expiresInMatch) {
            accessToken = accessTokenMatch[1];
            const expiresIn = Number(expiresInMatch[1]);
            //This clears the parameters, allowing us to grab a new access token when it expires.
            window.setTimeout(() => accessToken = '', expiresIn * 1000);
            window.history.pushState('Access Token' , null, '/');
            return accessToken;

        }else{
            const accessUrl = 'https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}'
            window.location = accessUrl;
        }
    },

    search(term) {
        const accessToken = Spotify.getAccessToken();
        return fetch('https://api.spotify.com/v1/search?type=track&q=${term}', 
        {headers: { 
            Authorization:'Bearer ${accessToken}'
         }
        }).then(response => {
            return response.json();
        }).then(jsonResponse => {
            if(!jsonResponse.tracks) {
                return [];
            }
            return jsonResponse.tracks.items.map(track => ({
                id: track.id,
                name: track.name,
                artist: track.artists[0].name, 
                album: track.album.name,
                uri: track.uri
            }));
        }) ;
    },

    savePlayList(name, trackUris) {
        if(!name || !trackUris.length) {
            return;
        }

        const accessToken = Spotify.getAccessToken();
        const headers = {Authorization: 'Bearer ${accessToken}'};
        let userId;

        return fetch('https://api.spotify.com/v1/me', {headers:headers}
        ).then(response => response.json()
        ).then(jsonResponse => {
            userId = jsonResponse.Id;
            return fetch ('https://api.spotify.com/v1/users/${user_id}/playlists',
            {
                headers:headers,
                method:'POST',
                body: JSON.stringify({name: name})
            }).then(response => response.json()
            ).then(jsonResponse => {
                const playlistId = jsonResponse.id;
                return fetch('https://api.spotify.com/v1/users/${user_id}/playlists/${playlist_id}/tracks',
                {
                    headers: headers,
                    method: 'POST',
                    body: JSON.stringify({Uris: trackUris})
                });
            })
        })
    }
}

export default Spotify;
``import React from 'react';

import './SearchBar.css';

class SearchBar extends React.Component {
    constructor(props) {
        super(props);

        this.state ={
            term: ''
        }

        this.search = this.search.bind(this);
        this.handleTermChange = this.handleTermChange.bind(this);
    }

    search() {
        this.props.onSearch(this.state.term);
    }

    handleTermChange(event) {
        this.setState({term: event.target.value});
    }

    handleTermChange(event) {
        this.setState({term: event.target.value});
    }

    render() {
        return (
            <div className="SearchBar">
  <input onChange={this.handleTermChange} placeholder="Enter A Song, Album, or Artist" />
  <button className="SearchButton" onClick={this.search} >SEARCH</button>
</div>
        )
    }
}

export default SearchBar;

Would anyone have an idea of what would I be doing wrong. I even followed the tutorial to T!

Hi Calvin,
usually these warnings don’t cause trouble while developing locally but will become a problem when deploying the App with Netlify for example. But if you have a look at the first warning:
Line 1:7: ‘clientId’ is assigned a value but never used no-unused-vars

You defined the variable for a purpose, so the warning that it is unused is odd. Have a look where you use it or where you intend to use it:

The program does not recognise that you embedded variables because you do not use proper template literals.
That applies for the other warnings as well.