Completed the entire logic, will start on styling the app

package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -2,53 +2,86 @@ import React, {useState, useEffect} from 'react'
 import SearchBar from './Presentational/SearchBar'
 import Tracklist from './Presentational/Tracklist';
 import Playlist from './Presentational/Playlist';
-import { songMock } from './songMock';
+import { getSpotifyToken, parseSpotifyData, uploadPlaylist } from './Spotify';
 
 function App() {
 
-  const [result, setResult] = useState('');
-  const handleQuery = ({target}) => {
-    const value = target.value;
-    setResult(value);
-  }
-
+  // Search query
+  const [searchTerm, setSearchTerm] = useState('');
+    const handleQuery = ({ target }) => setSearchTerm(target.value);
+
+  // Search results
   const [tracklist, setTracklist] = useState([]);
-  const handleSubmit = e => {
-    e.preventDefault();
-    setTracklist(songMock);
-  }
+  const showResults = searchResults => setTracklist(searchResults);
 
+  // Playlist creation
   const [playlist, setPlaylist] = useState([]);
-
   const addToPlaylist = item => {
-    const {song, artist, id} = item;
+    const {song, artist, id, uri, album} = item;
     setPlaylist((prev) => [
       ...prev, 
       {
         song: song,
         artist: artist,
-        id: id
+        id: id,
+        uri: uri,
+        album: album
       }
     ]);
   }
 
   const removeFromPlaylist = item => setPlaylist(prev => [...prev].filter(t => t.id !== item.id));
+  const accessToken = getSpotifyToken();
+
+  useEffect(() => {
+    const fetchData = async () => {
 
+        if (searchTerm.trim() === "") {
+            return;
+        }
+
+        try {
+            const response = await fetch(`https://api.spotify.com/v1/search?type=track&q=${searchTerm}`, {
+                method: 'GET',
+                headers: {
+                    "Authorization": `Bearer ${accessToken}`
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error('Invalid network response.');
+            }
+
+            const data = await response.json();
+            const searchResults = parseSpotifyData(data);
+            showResults(searchResults);
+        } catch (error) {
+            console.error('Error fetching data from Spotify API: ', error.message);
+        }
+    };
+
+    fetchData();
+}, [searchTerm, showResults]);
+
+  // Search query handling
   const [name, setName] = useState('');
   const handleChange = ({target}) => {
     const value = target.value;
     setName(value);
   }
 
-  const saveToSpotify = e => {
-    e.preventDefault();
-
+  // this one uploads the playlist to Spotify profile
+  const saveToSpotify = async () => {
+    const trackURIs = playlist.map(track => track.uri)
+    await uploadPlaylist(name, trackURIs);
+    setName(name)
+    setPlaylist([]);
   }
 
   return (
     <div style={{margin: '0 5%'}}>
       <h1>JAMMMING</h1>
-      <SearchBar showResults={handleSubmit} result={result} setQuery={handleQuery} />
+      <SearchBar showResults={showResults} searchTerm={searchTerm} handleQuery={handleQuery} />
       <div style={{display: 'flex'}}>
         <Tracklist tracklist={tracklist} addToPlaylist={addToPlaylist} />
         <Playlist playlist={playlist} removeFromPlaylist={removeFromPlaylist} name={name} changeName={handleChange} saveToSpotify={saveToSpotify} />

src/Presentational/Playlist.js

@@ -4,13 +4,13 @@ import Track from "./Track";
 export default function Playlist({playlist, removeFromPlaylist, name, changeName, saveToSpotify}) {
     return (
         <div>
-            <form onSubmit={saveToSpotify}>
+            <form onSubmit={(e) => { e.preventDefault(); saveToSpotify(); }}>
                 <h2>{name}</h2>
                 <input type="text" placeholder="Name your playlist" value={name} onChange={changeName} required />
                 <ul>
                     {playlist.map(track => (
                         <li key={track.id}>
-                            <Track song={track.song} artist={track.artist} />
+                            <Track song={track.song} artist={track.artist} album={track.album} />
                             <button onClick={() => removeFromPlaylist(track)}>-</button>
                         </li>
                     ))}

src/Presentational/SearchBar.js

@@ -1,10 +1,10 @@
 import React from 'react'
 
-export default function SearchBar({showResults, result, setQuery}) {
+
+export default function SearchBar({showResults, searchTerm, handleQuery}) {
     return (
         <form onSubmit={showResults}>
-            <input type="text" required value={result} onChange={setQuery} />
-            <input type="submit" value="Search songs" />
+            <input type="text" required value={searchTerm} onChange={handleQuery} />
         </form>
     )
 }

src/Presentational/Track.js

@@ -1,10 +1,10 @@
 import React from 'react'
 
-function Track({song, artist, id}) {
+function Track({song, artist, id, album}) {
    return (
     <div key={id}>
         <h3>{song}</h3>
-        <p>{artist}</p>    
+        <p>{artist} | {album}</p>    
     </div>
    )
 }

src/Presentational/Tracklist.js

@@ -2,16 +2,20 @@ import React from 'react';
 import Track from './Track';
 
 function Tracklist({tracklist, addToPlaylist}) {
-    return (
-        <ul>
-          {tracklist.map(track => (
-            <li key={track.id}>
-              <Track song={track.song} artist={track.artist} />
-              <button onClick={() => addToPlaylist(track)}>+</button> 
-            </li>
-          ))}
-        </ul>
-      );
+  return (
+    <ul>
+      {tracklist && tracklist.length > 0 ? (
+        tracklist.map((track) => (
+          <li key={track.id}>
+            <Track song={track.song} artist={track.artist} album={track.album} />
+            <button onClick={() => addToPlaylist(track)}>+</button>
+          </li>
+        ))
+      ) : (
+        <p>No tracks available</p>
+      )}
+    </ul>
+  );
 }
 
 export default Tracklist;