From e2f57a1a2f393ab192a642f0187b21dd727fb2a4 Mon Sep 17 00:00:00 2001
From: Benoit Pimpaud <pimpaudben@gmail.com>
Date: Fri, 29 Sep 2023 21:37:20 +0200
Subject: [PATCH 1/3] [refactor] use function instead of const notation

---
 src/Search.tsx | 273 ++++++++++++++++++++++++-------------------------
 1 file changed, 131 insertions(+), 142 deletions(-)

diff --git a/src/Search.tsx b/src/Search.tsx
index f11b49b..62f3e2d 100644
--- a/src/Search.tsx
+++ b/src/Search.tsx
@@ -1,158 +1,147 @@
 import React from 'react';
 import SearchList from './SearchList.tsx'
-import { useContext, useState } from 'react'
+import {useContext, useState} from 'react'
 import axios from 'axios'
-import { SpotifyContext } from './context/SpotifyContext.tsx'
-import { FlowContext } from './context/FlowContext.tsx'
-import { saveAs } from 'file-saver';
+import {SpotifyContext} from './context/SpotifyContext.tsx'
+import {FlowContext} from './context/FlowContext.tsx'
+import {saveAs} from 'file-saver';
 
 const CLIENT_ID = '0350c90137454dc5a748549664e5ba75'
 const REDIRECT_URI = window.location.href
