Skip to content

Instantly share code, notes, and snippets.

@gate5th gate5th/App.js
Created Sep 12, 2018

What would you like to do?
import React, { Component } from 'react';
import './App.css';
import FeaturedPost from './FeaturedPost';
import OtherPosts from './OtherPosts';
import * as CosmicFunctions from '../cosmicFunctions';
class App extends Component {
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');
this.setState({dataReceived: false});
changeFeaturedPost(index) {
let copyOfPosts = this.state.posts.slice();
copyOfPosts.splice(index, 1);
this.setState({featuredPostIndex: index, otherPosts: copyOfPosts});
render() {
return (
<div className="App">
<header className="App-header">
Old School Shuffle
<div className="featuredPost">
{this.state.dataReceived ? <FeaturedPost post={this.state.posts[this.state.featuredPostIndex]}/> : ''}
<div className="spotifyPlayer">
<p>Spotify player here</p>
<div className="otherPosts">
<OtherPosts allPosts={this.state.posts} otherPosts={this.state.otherPosts} changeFeaturedPost={(index) => this.changeFeaturedPost(index)}/>
<div className="footer">
<p>Footer here</p>
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.