Merge pull request #12 from rrk0804/Recs-By-Metrics

Recommendations By Selected Metrics

package.json

@@ -11,12 +11,14 @@
   "devDependencies": {
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
+    "@types/react-modal": "^3.16.3",
     "spicetify-creator": "^1.0.17"
   },
   "dependencies": {
     "@spotify/web-api-ts-sdk": "^1.2.0",
     "@types/jquery": "^3.5.31",
     "jquery": "^3.7.1",
-    "react-circular-progressbar": "^2.1.0"
+    "react-circular-progressbar": "^2.1.0",
+    "react-modal": "^3.16.1"
   }
 }

src/components/DynamicRecommendations.tsx

@@ -4,6 +4,7 @@ import getRecommendations from "../services/dynamicRecommendationsService";
 import { GetRecommendationsInput, GetRecommendationsResponse } from "../types/spotify-web-api.d";
 import getID from './../services/common';
 import RecommendedTrack from "./RecommendedTrack";
+import { RecommendationsRender } from "../services/enhancifyInternalService";
 
 class DynamicRecommendations extends React.Component<{recTargetProp : string}, {songQueue: Array<string>, artistQueue: Array<string>, recTarget: string, recommendations: GetRecommendationsResponse | {}}> {
 
@@ -153,24 +154,7 @@ class DynamicRecommendations extends React.Component<{recTargetProp : string}, {
             <div className={styles.recommendationTarget}>{this.props.recTargetProp}</div>
           </div>
           <div className={styles.recommendationsBlock}>
-            {function(recommendations : GetRecommendationsResponse | {}) {
-              if (Object.keys(recommendations).length == 0) {
-                return;
-              }
-              let recs = (recommendations as GetRecommendationsResponse)["tracks"];
-              let recommendedTracksHTML = [];
-              for (let i = 0; i < 6; i++) {
-                let recommendedSong = <RecommendedTrack songCover={recs[i].album.images[0].url}
-                                                        songAlbum={recs[i].album.name}
-                                                        songName={recs[i].name}
-                                                        songArtists={recs[i].artists.map((artist) => artist.name)}
-                                                        songURI={recs[i].uri}
-                                                        key={i}>
-                                      </RecommendedTrack>;
-                recommendedTracksHTML.push(recommendedSong);
-              }
-              return recommendedTracksHTML;
-            }(this.state.recommendations)}
+            {RecommendationsRender(this.state.recommendations)}
           </div>
         </div>
       </>