Merge branch 'refactor_code' into 'master'

Refactor code, session storage feature expansion

Closes #20 and #19

See merge request !15

public/txt/ajax_info.json

-
-{
-    "text": "Here is some text loaded with ajax in json and this is great! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
-

public/txt/grapefruit.json

-{
-    "text": "Here is some text loaded with ajax in json about Grapefruit! :D  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
\ No newline at end of file

public/txt/lime.json

-{
-    "text": "Here is some text loaded with ajax in json about Lime! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
\ No newline at end of file

public/txt/tomato.json

-{
-    "text": "Here is some text loaded with ajax in json about TOMATO! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
\ No newline at end of file

public1/img/0/0.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
-</svg>

public1/img/0/1.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
-</svg>

public1/img/0/2.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
-</svg>

public1/img/0/3.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
-</svg>

public1/img/1/0.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
-</svg>

public1/img/1/1.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
-</svg>

public1/img/1/2.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
-</svg>

public1/img/1/3.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
-</svg>

public1/img/2/0.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
-</svg>

public1/img/2/1.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
-</svg>

public1/img/2/2.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
-</svg>

public1/img/2/3.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
-</svg>

public1/img/410.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
-</svg>

public1/img/420.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
-</svg>

public1/img/430.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
-</svg>

public1/img/440.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
-  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/> 
-  <text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
-</svg>

public1/index.html

-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public1/manifest.json

-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }	    
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public1/robots.txt

-# https://www.robotstxt.org/robotstxt.html
-User-agent: *

public1/txt/0/0.json

-{
-    "text": "City
-BY FREDERICK SEIDEL
-Right now, a dog tied up in the street is barking
-With the grief of being left,
-A dog bereft.
-Right now, a car is parking.
- 
-The dog emits
-Petals of a barking flower and barking flakes of snow
-That float upward from the street below
-To where another victim sits:
- 
-Who listens to the whole city
-And the dog honking like a car alarm,
-And doesn’t mean the dog any harm,
-And doesn’t feel any pity."
-}
\ No newline at end of file

public1/txt/0/1.json

-{
-    "text": "Text cat 0, tab 1"
-}
\ No newline at end of file

public1/txt/0/2.json

-{
-    "text": "Text cat 0, tab 2"
-}
\ No newline at end of file

public1/txt/0/3.json

-{
-    "text": "Text cat 0, tab 3"
-}
\ No newline at end of file

public1/txt/1/0.json

-{
-    "text": "Text cat 1, tab 0"
-}
\ No newline at end of file

public1/txt/1/1.json

-{
-    "text": "Text cat 1, tab 1"
-}
\ No newline at end of file

public1/txt/1/2.json

-{
-    "text": "Text cat 1, tab 2"
-}
\ No newline at end of file

public1/txt/1/3.json

-{
-    "text": "Text cat 1, tab 3"
-}
\ No newline at end of file

public1/txt/2/0.json

-{
-    "text": "Text cat 2, tab 0"
-}
\ No newline at end of file

public1/txt/2/1.json

-{
-    "text": "Text cat 2, tab 1"
-}
\ No newline at end of file

public1/txt/2/2.json

-{
-    "text": "Text cat 2, tab 2"
-}
\ No newline at end of file

public1/txt/2/3.json

-{
-    "text": "Text cat 2, tab 3"
-}
\ No newline at end of file

public1/txt/ajax_info.json

-
-{
-    "text": "Here is some text loaded with ajax in json and this is great! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
-

public1/txt/grapefruit.json

-{
-    "text": "Here is some text loaded with ajax in json about Grapefruit! :D  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
\ No newline at end of file

public1/txt/lime.json

-{
-    "text": "Here is some text loaded with ajax in json about Lime! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
\ No newline at end of file

public1/txt/tomato.json

-{
-    "text": "Here is some text loaded with ajax in json about TOMATO! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
\ No newline at end of file

src/App.js

@@ -3,8 +3,6 @@ import './App.css';
 import Title from './components/Title';
 import Artwork from './components/Artwork';
 import './artwork.css';
-import {render} from "react-dom";
-import Tabs from './components/Tabs';
 import DisplayChooser from './components/DisplayChooser';
 import FavoriteSection from './components/FavoriteSection';
 import SessionElement from './components/SessionElement';
@@ -40,11 +38,11 @@ class App extends React.Component {
             };
         } else {
             this.state = {
-                artwork: 0,
+                artwork: Math.floor((Math.random() * 4)),
                 categorySelections: {
-                    textCat: 0,
-                    imageCat: 0,
-                    audioCat: 0,
+                    textCat: Math.floor((Math.random() * 3)),
+                    imageCat: Math.floor((Math.random() * 3)),
+                    audioCat: Math.floor((Math.random() * 3)),
                 },
                 sessionHistory: [],
                 sessionCounter: 0
@@ -52,6 +50,10 @@ class App extends React.Component {
         }
     }
 
+    componentDidMount() {
+        this.updateSession();
+    }
+
     checkForEmptyLocalStorage() {
         return !(localStorage.getItem('Text') === null || localStorage.getItem('Image') === null ||
             localStorage.getItem('Audio') === null || localStorage.getItem('artwork') === null);
@@ -84,7 +86,10 @@ class App extends React.Component {
         });
     };
 
-    sessionClicked = data => {
+    sessionClicked = (data, index) => {
+        this.setState({
+            sessionCounter: index + 1
+        })
         let dataAsArray = data.split(";");
         this.setState({
             artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
@@ -99,7 +104,12 @@ class App extends React.Component {
     updateSession = () => {
         let newCombination = JSON.parse(sessionStorage.getItem('combinationHistory'));
         if (newCombination === null) {
+            console.log("###");
+            
             newCombination = [];
+        } else {
+            // Remove forward history if manually selecting new artwork or category
+            newCombination = newCombination.splice(0, this.state.sessionCounter); 
         }
         newCombination.push(
             this.state.sessionCounter + "/" +
@@ -109,13 +119,50 @@ class App extends React.Component {
             "Audio:" + (parseInt(this.state.categorySelections.audioCat) + 1)
         );
         sessionStorage.setItem('combinationHistory', JSON.stringify(newCombination));
-        this.setState({
+        this.setState((oldState) => ({
             sessionHistory: JSON.parse(sessionStorage.getItem('combinationHistory')),
-            sessionCounter: (this.state.sessionCounter + 1)
-        });
+            sessionCounter: (oldState.sessionCounter + 1)
+        }));
     };
+    
+    sessionBack = () => {
+        if (this.state.sessionCounter <= 1) return;
+        
+        this.setState(oldState => {
+            let dataAsArray = oldState.sessionHistory[this.state.sessionCounter - 2].split(";");
+            return {
+                sessionCounter: (oldState.sessionCounter - 1),
+                artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
+                categorySelections: {
+                    textCat: (parseInt(dataAsArray[1].split(":").pop()) - 1),
+                    imageCat: (parseInt(dataAsArray[2].split(":").pop()) - 1),
+                    audioCat: (parseInt(dataAsArray[3].split(":").pop()) - 1)
+                }
+            }
+
+        });
+    }
+
+    sessionFwd = () => {
+        if (this.state.sessionCounter >= this.state.sessionHistory.length) return;
+
+        this.setState(oldState => {
+            let dataAsArray = oldState.sessionHistory[this.state.sessionCounter].split(";");
+            return {
+                sessionCounter: (oldState.sessionCounter + 1),
+                artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
+                categorySelections: {
+                    textCat: (parseInt(dataAsArray[1].split(":").pop()) - 1),
+                    imageCat: (parseInt(dataAsArray[2].split(":").pop()) - 1),
+                    audioCat: (parseInt(dataAsArray[3].split(":").pop()) - 1)
+                }
+            }
+
+        });
+    }
 
     handleArtworkChange(artworkId) {
+        if (this.state.artwork === artworkId) return;
         localStorage.setItem("artwork", artworkId);
         this.setState({artwork: artworkId}, event => this.updateSession());
     }
@@ -186,8 +233,13 @@ class App extends React.Component {
                                      categorySelections={categorySelections}/>
                         </div>
                     </div>
-                    <FavoriteSection handler={this}/>
-                    <SessionElement sessionHistory={sessionHistory} handler={this}/>
+                    <FavoriteSection save={this.saveAsFavorite} open={this.openFavorite}/>
+                    <SessionElement sessionHistory={sessionHistory} 
+                        sessionClicked={this.sessionClicked}
+                        sessionIndex={this.state.sessionCounter}
+                        backClicked={this.sessionBack}
+                        fwdClicked={this.sessionFwd} 
+                        />
                 </header>
             </div>
         );

src/components/Artwork.js

@@ -4,31 +4,26 @@ import Image from "./Image"
 import Audio from './Audio';
 import Tabs from './Tabs';
 
-class Artwork extends React.Component {
-
-    render() {
-        const artwork = this.props.artwork;
-        const textCat = this.props.categorySelections.textCat;
-        const imgCat = this.props.categorySelections.imageCat;
-        const audioCat = this.props.categorySelections.audioCat;
-        return (
-            <div className="theArtwork">
-              <div className="tabs">
-                <Tabs artwork={artwork} onArtworkChange={this.props.artworkChanged}/>
-              </div>
-              <div className="text">
-                  <Text artwork={artwork} cat={textCat} />
-              </div>
-              <div className="theImage">
-                <Image id="myImage" artwork={artwork} cat={imgCat} />
-              </div>
-              <div className="audio">
-                <Audio artwork={artwork} cat={audioCat} />
-              </div>
-            </div>
-        );
-    }
+export default function Artwork(props) {
+    const artwork = props.artwork;
+    const textCat = props.categorySelections.textCat;
+    const imgCat = props.categorySelections.imageCat;
+    const audioCat = props.categorySelections.audioCat;
 
+    return (
+        <div className="theArtwork">
+          <div className="tabs">
+            <Tabs artwork={artwork} onArtworkChange={props.artworkChanged}/>
+          </div>
+          <div className="text">
+              <Text artwork={artwork} cat={textCat} />
+          </div>
+          <div className="theImage">
+            <Image id="myImage" artwork={artwork} cat={imgCat} />
+          </div>
+          <div className="audio">
+            <Audio artwork={artwork} cat={audioCat} />
+          </div>
+        </div>
+    );
 }
-
-export default Artwork;

src/components/Categories.js

 import React from 'react';
 import '../style/CategoryComponent.css';
 
-export default class Categories extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div className="Category-component">
-                <input name={this.props.mediaType} type="checkbox" onChange={this.props.handleChange}
-                       value={this.props.value} id={this.props.selectionName} checked={this.props.checked}/>
-                <label htmlFor={this.props.selectionName}>{this.props.categoryName} {this.props.selectedIndex}</label>
-            </div>
-        );
-    }
+export default function Categories(props) {
+    return (
+        <div className="Category-component">
+            <input name={props.mediaType} type="checkbox" onChange={props.handleChange}
+                    value={props.value} id={props.selectionName} checked={props.checked}/>
+            <label htmlFor={props.selectionName}>{props.categoryName} {props.selectedIndex}</label>
+        </div>
+    );
 }

src/components/FavoriteSection.js

@@ -2,14 +2,40 @@ import React from 'react';
 import '../style/FavoriteButton.css';
 
 export default class FavoriteSection extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {showSaveFeedback: false};
+
+        this.save = this.save.bind(this);
+    }
+    
+    save = (e) => {
+        this.props.save(e);
+        this.setState({
+            showSaveFeedback: true
+        });
+        this.timerID = setInterval(
+            () => {
+                this.setState({
+                    showSaveFeedback: false
+                });
+            },
+            3500
+          );
+    }
 
     render() {
         return (
             <div className="Button-container">
-                <button onClick={this.props.handler.saveAsFavorite}>Save as favorite</button>
-                <button onClick={this.props.handler.openFavorite}>Open favourite</button>
+                <button onClick={this.save}>Save as favorite</button>
+                <button onClick={this.props.open}>Open favourite</button>
+                <p> { (this.state.showSaveFeedback) && "Favorite saved!" } </p>
+                
+
             </div>
         );
     }
 
+
 }

src/components/Image.js

@@ -25,8 +25,7 @@ class Image extends React.Component {
     fetchData() {
         const resource = "img/" + this.props.cat + "/" + this.props.artwork + ".svg";