Add setPage to context #8

Add a method to directly set the page

frontend/src/Components/ArtPage.tsx

@@ -67,7 +67,7 @@ class ArtPage extends React.Component<props, state> {
     render() {
         return (
             <div className={`artpage background-${this.state.options.background} font-${this.state.options.font}`}>
-                <FavoriteButton/>
+                <FavoriteButton pageId={this.props.pageId}/>
                 <OptionsContext.Provider value={this.state}>
                     <DropDown/>
                 </OptionsContext.Provider>

frontend/src/Components/FavoriteButton.tsx

-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import active from '../Media/favorite-active.png';
+import inactive from '../Media/favorite.png';
 
-const FavoriteButton = () => {
-  return <div>FavoriteButton</div>
+type props = {
+    pageId: number;
+}
+
+const FavoriteButton = (props: props) => {
+    const localStorage = window.localStorage; // Retrieve the local storage
+    const pageId = props.pageId.toString(); // Needs to be string for local storage
+    // Retrieve whether or not the current page is a favorite stored locally
+    const initVal = localStorage.getItem(pageId) === 'true';
+    const [isFavorite, setIsFavorite] = useState(initVal);
+
+    useEffect(() => { // Runs whenever we change page. Check if current page is favorite
+      const favorite = localStorage.getItem(pageId) === 'true';
+      setIsFavorite(favorite); // Update the displayed favorite
+    }, [pageId]);
+
+    const toggleFavorite = () => { // Whenever user clicks the button
+        const newValue = (!isFavorite).toString(); // Invert the current choice
+        localStorage.setItem(pageId, newValue); // Update the storage
+        setIsFavorite(newValue === 'true'); // Update the state
+    };
+
+    return (<div className={"favorite-button"}>
+        <img
+            src={isFavorite ? active : inactive}
+            alt={"favorite-active"}
+            style={{width: '4rem', height: '4rem'}}
+            onClick={toggleFavorite}
+        />
+    </div>)
 };
 
 export default FavoriteButton;
\ No newline at end of file

frontend/src/Components/FavoriteLink.tsx

+import React, {useContext} from "react";
+import {PageContext} from "./MainPage";
+
+type props = {
+    id: number,
+};
+
+const FavoriteLink = (props: props) => {
+    const context = useContext(PageContext);
+    return (<li className={"fav-link"}>
+        <p onClick={() => context.setPage(props.id)}>{props.id}</p>
+    </li>)
+};
+
+export default FavoriteLink;
\ No newline at end of file

frontend/src/Components/LandingPage.tsx

-import React from 'react';
+import React, {ReactComponentElement, ReactElement} from 'react';
 import NavButton from './NavButton';
 import "../Style/LandingPage.css"
+import FavoriteLink from "./FavoriteLink";
 
 type props = { // Typescript definitions for the arguments received via props
 }
 
 type state = { // Typescript definitions for the state variables of the class
-
+    favorites: Array<ReactElement>;
 }
 
 class LandingPage extends React.Component<props, state> {
 
-  constructor(props: props) {
-    super(props); // Allows access to props in other functions
-  }
-
-  render() {
-    return (
-      <div className={'landing-page'}>
-        <h1 className={'title'}> Welcome to the gallery!</h1>
-
-        <div className={'welcome-svg'}>
-          <svg className={"SVG"} xmlns="http://www.w3.org/2000/svg" height="400" width="400">
-            <polygon points="325,250 150,325 75,250 " fill="blue" fill-opacity="0.5"></polygon>
-            <polygon points="150,325 325,150 75,150 " fill="red" fill-opacity="0.5"></polygon>
-            <polygon points="325,250 250,75 75,150 " fill="green" fill-opacity="0.5"></polygon>
-            <polygon points="150,325 325,250 75,250 " fill="pink" fill-opacity="0.5"></polygon>
-            <polygon points="75,150 250,325 150,325 " fill="yellow" fill-opacity="0.5"></polygon>
-            <polygon points="150,75 75,250 250,325 " fill="orange" fill-opacity="0.5"></polygon>
-          </svg>
-        </div>
-        <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"} />
-        </div>
-        <div className={'navbutton right'}>
-          <NavButton direction={"right"} />
-        </div>
-      </div>
-    );
-  }
+    constructor(props: props) {
+        super(props); // Allows access to props in other functions
+        this.state = {favorites: []}
+    }
+
+    componentDidMount(): void {
+        const favs = [];
+        for (let i = 1; i < 12; i++) {
+            const favorite = window.localStorage.getItem(i.toString()) === 'true';
+            if (favorite) favs.push(<FavoriteLink id={i}/>);
+        }
+        this.setState({favorites: favs})
+    }
+
+    render() {
+        return (
+            <div className={'landing-page'}>
+                <h1 className={'title'}> Welcome to the gallery!</h1>
+                <div className={'welcome-svg'}>
+                    <svg className={"SVG"} xmlns="http://www.w3.org/2000/svg" height="400" width="400">
+                        <polygon points="325,250 150,325 75,250 " fill="blue" fill-opacity="0.5"></polygon>
+                        <polygon points="150,325 325,150 75,150 " fill="red" fill-opacity="0.5"></polygon>
+                        <polygon points="325,250 250,75 75,150 " fill="green" fill-opacity="0.5"></polygon>
+                        <polygon points="150,325 325,250 75,250 " fill="pink" fill-opacity="0.5"></polygon>
+                        <polygon points="75,150 250,325 150,325 " fill="yellow" fill-opacity="0.5"></polygon>
+                        <polygon points="150,75 75,250 250,325 " fill="orange" fill-opacity="0.5"></polygon>
+                    </svg>
+                </div>
+                <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={'favorites'}>
+                    <p>Favorites</p>
+                    <ul>{this.state.favorites}</ul>
+                </div>
+                <div className={'navbutton left'}>
+                    <NavButton direction={"left"}/>
+                </div>
+                <div className={'navbutton right'}>
+                    <NavButton direction={"right"}/>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default LandingPage;

frontend/src/Components/MainPage.tsx

@@ -11,7 +11,10 @@ type state = {
     totalPages: number
 }
 
-export const PageContext = React.createContext((arg0: boolean) => {
+export const PageContext = React.createContext({
+    changePage: (arg0: boolean) => {
+    }, setPage: (arg0: number) => {
+    }
 });
 
 class MainPage extends React.Component<props, state> {
@@ -19,7 +22,7 @@ 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 /> :
+        return this.state.currentPage == 0 ? <LandingPage/> :
             <ArtPage pageId={this.state.currentPage}/>;
     }
 
@@ -31,6 +34,10 @@ class MainPage extends React.Component<props, state> {
             this.setState({currentPage: newPage % this.state.totalPages}); // Go to the new page or loop around if you've hit last page
     };
 
+    setPage = (pageId: number) => {
+        this.setState({currentPage: pageId});
+    };
+
     render() {
         return (
             <div className={'main-page'}>
@@ -38,7 +45,10 @@ class MainPage extends React.Component<props, state> {
                     Header
                 </div>
                 <div className={'body'}>
-                    <PageContext.Provider value={this.changePage}>
+                    <PageContext.Provider value={{
+                        changePage: this.changePage,
+                        setPage: this.setPage,
+                    }}>
                         {this.determineRender()}
                     </PageContext.Provider>
                 </div>

frontend/src/Components/NavButton.tsx

@@ -7,11 +7,12 @@ type props = {
 }
 
 const NavButton = (props: props) => {
-  const changePage = useContext(PageContext);
+  const context = useContext(PageContext);
+  console.log(context);
 
   const onClick = () => {
     const increment: boolean = props.direction == "right";
-    changePage(increment);
+    context.changePage(increment);
   };
 
   return (

frontend/src/Style/LandingPage.css

@@ -21,6 +21,12 @@
     place-self: center; 
 }
 
+.favorites {
+    grid-area: welcome-p;
+    padding-top: 7rem;
+    padding-left: 3rem;
+}
+
 .welcome-p { 
     grid-area: welcome-p;
     text-align: left;