Skip to content

Commit c8306f2

Browse files
nickel-dimenickel-dime
committed
push
1 parent 0bb9479 commit c8306f2

File tree

4 files changed

+154
-114
lines changed

4 files changed

+154
-114
lines changed

‎package-lock.json

+57
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@
1414
"framer-motion": "^10.16.16",
1515
"moment": "^2.29.4",
1616
"moment-timezone": "^0.5.43",
17+
"rc-slider": "^10.5.0",
1718
"react": "^18.2.0",
1819
"react-custom-rating-component": "^0.1.6",
1920
"react-dom": "^18.2.0",
2021
"react-icons": "^4.12.0",
22+
"react-rangeslider": "^2.2.0",
2123
"react-redux": "^8.1.3",
2224
"react-router-dom": "^6.20.1",
2325
"react-scripts": "5.0.1",

‎src/pages/Details/index.js

+92-114
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import { FaStar } from "react-icons/fa";
99
import { useLocation, useNavigate } from "react-router-dom";
1010
import moment from "moment";
1111
import { useAuth } from "../../hooks/useAuth";
12-
12+
import { Rating } from "react-custom-rating-component";
13+
import Slider from "rc-slider";
14+
import "rc-slider/assets/index.css";
1315

1416
// import * as userClient from "./users/client";
1517
// import * as reviewsClient from "./reviews/client";
@@ -30,7 +32,9 @@ export function Details() {
3032
const fetchSong = async () => {
3133
const test = localStorage.getItem("token");
3234
const jsonString = JSON.parse(test);
33-
if (!track) {return <Navigate to="/home" replace />;}
35+
if (!track) {
36+
return <Navigate to="/home" replace />;
37+
}
3438
const idToUse = track.id ? track.id : id;
3539
const song_song = await client.getTrackAudioFeatures(
3640
jsonString.access_token,
@@ -55,128 +59,85 @@ export function Details() {
5559
return <Navigate to="/home" replace />;
5660
}
5761

58-
const steveSong = {spotify_id : "IDK",
59-
title : "IDK",
60-
artists: ["IDK", "PLS"],
61-
album_name : "IDK",
62-
release_date : "2014-11-10",
63-
album_art_url : "https://i.scdn.co/image/ab67616d0000b273e419ccba0baa8bd3f3d7abf2",
64-
acousticness: 0.5,
65-
danceability: 0.5,
66-
energy: 0.5,
67-
instrumentalness: 0.5,
68-
loudness: 0.5
69-
}
62+
const steveSong = {
63+
spotify_id: "IDK",
64+
title: "IDK",
65+
artists: ["IDK", "PLS"],
66+
album_name: "IDK",
67+
release_date: "2014-11-10",
68+
album_art_url:
69+
"https://i.scdn.co/image/ab67616d0000b273e419ccba0baa8bd3f3d7abf2",
70+
acousticness: 0.5,
71+
danceability: 0.5,
72+
energy: 0.5,
73+
instrumentalness: 0.5,
74+
loudness: 0.5,
75+
};
7076

7177
return (
7278
<div className="">
7379
{track && (
7480
<div className="flex">
75-
<div>
81+
<div className="flex flex-col items-center text-green">
7682
<img
7783
src={track.album_art_url}
7884
style={{ width: 200, height: 200 }}
7985
alt="album cover"
8086
/>
81-
<div className="ratings-title">
82-
Average Rating: {average_review} / 5
87+
<div className="text-lg mt-6">
88+
<div className=" flex items-center flex-col gap-2">
89+
Average Rating
90+
<Rating defaultValue={2.3} readOnly={true} />
91+
</div>
8392
</div>
84-
85-
<hr className="green-line"></hr>
86-
<h3 className="ratings-title">Recent reviews:</h3>
93+
<hr className="green-line w-full"></hr>
94+
<div className="text-lg">Recent Reviews:</div>
8795
</div>
88-
<div>
89-
<div className="flex-container">
90-
<span className="float-left">
91-
<h1 className="song-title float-left">{track.title}</h1>
92-
</span>
93-
<span className="float-right">
94-
<h2 className="artist-name float-right">
95-
By: {track.artists[0]}
96-
</h2>
97-
<h2 className="song-year float-right">
96+
<div className="text-green flex flex-col">
97+
<div>
98+
<div className="">
99+
<div className="">{track.title}</div>
100+
</div>
101+
<div className="">
102+
<div className="">By: {track.artists[0]}</div>
103+
<div className="">
98104
{moment(track.release_date).utc().format("MMM DD, Y")}
99-
</h2>
100-
</span>
105+
</div>
106+
</div>
107+
<div className="">
108+
<p>Details</p>
109+
<hr></hr>
110+
</div>
101111
</div>
102112

103-
<br></br>
104-
<br></br>
105-
<div className="details-under-song-title">
106-
<p>Details</p>
107-
<hr></hr>
108-
</div>
109113
{song && (
110114
<div className="p-flex-row-container">
111-
<ul>
112-
<li>
113-
<label
114-
htmlFor="customRange1"
115-
className="form-label"
116-
style={{ color: "#C0EB8F" }}
117-
>
118-
Energy
119-
</label>
120-
<input
121-
type="range"
122-
className="form-range "
123-
id="customRange1"
124-
disabled
125-
value={song.energy}
126-
min="0"
127-
max="1"
128-
step="0.1"
129-
/>
130-
<div className="bottom-labels">
131-
<label
132-
className="float-left"
133-
style={{ color: "#C0EB8F" }}
134-
>
135-
No chill
136-
</label>
137-
<label
138-
className="float-right"
139-
style={{ color: "#C0EB8F" }}
140-
>
141-
Chill
142-
</label>
143-
</div>
144-
</li>
145-
<br></br>
146-
<li>
147-
<label
148-
htmlFor="customRange1"
149-
className="form-label"
150-
style={{ color: "#C0EB8F" }}
151-
>
152-
Instrumentalness
153-
</label>
154-
<input
155-
type="range"
156-
className="form-range range-thumb"
157-
id="customRange1"
158-
disabled
159-
value={song.instrumentalness}
160-
min="0"
161-
max="1"
162-
step="0.1"
163-
/>
164-
<div className="bottom-labels">
165-
<label
166-
className="float-left"
167-
style={{ color: "#C0EB8F" }}
168-
>
169-
None
170-
</label>
171-
<label
172-
className="float-right"
173-
style={{ color: "#C0EB8F" }}
174-
>
175-
A ton
176-
</label>
177-
</div>
178-
</li>
179-
<br></br>
115+
<ul className="text-green flex flex-col gap-2">
116+
<SongSlider
117+
name="Energy"
118+
min={0}
119+
max={100}
120+
step={1}
121+
value={song.energy}
122+
left_label="No chill"
123+
right_label="Chill"
124+
></SongSlider>
125+
<SongSlider
126+
name="Instrumentalness"
127+
min={0}
128+
max={100}
129+
step={1}
130+
value={song.instrumentalness}
131+
left_label="None"
132+
right_label="A ton"
133+
></SongSlider>
134+
<SongSlider
135+
name="Loudness"
136+
value={8}
137+
left_label="None"
138+
right_label="A ton"
139+
></SongSlider>
140+
180141
<li>
181142
<label
182143
htmlFor="customRange1"
@@ -335,17 +296,19 @@ loudness: 0.5
335296
></textarea>
336297
</div>
337298
<div className="form-group">
338-
<button className="btn submit-button"
299+
<button
300+
className="btn submit-button"
339301
//TODO CREATE REVIEW API CALL using the review object
340302
onClick={() => {
341303
if (!user) {
342-
navigate("/signup")
304+
navigate("/signup");
343305
}
344-
console.log("CLICKED ONCLICK")
345-
our_client.createReview(review, track)
346-
}
347-
}
348-
>SUBMIT</button>
306+
console.log("CLICKED ONCLICK");
307+
our_client.createReview(review, track);
308+
}}
309+
>
310+
SUBMIT
311+
</button>
349312
</div>
350313
</div>
351314
</div>
@@ -356,3 +319,18 @@ loudness: 0.5
356319
</div>
357320
);
358321
}
322+
323+
function SongSlider({ value, min, max, step, left_label, right_label, name }) {
324+
return (
325+
<li>
326+
<label htmlFor="customRange1" className="form-label">
327+
{name}
328+
</label>
329+
<Slider min={min} max={max} step={step} value={value * 100} />
330+
<div className="bottom-labels mt-1 font-roboto">
331+
<label className="float-left">{left_label}</label>
332+
<label className="float-right">{right_label}</label>
333+
</div>
334+
</li>
335+
);
336+
}

‎tailwind.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ module.exports = {
88
green: "#c0eb8f",
99
purple: "#6B4A60",
1010
},
11+
fontFamily: {
12+
roboto: ["Roboto", "sans-serif"],
13+
},
1114
},
1215
},
1316
plugins: [

0 commit comments

Comments
 (0)