From 2bdd78851b1e8a33103c4979e7461b8e7250a397 Mon Sep 17 00:00:00 2001
From: JuanSimon <jperez@mediastre.am>
Date: Tue, 1 Oct 2019 16:02:30 -0500
Subject: [PATCH] feature mark option selected

---
 src/App.css | 10 ++++++++++
 src/App.js  | 35 ++++++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 393872f..c594c63 100644
--- a/src/App.css
+++ b/src/App.css
@@ -55,6 +55,16 @@ button .active {
   font-size: 17px;
 }
 
+.selected-option {
+  box-shadow: none;
+  color: #000;
+  background-color: #ffffffcc;
+  border: none;
+  width: 140px;
+  padding: 24px;
+  font-size: 17px;
+}
+
 .App {
   height: 100vh;
   display: flex;
diff --git a/src/App.js b/src/App.js
index d901345..dca1c85 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,12 +34,14 @@ class App extends Component {
       audioUrl            : rainAudio,  // Default
       bgImg               : rainImg,
       desiredTime         : 120,        // Default
+      selectedTime        : 120,
+      selectedAudio       : 'Rain'
     }
   }
 
   timeSelect(x) {
     this.setState({
-      desiredTime : x.duration
+      desiredTime : x.duration,
     });
   }
 
@@ -63,28 +65,33 @@ class App extends Component {
 
     if (x === this.state.audioNames[1]){
       this.setState({
-        audioUrl  : forestAudio,
-        bgImg     : forestImg
+        audioUrl      : forestAudio,
+        bgImg         : forestImg,
+        selectedAudio : x
       });
     }else if (x === this.state.audioNames[2]) {
       this.setState({
-        audioUrl  : parkAudio,
-        bgImg     : parkImg
+        audioUrl      : parkAudio,
+        bgImg         : parkImg,
+        selectedAudio : x
       });
     }else if (x === this.state.audioNames[3]) {
       this.setState({
-        audioUrl  : streamAudio,
-        bgImg     : streamImg
+        audioUrl      : streamAudio,
+        bgImg         : streamImg,
+        selectedAudio : x
       });
     }else if (x === this.state.audioNames[4]) {
       this.setState({
-        audioUrl  : wavesAudio,
-        bgImg     : wavesImg
+        audioUrl      : wavesAudio,
+        bgImg         : wavesImg,
+        selectedAudio : x
       });
     }else {
       this.setState({
-        audioUrl  : rainAudio,
-        bgImg     : rainImg
+        audioUrl      : rainAudio,
+        bgImg         : rainImg,
+        selectedAudio : x
       });
     }
   }
@@ -99,12 +106,14 @@ class App extends Component {
   }
   render() {
     console.log(this.state.timeBtnClass);
+    const { selectedAudio, desiredTime } = this.state
+
     const timeOptions = this.state.timeValues.map((duration) =>
-      <button key={duration} onClick={ () => {this.timeSelect({duration})} }>{duration/60} Minutes</button>
+      <button key={duration} onClick={ () => {this.timeSelect({duration})} } className={desiredTime === duration ? 'selected-option' : undefined}>{duration/60} Minutes</button>
     );
 
     const audioOptions = this.state.audioNames.map((audioName) =>
-      <button key={audioName} onClick={ () => {this.audioSelect({audioName})} }>{audioName}</button>
+      <button key={audioName} onClick={ () => {this.audioSelect({audioName})} } className={selectedAudio === audioName ? 'selected-option' : undefined}>{audioName}</button>
     );
 
     return (