Skip to content

Commit

Permalink
New features
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygp188
ygp188 committed Nov 6, 2019
1 parent 41abf2d commit f59c6f3
Show file tree
Hide file tree
Showing 10 changed files with 102 additions and 70 deletions.
22 changes: 13 additions & 9 deletions api/routes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,20 @@ let YouTubeKey = process.env.YOUTUBE_API_KEY;
const Concert = require("../models/concert");

router.post("/getId", async (req, res) => {
let bandInput = req.body.text;
let bandInput = encodeURIComponent(`${req.body.text}`);
const resID = await fetch(
`https://api.songkick.com/api/3.0/search/artists.json?apikey=${SongKickKey}&query=${bandInput}`
);
const dataID = await resID.json();
const id = dataID.resultsPage.results.artist[0].id;

// const name = dataID.resultsPage.results.artist[0].displayName;
// console.log(dataID.resultsPage.results.artist[0].displayName)

res.json({ id });
});

router.post("/search", async (req, res) => {
let bandInput = req.body.text;
let bandInput = encodeURIComponent(`${req.body.text}`);
const resSearch = await fetch(`http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${bandInput}&api_key=${LastFmKey}&format=json`);
const dataSearch = await resSearch.json();
const resPic = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=${bandInput}&key=${YouTubeKey}`);
Expand Down Expand Up @@ -79,18 +81,20 @@ router.get("/artists/:id", async (req, res) => {
res.json({ dataConcerts });
});

router.get('/explore', async (req, res) => {
const resExplore = await fetch(`https://api.songkick.com/api/3.0/metro_areas/32051/calendar.json?apikey=${SongKickKey}`);
router.get('/explore/:page', async (req, res) => {
const page = req.params.page;
console.log(page)
const resExplore = await fetch(`https://api.songkick.com/api/3.0/metro_areas/32051/calendar.json?apikey=${SongKickKey}&page=${page}`);
const dataExplore = await resExplore.json();
res.json({dataExplore})
console.log(dataExplore)
res.json({ dataExplore })
});

router.post('/explore/:id', async (req, res) => {
router.post('/explore/:date', async (req, res) => {
let date = req.body.formattedDate;
const resDate = await fetch(`https://api.songkick.com/api/3.0/metro_areas/32051/calendar.json?apikey=${SongKickKey}&min_date=${date}&max_date=${date}`);
const dataDate = await resDate.json();
res.json({dataDate})
res.json({ dataDate })
});


module.exports = router;
6 changes: 3 additions & 3 deletions client/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
rel="stylesheet"
/>
<!-- Import materialize.css -->
<link href="CDN OR PATH TO NODE_MODULES.css" rel="stylesheet" />
<!-- <link href="CDN OR PATH TO NODE_MODULES.css" rel="stylesheet" /> -->
<!--Import Google Icon Font-->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
Expand All @@ -48,9 +48,9 @@
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- Import materialize.js -->
<script src="CDN OR PATH TO NODE_MODULES.js"></script>
<!-- <script src="CDN OR PATH TO NODE_MODULES.js"></script> -->
<!-- And then your bundled js -->
<script src="path/to/your/bundle.js"></script>
<!-- <script src="path/to/your/bundle.js"></script> -->
<div id="root"></div>
<!--
This HTML file is a template.
Expand Down
15 changes: 11 additions & 4 deletions client/src/Components/ConcertExplore/ConcertExplore.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { withRouter, Link } from "react-router-dom";
import { fetchUpcomingConcertsAC, fetchConcertsByDateAC } from "../../Redux/ConcertExploreReducer/ConcertExploreActions";
import { switchSearchBarAC } from "../../Redux/artistReducer/artistActions";


class ConcertExplore extends Component {
constructor(props) {
super(props);
Expand All @@ -14,9 +15,8 @@ class ConcertExplore extends Component {
};
}

async componentDidMount() {
await this.props.fetchUpcomingConcertsAC();
// this.props.switchSearchBarAC();
componentDidMount() {
this.props.fetchUpcomingConcertsAC();
}

handleInput = e => {
Expand All @@ -29,15 +29,22 @@ class ConcertExplore extends Component {
this.props.history.push(`/explore/${date}`);
}

onClickPagination = async (e) => {
await this.props.fetchUpcomingConcertsAC(e.target.innerText)
}


render() {
return (
<div>
Choose a date: <input type="date" value={this.state.date} onChange={this.handleInput}></input>
<button onClick={this.onClick}>Submit</button>
{this.props.events.allEvents && this.props.events.allEvents.map((el, i) =>
<p key={i}><Link to={`/concert/${this.props.events.allEvents[i].id}`}>{el.performance[0].displayName}</Link> ~~~~~ {el.start.date} ~~~~~ {el.venue.displayName}</p>
<p key={i}><Link to={`/concert/${this.props.events.allEvents[i].id}`}>{el.performance[0] ? el.performance[0].displayName : el.displayName}</Link> ~~~~~ {el.start.date} ~~~~~ {el.venue && el.venue.displayName}</p>
)}
<div>
<button onClick={this.onClickPagination}>1</button><button onClick={this.onClickPagination}>2</button><button onClick={this.onClickPagination}>3</button><button onClick={this.onClickPagination}>4</button><button onClick={this.onClickPagination}>5</button>
</div>
</div>
);
}
Expand Down
Empty file removed client/src/Components/Concerts/ConcertsByDates.js
View file
Empty file.
37 changes: 29 additions & 8 deletions client/src/Components/SimilarArtists/SimilarArtistsList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,39 @@
import React from 'react'
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { fetchArtistIdAC, fetchArtistInfoAC, switchSearchBarAC } from '../../Redux/artistReducer/artistActions';


import SimilarArtist from './SimilarArtist';

const SimilarArtistsList = ({ similar }) => {
return similar.map(({ name }, i) => (
<SimilarArtist title={name} key={`${name}_${i}`} />
));
class SimilarArtistsList extends React.Component {
async onClick(name) {
await this.props.fetchArtistIdAC(name);
await this.props.fetchArtistInfoAC(name);
this.props.history.push(`/artists/${this.props.artist.id}`);
}

render() {
return this.props.artist.similar && this.props.artist.similar.map((el, i) => (
<button value={el.name} onClick={() => this.onClick(el.name)}>
<SimilarArtist title={el.name} key={`${el.name}_${i}`} />
</button>
));
}
}

const mapStateToProps = (state) => ({
similar: state.artist.similar

const mapStateToProps = (store) => ({
artist: store.artist,
});

const mapDispatchToProps = {
fetchArtistIdAC,
fetchArtistInfoAC
};


export default connect(
mapStateToProps
)(SimilarArtistsList);
mapStateToProps,
mapDispatchToProps
)(withRouter(SimilarArtistsList));
1 change: 0 additions & 1 deletion client/src/Components/Youtube/Youtube.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,6 @@ class Youtube extends Component {

render() {
const { url, playing, controls, volume, muted, played, pip } = this.state;
console.log("DEBUG", this.props.url, Math.random());

return (
<div className="app">
Expand Down
78 changes: 38 additions & 40 deletions client/src/Containers/ArtistPage/ArtistPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import get from 'lodash.get';
import { withRouter } from 'react-router-dom';

import { fetchArtistIdAC, fetchArtistInfoAC } from '../../Redux/artistReducer/artistActions';
import { fetchArtistIdAC, fetchArtistInfoAC, fetchArtistConcertAC } from '../../Redux/artistReducer/artistActions';

import TourSnippetList from '../../Components/TourSnippet/TourSnippetList';
import TagsList from '../../Components/TagsList';
Expand All @@ -17,7 +17,7 @@ import "./ArtistPage.css";


class ArtistInfo extends Component {
componentDidMount() {
async componentDidMount() {
if (this.props.isSearchBar) {
console.log('ok')
} else {
Expand All @@ -28,55 +28,53 @@ class ArtistInfo extends Component {
this.props.fetchArtistIdAC(artist.displayName);
this.props.fetchArtistInfoAC(artist.displayName);
}
} else {
console.table('no artist in state', id)

}
}
}

render() {
const { artist } = this.props;

render() {
const { artist } = this.props;

const name = get(artist, 'name');
const content = get(artist, 'bio.content');
const pic = get(artist, 'pic')
const name = get(artist, 'name');
const content = get(artist, 'bio.content');
const pic = get(artist, 'pic')

return (
<div>
return (
<div>
<img src={pic} style={{ maxHeight: '300px' }} />
<div>
<img src={pic} style={{ maxHeight: '300px' }} />
</div>
<p className="groupName">{name}</p>
<p className="groupDescription">{content}</p>
<p className="genresName">Genres:</p>
<TagsList />
<p className="genresName">Similar artists:</p>
<SimilarArtistsList />
<FacebookPanel />
<TourSnippetList />
<ShowAll id={artist.id} />
<ShowMap id={artist.id} />
<ArtistTopTracks />
</div>
<p className="groupName">{name}</p>
<p className="groupDescription">{content}</p>
<p className="genresName">Genres:</p>
<TagsList />
<p className="genresName">Similar artists:</p>
<SimilarArtistsList />
<FacebookPanel />
<TourSnippetList />
<ShowAll id={artist.id} />
<ShowMap id={artist.id} />
<ArtistTopTracks />
</div>
);
);
}
}
}


const mapStateToProps = store => ({
artist: store.artist,
concertPage: store.concertPage,
});
const mapStateToProps = store => ({
artist: store.artist,
concertPage: store.concertPage,
lastSearch:store.lastSearch,
});

const mapDispatchToProps = {
fetchArtistIdAC,
fetchArtistInfoAC
};
const mapDispatchToProps = {
fetchArtistIdAC,
fetchArtistInfoAC,
fetchArtistConcertAC
};


export default connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(ArtistInfo));
export default connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(ArtistInfo));
3 changes: 2 additions & 1 deletion client/src/Containers/ConcertPage/ConcertPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ class ConcertPage extends Component {

return (
<div>
<p>{name},
<p>
{name},
{date},
{time},
{venue},
Expand Down
6 changes: 3 additions & 3 deletions client/src/Redux/ConcertExploreReducer/ConcertExploreActions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ export const TYPES = {
FETCH_CONCERTS_BY_DATE_FAILURE: 'FETCH_CONCERTS_BY_DATE_FAILURE',
}

export const fetchUpcomingConcertsAC = () => async dispatch => {
export const fetchUpcomingConcertsAC = (page) => async dispatch => {
dispatch({ type: TYPES.FETCH_UPCOMING_CONCERTS_REQUEST });

try {
const res = await axios.get('/explore');
const data = get(res, "data.dataExplore.resultsPage.results.event", {});
const res = await axios.get(`/explore/${page}`, { page });
const data = get(res, "data.dataExplore.resultsPage.results.event", []);

dispatch({
type: TYPES.FETCH_UPCOMING_CONCERTS_SUCCESS,
Expand Down
4 changes: 3 additions & 1 deletion client/src/Redux/artistReducer/artistActions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const TYPES = {
FETCH_TOUR_SNIPPET_SUCCESS: 'FETCH_TOUR_SNIPPET_SUCCESS',
FETCH_TOUR_SNIPPET_FAILURE: 'FETCH_TOUR_SNIPPET_FAILURE',
SWITCH_SEARCH_BAR: 'SWITCH_SEARCH_BAR',
SET_LAST_SEARCH: 'SET_LAST_SEARCH',
}


Expand All @@ -22,6 +23,7 @@ export const switchSearchBarAC = () => async dispatch => {
});
};


export const fetchArtistIdAC = (text) => async dispatch => {
dispatch({ type: TYPES.FETCH_ARTIST_ID_REQUEST });

Expand All @@ -45,7 +47,7 @@ export const fetchArtistInfoAC = text => async dispatch => {
const res = await axios.post("/search", { text });
const artist = get(res, "data.dataSearch.artist", {});
const pic = get(res, "data.pic.items[0].snippet.thumbnails.high.url", {});
const topTracks = get(res, "data.dataSearch.topTracks", {});
const topTracks = get(res, "data.dataSearch.topTracks", []);

dispatch({
type: TYPES.FETCH_ARTIST_INFO_SUCCESS,
Expand Down

0 comments on commit f59c6f3

Please sign in to comment.