Movie Table (#2)

* Table to search movies implemented
* OMDB service for API connection

Reviewed-on: #2
Co-authored-by: Berack96 <giacomobertolazzi7@gmail.com>
Co-committed-by: Berack96 <giacomobertolazzi7@gmail.com>

Components/Pages/Favorites.razor

@@ -4,4 +4,15 @@
 
 <h1>TODO</h1>
 
+<button class="btn btn-primary" @onclick="FaiCose">FaiCose</button>
 
+@inject OmdbService OmdbService
+@inject IJSRuntime JSRuntime
+
+@code {
+    private async Task FaiCose()
+    {
+        var movies = await OmdbService.FetchMovies("Matrix");
+        var movieDetail = await OmdbService.FetchMovieDetail("tt11749868");
+    }
+}

Components/Pages/Home.razor

@@ -2,6 +2,54 @@
 
 <PageTitle>Home</PageTitle>
 
-<h1>Hello, world!</h1>
+<form class="mb-3" @onsubmit="OnSearch">
+    <input type="text" class="form-control" placeholder="Search for movies..."
+        style="width: 40%; margin-bottom: 10px;"
+        @bind="searchTitle" @bind:event="oninput" />
+    <div class="d-flex align-items-center gap-2">
+        <button class="btn btn-primary" type="submit">Search</button>
+        <p class="mb-0">@((movies == null) ? "" : movies.TotalResults + " results found")</p>
+    </div>
+</form>
 
-Welcome to your new app.
+<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 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/Movie.razor

@@ -0,0 +1,11 @@
+@page "/movie/{id}"
+
+<PageTitle>Movie Details</PageTitle>
+
+<h1>TODO</h1>
+<p>Movie ID: @id</p>
+
+@code {
+    [Parameter]
+    public string id { get; set; }
+}

Components/Routes.razor

@@ -1,4 +1,5 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+@rendermode InteractiveServer
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
     <Found Context="routeData">
         <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
         <FocusOnNavigate RouteData="routeData" Selector="h1" />