Aggiungi gestione dei film preferiti e integrazione con Blazored.LocalStorage

Components/Pages/MovieDetail.razor

@@ -2,7 +2,26 @@
 
 <PageTitle>Movie Details</PageTitle>
 
-<div style="display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; gap: 20px; max-width: 800px; margin-right: auto;">
+<style>
+    .my-grid {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        grid-template-rows: auto auto;
+        gap: 20px;
+        max-width: 800px;
+        margin-right: auto;
+    }
+    .favorite {
+        background-color: gold;
+        color: black;
+    }
+    .not-favorite {
+        background-color: gray;
+        color: white;
+    }
+</style>
+
+<div class="my-grid">
     @if (movie is not null)
     {
         <h1>@movie.Title</h1>
@@ -11,7 +30,14 @@
         <div class="details">
             <p>@movie.Runtime</p>
             <p>@movie.Plot</p>
-            <button>Favorite</button>
+            @if(ManageFavorite.IsFavorite(id))
+            {
+                <button class="btn-secondary favorite" @onclick="ToggleFavoriteMovie">Remove Favorite</button>
+            }
+            else
+            {
+                <button class="btn-secondary not-favorite" @onclick="ToggleFavoriteMovie">Add to Favorites</button>
+            }
         </div>
     }
     else
@@ -22,6 +48,7 @@
 
 
 @inject OmdbService OmdbService
+@inject ManageFavorite ManageFavorite
 
 @code {
     [Parameter]
@@ -32,4 +59,18 @@
     {
         movie = await OmdbService.FetchMovieDetail(id);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await ManageFavorite.LoadFavorites();
+            StateHasChanged();
+        }
+    }
+
+    private async Task ToggleFavoriteMovie()
+    {
+        await ManageFavorite.ToggleFavoriteMovie(id);
+    }
 }

Program.cs

@@ -1,13 +1,16 @@
 using test_alebro.Components;
+using Blazored.LocalStorage;
 
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
+builder.Services.AddBlazoredLocalStorage();
 
 // Mine services
 builder.Services.AddSingleton<OmdbService>();
+builder.Services.AddScoped<ManageFavorite>();
 
 var app = builder.Build();
 

Services/ManageFavorite.cs

@@ -0,0 +1,63 @@
+
+
+/// <summary>
+/// Service to manage favorite movies using local storage
+/// </summary>
+/// <param name="localStorage">The local storage service</param>
+class ManageFavorite(Blazored.LocalStorage.ILocalStorageService localStorage)
+{
+    // Inject the local storage service
+    private readonly Blazored.LocalStorage.ILocalStorageService LocalStorage = localStorage;
+    private readonly List<string> MoviesIDs = [];
+
+    /// <summary>
+    /// Load favorite movies from local storage
+    /// Use Immediately after service instantiation otherwise the list will be empty
+    /// </summary>
+    /// <returns></returns>
+    public async Task LoadFavorites()
+    {
+        var favorites = await LocalStorage.GetItemAsync<List<string>>("favorite") ?? [];
+        MoviesIDs.Clear();
+        MoviesIDs.AddRange(favorites);
+    }
+
+    /// <summary>
+    /// Check if a movie is favorite or not
+    /// </summary>
+    /// <param name="movieID">The movie ID to check</param>
+    /// <returns>True if the movie is favorite, otherwise false</returns>
+    public bool IsFavorite(string movieID)
+    {
+        return MoviesIDs.Contains(movieID);
+    }
+
+    /// <summary>
+    /// Toggle favorite status of a movie (by ID)
+    /// </summary>
+    /// <param name="movieID">The movie ID to toggle</param>
+    /// <returns>The new favorite status</returns>
+    public async Task<bool> ToggleFavoriteMovie(string movieID)
+    {
+        if (!IsFavorite(movieID))
+        {
+            MoviesIDs.Add(movieID);
+        }
+        else
+        {
+            MoviesIDs.RemoveAll(id => id == movieID);
+        }
+
+        await LocalStorage.SetItemAsync("favorite", MoviesIDs);
+        return IsFavorite(movieID);
+    }
+
+    /// <summary>
+    /// Get the list of favorite movie IDs
+    /// </summary>
+    /// <returns>The list of favorite movie IDs</returns>
+    public List<string> GetFavoriteMovies()
+    {
+        return MoviesIDs;
+    }
+}

test-alebro.csproj

@@ -9,4 +9,8 @@
     <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
+  </ItemGroup>
+
 </Project>