Fix Local Storage bug

Fixes local storage bug and adds new loading screen

Author: intrepid-developer

src/ToDo/Application/Services/ToDoService.cs

@@ -1,72 +1,71 @@
-using System;
-using Blazored.LocalStorage;
+using Blazored.LocalStorage;
 using ToDoApp.Application.Models;
 
-namespace ToDoApp.Application.Services
-{
-    public class ToDoService : IToDoService
-    {
-        private IList<ToDo> _toDos;
-        private readonly ILocalStorageService _localStorage;
+namespace ToDoApp.Application.Services;
 
-        public ToDoService(ILocalStorageService localStorage)
-        {
-            _toDos = new List<ToDo>();
-            _localStorage = localStorage;
-        }
+public class ToDoService : IToDoService
+{
+    private IList<ToDo> _toDos;
+    private readonly ILocalStorageService _localStorage;
 
-        public async Task AddToDoAsync(ToDo todo, CancellationToken cancellationToken = new CancellationToken())
-        {
-            ArgumentNullException.ThrowIfNull(todo, "ToDo Cannot be null");
+    public ToDoService(ILocalStorageService localStorage)
+    {
+        _toDos = new List<ToDo>();
+        _localStorage = localStorage;
+    }
 
-            await LoadToDosAsync(cancellationToken);
+    public async Task AddToDoAsync(ToDo todo, CancellationToken cancellationToken = new CancellationToken())
+    {
+        ArgumentNullException.ThrowIfNull(todo, "ToDo Cannot be null");
 
-            _toDos.Add(todo);
+        await LoadToDosAsync(cancellationToken);
 
-            await SaveChangesAsync(cancellationToken);
-        }
+        _toDos.Add(todo);
 
-        public async Task RemoveToDoAsync(ToDo todo, CancellationToken cancellationToken = new CancellationToken())
-        {
-            ArgumentNullException.ThrowIfNull(todo, "ToDo Cannot be null");
+        await SaveChangesAsync(cancellationToken);
+    }
 
-            await LoadToDosAsync(cancellationToken);
+    public async Task RemoveToDoAsync(ToDo todo, CancellationToken cancellationToken = new CancellationToken())
+    {
+        ArgumentNullException.ThrowIfNull(todo, "ToDo Cannot be null");
 
-            _toDos.Remove(todo);
+        await LoadToDosAsync(cancellationToken);
 
-            await SaveChangesAsync(cancellationToken);
-        }
+        _toDos.Remove(todo);
 
-        public async Task UpdateToDoAsync(ToDo todo, CancellationToken cancellationToken = new CancellationToken())
-        {
-            ArgumentNullException.ThrowIfNull(todo, "ToDo Cannot be null");
+        await SaveChangesAsync(cancellationToken);
+    }
 
-            await LoadToDosAsync(cancellationToken);
+    public async Task UpdateToDoAsync(ToDo todo, CancellationToken cancellationToken = new CancellationToken())
+    {
+        ArgumentNullException.ThrowIfNull(todo, "ToDo Cannot be null");
 
-            var existingTodo = _toDos.First(_ => _.Id == todo.Id);
-            existingTodo.IsComplete = todo.IsComplete;
-            existingTodo.Name = todo.Name;
+        await LoadToDosAsync(cancellationToken);
 
-            await SaveChangesAsync(cancellationToken);
-        }
+        var existingTodo = _toDos.First(_ => _.Id == todo.Id);
+        existingTodo.IsComplete = todo.IsComplete;
+        existingTodo.Name = todo.Name;
 
-        public async Task<IList<ToDo>> GetToDosAsync()
-        {
-            await LoadToDosAsync(new CancellationToken());
-            return _toDos;
-        }
+        await SaveChangesAsync(cancellationToken);
+    }
 
+    public async Task<IList<ToDo>> GetToDosAsync()
+    {
+        await LoadToDosAsync(new CancellationToken());
+        return _toDos;
+    }
 
-        private async Task LoadToDosAsync(CancellationToken cancellationToken)
-        {
-            _toDos = await _localStorage.GetItemAsync<IList<ToDo>>("todos", cancellationToken);
-        }
 
-        private async Task SaveChangesAsync(CancellationToken cancellationToken)
-        {
-            await _localStorage.SetItemAsync<IList<ToDo>>("todos", _toDos, cancellationToken);
-        }
+    private async Task LoadToDosAsync(CancellationToken cancellationToken)
+    {
+        _toDos = await _localStorage.GetItemAsync<IList<ToDo>>("todos", cancellationToken);
+        if (_toDos == null) _toDos = new List<ToDo>();
+    }
 
+    private async Task SaveChangesAsync(CancellationToken cancellationToken)
+    {
+        await _localStorage.SetItemAsync<IList<ToDo>>("todos", _toDos, cancellationToken);
     }
+
 }
 

src/ToDo/Pages/Index.razor

@@ -50,16 +50,24 @@
 
     protected override async Task OnInitializedAsync()
     {
-        todos = await _toDoService.GetToDosAsync();
+        await LoadToDosAsync();
         await base.OnInitializedAsync();
     }
 
+    private async Task LoadToDosAsync()
+    {
+        todos = await _toDoService.GetToDosAsync();
+    }
+
     private async Task OnValidSubmit(EditContext context)
     {
         ArgumentNullException.ThrowIfNull(todos);
 
         if (!string.IsNullOrWhiteSpace(model.Name))
+        {
             await _toDoService.AddToDoAsync(model);
+            await LoadToDosAsync();
+        }
 
         model = new ToDo();
         StateHasChanged();

src/ToDo/wwwroot/index.html

@@ -11,7 +11,53 @@
 </head>
 
 <body>
-    <div id="app">Loading...</div>
+    <div id="app">
+        <style>
+            @keyframes slide {
+                0% {
+                    transform: translateX(-25%);
+                }
+
+                100% {
+                    transform: translateX(25%);
+                }
+            }
+
+            .mud-wasm {
+                animation: slide 3s ease-in-out infinite alternate;
+                background-image: linear-gradient(-60deg,#594ae2 50%,#7467ef 50%);
+                bottom: 0;
+                left: -50%;
+                opacity: .5;
+                position: fixed;
+                right: -50%;
+                top: 0;
+                z-index: -1
+            }
+
+            .mud-wasm-cont {
+                left: 50%;
+                padding: 10vmin;
+                position: fixed;
+                text-align: center;
+                top: 50%;
+                transform: translate(-50%,-50%);
+                color: #fff;
+                font-size: 30px;
+                font-family: 'Roboto','Helvetica','Arial','sans-serif';
+            }
+        </style>
+        <div style="height:100%;width:100%;margin:0;position:fixed;">
+            <div class="mud-wasm"></div>
+            <div class="mud-wasm" style="animation-direction:alternate-reverse;animation-duration:4s;"></div>
+            <div class="mud-wasm" style="animation-duration:5s;"></div>
+            <div class="mud-wasm-cont ">
+                My ToDo's
+                <br/>
+                Loading...
+            </div>
+        </div>
+    </div>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.