Add files via upload

src/App.js

@@ -0,0 +1,10 @@
+import Login from "./Login";
+import "bootstrap/dist/css/bootstrap.min.css";
+import Dashboard from "./Dashboard";
+const code = new URLSearchParams(window.location.search).get("code");
+//returns anything return after the url
+function App() {
+ return code ? <Dashboard code={code}/> : <Login/>;
+}
+
+export default App;

src/Dashboard.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import useAuth from "./useAuth";
+import { Container, Form } from "react-bootstrap";
+import SpotifyWebApi from "spotify-web-api-node";
+import axios from "axios";
+
+const spotifyApi = new SpotifyWebApi({
+ clientId: "e8acbd5e26d4445681fb69ea7112c35c",
+});
+
+export default function Dashboard({ code }) {
+ const accessToken = useAuth(code);
+ const [search, setSearch] = useState("");
+ const [results, setResults] = useState([]);
+
+ useEffect(() => {
+ if (!accessToken) return;
+ spotifyApi.setAccessToken(accessToken);
+ }, [accessToken]);
+
+ useEffect(() => {
+ if (!search) return setResults([]);
+ if (!accessToken) return;
+
+ spotifyApi.searchTracks(search).then((res) => {
+ console.log(res);
+ });
+ }, [search, accessToken]);
+
+ return (
+ <Container className="d-flex flex-column py-2" style={{ height: "100vh" }}>
+ <Form.Control
+ type="search"
+ value={search}
+ placeholder="Artists,songs,etc..."
+ onChange={(e) => setSearch(e.target.value)}
+ />
+ <div className="flex-grow-1 my2" style={{ overflowY: "auto" }}>
+ Songs
+ </div>
+ <div className="">Bottom</div>
+ </Container>
+ );
+}

src/Login.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Container } from "react-bootstrap";
+const AUTH_URL =
+ "https://accounts.spotify.com/authorize?client_id=e8acbd5e26d4445681fb69ea7112c35c&response_type=code&redirect_uri=http:https://localhost:3000&scope=streaming%20user-read-email%20user-read-private%20user-library-read%20user-library-modify%20user-read-playback-state%20user-modify-playback-state";
+
+export default function Login() {
+ return (
+ <Container
+ className="d-flex justify-content-center align-items-center"
+ style={{ minHeight: "100vh" }}
+ >
+ <a href={AUTH_URL} className="btn btn-lg btn-success">
+ Login with Spotify
+ </a>
+ </Container>
+ );
+}

src/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+);

src/useAuth.js

@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+export default function useAuth(code) {
+ const [accessToken, setAccessToken] = useState();
+ const [refreshToken, setRefreshToken] = useState();
+ const [expiresIn, setExpiresIn] = useState();
+
+ useEffect(() => {
+ if (!refreshToken || !expiresIn) return;
+ const interval = setInterval(() => {
+ axios
+ .post("http:https://localhost:3001/login", {
+ code,
+ })
+ .then((res) => {
+ setAccessToken(res.data.accessToken);
+ setRefreshToken(res.data.refreshToken);
+ setExpiresIn(res.data.expiresIn);
+ window.history.pushState({}, null, "/");
+ })
+ .catch((err) => {
+ console.log(err);
+ window.location = "/";
+ });
+ }, (expiresIn - 60) * 1000);
+ return () => clearInterval(interval);
+ }, [code]);
+
+ useEffect(() => {
+ axios
+ .post("http:https://localhost:3001/refresh", {
+ refreshToken,
+ })
+ .then((res) => {
+ setAccessToken(res.data.accessToken);
+ setRefreshToken(res.data.refreshToken);
+ setExpiresIn(res.data.expiresIn);
+ window.history.pushState({}, null, "/");
+ })
+ .catch((err) => {
+ console.log(err);
+ window.location = "/";
+ });
+ }, [code]);
+
+ useEffect(() => {}, [refreshToken, expiresIn]);
+ return accessToken;
+}