-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c009c5d
commit d29290b
Showing
7 changed files
with
487 additions
and
113 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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 characters
This file contains 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 characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,118 +1,142 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import axios from "axios"; | ||
| import React from "react"; | ||
| import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; | ||
| import Home from "./Home"; | ||
| import Playlist from "./Playlist"; | ||
| import Header from "./Header"; | ||
| import TextInput from "./TextInput"; | ||
| import Button from "./Button"; | ||
| import Rectangle1 from "./Rectangle1"; | ||
| import "./App.css"; | ||
|
|
||
| function App() { | ||
| const [description, setDescription] = useState(""); | ||
| const [recommendations, setRecommendations] = useState([]); | ||
| const [spotifyLink, setSpotifyLink] = useState(null); | ||
| const [error, setError] = useState(null); | ||
| const [authorized, setAuthorized] = useState(true); | ||
| const [sessionId, setSessionId] = useState(null); | ||
| const [loading, setLoading] = useState(false); | ||
| return ( | ||
| <Router> | ||
| <div className="App"> | ||
| <Header /> | ||
| <Routes> | ||
| <Route path="/" element={<Home />} /> | ||
| <Route path="/playlist" element={<Playlist />} /> | ||
| </Routes> | ||
| </div> | ||
| </Router> | ||
| ); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const sessionIdParam = urlParams.get("session_id"); | ||
| if (sessionIdParam) { | ||
| setSessionId(sessionIdParam); | ||
| } | ||
| }, []); | ||
| export default App; | ||
|
|
||
| const handleInputChange = (e) => { | ||
| setDescription(e.target.value); | ||
| }; | ||
| // import React, { useState, useEffect } from "react"; | ||
| // import axios from "axios"; | ||
| // import Header from "./Header"; | ||
| // // import Home from "./Home"; | ||
| // import TextInput from "./TextInput"; | ||
| // import Button from "./Button"; | ||
| // import Rectangle1 from "./Rectangle1"; | ||
| // import "./App.css"; | ||
|
|
||
| const handleGetRecommendations = async () => { | ||
| setLoading(true); | ||
| try { | ||
| const response = await axios.post( | ||
| `http://localhost:5000/recommend`, | ||
| { description }, | ||
| { params: { session_id: sessionId } } | ||
| ); | ||
| if (response && response.data) { | ||
| if (response.data.authorized) { | ||
| setRecommendations(response.data.recommendation); | ||
| setSpotifyLink(response.data.spotify_link); | ||
| setError(null); | ||
| setAuthorized(true); | ||
| } else { | ||
| setAuthorized(false); | ||
| } | ||
| } else { | ||
| console.error("Unexpected response structure:", response); | ||
| } | ||
| } catch (error) { | ||
| console.error("Error fetching recommendation:", error); | ||
| setError("Error fetching recommendation. Please try again."); | ||
| if (error.response && error.response.status === 401) { | ||
| setAuthorized(false); | ||
| } | ||
| } finally { | ||
| setLoading(false); // End loading | ||
| } | ||
| }; | ||
| // function App() { | ||
| // const [description, setDescription] = useState(""); | ||
| // const [recommendations, setRecommendations] = useState([]); | ||
| // const [spotifyLink, setSpotifyLink] = useState(null); | ||
| // const [error, setError] = useState(null); | ||
| // const [authorized, setAuthorized] = useState(true); | ||
| // const [sessionId, setSessionId] = useState(null); | ||
| // const [loading, setLoading] = useState(false); | ||
|
|
||
| return ( | ||
| <div className="App"> | ||
| <Header /> | ||
| <Rectangle1 | ||
| title="Mood Melody" | ||
| description="Discover music that fits your mood. + add description" | ||
| /> | ||
| // useEffect(() => { | ||
| // const urlParams = new URLSearchParams(window.location.search); | ||
| // const sessionIdParam = urlParams.get("session_id"); | ||
| // if (sessionIdParam) { | ||
| // setSessionId(sessionIdParam); | ||
| // } | ||
| // }, []); | ||
|
|
||
| <TextInput | ||
| value={description} | ||
| onChange={handleInputChange} | ||
| placeholder="Enter the desired song qualities or mood..." | ||
| /> | ||
| <br /> | ||
| <Button | ||
| type="button" | ||
| label={loading ? "Loading..." : "Get Recommendations"} | ||
| onClick={handleGetRecommendations} | ||
| disabled={loading} | ||
| /> | ||
| {error && <p style={{ color: "red" }}>{error}</p>} | ||
| {!authorized && ( | ||
| <div> | ||
| <p style={{ color: "red" }}>You are not authorized in Spotify.</p> | ||
| <Button | ||
| type="button" | ||
| label="Authorize" | ||
| onClick={() => | ||
| (window.location.href = "http://localhost:5000/auth/login") | ||
| } | ||
| /> | ||
| </div> | ||
| )} | ||
| {authorized && recommendations.length > 0 && ( | ||
| <div> | ||
| <h2>Recommendations</h2> | ||
| <ul> | ||
| {recommendations.map((rec, index) => ( | ||
| <li key={index}>{rec}</li> | ||
| ))} | ||
| </ul> | ||
| {spotifyLink && ( | ||
| <div> | ||
| <h2>Spotify Playlist</h2> | ||
| <p> | ||
| <a href={spotifyLink} target="_blank" rel="noopener noreferrer"> | ||
| Open Playlist on Spotify | ||
| </a> | ||
| </p> | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| // const handleInputChange = (e) => { | ||
| // setDescription(e.target.value); | ||
| // }; | ||
|
|
||
| export default App; | ||
| // const handleGetRecommendations = async () => { | ||
| // setLoading(true); | ||
| // try { | ||
| // const response = await axios.post( | ||
| // `http://127.0.0.1:5000/recommend`, | ||
| // { description }, | ||
| // { params: { session_id: sessionId } } | ||
| // ); | ||
| // if (response && response.data) { | ||
| // if (response.data.authorized) { | ||
| // setRecommendations(response.data.recommendation); | ||
| // setSpotifyLink(response.data.spotify_link); | ||
| // setError(null); | ||
| // setAuthorized(true); | ||
| // } else { | ||
| // setAuthorized(false); | ||
| // } | ||
| // } else { | ||
| // console.error("Unexpected response structure:", response); | ||
| // } | ||
| // } catch (error) { | ||
| // console.error("Error fetching recommendation:", error); | ||
| // setError("Error fetching recommendation. Please try again."); | ||
| // if (error.response && error.response.status === 401) { | ||
| // setAuthorized(false); | ||
| // } | ||
| // } finally { | ||
| // setLoading(false); // End loading | ||
| // } | ||
| // }; | ||
|
|
||
| // return ( | ||
| // <div className="App"> | ||
| // <Header /> | ||
| // <Rectangle1 | ||
| // title="Mood Melody" | ||
| // description="Discover music that fits your mood. + add description" | ||
| // /> | ||
|
|
||
| // <TextInput | ||
| // value={description} | ||
| // onChange={handleInputChange} | ||
| // placeholder="Enter the desired song qualities or mood..." | ||
| // /> | ||
| // <br /> | ||
| // <Button | ||
| // type="button" | ||
| // label={loading ? "Loading..." : "Get Recommendations"} | ||
| // onClick={handleGetRecommendations} | ||
| // disabled={loading} | ||
| // /> | ||
| // {error && <p style={{ color: "red" }}>{error}</p>} | ||
| // {!authorized && ( | ||
| // <div> | ||
| // <p style={{ color: "red" }}>You are not authorized in Spotify.</p> | ||
| // <Button | ||
| // type="button" | ||
| // label="Authorize" | ||
| // onClick={() => | ||
| // (window.location.href = "http://127.0.0.1:5000/auth/login") | ||
| // } | ||
| // /> | ||
| // </div> | ||
| // )} | ||
| // {authorized && recommendations.length > 0 && ( | ||
| // <div> | ||
| // <h2>Recommendations</h2> | ||
| // <ul> | ||
| // {recommendations.map((rec, index) => ( | ||
| // <li key={index}>{rec}</li> | ||
| // ))} | ||
| // </ul> | ||
| // {spotifyLink && ( | ||
| // <div> | ||
| // <h2>Spotify Playlist</h2> | ||
| // <p> | ||
| // <a href={spotifyLink} target="_blank" rel="noopener noreferrer"> | ||
| // Open Playlist on Spotify | ||
| // </a> | ||
| // </p> | ||
| // </div> | ||
| // )} | ||
| // </div> | ||
| // )} | ||
| // </div> | ||
| // ); | ||
| // } | ||
|
|
||
| // export default App; |
This file contains 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 characters
Oops, something went wrong.