chore(www): upgrade server-list to Lit (#1844)

* chore(www): upgrade `server-list` to Lit * Address review comments.
Jigsaw-Code · Feb 22, 2024 · 93f2ecd · 93f2ecd
1 parent 30993c6
commit 93f2ecd
Showing 1 changed file with 36 additions and 46 deletions.
diff --git a/src/www/views/servers_view/server_list/index.ts b/src/www/views/servers_view/server_list/index.ts
@@ -11,64 +11,54 @@
   limitations under the License.
 */
 
-import {computed, customElement, property} from '@polymer/decorators';
-import {html, PolymerElement} from '@polymer/polymer';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 import '../server_list_item/server_card';
 import {ServerListItem} from '../server_list_item';
 import {Localizer} from 'src/infrastructure/i18n';
 
 @customElement('server-list')
-export class ServerList extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          margin: 0 auto;
-          width: 100%;
-          height: 100%;
-          padding: 8px;
-          box-sizing: border-box;
-        }
+export class ServerList extends LitElement {
+  static styles = [
+    css`
+      :host {
+        box-sizing: border-box;
+        display: block;
+        height: 100%;
+        margin: 0 auto;
+        padding: 8px;
+        width: 100%;
+      }
 
-        server-row-card {
-          margin: 0 auto 8px auto;
-          height: 130px;
-        }
+      /* TODO(daniellacosse): Remove the hard-coded heights. */
+      server-row-card {
+        margin: 0 auto 8px auto;
+        height: 130px;
+      }
 
-        server-hero-card {
-          height: 400px;
-        }
-      </style>
+      server-hero-card {
+        height: 400px;
+      }
+    `,
+  ];
 
-      <!-- TODO(daniellacosse): use slots instead after we move this to lit -->
-      <template is="dom-repeat" items="[[servers]]">
-        <template is="dom-if" if="[[hasSingleServer]]">
-          <server-hero-card localize="[[localize]]" server="[[item]]"></server-hero-card>
-        </template>
-        <template is="dom-if" if="[[!hasSingleServer]]">
-          <server-row-card localize="[[localize]]" server="[[item]]"></server-row-card>
-        </template>
-      </template>
-    `;
-  }
-
-  // Need to declare localize function passed in from parent, or else
-  // localize() calls within the template won't be updated.
-
-  // @polymer/decorators doesn't support Function constructors...
-  @property({type: Object}) localize: Localizer;
+  @property({type: Function}) localize: Localizer = msg => msg;
   @property({type: Array}) servers: ServerListItem[] = [];
 
-  @computed('servers')
-  get hasSingleServer() {
-    return this.servers.length === 1;
+  render() {
+    if (this.hasSingleServer) {
+      return html`<server-hero-card .localize=${this.localize} .server=${this.servers[0]}></server-hero-card>`;
+    } else {
+      return html`
+        ${this.servers.map(
+          server => html`<server-row-card .localize=${this.localize} .server=${server}></server-row-card>`
+        )}
+      `;
+    }
   }
 
-  getErrorMessage(errorMessageId: string) {
-    if (typeof errorMessageId === 'string') {
-      return this.localize(errorMessageId);
-    }
+  private get hasSingleServer() {
+    return this.servers.length === 1;
   }
 }