Favorites (#4)

* 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:
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

View File

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

View File

@@ -12,42 +12,14 @@
</div>
</form>
<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>
<MovieTable Movies="movies" />
@inject OmdbService OmdbService
@inject NavigationManager NavigationManager
@code {
private string searchTitle = "";
private MovieSearch? movies = null;
private async Task OnMovieSelected(string imdbID)
{
NavigationManager.NavigateTo($"/movie/{imdbID}");
}
private async Task OnSearch()
{
movies = await OmdbService.FetchMovies(searchTitle);

View File

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