React Starter iTunes

by mike_tobia

HTML

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="app">
  <!-- This element's contents will be replaced with your component. -->
</div>

SCSS

html {
  box-sizing: border-box;
  font-family: Futura, Helvetica, sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}

.search-bar {
  width: 50%;
  height: 80px;
  margin: auto;
  &.active {
    width: 100%:
  }
  & > input {
    height: 80px;
  }
}

.list {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  height: 100px;
  
  & .list-item {
    height: inherit;
    width: 50%;
  }
}

Babel + JSX

// 1. Create a github Repo or Click 'Fork' from the top menu and generate your own JSFiddle link.
// Be sure to click 'Update' when your work is done.

// 2. Create a Search Component for entering an Artist

// 3. On Search, make an api call to iTunes API to fetch the information about the artist
// API URL: https://itunes.apple.com/search?term=${ARTIST_NAME}

// 4. When the Search button is clicked, make a call to the API and display the list of albums, including the album name and album cover inside #albums-container in a grid. Use any CSS technique you are comfortable with (Note: The API will return a list of albums based on the search result. Use your skills to find out what the iTunes API data structure looks like and extract the relevant data from it).

// 5. Style the page to the best of the ability to make the UI look clean and presentable

// 6. Checkin or Click Update from the top Menu and save the link

/* FLAG - for build time, dead code removal (process.env.NODE_ENV) */
const DEV = true;

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

    this.state = {
      active: false,
      query: ""
    };

    this.onBlur = this.onBlur.bind(this);
    this.onFocus = this.onFocus.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  onBlur() {
    this.setState(
      { active: false },
      () => typeof this.props.onBlur == "function" && this.props.onBlur()
    );
  }

  onFocus() {
    this.setState(
      { active: true },
      () => typeof this.props.onFocus == "function" && this.props.onFocus()
    );
  }

  onChange(event) {
    const {
      target: { value: query }
    } = event;

    this.setState(
      { query },
      () =>
        typeof this.props.onChange == "function" &&
        this.props.onChange(this.state.query)
    );
  }

  render() {
    const {
      onBlur,
      onFocus,
      onChange,
      state: { active, query }
    } = this;

    const _class = ["search-bar"].concat(active ?...