diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index 6cbd55de9210c7c4ba3096c5a048172e4c44baff..62bb94b231c715b9d4f241252a287bbe8d44c114 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -8,6 +8,7 @@ import '../Style/ArtPage.css';
type props = {
pageId: number; // The id of the page
+ changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
}
class ArtPage extends React.Component<props> {
@@ -23,10 +24,10 @@ class ArtPage extends React.Component<props> {
<DropDown/>
<ExhibitionPiece artId={this.props.pageId}/>
<div className={'navbutton left'}>
- <NavButton/>
+ <NavButton changePage={this.props.changePage} direction={"left"}/>
</div>
<div className={'navbutton right'}>
- <NavButton/>
+ <NavButton changePage={this.props.changePage} direction={"right"}/>
</div>
</div>
);
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 64fd7191efda9c9a6fb801832b153a8871c6fb5c..9718f2b022a40b7f603d6f91a591cefb9264d141 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -1,13 +1,6 @@
import React, { useEffect, useState } from 'react';
import usePoetry from './usePoetry';
-import { render } from 'react-dom';
-
-const SVGs = [ // Collection of Artworks that will be displayed
- <svg viewBox={"0 0 200 80"}>
- <rect width={"200"} height={80} fill={"blue"} />
- </svg>,
- // TODO: ADD SVGS IN HERE
-]
+import SVGs from '../SVGs';
type props = {
artId: number;
diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index 52fc89272e3af4860bc05966fd84f5b1db6dbc50..1c8e67875ecfa7838f25ac87a0a1058c14423b92 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -1,9 +1,31 @@
import React from 'react';
+import NavButton from './NavButton';
-class LandingPage extends React.Component {
+type props = { // Typescript definitions for the arguments received via props
+ changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
+}
+
+type state = { // Typescript definitions for the state variables of the class
+
+}
+
+class LandingPage extends React.Component<props, state> {
+
+ constructor(props: props) {
+ super(props); // Allows access to props in other functions
+ }
render() {
- return <div>LandingPage</div>;
+ return (
+ <div>
+ LandingPage
+ <div className={'navbutton left'}>
+ <NavButton direction={"left"} changePage={this.props.changePage}/>
+ </div>
+ <div className={'navbutton right'}>
+ <NavButton direction={"right"} changePage={this.props.changePage}/>
+ </div>
+ </div>);
}
}
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index 420baeaa85a3bd27066060766a3bc0f11409eda3..43122bae3feed75da9140623954f8f13d37f86a8 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -4,13 +4,27 @@ import ExhibitionPiece from './ExhibitionPiece';
import LandingPage from './LandingPage';
import ArtPage from './ArtPage';
+type props = {
-class MainPage extends React.Component {
+}
+
+type state = {
+ currentPage: number,
+ totalPages: number
+}
- state = {currentPage: 1}; // Index of which page to render. 0 is the landing page
+class MainPage extends React.Component<props, state> {
+
+ state = { currentPage: 1, totalPages: 11 }; // Index of which page to render. 0 is the landing page
+
+ determineRender() { // Decides what page will be rendered
+ return this.state.currentPage == 0 ? <LandingPage changePage={this.changePage}/> :
+ <ArtPage changePage={this.changePage} pageId={this.state.currentPage}/>;
+ }
- determineRender() {
- return this.state.currentPage == 0 ? <LandingPage /> : <ArtPage pageId={this.state.currentPage} />
+ changePage = (increment: boolean) => {
+ const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
+ this.setState({ currentPage: newPage % this.state.totalPages }); // Go to the new page or loop around if you've hit last page
}
render() {
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
index 2265f92a8a7710ca43bf9b2d34c8d45f4ab04d6e..91ce8945d41d3613c79cfd432507a4b32fc764ce 100644
--- a/frontend/src/Components/NavButton.tsx
+++ b/frontend/src/Components/NavButton.tsx
@@ -1,7 +1,20 @@
import React from 'react';
-const NavButton = () => {
- return <div>NavButton</div>
+type props = {
+ changePage: (arg0: boolean) => void;
+ direction: string;
+}
+
+const NavButton = (props: props) => {
+
+ const onClick = () => {
+ const increment: boolean = props.direction == "right";
+ props.changePage(increment);
+ }
+
+ return (
+ <button onClick={onClick}>{props.direction}</button>
+ )
};
export default NavButton;
\ No newline at end of file
diff --git a/frontend/src/Components/usePoetry.tsx b/frontend/src/Components/usePoetry.tsx
index db327c8bd1b9e2ed62b7ea89b8779937ede47671..b87c2cb216e0a5183226476921cf54612f7db1c7 100644
--- a/frontend/src/Components/usePoetry.tsx
+++ b/frontend/src/Components/usePoetry.tsx
@@ -2,15 +2,15 @@ import React, { useEffect, useState } from 'react';
const poets = [
"Walt Whitman",
- "William Shakespeare",
"Alexander Pope",
- "Edgar Allan Poe",
- "Emily Bronte",
- "John Keats",
- "Oscar Wilde",
- "William Wordsworth",
- "Charlotte Bronte",
- "Eliza Cook"
+ "George Gordon",
+ "Emily Dickinson",
+ "William Morris",
+ "Sidney Lanier",
+ "Robert Herrick",
+ "Robert Burns",
+ "Edward Thomas",
+ "Richard Crashaw",
]
type dataResponse = {
@@ -29,7 +29,7 @@ const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. En
fetch(`https://poetrydb.org/author,poemcount,linecount/${poets[poetId]};1;4`) // GET request to poetryDb
.then((response) => response.json()) // Convert response to json
.then((data: Array<dataResponse>) => {
- setPoem(data[0].lines); // Update the state
+ setPoem(data[0].lines.slice(0,4)); // Update the state
setTitle(data[0].title);
setAuthor(data[0].author);
});
diff --git a/frontend/src/SVGs.tsx b/frontend/src/SVGs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..696d089f83b756234810412ddd098ed3d4e49b0f
--- /dev/null
+++ b/frontend/src/SVGs.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+export default [ // Collection of Artworks that will be displayed
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"blue"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"red"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"pink"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"black"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"brown"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"purple"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"yellow"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"green"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"gray"} />
+ </svg>,
+ <svg viewBox={"0 0 200 80"}>
+ <rect width={"200"} height={80} fill={"teal"} />
+ </svg>,
+ // TODO: ADD SVGS IN HERE
+];
\ No newline at end of file