Loading and unloading theme.

Also moved the fav-button down to the exhibition component instead of in App.tsx as this makes more sense.

#12

src/App.css

@@ -13,7 +13,7 @@
 }
 
 #wrapperdiv button {
-    width: 80px;
+    width: 150px;
     margin: 40px;
 }
 

src/App.tsx

@@ -134,7 +134,6 @@ const App: React.FC = () => {
   const addFavourite = (index: number) => {
     const newFavs = [...favourites, index];
     setFavourites(newFavs);
-    console.log(newFavs);
     lsm.change("favourites", newFavs);
   };
 
@@ -145,7 +144,6 @@ const App: React.FC = () => {
   const removeFavorite = (index: number) => {
     const newFavs = favourites.filter((i) => i !== index);
     setFavourites(newFavs);
-    console.log(newFavs);
     lsm.change("favourites", newFavs);
   };
 
@@ -153,7 +151,9 @@ const App: React.FC = () => {
    * Will change between the themes available for the web-page
    */
   const changeTheme = () => {
-    setTheme(theme === 0 ? 1 : 0);
+    const newTheme = theme === 0 ? 1 : 0;
+    setTheme(newTheme);
+    lsm.change("theme", newTheme);
   };
 
   return (
@@ -190,14 +190,6 @@ const App: React.FC = () => {
                 >
                   Next poetry
                 </button>
-                <button
-                  id="favouritebutton"
-                  onClick={() => {
-                    toggleFavourite(currentIndex);
-                  }}
-                >
-                  {isFavourite(currentIndex) ? "Remove from fav" : "Add to fav"}
-                </button>
                 <button
                   id="themebutton"
                   onClick={() => {
@@ -213,6 +205,8 @@ const App: React.FC = () => {
                     lines={installation.lines}
                     currentIndex={currentIndex + 1}
                     audiosource={AUDIO_FILES[currentIndex]}
+                    toggleFavourite={toggleFavourite}
+                    isFavourite={isFavourite}
                   />
                 }
               </div>

src/components/Exhibition.tsx

@@ -12,7 +12,10 @@ const Exhibition: React.FC<Installation> = ({
   lines,
   currentIndex,
   audiosource,
+  toggleFavourite,
+  isFavourite,
 }) => {
+
   /**
    * Temporary function as not all the animations are done
    * @param specification - the color specification
@@ -50,6 +53,15 @@ const Exhibition: React.FC<Installation> = ({
       <h3>
         By - <em>{author}</em>
       </h3>
+      <button
+        id="favouritebutton"
+        onClick={() => {
+          toggleFavourite(currentIndex - 1);
+        }}
+      >
+        {isFavourite(currentIndex - 1) ? "Remove from fav" : "Add to fav"}
+      </button>
+      <br />
       <canvas id="canvas" width="400" height="500" />
       <br />
       <button

src/types.d.ts

@@ -4,6 +4,8 @@ type Installation = {
   lines: string[] | undefined;
   currentIndex: number;
   audiosource: HTMLAudioElement;
+  toggleFavourite: (index: number) => void;
+  isFavourite: (index: number) => boolean;
 };
 
 type InstallationList = {