updated notification service, adding a clothing item works now

m-GDEV · Sep 9, 2024 · 4c9d16b · 4c9d16b
1 parent cb97f65
commit 4c9d16b
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 93 deletions.
diff --git a/WardrobeManager.Presentation/Componenets/Forms/AddClothingItem.razor b/WardrobeManager.Presentation/Componenets/Forms/AddClothingItem.razor
@@ -14,8 +14,9 @@
 
 @using System.Text.RegularExpressions;
 
-@inject IApiService ApiService;
-@inject ISharedService SharedService;
+@inject IApiService _apiService;
+@inject ISharedService _sharedService;
+@inject INotificationService _notificationService;
 
 
 <div class="w-full flex flex-col items-center">
@@ -97,7 +98,7 @@
 
     protected override async Task OnInitializedAsync()
     {
-        newItem = SharedService.CreateDefaultNewOrEditedClothingItemDTO();
+        newItem = _sharedService.CreateDefaultNewOrEditedClothingItemDTO();
     }
 
     async Task UploadImage(InputFileChangeEventArgs e)
@@ -116,7 +117,13 @@
     async Task FormSubmitted()
     {
         // do stuff with api
-        @* await ApiService.Add(newItem); *@
-        newItem = SharedService.CreateDefaultNewOrEditedClothingItemDTO();
+        try {
+            await _apiService.Add(newItem);
+            _notificationService.AddNotification("Clothing Item Added Successfully!", NotificationType.Success);
+        }
+        catch (Exception ex) {
+            _notificationService.AddNotification($"Error: {ex.Message}", NotificationType.Error);
+        }
+        newItem = _sharedService.CreateDefaultNewOrEditedClothingItemDTO();
     }
 }
diff --git a/WardrobeManager.Presentation/Componenets/Global/Notifications.razor b/WardrobeManager.Presentation/Componenets/Global/Notifications.razor
@@ -8,8 +8,9 @@
 
 <div class="toast toast-top toast-end">
     @foreach (var notification in _notificationService.Notifications) {
-        <div class="alert alert-error">
-            <span>@notification</span>
+        var cssClass = GetNotificationCssClass(notification.type) ;
+        <div class="alert @cssClass">
+            <span>@notification.message</span>
             <button class="w-5 h-5" @onclick="(() => Dismiss(notification))"><img src="https://www.svgrepo.com/show/12848/x-symbol.svg" /></button>
         </div>
 
@@ -21,7 +22,7 @@
         _notificationService.OnChange += StateHasChanged;
     }
 
-    private void Dismiss(string notification)
+    private void Dismiss(NotificationMessage notification)
     {
         _notificationService.RemoveNotification(notification);
     }
@@ -30,4 +31,16 @@
     {
         _notificationService.OnChange -= StateHasChanged;
     }
+
+    public string GetNotificationCssClass(NotificationType type)
+    {
+        return type switch
+        {
+            NotificationType.Info => "alert-info",
+            NotificationType.Success => "alert-success",
+            NotificationType.Warning => "alert-warning",
+            NotificationType.Error => "alert-error",
+            _ => ""
+        };
+    }
 }
diff --git a/WardrobeManager.Presentation/Layout/MainLayout.razor b/WardrobeManager.Presentation/Layout/MainLayout.razor
@@ -1,16 +1,27 @@
 @inherits LayoutComponentBase
 @inject IJSRuntime JSRuntime
 @using WardrobeManager.Presentation.Components.Global
-
+@using WardrobeManager.Presentation.Services.Interfaces;
+@using WardrobeManager.Presentation.Services.Implementation;
+@inject INotificationService _notificationService;
 
 <div class="h-full  text-base-content flex flex-col body-text transition-all duration-300">
     <NavMenu />
 
-    <main class="flex flex-grow h-full ">
-        @Body
-    </main>
+    <ErrorBoundary @ref="errorBoundary">
+        <ChildContent>
+            <main class="flex flex-grow h-full ">
+                @Body
+            </main>
+            <Footer />
+        </ChildContent>
+        <ErrorContent Context="ex">
+            @{
+                _notificationService.AddNotification(ex.Message, NotificationType.Error);
+            }
+        </ErrorContent>
+    </ErrorBoundary>
 
-    <Footer />
 </div>
 <Notifications />
 
@@ -28,4 +39,11 @@
             await JSRuntime.InvokeVoidAsync("console.log", "theme-changel loaded");
         }
     }
+
+    private ErrorBoundary? errorBoundary;
+
+    protected override void OnParametersSet()
+    {
+        errorBoundary?.Recover();
+    }
 }
diff --git a/WardrobeManager.Presentation/Pages/Authenticated/Clothing.razor b/WardrobeManager.Presentation/Pages/Authenticated/Clothing.razor
@@ -22,21 +22,21 @@
 
 <div class="w-full flex flex-col items-center">
 
