artists page relevancy enhancements (#36)

* artists page relevancy enhancements * fix lint * match dropdown list to display list * fix lint
AnalogStudiosRI · Nov 19, 2021 · 50c332f · 50c332f
1 parent b551b27
commit 50c332f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -58,7 +58,7 @@ class CardComponent extends LitElement {
                   <div class="media-body">
                     <!-- TODO anchor link here (click)="onArtistClicked(artist)" -->
                     <h4 class="media-heading">${details.headingText}</h4>
-                    <p>${unsafeHTML(details.bodyText)}</p>
+                    <p>${unsafeHTML(details.bodyText || '')}</p>
                   </div>
 
                 </div>

diff --git a/src/routes/artists/artists.js b/src/routes/artists/artists.js
@@ -17,13 +17,21 @@ class ArtistsRouteComponent extends LitElement {
   constructor() {
     super();
 
+    this.ANALOG_ID = '1';
     this.artists = [];
+    this.displayArtists = [];
+    this.analog = {};
   }
 
   async connectedCallback() {
     super.connectedCallback();
 
     this.artists = await getArtists();
+
+    // make sure "newer" artists are at the top
+    // and keep Analog at the top of the list
+    this.displayArtists = this.artists.reverse().filter(artist => artist.id !== this.ANALOG_ID);
+    this.analog = this.artists.filter(artist => artist.id === this.ANALOG_ID)[0];
   }
 
   onArtistSelected() {
@@ -34,7 +42,7 @@ class ArtistsRouteComponent extends LitElement {
 
   /* eslint-disable indent */
   render() {
-    const { artists } = this;
+    const { displayArtists, analog } = this;
 
     return html`
       <style>
@@ -50,7 +58,7 @@ class ArtistsRouteComponent extends LitElement {
 
             <select class="hidden-sm-down" @change="${this.onArtistSelected}">
               <option .value="Select Artist">Select Artist</option>
-              ${artists.map((artist) => {
+              ${[analog, ...displayArtists].map((artist) => {
                 return html`
                   <option .value="${artist.id}">${artist.name}</option>
                 `;
@@ -61,13 +69,15 @@ class ArtistsRouteComponent extends LitElement {
           </div>
 
           <div class="col-xs-7">
-            ${artists.map((artist) => {
-              return html`
-                <div class="artist-cards-list">
+            <div class="artist-cards-list">
+              <app-card .details="${modelArtist(analog)}"></app-card>
+
+              ${displayArtists.map((artist) => {
+                return html`
                   <app-card .details="${modelArtist(artist)}"></app-card>
-                </div>
-              `;
-            })}
+                `;
+              })};
+            </div>
           </div>
 
         </div>