Merge branch 'navbuttons-context' into 'master'

Implement context API for navbuttons #8

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

frontend/src/Components/ArtPage.tsx

@@ -8,7 +8,6 @@ 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
 }
 
 type options = { [key: string]: string };
@@ -45,10 +44,10 @@ class ArtPage extends React.Component<props, state> {
                 </OptionsContext.Provider>
                 <ExhibitionPiece artId={this.props.pageId}/>
                 <div className={'navbutton left'}>
-                    <NavButton changePage={this.props.changePage} direction={"left"}/>
+                    <NavButton direction={"left"}/>
                 </div>
                 <div className={'navbutton right'}>
-                    <NavButton changePage={this.props.changePage} direction={"right"}/>
+                    <NavButton direction={"right"}/>
                 </div>
             </div>
         );

frontend/src/Components/FavoriteButton.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 
 const FavoriteButton = () => {
   return <div>FavoriteButton</div>
-}
+};
 
 export default FavoriteButton;
\ No newline at end of file

frontend/src/Components/LandingPage.tsx

@@ -3,7 +3,6 @@ import NavButton from './NavButton';
 import "../Style/LandingPage.css"
 
 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
@@ -34,10 +33,10 @@ class LandingPage extends React.Component<props, state> {
         <p className={'welcome-p'}>Welcome to this interactive gallery! In here you will find unique art pieces, consisting of a quote and SVG. If you turn up your volume you may hear some wonderful tunes to accompony you during the viewing. You can change settings to get your desired look! You can also save these settings for future appretiation of the art pieces.
         </p>
         <div className={'navbutton left'}>
-          <NavButton direction={"left"} changePage={this.props.changePage} />
+          <NavButton direction={"left"} />
         </div>
         <div className={'navbutton right'}>
-          <NavButton direction={"right"} changePage={this.props.changePage} />
+          <NavButton direction={"right"} />
         </div>
       </div>
     );

frontend/src/Components/MainPage.tsx

@@ -4,44 +4,47 @@ import ExhibitionPiece from './ExhibitionPiece';
 import LandingPage from './LandingPage';
 import ArtPage from './ArtPage';
 
-type props = {
-
-}
+type props = {}
 
 type state = {
-  currentPage: number,
-  totalPages: number
+    currentPage: number,
+    totalPages: number
 }
 
+export const PageContext = React.createContext((arg0: boolean) => {
+});
+
 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}/>;
-  }
-
-  changePage = (increment: boolean) => {
-    const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
-      if (newPage == -1)
-          this.setState({ currentPage: this.state.totalPages -1 }); // Negative modulo not supported
-      else
-          this.setState({ currentPage: newPage % this.state.totalPages }); // Go to the new page or loop around if you've hit last page
-  };
-
-  render() {
-    return (
-      <div className={'main-page'}>
-        <div className={'header'}>
-          Header
-        </div>
-        <div className={'body'}>
-          {this.determineRender()}
-        </div>
-      </div>
-    );
-  }
+    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 /> :
+            <ArtPage pageId={this.state.currentPage}/>;
+    }
+
+    changePage = (increment: boolean) => {
+        const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
+        if (newPage == -1)
+            this.setState({currentPage: this.state.totalPages - 1}); // Negative modulo not supported
+        else
+            this.setState({currentPage: newPage % this.state.totalPages}); // Go to the new page or loop around if you've hit last page
+    };
+
+    render() {
+        return (
+            <div className={'main-page'}>
+                <div className={'header'}>
+                    Header
+                </div>
+                <div className={'body'}>
+                    <PageContext.Provider value={this.changePage}>
+                        {this.determineRender()}
+                    </PageContext.Provider>
+                </div>
+            </div>
+        );
+    }
 }
 
-export default MainPage;
\ No newline at end of file
+export default MainPage;

frontend/src/Components/NavButton.tsx

-import React from 'react';
+import React, {useContext} from 'react';
+import usePoetry from "./usePoetry";
+import {PageContext} from "./MainPage";
 
 type props = {
-  changePage: (arg0: boolean) => void;
   direction: string;
 }
 
 const NavButton = (props: props) => {
+  const changePage = useContext(PageContext);
 
   const onClick = () => {
     const increment: boolean = props.direction == "right";
-    props.changePage(increment);
-  }
+    changePage(increment);
+  };
 
   return (
     <button onClick={onClick}>{props.direction}</button>