From ae3a11faf2e4c8cb814ab937016eacb0eb888129 Mon Sep 17 00:00:00 2001
From: syneffort <syneffort@gmail.com>
Date: Wed, 23 Aug 2023 15:56:58 +0900
Subject: [PATCH] parameter, ref, eventcallback

---
 BlazorApp/BlazorApp/Pages/ShowUser.razor | 45 ++++++++++++++++++++++++
 BlazorApp/BlazorApp/Pages/User.razor     | 44 ++++-------------------
 2 files changed, 52 insertions(+), 37 deletions(-)
 create mode 100644 BlazorApp/BlazorApp/Pages/ShowUser.razor

diff --git a/BlazorApp/BlazorApp/Pages/ShowUser.razor b/BlazorApp/BlazorApp/Pages/ShowUser.razor
new file mode 100644
index 0000000..a3a7937
--- /dev/null
+++ b/BlazorApp/BlazorApp/Pages/ShowUser.razor
@@ -0,0 +1,45 @@
+@using BlazorApp.Data;
+
+<p>
+    Users: <b>@this.Users.Count</b>
+</p>
+
+<br />
+
+<ul class="list-group">
+    @foreach (UserData user in this.Users)
+    {
+        <li @key="user" class="list-group-item">
+            <button class="btn btn-link" type="button" @onclick="(() => KickUser(user))">[Kick]</button>
+            <label>@user.Name</label>
+        </li>
+    }
+</ul>
+
+@code {
+    [Parameter]
+    public List<UserData> Users { get; set; }
+
+    [Parameter]
+    public EventCallback Callback { get; set; }
+
+    protected override void OnInitialized()
+    {
+        this.Users.Add(new UserData() { Name = "Simpson" });
+        this.Users.Add(new UserData() { Name = "Richard" });
+        this.Users.Add(new UserData() { Name = "Tylor" });
+    }
+
+    public void AddUser(UserData user)
+    {
+        this.Users.Add(user);
+    }
+
+    public void KickUser(UserData user)
+    {
+        this.Users.Remove(user);
+
+        if (this.Callback.HasDelegate)
+            this.Callback.InvokeAsync();
+    }
+}
diff --git a/BlazorApp/BlazorApp/Pages/User.razor b/BlazorApp/BlazorApp/Pages/User.razor
index 5a87991..697e743 100644
--- a/BlazorApp/BlazorApp/Pages/User.razor
+++ b/BlazorApp/BlazorApp/Pages/User.razor
@@ -4,21 +4,7 @@
 
 <h3>Online Users</h3>
 
-<p>
-    Users: <b>@_users.Count</b>
-</p>
-
-<br />
-
-<ul class="list-group">
-    @foreach (UserData user in _users)
-    {
-        <li @key="user" class="list-group-item">
-            <button class="btn btn-link" type="button" @onclick="(() => KickUser(user))">[Kick]</button>
-            <label>@user.Name</label>
-        </li>
-    }
-</ul>
+<ShowUser @ref="_showUser" Users="_users" Callback="CallbackAction"/>
 
 <br />
 
@@ -30,49 +16,33 @@
         <div class="col">
             @* 속성(Attribute)도 binding 가능 *@
             @* conditional atribute 속성 자체에도 조건 붙일 수 있음 *@
-            <button class=@_btnClass type="button" @onclick="AddUser" disabled="@(_users.Count >= 5)">Add a user</button>
+            <button class="btn btn-primary" type="button" @onclick="AddUser" disabled="@(_users.Count >= 5)">Add a user</button>
         </div>
     </div>
 </div>
 
 @code {
     private List<UserData> _users = new List<UserData>();
+    private ShowUser _showUser;
 
     private string _inputName;
-    private string _btnClass = "btn btn-primary";
-
-    protected override void OnInitialized()
-    {
-        _users.Add(new UserData() { Name = "Simpson" });
-        _users.Add(new UserData() { Name = "Richard" });
-        _users.Add(new UserData() { Name = "Tylor" });
-
-        RefreshButton();
-    }
 
     private void AddUser()
     {
         if (string.IsNullOrEmpty(_inputName))
             return;
 
-        _users.Add(new UserData() { Name = _inputName });
+        _showUser.AddUser(new UserData() { Name = _inputName });
         _inputName = "";
-
-        RefreshButton();
     }
 
     private void KickUser(UserData user)
     {
-        _users.Remove(user);
-
-        RefreshButton();
+        _showUser.KickUser(user);
     }
 
-    private void RefreshButton()
+    private void CallbackAction()
     {
-        if (_users.Count % 2 == 0)
-            _btnClass = "btn btn-primary";
-        else
-            _btnClass = "btn btn-secondary";
+        _inputName = "Callback Action Called!";
     }
 }