-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
86 lines (77 loc) · 2.75 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React, { useState, useEffect } from 'react';
import './App.css';
const CLIENT_ID = 'bc19e20316de489ba87ca01f6c7c4e52';
const CLIENT_SECRET = '4e9b382f566141faa20a2eb3587844bf';
const RenderTracks = (props) => {
const [accessToken, setAccessToken] = useState("");
const [searchResult, setSearchResult] = useState([]);
useEffect(() => {
async function fetchAccessToken() {
var authParam = {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'grant_type=client_credentials&client_id=' + CLIENT_ID + '&client_secret=' + CLIENT_SECRET
}
const response = await fetch('https://accounts.spotify.com/api/token', authParam);
const data = await response.json();
setAccessToken(data.access_token);
} fetchAccessToken();
}, []);
useEffect(() => {
async function search() {
var artistParam = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + accessToken
}
}
const response = await fetch('https://api.spotify.com/v1/search?q=' + props.search + '&type=track', artistParam);
const data = await response.json();
if (data.tracks !== undefined) {
setSearchResult(data.tracks.items.map((item) => ({
id: item.id,
name: item.name,
artist: item.artists[0].name,
album: [item.album.name, item.album.release_date, item.album.external_urls.spotify],
image: item.album.images[0].url,
hyperlink: item.external_urls.spotify,
musicDemo: item.preview_url
})));
}
} search();
}, [accessToken, props.search]);
return (
<div className='mx-2 row row-cols-3'>
{searchResult.map((e) => {
return (
<div class="card border-0 m-4 rounded" style={{ width: 19.5 + "rem", backgroundColor: "#28282B" }}>
<a href={e.hyperlink} target='_blank' rel='noreferrer'>
<img class="card-img-top" src={e.image} alt="" />
</a>
<div class="card-body text-white">
<h4 class="card-title">{e.name}</h4>
<p class="card-text">
Artist: <b>{e.artist}</b> <br />
Album: <b>{e.album[0]}</b> <br /> <br />
</p>
</div>
</div>
)
})}
</div>
)
}
const App = () => {
const [searchInput, setSearchInput] = useState("");
return (
<div className='container-lg m-5'>
<input className="form-control form-control-lg w-75 mx-auto" type="text" placeholder="Search Music" onChange={(ev) => setSearchInput(ev.target.value)} />
<br />
<RenderTracks search={searchInput} />
</div>
)
}
export default App;