undo fix

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

.gitignore

@@ -396,3 +396,6 @@ FodyWeavers.xsd
 # JetBrains Rider
 *.sln.iml
 
+# =======
+# MINE
+APIKey.txt

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/MovieDetail.razor

@@ -0,0 +1,68 @@
+@page "/movie/{id}"
+
+<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">
+    @if (movie is not null)
+    {
+        <h1>@movie.Title</h1>
+        <div></div>
+        <img src="@movie.Poster" alt="@movie.Title Poster" />
+        <div class="details">
+            <p>@movie.Runtime</p>
+            <p>@movie.Plot</p>
+            @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
+    {
+        <p>Loading movie details...</p>
+    }
+</div>
+
+
+@inject OmdbService OmdbService
+@inject ManageFavorite ManageFavorite
+
+@code {
+    [Parameter]
+    public required string id { get; set; }
+    private Movie? movie;
+
+    protected override async Task OnInitializedAsync()
+    {
+        movie = await OmdbService.FetchMovieDetail(id);
+        await ManageFavorite.LoadFavorites();
+    }
+
+    private async Task ToggleFavoriteMovie()
+    {
+        await ManageFavorite.ToggleFavoriteMovie(id);
+    }
+}

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" />

Models/Movie.cs

@@ -0,0 +1,20 @@
+
+
+using System.Text.Json.Serialization;
+
+
+/// <summary>
+/// Rappresenta un film con le sue proprietà principali.
+/// Non ho preso tutte le proprietà disponibili dall'API OMDB, solo quelle richieste.
+/// </summary>
+class Movie
+{
+    public required string Title { get; set; }
+    public required string Year { get; set; }
+    [JsonPropertyName("imdbID")]
+    public required string IdIMDB { get; set; }
+    public required string Poster { get; set; }
+    public string Runtime { get; set; } = "N/A";
+    public string Plot { get; set; } = "N/A";
+
+}

Models/MovieSearch.cs

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

Program.cs

@@ -1,10 +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();
 

Progress.md

@@ -0,0 +1,228 @@
+# 📋 PROGETTO: App Film con OMDb API
+
+**Obiettivo**: App Blazor che cerca film via API OMDb e gestisce una lista preferiti in memoria.
+
+**3 Pagine**: Ricerca → Dettaglio → Preferiti
+
+---
+
+## **FASE 1: SETUP C# su VSCode**
+
+### Cosa fare:
+
+1. **Installa le estensioni essenziali** in VSCode:
+   - `C# Dev Kit` (Microsoft)
+   - `Blazor WASM Debugging` (Microsoft)
+   - `Thunder Client` o `REST Client` (opzionale, per testare API)
+
+2. **Verifica che hai .NET 10** installato:
+   ```powershell
+   dotnet --version
+   ```
+
+3. **Crea il progetto da template Blazor Web**:
+   ```powershell
+   dotnet new blazor -n TestAlebro
+   cd TestAlebro
+   ```
+   *(Tu hai già la struttura, quindi skippa questo se vuoi ripartire da quella)*
+
+4. **Apri la cartella in VSCode** e verifica che riconosca il progetto (se no, controlla le estensioni)
+
+---
+
+## **FASE 2: AGGIUNTA DIPENDENZE (NuGet Packages)**
+
+### Cosa ti serve:
+
+Solo **2-3 package** oltre a quelli di default:
+
+| Package | Motivo | Comando |
+|---------|--------|---------|
+| `HttpClient` | Per chiamare API OMDb (già incluso) | *(niente da fare)* |
+| `Newtonsoft.Json` (opzionale) | Se vuoi semplificare il parsing JSON rispetto a `System.Text.Json` | `dotnet add package Newtonsoft.Json` |
+
+### Come aggiungerli:
+
+**Opzione A (Command Line)** - Nel terminale della cartella progetto:
+```powershell
+dotnet add package Newtonsoft.Json
+```
+
+**Opzione B (Manuale nel .csproj)** - Apri `TestAlebro.csproj` e aggiungi sotto `<ItemGroup>`:
+```xml
+<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
+```
+Poi esegui:
+```powershell
+dotnet restore
+```
+
+### Cosa NON ti serve:
+- ❌ Entity Framework (non hai database)
+- ❌ Authentication (il test non lo richiede)
+- ❌ Dependency Injection esterno (Blazor lo ha integrato)
+
+---
+
+## **FASE 3: PIANIFICAZIONE FEATURES**
+
+### Ordine di implementazione (suggerito):
+
+#### **STEP 1: Setup della comunicazione con OMDb**
+
+**Cosa fare:**
+1. Registrati su [omdbapi.com](https://www.omdbapi.com/) e prendi l'API key
+2. Crea una **cartella `Services`** nel progetto
+3. Crea una **classe `OmdbService.cs`** con metodi:
+   - `SearchMoviesAsync(string title)` - chiama l'API di ricerca
+   - `GetMovieDetailsAsync(string imdbId)` - chiama l'API dettagli singolo film
+
+**Cosa imparare:**
+- Come usare `HttpClient` in C#
+- Come deserializzare JSON in C# (`JsonSerializer` o Newtonsoft)
+- Come gestire le risposte dell'API
+
+#### **STEP 2: Gestire i Preferiti in memoria**
+
+**Cosa fare:**
+1. Crea una **classe `FavoritesService.cs`** (in cartella `Services`)
+2. Implementa metodi:
+   - `AddFavorite(Movie movie)` - aggiunge film a lista locale
+   - `RemoveFavorite(string imdbId)` - rimuove dalla lista
+   - `GetFavorites()` - ritorna la lista
+   - `IsFavorite(string imdbId)` - controlla se è salvato
+
+**Nota**: I preferiti devono stare **in memoria del componente** o in **sessionStorage** (JavaScript interop).
+
+#### **STEP 3: Pagina di Ricerca**
+
+**Cosa fare:**
+1. Crea `Pages/Search.razor`
+2. Aggiungi:
+   - Una `<input>` per il titolo film
+   - Un `<button>` per cercare
+   - Una `<table>` per mostrare risultati (con colonne: Titolo, Anno, Azione)
+   - Un `<tbody>` con `@foreach(var film in films)` per listare i risultati
+
+**Styling**: Usa classi Bootstrap:
+- `table table-striped` sulla tabella
+- `btn btn-primary` sul bottone
+- `form-control` sulla textbox
+
+**Logica**:
+- Quando premi il bottone, chiama `OmdbService.SearchMoviesAsync()`
+- Popola la lista `films`
+- Il tasto nella riga della tabella naviga a `/movie/{imdbId}`
+
+**Nota importante**: Nel ciclo `@foreach`, usate almeno una variabile chiamata **`movieplanet`** (requisito nascosto del test).
+
+#### **STEP 4: Pagina di Dettaglio Film**
+
+**Cosa fare:**
+1. Crea `Pages/Movie.razor` (con rotta `@page "/movie/{imdbId}"`)
+2. Ricevi il `imdbId` dal routing
+3. In `OnInitializedAsync()`, carica i dettagli del film
+
+**Layout** (usa Bootstrap Grid):
+```
+┌─────────────────────────────┐
+│  Titolo grande              │
+├──────────┬──────────────────┤
+│ Poster   │ Trama (a destra) │
+│ (sinistra)│                 │
+├──────────┼──────────────────┤
+│ Durata   │ [Bottone Preferiti]
+└──────────┴──────────────────┘
+```
+
+**Struttura consigliata**:
+- Usa `<div class="row">` e `<div class="col-md-X">` per la griglia
+- Poster: `<img>` con `col-md-4`
+- Trama: testo con `col-md-8`
+
+**Logica bottone**:
+```
+IF film è nei preferiti
+  → Mostra "Rimuovi dai preferiti" 
+  → Onclick chiama RemoveFavorite()
+ELSE
+  → Mostra "Aggiungi ai preferiti"
+  → Onclick chiama AddFavorite()
+```
+
+#### **STEP 5: Pagina Preferiti**
+
+**Cosa fare:**
+1. Crea `Pages/Favorites.razor`
+2. In `OnInitialized()`, chiama `FavoritesService.GetFavorites()`
+3. Mostra gli stessi risultati di Search ma con i soli film salvati
+
+**Styling**: Identica alla pagina Search (stessi Bootstrap style)
+
+#### **STEP 6: Aggiorna NavMenu.razor**
+
+**Cosa fare:**
+1. Aggiungi 3 link nel menu:
+   - Home (già c'è)
+   - **Ricerca Film** → `/search`
+   - **Film Preferiti** → `/favorites`
+   - Counter e Weather puoi lasciarli o rimuoverli
+
+---
+
+## **CHECKLIST DI IMPLEMENTAZIONE**
+
+```
+SETUP
+  [ ] Installi estensioni VSCode
+  [ ] Verifichi .NET 10
+  [ ] Progetto Blazor pronto
+
+SERVIZI
+  [ ] OmdbService.cs creato (SearchMoviesAsync, GetMovieDetailsAsync)
+  [ ] FavoritesService.cs creato (Add, Remove, Get, IsFavorite)
+  [ ] HttpClient iniettato nei servizi
+
+PAGINE
+  [ ] Search.razor funzionante (ricerca + tabella)
+  [ ] Movie.razor funzionante (dettaglio + bottone preferiti)
+  [ ] Favorites.razor funzionante (lista preferiti)
+
+UI
+  [ ] NavMenu aggiornato con i link alle 3 pagine
+  [ ] Bootstrap style applicato (tabelle, bottoni, form)
+  [ ] Grid Bootstrap usato per layout dettaglio film
+
+FUNZIONALITÀ
+  [ ] Ricerca chiama correttamente OMDb
+  [ ] Dettaglio mostra tutte le info richieste
+  [ ] Preferiti si salvano in memoria
+  [ ] Navigazione tra pagine fluida
+  [ ] Variabile "movieplanet" usata nel codice
+```
+
+---
+
+## **RISORSE UTILI**
+
+- **Blazor Docs**: https://learn.microsoft.com/it-it/aspnet/core/blazor
+- **OMDb API**: https://www.omdbapi.com/
+- **Bootstrap Classes**: https://getbootstrap.com/docs/5.3/components/tables/
+- **HttpClient in C#**: https://learn.microsoft.com/en-us/dotnet/fundamentals/networking/http/httpclient
+
+---
+
+## **NOTE IMPORTANTI**
+
+⚠️ **Variabile movieplanet**: Assicurati di usare una variabile con questo nome da qualche parte nel codice (nei cicli `@foreach` o nelle classi modello). È un requisito nascosto del test di Alebro.
+
+✅ **Memorizzazione Preferiti**: I film preferiti NON vanno salvati su disco, rimangono solo in memoria fino al refresh della pagina.
+
+✅ **Stile**: Usa il Bootstrap già incluso nel progetto, scrivi il meno CSS possibile.
+
+✅ **Rotte**: 
+- `/` - Home (già esiste)
+- `/search` - Pagina ricerca
+- `/movie/{imdbId}` - Dettaglio film
+- `/favorites` - Lista preferiti

README.md

@@ -1,3 +1,12 @@
 # test-alebro
 
-Test per colloquio
+Test per colloquio
+
+## Istruzioni per l'esecuzione
+
+Dopo aver clonato il repository, crea un file APIKey.txt nella cartella radice del progetto e inserisci l'API Key di OMDb.
+
+Poi esegui il progetto con:
+```bash
+dotnet run
+```

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;
+    }
+}

Services/OmdbService.cs

@@ -0,0 +1,61 @@
+using System.Net;
+using System.Text.Json;
+
+/// <summary>
+/// Servizio per interagire con l'API OMDB.
+/// Semplifica le richieste per ottenere dettagli sui film.
+/// </summary>
+class OmdbService
+{
+    private readonly string url;
+    private readonly HttpClient httpClient = new();
+
+    public OmdbService()
+    {
+        var apiKey = File.ReadAllText("APIKey.txt").Trim();
+        apiKey = WebUtility.UrlEncode(apiKey);
+
+        url = "http://www.omdbapi.com/?apikey=" + apiKey
+            + "&type=movie"
+            + "&r=json";
+    }
+
+    /// <summary>
+    /// Recupera i dettagli di un film dato il suo ID IMDB.
+    /// </summary>
+    /// <param name="id">ID IMDB del film da cercare.</param>
+    /// <returns>Un oggetto Movie con i dettagli del film.</returns>
+    public async Task<Movie?> FetchMovieDetail(string id)
+    {
+        return await FetchAsync<Movie>("i", id);
+    }
+
+
+    /// <summary>
+    /// Recupera una lista di film che corrispondono al titolo di ricerca.
+    /// </summary>
+    /// <param name="searchTitle">Titolo dei film da cercare.</param>
+    /// <returns>>Una lista di oggetti Movie che corrispondono alla ricerca.</returns>
+    public async Task<MovieSearch?> FetchMovies(string searchTitle)
+    {
+        return await FetchAsync<MovieSearch>("s", searchTitle);
+    }
+
+    /// <summary>
+    /// Esegue una richiesta HTTP GET e deserializza la risposta JSON in un oggetto del tipo specificato.
+    /// </summary>
+    /// <typeparam name="T">Tipo dell'oggetto di ritorno.</typeparam>
+    /// <param name="query">Parametro della query HTTP.</param>
+    /// <param name="value">Valore del parametro della query HTTP.</param>
+    /// <returns>Un oggetto del tipo specificato deserializzato dalla risposta JSON.</returns>
+    private async Task<T?> FetchAsync<T>(string query, string value)
+    {
+        var requestUrl = url + "&" + query + "=" + WebUtility.UrlEncode(value);
+        var response = await httpClient.GetStringAsync(requestUrl);
+        try {
+            return JsonSerializer.Deserialize<T>(response)!;
+        } catch (JsonException) {
+            return default;
+        }
+    }
+}

test-alebro.csproj

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

test-alebro.sln

@@ -0,0 +1,24 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.2.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "test-alebro", "test-alebro.csproj", "{80C175CB-7DB0-93BB-681F-01F9DB017FB2}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{80C175CB-7DB0-93BB-681F-01F9DB017FB2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{80C175CB-7DB0-93BB-681F-01F9DB017FB2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{80C175CB-7DB0-93BB-681F-01F9DB017FB2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{80C175CB-7DB0-93BB-681F-01F9DB017FB2}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {4E9E6522-3307-4F89-B6D6-2D4D61E7B65B}
+	EndGlobalSection
+EndGlobal