From 185a1b24a1b9aa1abc4dd0d98b81c11fd92668e3 Mon Sep 17 00:00:00 2001
From: Caley <caley@thegoffexperiment.com>
Date: Fri, 14 Apr 2023 18:12:02 -0500
Subject: [PATCH 1/2] fix(current_playlist_dialog): this PR adds a current
 playlist dialog to allow users to quickly see the current playlist that is
 saved in state.

---
 src/App.js | 79 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 71a37c4..4705e4d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,7 @@ class App extends Component {
     super(props);
     this.state = {
       discoveries: [],
-      groups: [],               // Currently duscovered patterns and their controllers
+      groups: [],               // Currently discovered patterns and their controllers
       runningPatternName: null,
       playlist: [],             // Browser-persisted single playlist singleton
       playlistIndex: 0,
@@ -19,9 +19,10 @@ class App extends Component {
       cloneSource: null,
       cloneDest: {},
       cloneInProgress: false,
-      showDevControls: false
+      showDevControls: false,
+      showCurrentPlaylist: false,
     }
-    // The playlist is the only thing currently persisted and it is per-broswer
+    // The playlist is the only thing currently persisted, and it is per-browser
     this.state.playlist = JSON.parse(localStorage.getItem(PLAYLIST_KEY)) || []
 
     if (this.state.playlist.length) {
@@ -33,6 +34,7 @@ class App extends Component {
     this._playlistInterval = null
 
     this.cloneDialogRef = React.createRef();
+    this.playlistDialogRef = React.createRef();
   }
 
   async poll() {
@@ -207,7 +209,20 @@ class App extends Component {
       this.cloneDialogRef.current && this.cloneDialogRef.current.scrollIntoView(true);
     }, 100)
   }
-
+  openPlaylistDialog = async (event) => {
+    event.preventDefault();
+    this.setState({
+      showCurrentPlaylist: true
+    });
+    setTimeout(() => {
+      this.playlistDialogRef.current && this.playlistDialogRef.current.scrollIntoView(true);
+    }, 100)
+    if( this.state.showCurrentPlaylist === true ) {
+      this.setState({
+        showCurrentPlaylist: false
+      });
+    }
+  }
   closeCloneDialog = async (event) => {
     event.preventDefault();
     this.setState({
@@ -260,7 +275,6 @@ class App extends Component {
     }
   }
 
-
   render() {
     let cloneDialog = null;
     if (this.state.cloneSource) {
@@ -309,6 +323,46 @@ class App extends Component {
           </div>
       )
     }
+    let playlistDialog = null
+    if (this.state.showCurrentPlaylist) {
+      playlistDialog = (
+        <div className="row" ref={this.playlistDialogRef}>
+          <div className="col-lg-8">
+            <div className="card" >
+              <div className="card-body">
+                <h5 className="card-title">Current Playlist</h5>
+                <div className="row no-gutters align-items-center">
+                  <div className="col-md-7 p-0">
+                    <p>Pattern</p>
+                  </div>
+                  <div className="col-md-1 align-items-center row py-0 pr-0 text-left">
+                    <p>Duration(seconds)</p>
+                  </div>
+                </div>
+                {(this.state.playlist).map( pattern =>
+                  <>
+                    <div className="row no-gutters list-group-item py-0 pr-0">
+                      <div className="row align-items-center">
+                        <div className="col-md-6 p-0">
+                          <div className="p-2 m-auto">
+                            {pattern.name}
+                          </div>
+                        </div>
+                        <div className="col-md-1 py-0 pr-0 row no-gutters text-left">
+                          <div className="p-2 m-auto">
+                            {pattern.duration}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
 
     return (
         <div className="container">
@@ -350,8 +404,15 @@ class App extends Component {
             <hr/>
 
             {cloneDialog}
-
-            <h3>Patterns</h3>
+            {playlistDialog}
+            <h3>
+              Patterns
+              <button
+                  className="btn btn-secondary float-right text-left"
+                  onClick={(e) => this.openPlaylistDialog(e)}>
+                View Current Playlist
+              </button>
+            </h3>
             <div className="list-group">
               {this.state.groups.map((pattern) => {
                 const getStatus = () => {
@@ -363,7 +424,7 @@ class App extends Component {
                     return 'available'
                   }
                 }
-                const getDuraton = () => {
+                const getDuration = () => {
                   const playlistIndex = _(this.state.playlist).findIndex(['name', pattern.name])
                   if (playlistIndex === -1) return ''
                   return this.state.playlist[playlistIndex].duration
@@ -378,7 +439,7 @@ class App extends Component {
                     handleAddClick={this._handleAddClick}
                     status={getStatus()}
                     showDurations={(this.state.playlist.length > 1)}
-                    duration={getDuraton()}
+                    duration={getDuration()}
                   />
                 )
               })}

From 6e009843a5bb7b27f2612ee8320fe1ff41bcfab7 Mon Sep 17 00:00:00 2001
From: Caley <caley@thegoffexperiment.com>
Date: Sun, 16 Apr 2023 22:28:23 -0500
Subject: [PATCH 2/2] fix(current_playlist_dialog): adding index to dialog for
 uniqueness

---
 src/App.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4705e4d..7edfd9c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -339,23 +339,21 @@ class App extends Component {
                     <p>Duration(seconds)</p>
                   </div>
                 </div>
-                {(this.state.playlist).map( pattern =>
-                  <>
-                    <div className="row no-gutters list-group-item py-0 pr-0">
-                      <div className="row align-items-center">
-                        <div className="col-md-6 p-0">
-                          <div className="p-2 m-auto">
-                            {pattern.name}
-                          </div>
+                {(this.state.playlist).map( (pattern, index) =>
+                  <div className="row no-gutters list-group-item py-0 pr-0" key={index}>
+                    <div className="row align-items-center">
+                      <div className="col-md-6 p-0">
+                        <div className="p-2 m-auto">
+                          {pattern.name}
                         </div>
-                        <div className="col-md-1 py-0 pr-0 row no-gutters text-left">
-                          <div className="p-2 m-auto">
-                            {pattern.duration}
-                          </div>
+                      </div>
+                      <div className="col-md-1 py-0 pr-0 row no-gutters text-left">
+                        <div className="p-2 m-auto">
+                          {pattern.duration}
                         </div>
                       </div>
                     </div>
-                  </>
+                  </div>
                 )}
               </div>
             </div>