From af8d7a7698486187975d135eb298ae39688557de Mon Sep 17 00:00:00 2001
From: Kevin Matsubara <kevin.matsubara@proton.me>
Date: Thu, 27 Mar 2025 12:05:31 +0100
Subject: [PATCH] Move city into its own component and use EventCallback to
 bubble events when a city is clicked to be handled by the parents of the
 component.

---
 .../Components/Controls/CityComponent.razor   | 24 +++++++++++++++
 .../CityComponent.razor.css}                  |  0
 .../Controls/CityListComponent.razor          | 30 +++++++++++++++++++
 .../Components/Pages/Servers.razor            | 26 +++-------------
 4 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 ServerManagement/Components/Controls/CityComponent.razor
 rename ServerManagement/Components/{Pages/Servers.razor.css => Controls/CityComponent.razor.css} (100%)
 create mode 100644 ServerManagement/Components/Controls/CityListComponent.razor

diff --git a/ServerManagement/Components/Controls/CityComponent.razor b/ServerManagement/Components/Controls/CityComponent.razor
new file mode 100644
index 0000000..ce97cc0
--- /dev/null
+++ b/ServerManagement/Components/Controls/CityComponent.razor
@@ -0,0 +1,24 @@
+<div class="col">
+  <div class="card @((city == selectedCity) ? "border-primary" : "")">
+    <img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
+    <div class="card-body @((city == selectedCity) ? "active" : "")">
+      <button class="btn btn-primary" @onclick="@(() => { SelectCity(city); })">@city</button>
+    </div>
+  </div>
+</div>
+
+@code {
+  [Parameter]
+  public string? city { get; set; } = "";
+
+  [Parameter]
+  public string? selectedCity { get; set; } = "Eindhoven";
+
+  [Parameter]
+  public EventCallback<string> SelectCityCallBack { get; set; }
+
+  private void SelectCity(string cityName)
+  {
+    SelectCityCallBack.InvokeAsync(cityName);
+  }
+}
\ No newline at end of file
diff --git a/ServerManagement/Components/Pages/Servers.razor.css b/ServerManagement/Components/Controls/CityComponent.razor.css
similarity index 100%
rename from ServerManagement/Components/Pages/Servers.razor.css
rename to ServerManagement/Components/Controls/CityComponent.razor.css
diff --git a/ServerManagement/Components/Controls/CityListComponent.razor b/ServerManagement/Components/Controls/CityListComponent.razor
new file mode 100644
index 0000000..e0e8404
--- /dev/null
+++ b/ServerManagement/Components/Controls/CityListComponent.razor
@@ -0,0 +1,30 @@
+
+@if (cities != null && cities.Count > 0)
+{
+  <div class="container-fluid text-center">
+    <div class="row">
+      @foreach(var city in cities)
+      {
+      <CityComponent 
+        city="@city" 
+        selectedCity="@this.selectedCity"
+        SelectCityCallBack="HandleCitySelection">
+        </CityComponent>
+      }
+    </div>
+  </div>
+}
+
+@code {
+  private string selectedCity = "Eindhoven";
+  private List<string> cities = ServersRepository.GetCities();
+
+  [Parameter]
+  public EventCallback<string> SelectCityCallBack { get; set; }
+
+  private void HandleCitySelection(string cityName)
+  {
+    this.selectedCity = cityName;
+    SelectCityCallBack.InvokeAsync(cityName);
+  }
+}
\ No newline at end of file
diff --git a/ServerManagement/Components/Pages/Servers.razor b/ServerManagement/Components/Pages/Servers.razor
index 1868fe2..cd338d6 100644
--- a/ServerManagement/Components/Pages/Servers.razor
+++ b/ServerManagement/Components/Pages/Servers.razor
@@ -4,24 +4,7 @@
 <h3>Servers</h3>
 <br/>
 <br/>
-
-<div class="container-fluid text-center">
-  <div class="row">
-    @foreach(var city in cities)
-    {
-    <div class="col">
-
-      <div class="card @((city == selectedCity) ? "border-primary" : "")">
-        <img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
-        <div class="card-body @((city == selectedCity) ? "active" : "")">
-          <button class="btn btn-primary" @onclick="@(() => { SelectCity(city); })">@city</button>
-        </div>
-      </div>
-    </div>
-    }
-  </div>
-</div>
-
+<CityListComponent SelectCityCallBack="HandleCitySelection"></CityListComponent>
 <br/>
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Search servers"
@@ -36,7 +19,6 @@
 <ServerListComponent CityName="@this.selectedCity"></ServerListComponent>
 
 @code {
-  private List<string> cities = ServersRepository.GetCities();
   private string selectedCity = "Eindhoven";
   private string _serverFilter = "";
   private string serverFilter {
@@ -45,11 +27,11 @@
     {
       _serverFilter = value;
       //this.servers = ServersRepository.SearchServers(_serverFilter);
-      this.selectedCity = string.Empty;
+      //this.selectedCity = string.Empty;
     }
   }
 
-  private void SelectCity(string cityName)
+  private void HandleCitySelection(string cityName)
   {
     this.selectedCity = cityName;
   }
@@ -57,6 +39,6 @@
   private void HandleSearch()
   {
     //this.servers = ServersRepository.SearchServers(serverFilter);
-    this.selectedCity = string.Empty;
+    // this.selectedCity = string.Empty;
   }
 }
\ No newline at end of file