Jammm feature

Hi EveryOne,

I finished the Jammming project.
I choosed this feature to improve the app: Save the first searching.
I am really new with React.
My solution is works as I expected but I wrote in javascript, not in react… If anyone have a little time to help me integrate my logic to the react code, I would be very grateful.
Here is my code:

Spotify.js
const clientID = "486f84d87b964fd28a2c6280709d4df9",
    redirectURI = "http://localhost:3000/";
;

let accessToken,
    firstTerm
;

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 clear 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}`;
            if (typeof(Storage) !== "undefined") {
                // Code for localStorage/sessionStorage.
                sessionStorage.term = firstTerm;
            } else {
                // Sorry! No Web Storage support..
                // we user cookies:
            }
            window.location = accessUrl;
        }
    },
    search(term) {
        firstTerm = term;
        const accessToken = Spotify.getAccessToken();
        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        }).then(response => response.json()
        ).then(jsonResponse => {
            if (!(jsonResponse.tracks)) return [];
            return jsonResponse.tracks.items.map(track => {
                return {
                    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/${userId}/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/${userId}/playlists/${playlistId}/tracks`, {
                    headers: headers,
                    method: "POST",
                    body: JSON.stringify({uris: trackUris})
                });
            });
        });
    }
};

export default Spotify;

In this file I added a new variable: firstTerm to the main scope.
In the getAccessToken() method I added the following code before redirect the user:

if (typeof(Storage) !== "undefined") {
      // Code for localStorage/sessionStorage.
      sessionStorage.term = firstTerm;
} else {
     // Sorry! No Web Storage support..
     // we use cookies:
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App/App.js';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
);

console.log("App start");
if (typeof(Storage) !== "undefined" && sessionStorage.term) {
	// Code for localStorage/sessionStorage.
	document.querySelector(".SearchBar input").value = sessionStorage.term;
	document.querySelector(".SearchBar button").click();
} else {
	// Sorry! No Web Storage support..
	// we user cookies:
}


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

In this file I added the following code:

if (typeof(Storage) !== "undefined" && sessionStorage.term) {
	// Code for localStorage/sessionStorage.
	document.querySelector(".SearchBar input").value = sessionStorage.term;
	document.querySelector(".SearchBar button").click();
} else {
	// Sorry! No Web Storage support..
	// we user cookies:
}
SearchBar.js
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() {
        if (typeof(Storage) !== "undefined" && sessionStorage.term) {
            // Code for localStorage/sessionStorage.
            this.props.onSearch(sessionStorage.term);
            sessionStorage.term = "";
            return;
        } else {
            // Sorry! No Web Storage support..
            // we user cookies:
        }
        this.props.onSearch(this.state.term);
    }

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

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

export default SearchBar;

In this file I modified only the search() method:

if (typeof(Storage) !== "undefined" && sessionStorage.term) {
    // Code for localStorage/sessionStorage.
    this.props.onSearch(sessionStorage.term);
    sessionStorage.term = "";
    return;
} else {
    // Sorry! No Web Storage support..
    // we user cookies:
}

As you see this is not a react code at all.
When the app redirected I need to check the session storage (or the cookie) for the search query. I need to send this data to the SearchBar.js.

Is anyone can help me translate this logic to the react?

Csaba