From 1632d6c0286bbaeef5dae6b487ded070b3ccdd50 Mon Sep 17 00:00:00 2001
From: Parikshith Mohite <parimohite1@gmail.com>
Date: Tue, 1 Oct 2024 17:12:39 -0400
Subject: [PATCH] Clean up modal html

---
 src/components/NowPlaying.tsx           | 5 ++++-
 src/components/RecommendationsModal.tsx | 8 +++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx
index 48c42ff..f2e42ca 100644
--- a/src/components/NowPlaying.tsx
+++ b/src/components/NowPlaying.tsx
@@ -7,6 +7,7 @@ import SongMetric from "./SongMetric";
 import { SelectedMetrics, SongMetricData } from "../types/enhancify";
 import { allMetrics, getSongMetrics } from "../services/enhancifyInternalService";
 import RecommendationsModal from "./RecommendationsModal";
+import Modal from 'react-modal';
 
 class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesResponse | {}, 
                                               songURI: string, 
@@ -231,7 +232,9 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
             })}
           </div>
         </div>
-        { this.state.modalIsOpen ? <RecommendationsModal modalIsOpen={this.state.modalIsOpen} setModalIsOpen={this.setModalIsOpen} songURI={this.state.songURI} selectedMetrics={this.state.selectedMetrics}></RecommendationsModal> : <></> }
+        <Modal className={styles.modal} isOpen={this.state.modalIsOpen} onRequestClose={() => this.setModalIsOpen(false)}>
+          <RecommendationsModal setModalIsOpen={this.setModalIsOpen} songURI={this.state.songURI} selectedMetrics={this.state.selectedMetrics}/>
+        </Modal>
       </>
     );
   }
diff --git a/src/components/RecommendationsModal.tsx b/src/components/RecommendationsModal.tsx
index 26292b8..907230c 100644
--- a/src/components/RecommendationsModal.tsx
+++ b/src/components/RecommendationsModal.tsx
@@ -1,13 +1,11 @@
-import styles from "../css/app.module.scss";
 import React from "react"; 
-import Modal from 'react-modal';
 import { GetRecommendationsInput, GetRecommendationsResponse, RecommendationsInput } from "../types/spotify-web-api.d";
 import getRecommendations from "../services/dynamicRecommendationsService";
 import { SelectedMetrics } from "../types/enhancify";
 import getID from './../services/common';
 import { RecommendationsRender } from "../services/enhancifyInternalService";
 
-class RecommendationsModal extends React.Component<{modalIsOpen: boolean, setModalIsOpen: (value: boolean) => void, songURI: string, selectedMetrics: SelectedMetrics}, {recommendations: GetRecommendationsResponse | {}}> {
+class RecommendationsModal extends React.Component<{setModalIsOpen: (value: boolean) => void, songURI: string, selectedMetrics: SelectedMetrics}, {recommendations: GetRecommendationsResponse | {}}> {
 
   state = {
     recommendations: {} // Recommendations that show up in the modal view
@@ -39,10 +37,10 @@ class RecommendationsModal extends React.Component<{modalIsOpen: boolean, setMod
 
   render() {
     return (
-      <Modal className={styles.modal} isOpen={this.props.modalIsOpen} onRequestClose={() => this.props.setModalIsOpen(false)}>
+      <>
         <button onClick={() => this.props.setModalIsOpen(false)}>close</button>
         {RecommendationsRender(this.state.recommendations)}
-      </Modal>
+      </>
     );
   }
 }