Move gallery from homepage to seperate page, create tempoary homepage

src/App.js

@@ -20,6 +20,7 @@ import { About } from "./pages/About"
 import { Home } from "./pages/Home"
 import { Contact } from "./pages/Contact"
 import { Detail } from "./pages/Detail";
+import { Gallery } from "./pages/Gallery";
 
 // contexts
 import { StorageContext } from "./contexts/StorageContext";
@@ -92,16 +93,17 @@ function App() {
   }
 
 
+  // modify the navigation on line 101 to new home page (gallery is set for now)
   return (
     <div className="App">
       <Header items={nav} user={auth} />
         <StorageContext.Provider value={FBstorage}>
           <Routes>
-            <Route path="/" element={<Home items={data} />} />
+            <Route path="/" element={<Home/>} /> 
             <Route path="/about" element={<About greeting="Hey you, this is about page!" handler={saySomething} />} />
             <Route path="/contact" element={<Contact greeting="Hey you, this is contact page!" />} />
             <Route path="/detail/:id" element={<Detail handler={getDocument} />} />
-            <Route path="/gallery" element={<Home items={data} />} />
+            <Route path="/gallery" element={<Gallery items={data} />} />
           </Routes>
         </StorageContext.Provider>
     </div>

src/pages/Gallery.js

@@ -0,0 +1,41 @@
+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 } from "react"
+import { ItemImage } from "../components/ItemImage"
+
+export function Gallery(props) {
+    const [artworks,setArtworks] = useState([])
+
+    useEffect(() => {
+      console.log( props.items )
+      setArtworks( props.items )
+    }, [props.items])
+  
+  
+  
+    const ItemCards = artworks.map( ( artwork, itemkey ) => {
+      const itemLink = `/detail/${artwork.id}`
+      return(
+        <Col md={4} className="mb-4" key={itemkey}>
+          <Card key={itemkey} className="position-relative">
+            <a href={itemLink} className="position-absolute" style={{top:0, left:0, right:0, bottom:0}}>
+            </a>
+            <ItemImage source={ artwork.artwork_image} />
+            <Card.Body>
+              <Card.Title>{ artwork.artwork_title }</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      )
+    })
+  
+    return (
+      <Container>
+        <Row>
+          {ItemCards}
+        </Row>
+      </Container>
+    )
+  }

src/pages/Home.js

@@ -1,41 +1,16 @@
-import Row from 'react-bootstrap/Row';
+// DEVELOP HOME PAGE HERE
-import Col from 'react-bootstrap/Col';
+
-import Container from "react-bootstrap/Container";
+
-import Card from "react-bootstrap/Card";
+//import required modules
-import { useState, useEffect } from "react"
+import { Container } from "react-bootstrap"
-import { ItemImage } from "../components/ItemImage"
+
+
 
 export function Home(props) {
-    const [artworks,setArtworks] = useState([])
+  return (
-
+    // temp home page
-    useEffect(() => {
+    <Container>
-      console.log( props.items )
+      <p>This is a tempoary home page</p>
-      setArtworks( props.items )
+    </Container>
-    }, [props.items])
+  )
-  
+} 
-  
-  
-    const ItemCards = artworks.map( ( artwork, itemkey ) => {
-      const itemLink = `/detail/${artwork.id}`
-      return(
-        <Col md={4} className="mb-4" key={itemkey}>
-          <Card key={itemkey} className="position-relative">
-            <a href={itemLink} className="position-absolute" style={{top:0, left:0, right:0, bottom:0}}>
-            </a>
-            <ItemImage source={ artwork.artwork_image} />
-            <Card.Body>
-              <Card.Title>{ artwork.artwork_title }</Card.Title>
-            </Card.Body>
-          </Card>
-        </Col>
-      )
-    })
-  
-    return (
-      <Container>
-        <Row>
-          {ItemCards}
-        </Row>
-      </Container>
-    )
-  }