Merge branch 'dropdown-menu' into 'master'

Create basic dropdown menu

See merge request it2810-h20/team-75/prosjekt-2!5

frontend/src/Components/DropDown.tsx

-import React from 'react';
+import React, { useState } from 'react';
+import '../Style/DropDown.css';
+import DropDownToggle from './DropDownToggle';
 
-const DropDown = () => {
-  return <div className={"dropdown"}>DropDown</div>
+type props = {}
+
+const DropDown = (props: props) => {
+  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 determineRender = () => {
+    if (clicked) return (
+      <div className={'dropdown-menu'}>
+        <DropDownToggle
+          optionLabel={"Background "}
+          options={OneOptions}
+          parentFunction={option1Method}
+        />
+        <DropDownToggle
+          optionLabel={"Mood "}
+          options={TwoOptions}
+          parentFunction={option2Method}
+        />
+        <DropDownToggle
+          optionLabel={"Music "}
+          options={ThreeOptions}
+          parentFunction={option3Method}
+        />
+      </div>
+    );
+  };
+
+  return (<div className={'dropdown'}>
+    <span className={'settings-icon'} onClick={() => setClicked(!clicked)}/>
+    {determineRender()}
+  </div>);
 };
 
 export default DropDown;
\ 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/Style/DropDown.css

+.settings-icon {
+    background-image: url("../Media/settings.png");
+    background-position: center;
+    background-size: contain;
+    width: 3rem;
+    height: 3rem;
+}
\ No newline at end of file