-    <button class="btn btn-primary" @onclick="(() => Man())">Click me</button>
-    @if (error == true) {
-        <div class="toast toast-top toast-end">
-            <div class="alert alert-error">
-                <span>@errorMessage</span>
-                <button class="w-5 h-5" @onclick="Thing"><img src="https://www.svgrepo.com/show/12848/x-symbol.svg" /></button>
-            </div>
-        </div>
-    }
+    @* <button class="btn btn-primary" @onclick="(() => Man())">Click me</button> *@
+    @* @if (error == true) { *@
+    @*     <div class="toast toast-top toast-end"> *@
+    @*         <div class="alert alert-error"> *@
+    @*             <span>@errorMessage</span> *@
+    @*             <button class="w-5 h-5" @onclick="Thing"><img src="https://www.svgrepo.com/show/12848/x-symbol.svg" /></button> *@
+    @*         </div> *@
+    @*     </div> *@
+    @* } *@
 
     <h1 class="pt-14 pb-12 heading-text">Create, view, and edit your clothing items here!</h1>
 
 
 
-    <div class="pb-10 px-8 gap-8 flex flex-row justify-center w-full grow">
+    <div class="pb-10 px-8 gap-8 flex flex-row justify-center w-full overflow-scroll grow">
         @* Left Column *@
         <div class="w-1/4 flex flex-col items-center">
             <h3 class="subheading-text">Filters</h3>
@@ -58,12 +58,19 @@
             </div>
         </div>
         @* Centre Column *@
-        <div class="w-2/4 bg-primary rounded-xl flex flex-col items-center p-4">
+        <div class="w-2/4 bg-primary rounded-xl flex flex-col items-center p-4 overflow-scroll">
             <Search Width="1/6"/>
             <div class="flex flex-row w-full gap-3 items-center">
-                <p class="subtitle-text text-primary-content">Sort By</p>
+                <p class="subtitle-text text-primary-content">Sort Ly </p>
                 @* <DropDown Label="Sort By" TItem="@SortCategory" bg="primary-content " fg="primary"/> *@
             </div>
+            <div class="overflow-scroll">
+                @if (clothing != null) {
+                    foreach (var Model in clothing) {
+                        <p>@Model.Name</p>
+                    }
+                }
+            </div>
         </div>
         @* Right Column *@
         <div class="w-1/4 flex flex-col items-center">
@@ -141,9 +148,9 @@
         errorMessage = string.Empty;
     }
 
