From 337298348fd23b70394d3e5b1de213f3fe1050bf Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 14 Nov 2023 10:38:14 +0000
Subject: [PATCH] Copy Code from Book Club to Movie Club and modify code
 accordingly

---
 src/App.js                  |  2 ++
 src/components/ItemImage.js |  2 +-
 src/pages/Detail.js         | 22 ++++++++++++++++++++++
 src/pages/Home.js           | 10 ++++++----
 4 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Detail.js

diff --git a/src/App.js b/src/App.js
index c6d308e..6248934 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,6 +22,7 @@ import { Contact } from "./pages/Contact"
 import { Signup } from "./pages/Signup"
 import { Signout } from "./pages/Signout"
 import { Signin } from "./pages/Signin"
+import { Detail } from "./pages/Detail";
 
 // contexts
 import { AuthContext } from "./contexts/AuthContext"
@@ -142,6 +143,7 @@ const readData = async () => {
           <Route path="/signup" element={ <Signup handler={signUp}/> } />
           <Route path="/signout" element={ <Signout handler={logOut}/> } />
           <Route path="/signin" element={ <Signin handler={signIn} authstate={auth}/> } />
+          <Route path="/detail/:id" element={<Detail/>} />
         </Routes>
         </StorageContext.Provider>
         </AuthContext.Provider>
diff --git a/src/components/ItemImage.js b/src/components/ItemImage.js
index ba121ef..1fc9808 100644
--- a/src/components/ItemImage.js
+++ b/src/components/ItemImage.js
@@ -29,7 +29,7 @@ export function ItemImage ( props ) {
   }
   else {
     return (
-      <Card.Img variant='top' src={image} />
+      <Card.Img style={{aspectRatio: "3/4"}} variant='top' src={image} />
     )
   }
 }
\ No newline at end of file
diff --git a/src/pages/Detail.js b/src/pages/Detail.js
new file mode 100644
index 0000000..b19d52c
--- /dev/null
+++ b/src/pages/Detail.js
@@ -0,0 +1,22 @@
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Container from "react-bootstrap/Container";
+
+import { useParams } from 'react-router-dom';
+
+export function Detail(props) {
+    let { id } = useParams();
+    return(
+        <Container>
+            <Row>
+                <Col md={6}>
+                <h1>Image</h1>
+                </Col>
+                <Col md={6}>
+                <h2>Details</h2>
+                <p>{id}</p>
+                </Col>
+            </Row>
+        </Container>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 04596cc..da2ab67 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -2,8 +2,6 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from "react-bootstrap/Container";
 import Card from "react-bootstrap/Card";
-
-
 import { useState, useEffect, useContext } from "react"
 import { ItemImage } from "../components/ItemImage"
 
@@ -18,11 +16,15 @@ export function Home(props) {
   
   
     const ItemCards = movies.map( ( movie, itemkey ) => {
+      const itemLink = `/detail/${movie.id}`
       return(
-        <Col md={4}>
-          <Card key={itemkey}>
+        <Col md={4} className="mb-4">
+          <Card key={itemkey} className="position-relative">
+            <a href={itemLink} className="position-absolute" style={{top:0, left:0, right:0, bottom:0}}>
+            </a>
             <ItemImage source={ movie.cover_image} />
             <Card.Body>
+              <Card.Title>{ movie.movie_title }</Card.Title>
               <Card.Title>{ movie.title }</Card.Title>
             </Card.Body>
           </Card>