Merge branch 'session-storage-dropdown' into 'master'

Add Session storage to dropdown #10 #7

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

frontend/src/Components/ArtPage.tsx

@@ -10,28 +10,57 @@ type props = {
     pageId: number; // The id of the page
 }
 
-type options = { [key: string]: string };
+type options = { [key: string]: string }; // Key string dictionary with different options
 type state = {
     options: options;
     updateOption: (arg0: string, arg1: string) => void;
 };
-export const OptionsContext = React.createContext({} as state);
+export const OptionsContext = React.createContext({} as state); // Context for passing down Options
 
 class ArtPage extends React.Component<props, state> {
 
-    updateToggleChoice = (label: string, choice: string) => {
+    updateToggleChoice = (label: string, choice: string) => { // Called when player updates the dropdown
+        this.updateOptions({...this.state.options, [label]: choice}); // Updates state
+        this.updateSessionStorage(label, choice); // Updates storage
+    };
+
+    updateOptions = (options: options) => { // Updates the state with newly received options
         this.setState(current => ({
             ...current,
-            options: {...current.options, [label.toLowerCase()]: choice.toLowerCase()}
-        }));
+            options
+        }))
+    };
+
+    updateSessionStorage = (label: string, choice: string) => {
+        const pageId = this.props.pageId.toString();
+        const choices = sessionStorage.getItem(pageId); // Previously stored options. Saved as string
+        if (choices != null) { // We have stored something previously
+            const choicesObject = JSON.parse(choices); // Convert string to object
+            sessionStorage.setItem(pageId, {...choicesObject, [label]: choice}); // Update choices
+        } else
+            sessionStorage.setItem(pageId, JSON.stringify({...this.state.options, [label]: choice}));
     };
 
+    componentDidUpdate(prevProps: Readonly<props>, prevState: Readonly<state>): void {
+        const {pageId} = this.props; // No toString as it compares with prevState
+        if (prevProps.pageId != pageId) { // We have changed page. Must update the options
+            const savedOptions = sessionStorage.getItem(pageId.toString());
+            if (savedOptions != null) { // Stored something previously
+                const savedOptionsObject = JSON.parse(savedOptions); // Convert string to object
+                this.updateOptions(savedOptionsObject);
+            } else {
+                this.updateOptions({...this.options});
+            }
+        }
+    }
+
+    options = {
+        "sound": "",
+        "background": "one",
+        "font": "calibri"
+    };
     state = {
-        options: {
-            "sound": "",
-            "background": "one",
-            "font": "calibri"
-        },
+        options: {...this.options},
         updateOption: this.updateToggleChoice
     };
 

frontend/src/Components/DropDownSelect.tsx

@@ -8,13 +8,14 @@ type props = {
 
 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 currentlySelected: string = context.options[props.optionLabel.toLowerCase()];
+    const [value, setValue] = useState(currentlySelected); // 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
+        context.updateOption(props.optionLabel.toLowerCase(), val.toLowerCase()); // Calls the function of the parent with the submitted value
     };
 
     const renderOptions = () => { // To render a varying amount of options