Last active
January 16, 2019 13:45
-
-
Save 0xtruly/9f201749b13fa6cedc8964783a3dcd4e to your computer and use it in GitHub Desktop.
Revisions
-
0xtruly revised this gist
Jan 16, 2019 . 2 changed files with 47 additions and 85 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,85 +0,0 @@ This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,47 @@ class Result extends Component { constructor(props){ super(props); this.state = { song: {}, ready: 'initial' } } componentDidMount() { const {match : {params} } = this.props; const song = params; this.setState({ready: 'loaded'}); } render(){ const{song} = this.state; return( <ResultStyle> <Header> <h1>Soundio</h1> <p>The Music Hub</p> <Form /> </Header> <main> <Container> <Grid> { song.length ? '' : <Loader /> } { ready === 'loading' ? 'Loading...' : '' } { song.map(song => ( <Column columns="3" key={song.id}> <MusicList image={song.album.cover_medium ? song.artist.picture_medium:''}> <h3 onClick="pointer"><Link to={`/song/${song.id}`}>{song.artist.name}</Link></h3> <i className="fa fa-music">Album:{song.album.title}</i> <br /> <i className="fa fa-music">Track:{song.title}</i> </MusicList> </Column> )) } </Grid> </Container> </main> <Footer /> </ResultStyle> ) } } export default Result; -
Dec 18, 2018 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,85 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; import axios from 'axios'; import { Grid, Column } from './Grid'; import MusicBg from '../../assets/music-bg.jpeg'; import MusicList from './MusicList'; import Footer from './Footer'; import Container from './Container'; import Form from './Form'; const HomeStyle = styled.div` header, footer{ text-align: center; } main{ margin: 20px 0; } `; const Header = styled.header` padding: 70px 20px; background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(${MusicBg}); background-size: cover; background-position: center; color: #fff; `; class Home extends Component { constructor() { super(); this.state = { tracks: [], // store: [], // ready: 'initial', }; } componentDidMount() { this.setState({ ready: 'loading', }); // axios({ // method: 'get', // url: `${process.env.HOST}/artists`, // headers: `${process.env.API_KEY}`, // }) axios.get('https://api.deezer.com/artist/27/top?e9d874c859b7133d36df9b5bcd38512d') .then(json => console.log(json.data.artist)) // .then(({ data: { data } }) => { // this.setState({ // ready: 'loaded', // tracks: data, // }) // }) } render() { const { tracks, ready } = this.state; return ( <HomeStyle> <Header> <h1>Soundio</h1> <p>The Music Hub</p> <Form /> </Header> <main> <Container> <Grid> { tracks.data ? '' : 'There are no sound clips ' } { ready === 'loading' ? 'Loading...' : '' } { tracks.map(tracks => ( <Column columns="3" key={tracks.id}> <MusicList image={tracks.data.artist.picture ? charts.artists.Icon[0].url:''} preview={tracks.preview}> <h3><Link to={`/tracks/${tracks.id}`}>{tracks.artist.name}</Link></h3> </MusicList> </Column> )) } </Grid> </Container> </main> <Footer /> </HomeStyle> ); } } export default Home;