Berack/test-alebro
0
0
Fork 0
Code Issues Pull Requests Activity

Favorites (#4)

Browse Source 
* Added favorites page
* Refactor table to a reusable component

Reviewed-on: #4
Co-authored-by: Berack96 <giacomobertolazzi7@gmail.com>
Co-committed-by: Berack96 <giacomobertolazzi7@gmail.com>
This commit was merged in pull request #4.
This commit is contained in:
Giacomo Bertolazzi
2026-01-20 15:24:26 +01:00
committed by Giacomo Bertolazzi
parent ae2c3c6855
commit 1b2ec9a1eb
7 changed files with 76 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
Components/Layout/MovieTable.razor Normal file
View File

@@ -0,0 +1,35 @@
<table class="table table-striped" id="moviesTable">
<thead class="table-primary">
<tr>
<th></th>
<th style="width: 100%;">Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
@if (Movies?.Search != null)
{
@foreach (var movie in Movies.Search)
{
<tr>
<td><button class="btn btn-secondary" @onclick="() => OnMovieSelected(movie.IdIMDB)">Details</button></td>
<td>@movie.Title</td>
<td>@movie.Year</td>
</tr>
}
}
</tbody>
</table>
@inject NavigationManager NavigationManager
@code {
[Parameter]
public MovieSearch? Movies { get; set; }
private async Task OnMovieSelected(string imdbID)
{
NavigationManager.NavigateTo($"/movie/{imdbID}");
}
}

24
Components/Pages/Favorites.razor
View File

@@ -2,17 +2,25 @@
<PageTitle>Favorites</PageTitle> <PageTitle>Favorites</PageTitle>
<h1>TODO</h1> <MovieTable Movies="movies" />
<button class="btn btn-primary" @onclick="FaiCose">FaiCose</button> @inject ManageFavorite ManageFavorite
@inject OmdbService OmdbService
@inject IJSRuntime JSRuntime
@code { @code {
private async Task FaiCose() public MovieSearch? movies = null;
protected override async Task OnAfterRenderAsync(bool firstRender)
{ {
var movies = await OmdbService.FetchMovies("Matrix"); if (firstRender)
var movieDetail = await OmdbService.FetchMovieDetail("tt11749868"); {
await ManageFavorite.LoadFavorites();
var favoriteMovies = ManageFavorite.GetFavoriteMovies();
movies = new MovieSearch
{
Search = favoriteMovies.ToArray(),
TotalResults = favoriteMovies.Count.ToString()
};
StateHasChanged();
}
} }
} }

30
Components/Pages/Home.razor
View File

@@ -12,42 +12,14 @@
</div> </div>
</form> </form>
<table class="table table-striped" id="moviesTable"> <MovieTable Movies="movies" />
<thead class="table-primary">
<tr>
<th></th>
<th style="width: 100%;">Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
@if (movies?.Search != null)
{
@foreach (var movie in movies.Search)
{
<tr>
<td><button class="btn btn-secondary" @onclick="() => OnMovieSelected(movie.IdIMDB)">Details</button></td>
<td>@movie.Title</td>
<td>@movie.Year</td>
</tr>
}
}
</tbody>
</table>
@inject OmdbService OmdbService @inject OmdbService OmdbService
@inject NavigationManager NavigationManager
@code { @code {
private string searchTitle = ""; private string searchTitle = "";
private MovieSearch? movies = null; private MovieSearch? movies = null;
private async Task OnMovieSelected(string imdbID)
{
NavigationManager.NavigateTo($"/movie/{imdbID}");
}
private async Task OnSearch() private async Task OnSearch()
{ {
movies = await OmdbService.FetchMovies(searchTitle); movies = await OmdbService.FetchMovies(searchTitle);

34
Components/Pages/MovieDetail.razor
View File

@@ -2,41 +2,23 @@
<PageTitle>Movie Details</PageTitle> <PageTitle>Movie Details</PageTitle>
<style> <div class="row g-4" style="max-width: 800px;">
.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) @if (movie is not null)
{ {
<h1>@movie.Title</h1> <h1>@movie.Title</h1>
<div></div> <div class="col-md-4">
<img src="@movie.Poster" alt="@movie.Title Poster" /> <img src="@movie.Poster" alt="@movie.Title Poster" class="img-fluid" />
<div class="details"> </div>
<div class="col-md-8">
<p>@movie.Runtime</p> <p>@movie.Runtime</p>
<p>@movie.Plot</p> <p>@movie.Plot</p>
@if(ManageFavorite.IsFavorite(id)) @if(ManageFavorite.IsFavorite(id))
{ {
<button class="btn-secondary favorite" @onclick="ToggleFavoriteMovie">Remove Favorite</button> <button class="btn btn-warning" @onclick="ToggleFavoriteMovie">Remove Favorite</button>
} }
else else
{ {
<button class="btn-secondary not-favorite" @onclick="ToggleFavoriteMovie">Add to Favorites</button> <button class="btn btn-secondary" @onclick="ToggleFavoriteMovie">Add to Favorites</button>
} }
</div> </div>
} }
@@ -71,6 +53,6 @@
private async Task ToggleFavoriteMovie() private async Task ToggleFavoriteMovie()
{ {
await ManageFavorite.ToggleFavoriteMovie(id); await ManageFavorite.ToggleFavoriteMovie(movie!);
} }
} }

5
Models/Movie.cs
View File

@@ -1,13 +1,10 @@
using System.Text.Json.Serialization; using System.Text.Json.Serialization;
/// <summary> /// <summary>
/// Rappresenta un film con le sue proprietà principali. /// Rappresenta un film con le sue proprietà principali.
/// Non ho preso tutte le proprietà disponibili dall'API OMDB, solo quelle richieste. /// Non ho preso tutte le proprietà disponibili dall'API OMDB, solo quelle richieste.
/// </summary> /// </summary>
class Movie public class Movie
{ {
public required string Title { get; set; } public required string Title { get; set; }
public required string Year { get; set; } public required string Year { get; set; }

5
Models/MovieSearch.cs
View File

@@ -1,13 +1,10 @@
using System.Text.Json.Serialization; using System.Text.Json.Serialization;
/// <summary> /// <summary>
/// Modello per rappresentare i risultati di una ricerca di film. /// Modello per rappresentare i risultati di una ricerca di film.
/// Ha solo scopo di deserializzazione della risposta JSON dell'API OMDB. /// Ha solo scopo di deserializzazione della risposta JSON dell'API OMDB.
/// </summary> /// </summary>
class MovieSearch public class MovieSearch
{ {
public required Movie[] Search { get; set; } public required Movie[] Search { get; set; }
[JsonPropertyName("totalResults")] [JsonPropertyName("totalResults")]

28
Services/ManageFavorite.cs
View File

@@ -8,7 +8,7 @@ class ManageFavorite(Blazored.LocalStorage.ILocalStorageService localStorage)
{ {
// Inject the local storage service // Inject the local storage service
private readonly Blazored.LocalStorage.ILocalStorageService LocalStorage = localStorage; private readonly Blazored.LocalStorage.ILocalStorageService LocalStorage = localStorage;
private readonly List<string> MoviesIDs = []; private readonly List<Movie> Movies = [];
/// <summary> /// <summary>
/// Load favorite movies from local storage /// Load favorite movies from local storage
@@ -17,9 +17,9 @@ class ManageFavorite(Blazored.LocalStorage.ILocalStorageService localStorage)
/// <returns></returns> /// <returns></returns>
public async Task LoadFavorites() public async Task LoadFavorites()
{ {
var favorites = await LocalStorage.GetItemAsync<List<string>>("favorite") ?? []; var favorites = await LocalStorage.GetItemAsync<List<Movie>>("favorite") ?? [];
MoviesIDs.Clear(); Movies.Clear();
MoviesIDs.AddRange(favorites); Movies.AddRange(favorites);
} }
/// <summary> /// <summary>
@@ -29,35 +29,35 @@ class ManageFavorite(Blazored.LocalStorage.ILocalStorageService localStorage)
/// <returns>True if the movie is favorite, otherwise false</returns> /// <returns>True if the movie is favorite, otherwise false</returns>
public bool IsFavorite(string movieID) public bool IsFavorite(string movieID)
{ {
return MoviesIDs.Contains(movieID); return Movies.Any(m => m.IdIMDB == movieID);
} }
/// <summary> /// <summary>
/// Toggle favorite status of a movie (by ID) /// Toggle favorite status of a movie (by ID)
/// </summary> /// </summary>
/// <param name="movieID">The movie ID to toggle</param> /// <param name="movie">The movie ID to toggle</param>
/// <returns>The new favorite status</returns> /// <returns>The new favorite status</returns>
public async Task<bool> ToggleFavoriteMovie(string movieID) public async Task<bool> ToggleFavoriteMovie(Movie movie)
{ {
if (!IsFavorite(movieID)) if (!IsFavorite(movie.IdIMDB))
{ {
MoviesIDs.Add(movieID); Movies.Add(movie);
} }
else else
{ {
MoviesIDs.RemoveAll(id => id == movieID); Movies.RemoveAll(m => m.IdIMDB == movie.IdIMDB);
} }
await LocalStorage.SetItemAsync("favorite", MoviesIDs); await LocalStorage.SetItemAsync("favorite", Movies);
return IsFavorite(movieID); return IsFavorite(movie.IdIMDB);
} }
/// <summary> /// <summary>
/// Get the list of favorite movie IDs /// Get the list of favorite movie IDs
/// </summary> /// </summary>
/// <returns>The list of favorite movie IDs</returns> /// <returns>The list of favorite movie IDs</returns>
public List<string> GetFavoriteMovies() public List<Movie> GetFavoriteMovies()
{ {
return MoviesIDs; return Movies;
} }
} }