Сохранить поисковый запрос на refre sh Реагировать - PullRequest
Новая
       41

Сохранить поисковый запрос на refre sh Реагировать

0 голосов
/ 26 марта 2020

Я просто хочу сохранить и восстановить поисковый запрос (данные формы), когда страница обновляется / перезагружается. Я пробовал несколько решений безрезультатно.

Поток: пользователь отправляет поисковый запрос и попадает в Spotify для получения accessToken, если он еще не доступен. Начальная страница обновляется после получения accessToken, но поиск должен быть введен заново. Это не хороший UX.

Я пришел к выводу, что веб-хранилище - это путь к go, конечно, это не единственный маршрут. Я не уверен, следует ли это относить к методам жизненного цикла: componentDidMount () & componentDidUpdate () . Возможно, это излишне? В любом случае, я пытался использовать localStorage и sessionStorage . Моя реализация явно отключена, так как я не получаю ожидаемого результата. Инструменты React dev отображают состояние термина SearchBar, но оно не сохраняется. Также следует отметить следующее: инструменты React dev показывают, что обработчик события onSubmit регистрируется как bound () {} вместо ожидаемого bound handleInitialSearchTerm () {} . Консоль также показывает, что ошибок нет.

Буду признателен за любую помощь. Надеюсь, я включил достаточно деталей. Пожалуйста, дайте мне знать, если вам нужно больше информации.

Нет сторонних библиотек, пожалуйста.

Панель поиска. js

import React from 'react';
import "./SearchBar.css";

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

    this.state = {
      term: this.handleInitialSearchTerm
    };
    this.search = this.search.bind(this);
    this.handleInitialSearchTerm = this.handleInitialSearchTerm.bind(this);
    this.setSearchTerm = this.setSearchTerm.bind(this);
    this.handleSearchOnEnter = this.handleSearchOnEnter.bind(this);
    this.handleTermChange = this.handleTermChange.bind(this);
  }

  handleInitialSearchTerm = (event) => {
    if (typeof (Storage) !== "undefined") {
      if (localStorage.term) {
        return localStorage.term
      } else {
      return this.setSearchTerm(String(window.localStorage.getItem("term") || ""));
      }  
    }
  };

  setSearchTerm = (term) => {
    localStorage.setItem("term", term);
      this.setState({ term: term });
  }

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

  handleSearchOnEnter(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      this.search();
    }
  }

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


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

export default SearchBar;

Motify. js

let accessToken;
const clientId = "SpotifyCredentialsHere"; 
const redirectUri = "http://localhost:3000/";
const CORS = "https://cors-anywhere.herokuapp.com/"; // Bypasses CORS restriction

const Motify = {
  getAccessToken() {
    if (accessToken) {
      return accessToken;
    }
    // if accessToken does not exist check for a match
    const windowURL = window.location.href;

    const accessTokenMatch = windowURL.match(/access_token=([^&]*)/);

    const expiresInMatch = windowURL.match(/expires_in=([^&]*)/);

    if (accessTokenMatch && expiresInMatch) {

      accessToken = accessTokenMatch[1]; //[0] returns the param and token

      const expiresIn = Number(expiresInMatch[1]);

      window.setTimeout(() => accessToken = "", expiresIn * 1000);

      // This clears the parameters, allowing us to grab a new access token when it expires.
      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 = Motify.getAccessToken();
    const url = `${CORS}https://api.spotify.com/v1/search?type=track&q=${term}`;

    return fetch(url, { headers: { Authorization: `Bearer ${accessToken}` }
    }).then(response => 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,
        preview_url: track.preview_url
      }));
    })
  }

...
...