-console.log(REDIRECT_URI);
 const AUTH_ENDPOINT = 'https://accounts.spotify.com/authorize'
 const RESPONSE_TYPE = 'token'
 
 function Search() {
-  const { token, logout } = useContext(SpotifyContext)
-  const { nodes, setNodes, edges, setEdges } = useContext(FlowContext)
-
-  const [searchKey, setSearchKey] = useState('')
-  const [tracks, setTracks] = useState([])
-
-  const getTrackFeatures = async (token, trackId) => {
-    const response = await axios.get(`https://api.spotify.com/v1/audio-features/${trackId}`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      }
-    });
-  
-    return response.data;
-  };
-
-  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',
-      },
-    })
-
-    const trackItems = data.tracks.items;
-
-    const trackFeaturesPromises = trackItems.map(async (item) => {
-      const features = await getTrackFeatures(token, item.id);
-      return {
-        track: item,
-        features: features
-      };
-    });
-  
-    const trackFeatures = await Promise.all(trackFeaturesPromises);
-
-    setTracks(trackFeatures)
-  }
-
-  const handleExport = (e) => {
-    const data = {
-      nodes: nodes,
-      edges: edges
+    const {token, logout} = useContext(SpotifyContext)
+    const {nodes, setNodes, edges, setEdges} = useContext(FlowContext)
+
+    const [searchKey, setSearchKey] = useState('')
+    const [tracks, setTracks] = useState([])
+
+    async function getTrackFeatures(token, track_id) {
+        const response = await axios.get(`https://api.spotify.com/v1/audio-features/${track_id}`, {
+            headers: {
+                Authorization: `Bearer ${token}`
+            }
+        });
+        return response.data;
     };
 
-    const json = JSON.stringify(data);
-    const blob = new Blob([json], { type: 'application/json' });
-
-    saveAs(blob, 'track_lineage_export.json');
-  }
-
-  const fileInputRef = React.createRef();
-
-  const handleImportButtonClick = () => {
-    fileInputRef.current.click();
-  };
-
-  const handleImport = (event) => {
-    const file = event.target.files[0];
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-      try {
-        const data = JSON.parse(e.target.result);
-
-        if (data.nodes && data.edges) {
-          setNodes(data.nodes);
-          setEdges(data.edges);
-          alert('Import successful!');
-        } else {
-          alert('Invalid file format. Please select a valid JSON file.');
+    async function searchTracks(e) {
+        e.preventDefault()
+        const {data} = await axios.get('https://api.spotify.com/v1/search', {
+            headers: {
+                Authorization: `Bearer ${token}`
+            },
+            params: {
+                q: searchKey,
+                type: 'track'
+            }
+        })
+
+        const trackItems = data.tracks.items;
+
+        const trackFeaturesPromises = trackItems.map(async (item) => {
+            const features = await getTrackFeatures(token, item.id);
+            return {track: item, features: features};
+        });
+        const trackFeatures = await Promise.all(trackFeaturesPromises);
+
+        setTracks(trackFeatures)
+    }
+
+    function handleExport(e) {
+        const data = {
+            nodes: nodes,
+            edges: edges
+        };
+        const json = JSON.stringify(data);
+        const blob = new Blob([json], {type: 'application/json'});
+        saveAs(blob, 'track_lineage_export.json');
+    }
+
+    const fileInputRef = React.createRef();
+
+    function handleImportButtonClick() {
+        fileInputRef.current.click();
+    }
+
+
+    function handleImport(event) {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+            try {
+                const data = JSON.parse(e.target.result);
+
+                if (data.nodes && data.edges) {
+                    setNodes(data.nodes);
+                    setEdges(data.edges);
+                    alert('Import successful!');
+                } else {
+                    alert('Invalid file format. Please select a valid JSON file.');
+                }
+            } catch (error) {
+                alert('Error parsing JSON. Please check the file format.');
+            }
+        };
+
+        reader.readAsText(file);
+    }
+
+    return (
+        <div className="search rounded-lg bg-gray-100 gap-2">
+            {
+            !token ? (
+                <a className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+                    href={
+                        `${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`
+                }>
+                    Login to Spotify
+                </a>
+            ) : (
+                <button className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+                    onClick={logout}>
+                    Logout
+                </button>
+            )
         }
-      } catch (error) {
-        alert('Error parsing JSON. Please check the file format.');
-      }
-    };
-
-    reader.readAsText(file);
-  };
-
-  return (
-    <div className="search rounded-lg bg-gray-100 gap-2">
-      {!token ? (
-        <a
-          className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
-          href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}
-        >
-          Login to Spotify
-        </a>
-      ) : (
-        <button
-          className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
-          onClick={logout}
-        >
-          Logout
-        </button>
-      )}
-      <div>
-      <button
-          className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
-          onClick={handleImportButtonClick}
-        >
-          Import
-      </button>
-      <input
-        type="file"
-        accept=".json"
-        ref={fileInputRef}
-        style={{ display: 'none' }}
-        onChange={handleImport}
-      />
-      </div>
-      
-      <button
-          className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
-          onClick={handleExport}
-        >
-          Export
-      </button>
-      <form onSubmit={searchTracks} className="form grid grid-cols-6 gap-2">
-        <input
-          type="text"
-          onChange={(e) => setSearchKey(e.target.value)}
-          className="col-span-4 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-        />
-        <button
-          className="hover:bg-purple-700 col-span-1 col-span-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
-          type={'submit'}
-        >
-          Search
-        </button>
-      </form>
-      <hr className="my-2 h-px border-0 bg-light-purple" />
-      <SearchList nodes={nodes} setNodes={setNodes} tracks={tracks} />
-    </div>
-  )
+            <div>
+                <button className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+                    onClick={handleImportButtonClick}>
+                    Import
+                </button>
+                <input type="file" accept=".json"
+                    ref={fileInputRef}
+                    style={
+                        {display: 'none'}
+                    }
+                    onChange={handleImport}/>
+            </div>
+
+            <button className="hover:bg-purple-700 col-span-1 mb-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+                onClick={handleExport}>
+                Export
+            </button>
+            <form onSubmit={searchTracks}
+                className="form grid grid-cols-6 gap-2">
+                <input type="text"
+                    onChange={
+                        (e) => setSearchKey(e.target.value)
+                    }
+                    className="col-span-4 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"/>
+                <button className="hover:bg-purple-700 col-span-1 col-span-2 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
+                    type={'submit'}>
+                    Search
+                </button>
+            </form>
+            <hr className="my-2 h-px border-0 bg-light-purple"/>
+            <SearchList nodes={nodes}
+                setNodes={setNodes}
+                tracks={tracks}/>
+        </div>
+    )
 }
 
 export default Search

From 54bbfbc5b46ee71e935264dafb3a2e16d3d7feb2 Mon Sep 17 00:00:00 2001
From: Benoit Pimpaud <pimpaudben@gmail.com>
Date: Fri, 29 Sep 2023 21:37:51 +0200
Subject: [PATCH 2/3] [style] format doc

---
 src/SearchList.tsx | 198 ++++++++++++++++++++++++---------------------
 1 file changed, 106 insertions(+), 92 deletions(-)

