From 50c332fe7d79cabfbfad92a0afeb457dcd07aa82 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 19 Nov 2021 10:39:46 -0500
Subject: [PATCH] artists page relevancy enhancements (#36)

* artists page relevancy enhancements

* fix lint

* match dropdown list to display list

* fix lint
---
 src/components/card/card.js   |  2 +-
 src/routes/artists/artists.js | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/card/card.js b/src/components/card/card.js
index 1f8c095..a6872fb 100644
--- 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
index 25090ee..0571200 100644
--- 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>