Add ability to change font #5

Only changes the font inside the ArtPAge. Can consider using Context to change the font on the top level entity

frontend/src/Components/ArtPage.tsx

-import React from 'react';
+import React, {Context} from 'react';
 import ExhibitionPiece from './ExhibitionPiece';
 import FavoriteButton from './FavoriteButton';
 import DropDown from './DropDown';
@@ -7,31 +7,52 @@ 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
+    pageId: number; // The id of the page
+    changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
 }
 
-class ArtPage extends React.Component<props> {
-
-  constructor(props: props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className={'artpage'}>
-        <FavoriteButton/>
-        <DropDown/>
-        <ExhibitionPiece artId={this.props.pageId}/>
-        <div className={'navbutton left'}>
-          <NavButton changePage={this.props.changePage} direction={"left"}/>
-        </div>
-        <div className={'navbutton right'}>
-          <NavButton changePage={this.props.changePage} direction={"right"}/>
-        </div>
-      </div>
-    );
-  }
+type options = { [key: string]: string };
+type state = {
+    options: options;
+    updateOption: (arg0: string, arg1: string) => void;
+};
+export const OptionsContext = React.createContext({} as state);
+
+class ArtPage extends React.Component<props, state> {
+
+    updateToggleChoice = (label: string, choice: string) => {
+        this.setState(current => ({
+            ...current,
+            options: {...current.options, [label.toLowerCase()]: choice.toLowerCase()}
+        }));
+    };
+
+    state = {
+        options: {
+            "sound": "",
+            "background": "one",
+            "font": "calibri"
+        },
+        updateOption: this.updateToggleChoice
+    };
+
+    render() {
+        return (
+            <div className={`artpage background-${this.state.options.background} font-${this.state.options.font}`}>
+                <FavoriteButton/>
+                <OptionsContext.Provider value={this.state}>
+                    <DropDown/>
+                </OptionsContext.Provider>
+                <ExhibitionPiece artId={this.props.pageId}/>
+                <div className={'navbutton left'}>
+                    <NavButton changePage={this.props.changePage} direction={"left"}/>
+                </div>
+                <div className={'navbutton right'}>
+                    <NavButton changePage={this.props.changePage} direction={"right"}/>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default ArtPage;
\ No newline at end of file

frontend/src/Components/DropDown.tsx

 import React, { useState } from 'react';
 import '../Style/DropDown.css';
-import DropDownToggle from './DropDownToggle';
+import DropDownSelect from './DropDownSelect';
 
-type props = {}
-
-const DropDown = (props: props) => {
+const DropDown = () => {
   const [clicked, setClicked] = useState(false);
 
-  const OneOptions = [1, 2, 3, 4];
-  const TwoOptions = ['Happy', 'Sombre', 'Peaceful'];
-  const ThreeOptions = ["Upbeat", "Downbeat"];
-
-  const option1Method = (value: string) => {
-    console.log(value); // Temporary. Should alter something later
-  };
-
-  const option2Method = (value: string) => {
-    console.log(value);
-  };
-
-  const option3Method = (value: string) => {
-    console.log(value);
-  };
+  const BackgroundOptions = ["One", "Two", "Three", "Four"];
+  const FontOptions = ['Calibri', 'Arial', 'Sans'];
+  const MusicOptions = ["Upbeat", "Downbeat"];
 
   const determineRender = () => {
     if (clicked) return (
       <div className={'dropdown-menu'}>
-        <DropDownToggle
-          optionLabel={"Background "}
-          options={OneOptions}
-          parentFunction={option1Method}
+        <DropDownSelect
+          optionLabel={"Background"}
+          options={BackgroundOptions}
         />
-        <DropDownToggle
-          optionLabel={"Mood "}
-          options={TwoOptions}
-          parentFunction={option2Method}
+        <DropDownSelect
+          optionLabel={"Font"}
+          options={FontOptions}
         />
-        <DropDownToggle
-          optionLabel={"Music "}
-          options={ThreeOptions}
-          parentFunction={option3Method}
+        <DropDownSelect
+          optionLabel={"Sound"}
+          options={MusicOptions}
         />
       </div>
     );

frontend/src/Components/DropDownSelect.tsx

+import React, {useContext, useState} from 'react';
+import {OptionsContext} from "./ArtPage";
+
+type props = {
+    options: Array<string>; // Depends on if the user is choosing strings or numbers
+    optionLabel: "Background" | "Sound" | "Font";
+};
+
+const DropDownSelect = (props: props) => {
+    const context = useContext(OptionsContext); // Uses context defined in ArtPage
+    const [value, setValue] = useState(context.options[props.optionLabel.toLowerCase()]); // The currently submitted element
+
+    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => { // Called whenever user changes choice
+        event.preventDefault(); // To prevent default HTML behavior
+        const val = event.currentTarget.value;
+        setValue(val); // Update the value with the newly selected one
+        context.updateOption(props.optionLabel, val); // Calls the function of the parent with the submitted value
+    };
+
+    const renderOptions = () => { // To render a varying amount of options
+        return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
+    };
+
+    return (<div className={'drop-down-toggle'}>
+        <form>
+            <label>
+                {props.optionLabel}
+                <select value={value} onChange={handleChange}>
+                    {renderOptions()}
+                </select>
+            </label>
+        </form>
+    </div>);
+};
+
+export default DropDownSelect;
\ No newline at end of file

frontend/src/Components/DropDownToggle.tsx

-import React, { FormEvent, useState } from 'react';
-
-type props = {
-  parentFunction: (arg0: string) => void;
-  options: Array<string | number>; // Depends on if the user is choosing strings or numbers
-  optionLabel: string;
-}
-
-const DropDownToggle = (props: props) => {
-  const [value, setValue] = useState(''); // The currently submitted element
-
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => { // Called whenever user changes choice
-    event.preventDefault(); // To prevent default HTML behavior
-    setValue(event.currentTarget.value); // Update the value with the newly selected one
-  };
-
-  const handleSubmit = (event: FormEvent) => { // Called once the form is submitted using the button
-    event.preventDefault(); // To prevent default HTML behavior
-    props.parentFunction(value); // Calls the function of the parent with the submitted value
-  };
-
-  const renderOptions = () => { // To render a varying amount of options
-    return props.options.map(opt => <option value={opt} key={opt}>{opt}</option>);
-  };
-
-  return (<div className={'drop-down-toggle'}>
-    <form onSubmit={handleSubmit}>
-      <label>
-        {props.optionLabel}
-        <select value={value} onChange={handleChange}>
-          {renderOptions()}
-        </select>
-      </label>
-      <input type={'submit'} value={'Submit'}/>
-    </form>
-  </div>);
-};
-
-export default DropDownToggle;
\ No newline at end of file

frontend/src/Components/ExhibitionPiece.tsx

@@ -17,8 +17,8 @@ const ExhibitionPiece = (props: props) => {
 
   return (
     <div className={'exhibition-piece'}>
-      <div className={"title"}>
-        {title}
+      <div className={"exhibition-piece-title"}>
+          <h1>{title}</h1>
       </div>
       <div className={"author"}>
         {author}

frontend/src/Components/MainPage.tsx

@@ -25,7 +25,7 @@ class MainPage extends React.Component<props, state> {
   changePage = (increment: boolean) => {
     const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
     this.setState({ currentPage: newPage % this.state.totalPages }); // Go to the new page or loop around if you've hit last page
-  }
+  };
 
   render() {
     return (

frontend/src/Style/ArtPage.css

@@ -23,6 +23,34 @@
     margin-top: 1rem;
 }
 
+.background-one {
+    background-color: red;
+}
+
+.background-two {
+    background-color: purple;
+}
+
+.background-three {
+    background-color: grey;
+}
+
+.background-four {
+    background-color: green;
+}
+
+.font-arial {
+    font-family: Arial, serif;
+}
+
+.font-calibri {
+    font-family: Calibri, serif;
+}
+
+.font-sans {
+    font-family: "Comic Sans MS", serif;
+}
+
 .navbutton {
     grid-row: 3 / 4;
     display: flex;