diff --git a/src/SearchList.tsx b/src/SearchList.tsx
index 309ca88..4f4e12c 100644
--- a/src/SearchList.tsx
+++ b/src/SearchList.tsx
@@ -1,102 +1,116 @@
-import { FormEvent } from 'react'
-import { Node } from 'reactflow'
+import {FormEvent} from 'react'
+import {Node} from 'reactflow'
 
 type Props = {
-  nodes: Node[]
-  setNodes: React.Dispatch<React.SetStateAction<Node[]>>
+    nodes: Node[] setNodes: React.Dispatch < React.SetStateAction < Node[] >>
 }
 
 function getKey(key) {
-  switch(key) {
-    case 0:
-      return 'C';
-    case 1:
-      return 'C#/Db';
-    case 2:
-      return 'D';
-    case 3:
-      return 'D#/Eb';
-    case 4:
-      return 'E';
-    case 5:
-      return 'F';
-    case 6:
-      return 'F#/Gb';
-    case 7:
-      return 'G';
-    case 8:
-      return 'G#/Ab';
-    case 9:
-      return 'A';
-    case 10:
-      return 'A#/Bb';
-    case 11:
-      return 'B'
-    default:
-      return 'KEY';
-  }
+    switch (key) {
+        case 0:
+            return 'C';
+        case 1:
+            return 'C#/Db';
+        case 2:
+            return 'D';
+        case 3:
+            return 'D#/Eb';
+        case 4:
+            return 'E';
+        case 5:
+            return 'F';
+        case 6:
+            return 'F#/Gb';
+        case 7:
+            return 'G';
+        case 8:
+            return 'G#/Ab';
+        case 9:
+            return 'A';
+        case 10:
+            return 'A#/Bb';
+        case 11:
+            return 'B'
+        default:
+            return 'KEY';
+    }
 }
-function SearchList({ nodes, setNodes, tracks }: Props) {
-  function onSubmit(track, event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setNodes(
-      nodes.concat({
-        id: track.track.id,
-        type: 'customNode',
-        data: {
-          title: track.track.name,
-          artist: track.track.artists[0].name,
-          bpm: track.features.tempo,
-          key: getKey(track.features.key),
-          image: track.track.album.images[0].url,
-        },
-        position: { x: 500, y: 25 },
-      }),
-    )
-  }
+function SearchList({nodes, setNodes, tracks} : Props) {
+    function onSubmit(track, event : FormEvent < HTMLFormElement >) {
+        event.preventDefault()
+        setNodes(nodes.concat({
+            id: track.track.id,
+            type: 'customNode',
+            data: {
+                title: track.track.name,
+                artist: track.track.artists[0].name,
+                bpm: track.features.tempo,
+                key: getKey(track.features.key),
+                image: track.track.album.images[0].url
+            },
+            position: {
+                x: 500,
+                y: 25
+            }
+        }),)
+    }
 
-  return (
-    <div className="overflow-auto" style={{ width: '100%', height: '50rem' }}>
-      {tracks.map((track) => (
-        <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(track, e)}
-            key={track.track.id}
-          >
-            <div>
-              <p
-                className="font-mono font-normal text-purple dark:text-gray-400"
-                key={track.track.name}
-              >
-                <img src={track.track.album.images[0].url} style={{ width: '50%' }} />
-                {track.track.name}
-              </p>
-              <p
-                className="font-mono font-normal text-purple dark:text-gray-400"
-                key={track.track.artists[0].name}
-              >
-                {track.track.artists[0].name}
-              </p>
-              <p className="font-mono font-normal text-gray-800 dark:text-gray-400"
-                key={track.features.tempo}
-              >
-                BPM: {track.features.tempo}
-              </p>
-            </div>
-            <div>
-              <button
-                className="hover:bg-purple-700 col-span-1 rounded bg-purple px-4 py-2 font-mono font-bold text-white"
-                type="submit"
-              >
-                Add Track
-              </button>
-            </div>
-          </form>
-        </div>
-      ))}
-    </div>
-  )
+    return (
+        <div className="overflow-auto"
+            style={
+                {
+                    width: '100%',
+                    height: '50rem'
+                }
+        }>
+            {
+            tracks.map((track) => (
+                <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(track, e)
+                        }
+                        key={
+                            track.track.id
+                    }>
+                        <div>
+                            <p className="font-mono font-normal text-purple dark:text-gray-400"
+                                key={
+                                    track.track.name
+                            }>
+                                <img src={
+                                        track.track.album.images[0].url
+                                    }
+                                    style={
+                                        {width: '50%'}
+                                    }/> {
+                                track.track.name
+                            } </p>
+                            <p className="font-mono font-normal text-purple dark:text-gray-400"
+                                key={
+                                    track.track.artists[0].name
+                            }>
+                                {
+                                track.track.artists[0].name
+                            } </p>
+                            <p className="font-mono font-normal text-gray-800 dark:text-gray-400"
+                                key={
+                                    track.features.tempo
+                            }>
+                                BPM: {
+                                track.features.tempo
+                            } </p>
+                        </div>
+                        <div>
+                            <button className="hover:bg-purple-700 col-span-1 rounded bg-purple px-4 py-2 font-mono font-bold text-white" type="submit">
+                                Add Track
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            ))
+        } </div>
+    )
 }
 
 export default SearchList

