Reactivate LastFM importer (#1346)

After merging PR #1339 we will want to reactivate the LastFM Importer that we deactivated with PR #1334

listenbrainz/webserver/static/js/src/LastFMImporter.test.tsx

@@ -374,7 +374,7 @@ describe("LastFmImporter Page", () => {
  expect(wrapper.html()).toMatchSnapshot();
  });
 
- xit("modal renders when button clicked", () => {
+ it("modal renders when button clicked", () => {
  const wrapper = shallow(<LastFmImporter {...props} />);
  // Simulate submiting the form
  wrapper.find("form").simulate("submit", {
@@ -385,7 +385,7 @@ describe("LastFmImporter Page", () => {
  expect(wrapper.exists("LastFMImporterModal")).toBe(true);
  });
 
- xit("submit button is disabled when input is empty", () => {
+ it("submit button is disabled when input is empty", () => {
  const wrapper = shallow(<LastFmImporter {...props} />);
  // Make sure that the input is empty
  wrapper.setState({ lastfmUsername: "" });

listenbrainz/webserver/static/js/src/LastFMImporter.tsx

@@ -5,8 +5,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import APIService from "./APIService";
 import Scrobble from "./Scrobble";
+import LastFMImporterModal from "./LastFMImporterModal";
 
 export const LASTFM_RETRIES = 3;
+
 export type ImporterProps = {
  user: {
  id?: string;
@@ -433,39 +435,33 @@ export default class LastFmImporter extends React.Component<
  render() {
  const { show, canClose, lastfmUsername, msg } = this.state;
  return (
- <div className="alert alert-danger">
- We are having some issues with the LastFM importer, but we are working
- on fixing it. Please try again later. Our apologies for the delay!
+ <div className="Importer">
+ <form onSubmit={this.handleSubmit}>
+ <input
+ type="text"
+ onChange={this.handleChange}
+ value={lastfmUsername}
+ placeholder="Last.fm Username"
+ size={30}
+ />
+ <input type="submit" value="Import Now!" disabled={!lastfmUsername} />
+ </form>
+ {show && (
+ <LastFMImporterModal onClose={this.toggleModal} disable={!canClose}>
+ <img
+ src="/static/img/listenbrainz-logo.svg"
+ height="75"
+ className="img-responsive"
+ alt=""
+ />
+ <br />
+ <br />
+ <div>{msg}</div>
+ <br />
+ </LastFMImporterModal>
+ )}
  </div>
  );
- // return (
- // <div className="Importer">
- // <form onSubmit={this.handleSubmit}>
- // <input
- // type="text"
- // onChange={this.handleChange}
- // value={lastfmUsername}
- // placeholder="Last.fm Username"
- // size={30}
- // />
- // <input type="submit" value="Import Now!" disabled={!lastfmUsername} />
- // </form>
- // {show && (
- // <LastFMImporterModal onClose={this.toggleModal} disable={!canClose}>
- // <img
- // src="/static/img/listenbrainz-logo.svg"
- // height="75"
- // className="img-responsive"
- // alt=""
- // />
- // <br />
- // <br />
- // <div>{msg}</div>
- // <br />
- // </LastFMImporterModal>
- // )}
- // </div>
- // );
  }
 }
 

listenbrainz/webserver/static/js/src/__snapshots__/LastFMImporter.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LastFmImporter Page renders 1`] = `"<div class=\\"alert alert-danger\\">We are having some issues with the LastFM importer, but we are working on fixing it. Please try again later. Our apologies for the delay!</div>"`;
+exports[`LastFmImporter Page renders 1`] = `"<div class=\\"Importer\\"><form><input type=\\"text\\" placeholder=\\"Last.fm Username\\" size=\\"30\\" value=\\"\\"><input type=\\"submit\\" disabled=\\"\\" value=\\"Import Now!\\"></form></div>"`;