oldschoolshuffle

App.js

//App.js

import React, { Component } from 'react';
import './App.css';
import FeaturedPost from './FeaturedPost';

//***note how we have to import the OtherPosts component 
import OtherPosts from './OtherPosts';
import * as CosmicFunctions from '../cosmicFunctions';

class App extends Component {

    constructor(props){
    super(props);
    this.state = {
       dataReceived: false,      
       posts: [],
       authors: [],
       featuredPostIndex: 0,
       otherPosts: [],
    }
  }

    async componentDidMount(){
    try {
      const {posts, authors} = await CosmicFunctions.getCosmicJsData();
      this.setState({dataReceived: true, posts: posts, authors: authors, otherPosts: posts.slice(1)})
    }
    catch(err) {
      console.error('Error: Problem retrieving Cosmic JS data');
      console.error(err);
      console.error(err.stack);
      this.setState({dataReceived: false});
    }
  }

//*** Notice in the render function how we replaced the placeholder
//<p>Other Posts here</p> element with <OtherPosts/>

  render() {
    return (
      <div className="App">
        <header className="App-header">          
          Old School Shuffle
        </header>
        <div className="featuredPost">
          {this.state.dataReceived ? <FeaturedPost post={this.state.posts[this.state.featuredPostIndex]}/> : ''}
        </div>
        <div className="spotifyPlayer">
          <p>Spotify player here</p>
        </div>
        <div className="otherPosts">
          <OtherPosts otherPosts={this.state.otherPosts}/>
        </div>
        <div className="footer">
          <p>Footer here</p>
        </div>
      </div>
    );
  }
}

export default App;