From 5cb9dc1282139ffd95b84c7dc477867377cdce8c Mon Sep 17 00:00:00 2001
From: Benoit Pimpaud <pimpaudben@gmail.com>
Date: Fri, 29 Sep 2023 21:42:22 +0200
Subject: [PATCH 3/3] [refactor] format and fix import

---
 src/App.tsx        | 7 ++++---
 src/CustomNode.tsx | 1 +
 src/Flow.tsx       | 1 +
 src/Header.tsx     | 2 ++
 src/Search.tsx     | 6 +++---
 src/SearchList.tsx | 3 ++-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 176b4ac..f326182 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,9 @@
 import 'reactflow/dist/style.css'
 import './custom_node.css'
-import Header from './Header.tsx'
-import Flow from './Flow.tsx'
-import Search from './Search.tsx'
+import Header from './Header'
+import Flow from './Flow'
+import Search from './Search'
+import React from 'react'
 
 const App = () => {
   return (
diff --git a/src/CustomNode.tsx b/src/CustomNode.tsx
index 2d44007..eb2e294 100644
--- a/src/CustomNode.tsx
+++ b/src/CustomNode.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { Handle, Position } from 'reactflow'
 
 type NodeData = {
diff --git a/src/Flow.tsx b/src/Flow.tsx
index d8c2114..c23346d 100644
--- a/src/Flow.tsx
+++ b/src/Flow.tsx
@@ -13,6 +13,7 @@ import 'reactflow/dist/style.css'
 import './custom_node.css'
 import CustomNode from './CustomNode'
 import { FlowContext } from './context/FlowContext'
+import React from 'react'
 
 const Flow = () => {
   const { nodes, setNodes, edges, setEdges } = useContext(FlowContext)
diff --git a/src/Header.tsx b/src/Header.tsx
index 8be34af..5f67bca 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,3 +1,5 @@
+import React from "react"
+
 function Header() {
   return (
     <div className="header mb-5">
diff --git a/src/Search.tsx b/src/Search.tsx
index 62f3e2d..d71ff9f 100644
--- a/src/Search.tsx
+++ b/src/Search.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import SearchList from './SearchList.tsx'
+import SearchList from './SearchList'
 import {useContext, useState} from 'react'
 import axios from 'axios'
-import {SpotifyContext} from './context/SpotifyContext.tsx'
-import {FlowContext} from './context/FlowContext.tsx'
+import {SpotifyContext} from './context/SpotifyContext'
+import {FlowContext} from './context/FlowContext'
 import {saveAs} from 'file-saver';
 
 const CLIENT_ID = '0350c90137454dc5a748549664e5ba75'
diff --git a/src/SearchList.tsx b/src/SearchList.tsx
index 4f4e12c..ef3497e 100644
--- a/src/SearchList.tsx
+++ b/src/SearchList.tsx
@@ -2,7 +2,8 @@ import {FormEvent} from 'react'
 import {Node} from 'reactflow'
 
 type Props = {
-    nodes: Node[] setNodes: React.Dispatch < React.SetStateAction < Node[] >>
+    nodes: Node[];
+    setNodes: React.Dispatch < React.SetStateAction < Node[] >>;
 }
 
 function getKey(key) {