From 3e53d5d3a6d210d8f9adf9579aa8b8b0698417d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kari=20S=C3=B6derholm?= <haprog@vaadin.com>
Date: Wed, 29 Sep 2021 12:29:05 +0300
Subject: [PATCH] Refactor FindOwnersView

- Get rid of unnecessary processing of `router.location` here. The initial value for the last name comes via attribute when needed (from `OwnersListView`).
- Use a change event listener to update a `lastName` property for reactive programming approach instead of using a `Ref` to get the value in `findOwner()`.
- Only add the `lastName` search parameter to the `targetUrl` when `lastName` is not empty (cleaner URL after navigation in this case).
---
 frontend/views/owners/find-owners-view.ts | 29 ++++++++++-------------
 frontend/views/owners/owners-list-view.ts |  2 +-
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/frontend/views/owners/find-owners-view.ts b/frontend/views/owners/find-owners-view.ts
index 97aabf5..475a141 100644
--- a/frontend/views/owners/find-owners-view.ts
+++ b/frontend/views/owners/find-owners-view.ts
@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ref, createRef } from 'lit/directives/ref';
 import '@vaadin/vaadin-button/vaadin-button'
 import '@vaadin/vaadin-icons/vaadin-iconset'
 import '@vaadin/vaadin-icon/vaadin-icon'
@@ -13,28 +12,17 @@ import { Router } from '@vaadin/router';
 @customElement('find-owners-view')
 export class FindOwnersView extends View {
 
-  @property({ type: String, attribute: 'initial-last-name' })
-  initialLastName?: string;
+  @property({ type: String, attribute: 'last-name' })
+  lastName: string = '';
 
   @property({ type: String, attribute: 'hint-text' })
   hintText?: string;
 
-  private textFieldRef = createRef<TextFieldElement>();
-
-  connectedCallback() {
-    super.connectedCallback();
-    const searchParams = new URLSearchParams(router.location.search);
-    const lastNameQuery = searchParams.get('lastName');
-    if (typeof lastNameQuery === 'string') {
-      this.initialLastName = lastNameQuery;
-    }
-  }
-
   render() {
     return html`
       <h2>Find Owners</h2>
       
-      <vaadin-text-field label="Last name" .value="${this.initialLastName}" helper-text="${this.hintText}" clear-button-visible ${ref(this.textFieldRef)}>
+      <vaadin-text-field label="Last name" .value="${this.lastName}" @change="${this.lastNameChanged}" helper-text="${this.hintText}" clear-button-visible>
         <vaadin-icon slot="prefix" icon="vaadin:search"></vaadin-icon>
       </vaadin-text-field>
       <vaadin-button @click="${this.findOwner}">Find Owner</vaadin-button><br>
@@ -43,9 +31,16 @@ export class FindOwnersView extends View {
     `;
   }
 
+  lastNameChanged(event: Event) {
+    const textField = event.target as TextFieldElement;
+    this.lastName = textField.value;
+  }
+
   findOwner() {
-    const lastName = this.textFieldRef.value?.value || '';
-    const targetUrl = router.urlForName('owners-list') + '?lastName=' + encodeURIComponent(lastName);
+    let targetUrl = router.urlForName('owners-list');
+    if (this.lastName !== '') {
+      targetUrl += '?lastName=' + encodeURIComponent(this.lastName);
+    }
     Router.go(targetUrl);
   }
 
diff --git a/frontend/views/owners/owners-list-view.ts b/frontend/views/owners/owners-list-view.ts
index 5688b7a..e4a99a6 100644
--- a/frontend/views/owners/owners-list-view.ts
+++ b/frontend/views/owners/owners-list-view.ts
@@ -83,7 +83,7 @@ export class OwnersListView extends View implements BeforeEnterObserver {
 
   renderNotFound() {
     return html`
-      <find-owners-view initial-last-name="${this.lastNameQuery}" hint-text="has not been found"></find-owners-view>
+      <find-owners-view last-name="${this.lastNameQuery}" hint-text="has not been found"></find-owners-view>
     `;
   }