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.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.