Merge branch 'page-flow-navigation' into 'master'

Add navigation via buttons #8

See merge request it2810-h20/team-75/prosjekt-2!4

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>
     );

frontend/src/Components/ExhibitionPiece.tsx

 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;

frontend/src/Components/LandingPage.tsx

 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>);
   }
 }
 

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() {

frontend/src/Components/NavButton.tsx

 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

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);
       });

frontend/src/SVGs.tsx

+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