-    public void Man() {
-        _notificationService.AddNotification($"hello {f++}");
-    }
+    @* public void Man() { *@
+    @*     _notificationService.AddNotification($"hello {f++}"); *@
+    @* } *@
 
     public class FormModel
     {

diff --git a/WardrobeManager.Presentation/Pages/Authenticated/Dashboard.razor b/WardrobeManager.Presentation/Pages/Authenticated/Dashboard.razor
@@ -16,25 +16,18 @@ Welcome to your new app.
 <!-- Open the modal using ID.showModal() method -->
 <button class="btn" onclick="my_modal_1.showModal()">open modal</button>
 <dialog id="my_modal_1" class="modal">
-<div class="modal-box">
-    <h3 class="text-lg font-bold">Hello!</h3>
-    <p class="py-4">Press ESC key or click the button below to close</p>
-    <div class="modal-action">
-        <form method="dialog">
-            <!-- if there is a button in form, it will close the modal -->
-            <button class="btn btn-primary">Close</button>
-        </form>
+    <div class="modal-box">
+        <h3 class="text-lg font-bold">Hello!</h3>
+        <p class="py-4">Press ESC key or click the button below to close</p>
+        <div class="modal-action">
+            <form method="dialog">
+                <!-- if there is a button in form, it will close the modal -->
+                <button class="btn btn-primary">Close</button>
+            </form>
+        </div>
     </div>
-</div>
 </dialog>
 
 
 @code {
-
-protected override async Task OnInitializedAsync() {
-var userExists = await ApiService.IsUserInitialized();
-if (!userExists) {
-await ApiService.CreateUser();
-}
-}
 }
diff --git a/WardrobeManager.Presentation/Services/Implementation/ApiService.cs b/WardrobeManager.Presentation/Services/Implementation/ApiService.cs
@@ -27,18 +27,14 @@ public ApiService(string apiEndpoint, IHttpClientFactory factory) {
     public async Task Add(NewOrEditedClothingItemDTO clothing)
     {
         var serialized = JsonSerializer.Serialize(clothing);
-        var de_serialized = JsonSerializer.Deserialize<NewOrEditedClothingItemDTO>(serialized);
 
-
-
-
-        var res = await _httpClient.PostAsJsonAsync<NewOrEditedClothingItemDTO>( "/clothingitem", clothing);
+        var res = await _httpClient.PostAsJsonAsync<NewOrEditedClothingItemDTO>( "/clothing", clothing);
         res.EnsureSuccessStatusCode();
     }
 
     public async Task Update(NewOrEditedClothingItemDTO clothing)
     {
-        var res = await _httpClient.PutAsJsonAsync<NewOrEditedClothingItemDTO>( "/clothingitem", clothing);
+        var res = await _httpClient.PutAsJsonAsync<NewOrEditedClothingItemDTO>( "/clothing", clothing);
         res.EnsureSuccessStatusCode();
     }
 
@@ -48,32 +44,6 @@ public async Task Delete(ServerClothingItem clothing)
         res.EnsureSuccessStatusCode();
     }
 
-    [Authorize]
-    public async Task<bool> IsUserInitialized() {
-        // Exists in DB, not in auth0
-        var res = await _httpClient.GetAsync( "/userexists");
-
-        if (res.StatusCode == HttpStatusCode.OK) {
-            return true;
-        }
-        else if (res.StatusCode == HttpStatusCode.NotFound) {
-            return false;
-        }
-        else {
-            throw new Exception("Issue with request: " + res);
-        }
-    }
-
-    [Authorize]
-    public async Task CreateUser() {
-        var res = await _httpClient.GetAsync("/createuser");
-
-        if (res.StatusCode != HttpStatusCode.Created) {
-            throw new Exception("Could not create user on db: " + res);
-        }
-    }
-
-
     public async ValueTask DisposeAsync()
     {
         _httpClient.Dispose();

diff --git a/WardrobeManager.Presentation/Services/Implementation/NotificationService.cs b/WardrobeManager.Presentation/Services/Implementation/NotificationService.cs
@@ -4,12 +4,12 @@ namespace WardrobeManager.Presentation.Services.Implementation;
 
 public class NotificationService : INotificationService
 {
-    private readonly List<string> _notifications = new List<string>();
+    private readonly List<NotificationMessage> _notifications = new List<NotificationMessage>();
     private readonly object _lock = new object();
 
     public event Action OnChange;
 
-    public List<string> Notifications
+    public List<NotificationMessage> Notifications
     {
         get
         {
@@ -20,16 +20,17 @@ public List<string> Notifications
         }
     }
 
-    public void AddNotification(string message)
+    public void AddNotification(string message, NotificationType type)
     {
         lock (_lock)
         {
-            _notifications.Add(message);
+            var notification = new NotificationMessage(message, type);
+            _notifications.Add(notification);
         }
         NotifyStateChanged();
     }
 
-    public void RemoveNotification(string message)
+    public void RemoveNotification(NotificationMessage message)
     {
         lock (_lock)
         {
@@ -40,3 +41,15 @@ public void RemoveNotification(string message)
 
     private void NotifyStateChanged() => OnChange?.Invoke();
 }
+
+public class NotificationMessage(string Message, NotificationType Type) {
+    public string message = Message;
+    public NotificationType type = Type;
+}
+
+public enum NotificationType {
+    Info,
+    Success,
+    Warning,
+    Error
+}
diff --git a/WardrobeManager.Presentation/Services/Interfaces/IApiService.cs b/WardrobeManager.Presentation/Services/Interfaces/IApiService.cs
@@ -8,6 +8,6 @@ public interface IApiService
     Task Add(NewOrEditedClothingItemDTO clothing);
     Task Delete(ServerClothingItem clothing);
     Task Update(NewOrEditedClothingItemDTO clothing);
-    Task<bool> IsUserInitialized();
-    Task CreateUser();
+    // Task<bool> IsUserInitialized();
+    // Task CreateUser();
 }
diff --git a/WardrobeManager.Presentation/Services/Interfaces/INotificationService.cs b/WardrobeManager.Presentation/Services/Interfaces/INotificationService.cs
@@ -1,11 +1,13 @@
-namespace WardrobeManager.Presentation.Services.Interfaces;
+using WardrobeManager.Presentation.Services.Implementation;
+
+namespace WardrobeManager.Presentation.Services.Interfaces;
 
 public interface INotificationService
 {
-    List<string> Notifications { get; }
+    List<NotificationMessage> Notifications { get; }
 
     event Action OnChange;
 
-    void AddNotification(string message);
-    void RemoveNotification(string message);
-}
+    void AddNotification(string message, NotificationType type);
+    void RemoveNotification(NotificationMessage message);
+}
diff --git a/WardrobeManager.Presentation/wwwroot/index.html b/WardrobeManager.Presentation/wwwroot/index.html
@@ -51,11 +51,11 @@ <h1 class="subtitle-text">Please wait while WardrobeManager loads...</h1>
         </div>
         <!-- Change the contents of this div to customize the webassembly loading screen -->
 
-        <div id="blazor-error-ui" class="hidden">
-            An unhandled error has occurred.
-            <a href="" class="reload">Reload</a>
-            <a class="dismiss">🗙</a>
-        </div>
+        <!-- <div id="blazor-error-ui" class="hidden"> -->
+        <!--     An unhandled error has occurred. -->
+        <!--     <a href="" class="reload">Reload</a> -->
+        <!--     <a class="dismiss">🗙</a> -->
+        <!-- </div> -->
         <script src="_framework/blazor.webassembly.js"></script>
         <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
         <script>