From a1b22b9000508154651a4c5d8391cc54b5fbf524 Mon Sep 17 00:00:00 2001
From: Kira <iam@kirajiroux.com>
Date: Tue, 5 Sep 2023 11:16:28 -0700
Subject: [PATCH] Abstracting movie display into child component

---
 Blazor_DotNet8_MovieApp/Pages/Index.razor     | 16 +---------------
 Blazor_DotNet8_MovieApp/Pages/MovieItem.razor | 19 +++++++++++++++++++
 Blazor_DotNet8_MovieApp/_Imports.razor        |  4 ++++
 3 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 Blazor_DotNet8_MovieApp/Pages/MovieItem.razor

diff --git a/Blazor_DotNet8_MovieApp/Pages/Index.razor b/Blazor_DotNet8_MovieApp/Pages/Index.razor
index a1a85ff..f0e960e 100644
--- a/Blazor_DotNet8_MovieApp/Pages/Index.razor
+++ b/Blazor_DotNet8_MovieApp/Pages/Index.razor
@@ -2,8 +2,6 @@
 @* @attribute [StreamRendering(true)] *@
 @attribute [RenderModeServer]
 
-@using Blazor_DotNet8_MovieApp.Models;
-@using Blazor_DotNet8_MovieApp.Services;
 
 @inject IMovieReviewService MovieReviewService
 
@@ -24,19 +22,7 @@ else
             
             @foreach(MovieModel movie in movieGroup)
             {
-                <div class="col-md-3 mb-2">
-                    <a href="/MovieReview/@movie?.Id">
-                        <img class="img-thumbnail" src="@movie?.ImageUrl">
-                        <div class="card-body">
-                            <h5 class="card-title">
-                                @movie?.Title
-                            </h5>
-                            <p class="card-text">
-                                @movie?.Description
-                            </p>
-                        </div>
-                    </a>
-                </div>
+                <MovieItem Movie="@movie" />
             }
 
         </div>
diff --git a/Blazor_DotNet8_MovieApp/Pages/MovieItem.razor b/Blazor_DotNet8_MovieApp/Pages/MovieItem.razor
new file mode 100644
index 0000000..9e8aed3
--- /dev/null
+++ b/Blazor_DotNet8_MovieApp/Pages/MovieItem.razor
@@ -0,0 +1,19 @@
+
+<div class="col-md-3 mb-2">
+    <a href="/MovieReview/@Movie?.Id" style="text-decoration:none">
+        <img class="img-thumbnail" src="@Movie?.ImageUrl">
+        <div class="card-body">
+            <h5 class="card-title">
+                @Movie?.Title
+            </h5>
+            <p class="card-text">
+                @Movie?.Description
+            </p>
+        </div>
+    </a>
+</div>
+
+@code {
+    [Parameter]
+    public MovieModel? Movie { get; set; }
+}
diff --git a/Blazor_DotNet8_MovieApp/_Imports.razor b/Blazor_DotNet8_MovieApp/_Imports.razor
index d401b40..8c686f7 100644
--- a/Blazor_DotNet8_MovieApp/_Imports.razor
+++ b/Blazor_DotNet8_MovieApp/_Imports.razor
@@ -7,3 +7,7 @@
 @using Microsoft.JSInterop
 @using Blazor_DotNet8_MovieApp
 @using Blazor_DotNet8_MovieApp.Shared
+@using Blazor_DotNet8_MovieApp.Models
+@using Blazor_DotNet8_MovieApp.Services;
+
+