diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index 1402254c08c02f71ad532484a768a9c1e2f38af9..464e4cdabc31b65e2a7b7d5a9d5fe5538cd6d342 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/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>
diff --git a/frontend/src/Components/FavoriteButton.tsx b/frontend/src/Components/FavoriteButton.tsx
index 9781ab80a769a94cc5e7fbde1276c8edc1e8b006..8b61b7fd729886159e632db8db164fb3f415002a 100644
--- a/frontend/src/Components/FavoriteButton.tsx
+++ b/frontend/src/Components/FavoriteButton.tsx
@@ -1,7 +1,37 @@
-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
diff --git a/frontend/src/Components/FavoriteLink.tsx b/frontend/src/Components/FavoriteLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..89ea88a2199be2489d5d620375dd8f0d0f082c0a
--- /dev/null
+++ b/frontend/src/Components/FavoriteLink.tsx
@@ -0,0 +1,15 @@
+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
diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index d78f4270fc9446f5d487d7fbbd20662a72827873..9f98f557cd1c4d274ebaae5e702aefe2f431d31a 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -1,46 +1,63 @@
-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;
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index e0c3e1ed2c5a1cf79e4add601cf8a79f21fe165f..49a3d2d2e1f98e62c5193736ddc84dd69e5af401 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/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>
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
index 49f14565b8720c7755b87f8d0e775e4cb7b6916f..3e7ce432e5403e851bb716a2a275357b7f8b18c4 100644
--- a/frontend/src/Components/NavButton.tsx
+++ b/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 (
diff --git a/frontend/src/Media/favorite-active.png b/frontend/src/Media/favorite-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d1f0bbb7a43e1985a963298ba6437afe672aafd
Binary files /dev/null and b/frontend/src/Media/favorite-active.png differ
diff --git a/frontend/src/Media/favorite.png b/frontend/src/Media/favorite.png
new file mode 100644
index 0000000000000000000000000000000000000000..146ccb11107c11d4cc2defd5034964ecbd9f6193
Binary files /dev/null and b/frontend/src/Media/favorite.png differ
diff --git a/frontend/src/Style/FavoriteLink.css b/frontend/src/Style/FavoriteLink.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/src/Style/LandingPage.css b/frontend/src/Style/LandingPage.css
index 01757af4697963edf8626ab0b41665a1cfac63de..dc29b4453efc050f352f5d300b27c93c6f50ada6 100644
--- a/frontend/src/Style/LandingPage.css
+++ b/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;