Refactor SearchBarDisplay to use modal; update Home layout

Refactored SearchBarDisplay.razor to encapsulate search bar and results within a modal, adding OpenModal and CloseModal methods and an isModalActive property. Improved Home.razor layout by wrapping SearchBarDisplay in a flex container, repositioning the auth token input and help text for better user experience.
sametcn99 · Jul 26, 2024 · adb7852 · adb7852
1 parent 04632e1
commit adb7852
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 34 deletions.
diff --git a/GPVBlazor/GPVBlazor/Components/Displays/SearchBarDisplay.razor b/GPVBlazor/GPVBlazor/Components/Displays/SearchBarDisplay.razor
@@ -2,39 +2,55 @@
 @using GPVBlazor.Models
 @inject Services.Interfaces.IUserService UserService
 
-<div class="field has-addons mb-3">
-    <div class="control is-expanded">
-        <input class="input" type="text" placeholder="Write user name..." @bind="inputValue" @bind:event="oninput" @onkeydown="HandleKeyPress">
-    </div>
-    <div class="control">
-        <button class="button is-primary" type="button" @onclick="SearchHandle">Search User</button>
-    </div>
-</div>
+<button class="button is-primary" @onclick="OpenModal">Try Search</button>
 
-<div class="search-results" style="@(showResults ? "display: block;" : "display: none;")">
-    <div>
-        @if (data?.Items != null)
-        {
-            <Virtualize Items="@data.Items" Context="item">
-                <a class="box" href="/p/@item.Login" style="display: flex; align-items: center; gap: 10px; text-decoration: none;">
-                    <figure class="image is-48x48">
-                        <img src="@item.AvatarUrl" alt="@item.Login" class="is-rounded" />
-                    </figure>
-                    <div>
-                        <p class="title is-4">@item.Login</p>
-                        <p class="subtitle is-6">@item.Type</p>
-                    </div>
-                </a>
-            </Virtualize>
-        }
+<div class="modal @(isModalActive ? "is-active" : "")">
+    <div class="modal-background" @onclick="CloseModal"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Search User</p>
+            <button class="delete" aria-label="close" @onclick="CloseModal"></button>
+        </header>
+        <section class="modal-card-body">
+            <div class="field has-addons mb-3">
+                <div class="control is-expanded">
+                    <input class="input" type="text" placeholder="Write user name..." @bind="inputValue" @bind:event="oninput" @onkeydown="HandleKeyPress">
+                </div>
+                <div class="control">
+                    <button class="button is-primary" type="button" @onclick="SearchHandle">Search</button>
+                </div>
+            </div>
+
+            <div class="search-results" style="@(showResults ? "display: block;" : "display: none;")">
+                <div>
+                    @if (data?.Items != null)
+                    {
+                        <Virtualize Items="@data.Items" Context="item">
+                            <a class="box" href="/p/@item.Login" style="display: flex; align-items: center; gap: 10px; text-decoration: none;">
+                                <figure class="image is-48x48">
+                                    <img src="@item.AvatarUrl" alt="@item.Login" class="is-rounded" />
+                                </figure>
+                                <div>
+                                    <p class="title is-4">@item.Login</p>
+                                    <p class="subtitle is-6">@item.Type</p>
+                                </div>
+                            </a>
+                        </Virtualize>
+                    }
+                </div>
+            </div>
+        </section>
+        <footer class="modal-card-foot">
+            <button class="button" @onclick="CloseModal">Close</button>
+        </footer>
     </div>
 </div>
 
-
 @code {
     private string inputValue = string.Empty;
     private UserSearchResult? data;
     private bool showResults = false;
+    private bool isModalActive = false;
     private CancellationTokenSource debounceCts = new CancellationTokenSource();
 
     private async Task FetchData()
@@ -62,4 +78,8 @@
     }
 
     private async Task SearchHandle() { showResults = true; await FetchData(); }
+
+    private void OpenModal() { isModalActive = true; }
+
+    private void CloseModal() { isModalActive = false; }
 }
diff --git a/GPVBlazor/GPVBlazor/Components/Pages/Home.razor b/GPVBlazor/GPVBlazor/Components/Pages/Home.razor
@@ -9,17 +9,19 @@
 <i>Search for a GitHub user to view their profile</i>
 <div class="subtitle is-6">It's a clone of githubprofileviewer.com built with .net</div>
 
-<GPVBlazor.Components.Displays.SearchBarDisplay />
-
-<div class="field has-addons">
-    <div class="control is-expanded">
-        <input @bind="AuthToken" placeholder="Enter Auth Token" class="input" />
-    </div>
-    <div class="control">
-        <button class="button is-primary" @onclick="AddToken">Add Token</button>
+<div class="is-flex is-flex-direction-column is-gap-2">
+    <GPVBlazor.Components.Displays.SearchBarDisplay />
+
+    <div class="field has-addons">
+        <div class="control is-expanded">
+            <input @bind="AuthToken" placeholder="Enter Auth Token" class="input" />
+        </div>
+        <div class="control">
+            <button class="button is-primary" @onclick="AddToken">Add Token</button>
+        </div>
     </div>
+    <p class="help is-italic">Auth token is storing in local storage.</p>
 </div>
-<p class="help is-italic">Auth token is storing in local storage.</p>
 
 @code {
     private string? AuthToken { get; set; } = string.Empty;