From b02d6d2bb9958fcfeb0ef940dc163d2bd2412b8a Mon Sep 17 00:00:00 2001
From: Kevin Matsubara <kevin.matsubara@proton.me>
Date: Tue, 25 Mar 2025 23:43:06 +0100
Subject: [PATCH] Apply two-way data binding for search bar.

---
 .../Components/Pages/Servers.razor            | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/ServerManagement/Components/Pages/Servers.razor b/ServerManagement/Components/Pages/Servers.razor
index 776aaa4..547f9ba 100644
--- a/ServerManagement/Components/Pages/Servers.razor
+++ b/ServerManagement/Components/Pages/Servers.razor
@@ -26,7 +26,9 @@
 
 <br/>
 <div class="input-group mb-3">
-  <input type="text" class="form-control" placeholder="Search servers" @onchange="HandleServerFilterChange" />
+  <input type="text" class="form-control" placeholder="Search servers"
+    @bind-value="serverFilter"
+    @bind-value:event="oninput" />
   <button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
 </div>
 <br/>
@@ -58,7 +60,16 @@
   private List<string> cities = ServersRepository.GetCities();
   private List<Server> servers = ServersRepository.GetServersByCity("Eindhoven");
   private string selectedCity = "Eindhoven";
-  private string serverFilter = "";
+  private string _serverFilter = "";
+  private string serverFilter {
+    get => _serverFilter;
+    set
+    {
+      _serverFilter = value;
+      this.servers = ServersRepository.SearchServers(_serverFilter);
+      this.selectedCity = string.Empty;
+    }
+  }
 
   private void DeleteServer(int serverId)
   {
@@ -75,11 +86,6 @@
     this.servers = ServersRepository.GetServersByCity(this.selectedCity);
   }
 
-  private void HandleServerFilterChange(ChangeEventArgs args)
-  {
-    serverFilter = args.Value?.ToString() ?? string.Empty;
-  }
-
   private void HandleSearch()
   {
     this.servers = ServersRepository.SearchServers(serverFilter);