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>

Components/Layout/MovieTable.razor

@@ -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}");
+    }
+}

Components/Pages/Favorites.razor

@@ -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();
+        }
     }
 }

Components/Pages/Home.razor

@@ -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);

Components/Pages/MovieDetail.razor

@@ -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!);
     }
 }