Merge pull request #10 from Ben8t/feat/music_library

Feat/music library
Ben8t · Sep 24, 2023 · 14f5d3a · 14f5d3a
2 parents 2ff2e95 + 39cfd8f
commit 14f5d3a
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "prettier:write": "prettier --check --write './**/*'"
   },
   "dependencies": {
+    "axios": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "reactflow": "^11.8.3"

diff --git a/src/CustomNode.tsx b/src/CustomNode.tsx
@@ -16,8 +16,8 @@ function CustomNode({ data, isConnectable }) {
         className="h-3 w-3 bg-purple"
       />
       <div>
-        <label>{data.label}</label>
-        <hr />
+        <img src={data.image} style={{ width: '20%'}} /> <span>{data.title} - {data.artist}</span>
+        <hr className='h-px my-2 bg-light-purple border-0'/>
         <span>Key: {data.key}</span>
         <span>BPM: {data.bpm}</span>
         <span>Style: {data.style}</span>

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -1,4 +1,6 @@
+
 function Header() {
+
   return (
     <div className="header mb-5">
       <h1 className="title font-mono text-3xl font-bold">Track Lineage</h1>
@@ -7,3 +9,4 @@ function Header() {
 }
 
 export default Header
+
diff --git a/src/Search.tsx b/src/Search.tsx
@@ -1,10 +1,68 @@
-import SearchList from './SearchList.tsx'
+import SearchList from './SearchList.tsx';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+
+const CLIENT_ID = "0350c90137454dc5a748549664e5ba75"
+const REDIRECT_URI = "http://localhost:5173"
+const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize"
+const RESPONSE_TYPE = "token"
 
 function Search({ nodes, setNodes }: Props) {
+
+  const [token, setToken] = useState("")
+
+  useEffect(() => {
+    const hash = window.location.hash
+    let token = window.localStorage.getItem("token")
+
+    if (!token && hash) {
+      token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]
+
+      window.location.hash = ""
+      window.localStorage.setItem("token", token)
+    }
+
+    setToken(token)
+
+  }, [])
+
+  const logout = () => {
+    setToken("")
+    window.localStorage.removeItem("token")
+  }
+
+  const [searchKey, setSearchKey] = useState("")
+  const [tracks, setTracks] = useState([])
+
+  const searchTracks = async (e) => {
+    e.preventDefault()
+    const { data } = await axios.get("https://api.spotify.com/v1/search", {
+      headers: {
+        Authorization: `Bearer ${token}`
+      },
+      params: {
+        q: searchKey,
+        type: "track"
+      }
+    })
+    console.log(data)
+    setTracks(data.tracks.items)
+
+  }
+
   return (
-    <div className="search rounded-lg bg-gray-100">
-      <span className="text-1xl font-mono font-bold">Search</span>
-      <SearchList nodes={nodes} setNodes={setNodes} />
+    <div className="search bg-gray-100 rounded-lg">
+      {!token ?
+        <a className="mb-2 font-mono col-span-1 bg-purple hover:bg-purple-700 text-white font-bold py-2 px-4 rounded" href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}>Login
+          to Spotify</a>
+        : <button className="mb-2 font-mono col-span-1 bg-purple hover:bg-purple-700 text-white font-bold py-2 px-4 rounded" onClick={logout}>Logout</button>}
+      <form onSubmit={searchTracks} className="form grid grid-cols-6 gap-2">
+        <input type="text" onChange={e => setSearchKey(e.target.value)} class="col-span-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
+        <button className="col-span-2 font-mono col-span-1 bg-purple hover:bg-purple-700 text-white font-bold py-2 px-4 rounded" type={"submit"}>Search</button>
+      </form>
+      <hr className='h-px my-2 bg-light-purple border-0' />
+      <SearchList nodes={nodes} setNodes={setNodes} tracks={tracks} />
     </div>
   )
 }

diff --git a/src/SearchList.tsx b/src/SearchList.tsx
@@ -6,40 +6,33 @@ type Props = {
   nodes: Node[]
   setNodes: React.Dispatch<React.SetStateAction<Node[]>>
 }
-function SearchList({ nodes, setNodes }: Props) {
-  function onSubmit(node, event: FormEvent<HTMLFormElement>) {
+function SearchList({ nodes, setNodes, tracks}: Props) {
+
+  function onSubmit(track, event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
-    console.log(node)
+    console.log(track)
     setNodes(
       nodes.concat({
-        id: node.id,
-        type: 'customNode',
-        data: {
-          label: node.data.label,
-          bpm: node.data.bpm,
-          key: node.data.key,
-          style: node.data.style,
-        },
+        id: track.id,
+        type: "customNode",
+        data: { title: track.name, artist: track.artists[0].name, bpm: "110", key: "Eb", style: "Disco", image: track.album.images[0].url },
         position: { x: 500, y: 25 },
       }),
     )
   }
 
   return (
-    <div className="overflow-auto" style={{ width: '100%', height: '20rem' }}>
-      {node_library.map((node) => (
-        <div className="m-2 max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
-          <form
-            className="form grid grid-cols-2"
-            onSubmit={(e) => onSubmit(node, e)}
-            key={node.id}
-          >
+    <div className='overflow-auto' style={{ width: '100%', height: '50rem' }}>
+      {tracks.map(track => (
+        <div className="max-w-sm p-6 m-2 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+          <form className="form grid grid-cols-2" onSubmit={(e) => onSubmit(track, e)} key={track.id}>
             <div>
-              <p
-                className="font-mono font-normal text-purple dark:text-gray-400"
-                key={node.data.label}
-              >
-                {node.data.label}
+              <p className="font-mono font-normal text-purple dark:text-gray-400" key={track.name}>
+                <img src={track.album.images[0].url} style={{ width: '50%'}} />
+                {track.name}
+              </p>
+              <p className="font-mono font-normal text-purple dark:text-gray-400" key={track.artists[0].name}>
+                {track.artists[0].name}
               </p>
             </div>
             <div>

diff --git a/src/nodes.tsx b/src/nodes.tsx
@@ -1,12 +1,16 @@
-function create_library(nb_title: number) {
-  var tmp = []
-  for (let i = 0; i < nb_title; i++) {
-    const node = {
-      id: `${i}`,
-      sourcePosition: 'right',
-      targetPosition: 'left',
-      data: { label: `Title ${i}`, bpm: '110', key: 'Eb', style: 'Disco' },
-      position: { x: 500, y: 100 },
+
+
+function create_library(nb_title: number){
+    var tmp = [];
+    for (let i = 0; i < nb_title; i++) {
+        const node = {
+            id: `${i}`,
+            sourcePosition: 'right',
+            targetPosition: 'left',
+            data: { title: `Title ${i}`, artist: `Artist ${i*2}`, bpm: '110', key: 'Eb', style:'Disco' },
+            position: { x: 500, y: 100 },
+        };
+        tmp.push(node);
     }
     tmp.push(node)
   }