Develop

client/package.json

@@ -7,10 +7,13 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.3",
     "axios": "^0.21.1",
-    "bootstrap": "^4.6.0",
-    "react": "^17.0.1",
-    "react-bootstrap": "^1.5.0",
-    "react-dom": "^17.0.1",
+    "bootstrap": "^4.6.1",
+    "js-cookie": "^3.0.1",
+    "lyrics-finder": "^21.7.0",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.5",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
     "react-spotify-web-playback": "^0.8.1",
     "spotify-web-api-node": "^5.0.2",
@@ -39,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-spotify-api": "^3.0.0"
   }
 }

client/src/App.js

@@ -1,11 +1,28 @@
-import "bootstrap/dist/css/bootstrap.min.css"
-import Login from "./Login"
-import Dashboard from "./Dashboard"
-
-const code = new URLSearchParams(window.location.search).get("code")
+import "bootstrap/dist/css/bootstrap.min.css";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import AuthContextProvider from "./context/AuthContext";
+import HomeTab from "./pages/HomeTab";
+import SearchTab from "./pages/SearchTab";
+import RcmTab from "./pages/RcmTab";
+import LibraryTab from "./pages/LibraryTab";
+import UserTab from "./pages/UserTab";
 
 function App() {
-  return code ? <Dashboard code={code} /> : <Login />
+  return (
+    <div>
+      <AuthContextProvider>
+        <Router>
+          <Routes>
+            <Route path="/" element={<HomeTab />} />
+            <Route path="search" element={<SearchTab />} />
+            <Route path="recommended" element={<RcmTab />} />
+            <Route path="library" element={<LibraryTab />} />
+            <Route path="user" element={<UserTab />} />
+          </Routes>
+        </Router>
+      </AuthContextProvider>
+    </div>
+  );
 }
 
-export default App
+export default App;

client/src/components/LibraryTab/LibraryContainer.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Recommendations from './Recommendations'
+
+function LibraryContainer() {
+  return (
+    <div>
+        <Recommendations />
+    </div>
+  )
+}
+
+export default LibraryContainer

client/src/components/LibraryTab/Recommendations.js

@@ -0,0 +1,15 @@
+import React, {useEffect, useState} from 'react'
+import Cookies from 'js-cookie'
+
+function Recommendations() {
+    const accessToken = Cookies.get('accessToken')
+
+  return (
+    <div>
+
+
+    </div>
+  )
+}
+
+export default Recommendations

client/src/components/MainTab/Home.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react'
+import Logout from './Logout'
+import LoginPremium from './LoginPremium'
+import { AuthContext } from '../../context/AuthContext'
+
+export default function Home() {
+  const { auth } = useContext(AuthContext)
+
+  return (
+    <div>
+      {auth? <Logout />: <LoginPremium /> }
+    </div>
+  )
+}

client/src/Login.js → client/src/components/MainTab/LoginPremium.js

@@ -2,9 +2,9 @@ import React from "react"
 import { Container } from "react-bootstrap"
 
 const AUTH_URL =
-  "https://accounts.spotify.com/authorize?client_id=8b945ef10ea24755b83ac50cede405a0&response_type=code&redirect_uri=http://localhost:3000&scope=streaming%20user-read-email%20user-read-private%20user-library-read%20user-library-modify%20user-read-playback-state%20user-modify-playback-state"
+  "https://accounts.spotify.com/authorize?client_id=2adb8aafcdf54b30a8caee191d58ff23&response_type=code&redirect_uri=http://localhost:3000/premium&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() {
+export default function LoginPremium() {
   return (
     <Container
       className="d-flex justify-content-center align-items-center"

client/src/components/MainTab/Logout.js

@@ -0,0 +1,23 @@
+import { useContext } from 'react'
+import Cookies from 'js-cookie'
+import { AuthContext } from "../../context/AuthContext";
+
+function Logout() {
+  const { setAuth } = useContext(AuthContext);
+  const setLogin = (value) => {
+    localStorage.setItem("auth", value);
+    setAuth(value);
+  };
+  const logOutHandler = () => {
+    setLogin(false)
+    Cookies.remove('accessToken')
+  }
+
+  return (
+    <div>
+        <button type="button" className="btn btn-success" onClick={logOutHandler}>Log Out</button>
+    </div>
+  )
+}
+
+export default Logout

client/src/components/NavBar/NavBar.js

@@ -0,0 +1,38 @@
+import {NavLink} from "react-router-dom";
+import './navbar.css'
+
+function NavBar() {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light bg-light my-navbar">
+      <ul className="navbar-nav mr-auto">
+        <li>
+          <NavLink to="/" className="nav-link">
+            Home
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="/library" className="nav-link">
+            Library
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="/recommended" className="nav-link">
+            Recommended
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="/search" className="nav-link">
+            Search
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="/user" className="nav-link">
+            User
+          </NavLink>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default NavBar;

client/src/components/NavBar/navbar.css

@@ -0,0 +1,5 @@
+.my-navbar ul {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}

client/src/components/RcmTab/RcmContainer.js

@@ -0,0 +1,13 @@
+import VnChildrenTab from './VnChildrenTab'
+import VnTest from './VnTest'
+
+function RcmContainer() {
+  return (
+    <div>
+        <VnChildrenTab id="5cj0lLjcoR7YOSnhnX0Po5" />
+        <VnTest />
+    </div>
+  )
+}
+
+export default RcmContainer

client/src/components/RcmTab/VnChildrenTab.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Artist } from 'react-spotify-api';
+
+function VietnamTab({id}) {
+    return (<Artist id={id}>
+    {({ data, loading, error }) =>
+      data ? (
+        <div>
+          <h1>{data.name}</h1>
+          <ul>
+            {data.genres.map(genre => (
+              <li key={genre}>{genre}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null
+    }
+  </Artist>)
+}
+
+export default VietnamTab

client/src/components/RcmTab/VnTest.js

@@ -0,0 +1,49 @@
+import {spotifyApi} from '../../spotify/spotifyApi'
+import Cookies from 'js-cookie'
+
+function VnTest() {
+    const accessToken = Cookies.get('accessToken')
+    spotifyApi.setAccessToken(accessToken)
+    // new release nhạc việt
+    // spotifyApi.getNewReleases({ limit : 5, offset: 0, country: 'VN' })
+    // .then(res=>console.log(res.body))
+    // .catch(err => console.error(err))
+
+    // nhạc pop việt nam
+    // spotifyApi.getPlaylistsForCategory('pop', {
+    //     country: 'VN',
+    //     limit : 2,
+    //     offset : 0
+    //   })
+    // .then(function(data) {
+    //   console.log(data.body);
+    // }, function(err) {
+    //   console.log("Something went wrong!", err);
+    // });
+
+    // Vietnam recommendation
+    // spotifyApi.getRecommendations({
+    //     min_energy: 0.4,
+    //     seed_artists: ['5FWPIKz9czXWaiNtw45KQs', '3swW6OR2g7qTY3626sqVW4'],
+    //     min_popularity: 50
+    //   })
+    // .then(function(data) {
+    //   let recommendations = data.body;
+    //   console.log(recommendations);
+    // }, function(err) {
+    //   console.log("Something went wrong!", err);
+    // });
+
+    // Đàm Vĩnh Hưng
+    // spotifyApi
+    // .getArtistAlbums('4ht0wODL01ELRxlDYvsFad', { limit: 10 })
+    // .then(res=>console.log(res.body))
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default VnTest