Clean up modal html

ECE49595-Team-6 · Oct 1, 2024 · 1632d6c · 1632d6c
1 parent 57445a5
commit 1632d6c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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>
+      </>
     );
   }
 }