diff --git a/src/components/Header.js b/src/components/Header.js index 1aa1b3f..ff1196d 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,3 +1,4 @@ +// import modules required import Container from "react-bootstrap/Container" import Navbar from "react-bootstrap/Navbar" import Nav from "react-bootstrap/Nav" diff --git a/src/components/ItemImage.js b/src/components/ItemImage.js index 2effa2d..f23771d 100644 --- a/src/components/ItemImage.js +++ b/src/components/ItemImage.js @@ -1,13 +1,15 @@ +// import modules required import { useState, useEffect, useContext } from 'react' import { StorageContext } from '../contexts/StorageContext' import { ref, getDownloadURL } from 'firebase/storage' import Card from 'react-bootstrap/Card' export function ItemImage ( props ) { + // declare variables const [image,setImage] = useState() - const storage = useContext( StorageContext) + // useEffect to get image from Google Firebase Storage via the URL given in Google Firebase Firestore useEffect( () => { if( props.source ) { const imgref = ref( storage, `artworks/${props.source}`) @@ -17,6 +19,7 @@ export function ItemImage ( props ) { } }, [props.source] ) + // if image cannot be loaded, display a grey box as placeholder if(!image) { const defstyle={ backgroundColor: "#cccccc", @@ -29,6 +32,7 @@ export function ItemImage ( props ) { } else { return ( + // if all works out, display the image, title and author of the artwork in the gallery boxes with the correct scaling ) } diff --git a/src/pages/Home.js b/src/pages/Home.js index 28fec9e..d144530 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -10,7 +10,7 @@ export function Home(props) { return ( // temp home page - This is a tempoary home page + This is a tempoary home page further work will be done later on. ) } \ No newline at end of file
This is a tempoary home page
This is a tempoary home page further work will be done later on.