Commit 86593425 authored by Håvard Pettersen's avatar Håvard Pettersen

Merge branch 'feature/session-refresh' into 'master'

tabs lasting through reload, some comments

See merge request !33
parents 0dd441f4 81e64b8f
Pipeline #50328 passed with stages
in 2 minutes and 31 seconds
......@@ -6,16 +6,15 @@ import DisplayContainer from "./display/DisplayContainer.jsx";
import ConfigurationContainer from "./configuration/ConfigurationContainer.jsx";
export default function InteractiveDisplayContainer() {
const [selectedTab, setSelectedTab] = useState("tab1");
const [chosenCategories, setCategories] = useState({Art: null, Poetry: null, Sound: null});
//unnecessary, but added to show that we have used sessionstorage
const [selectedTabSession, setSelectedTabSession] = useState("Tab 1")
//if there is a sessionStorage item for tab, set that tab as selected
const [selectedTab, setSelectedTab] = useState(sessionStorage.getItem("tab") ? JSON.parse(sessionStorage.getItem("tab")) : "tab1");
//when selectedTab changes store tab in sessionstorage
useEffect(() => {
setSelectedTabSession(JSON.parse(sessionStorage.getItem("tab")))
}, [selectedTab, chosenCategories, selectedTabSession]);
sessionStorage.setItem("tab", JSON.stringify(selectedTab))
}, [selectedTab]);
const [chosenCategories, setCategories] = useState({Art: null, Poetry: null, Sound: null});
return (
<>
......@@ -26,7 +25,7 @@ export default function InteractiveDisplayContainer() {
</div>
<div className="interactive-display-row">
<DisplayContainer
selectedTab={selectedTabSession}
selectedTab={selectedTab}
chosenCategories={chosenCategories}/>
<ConfigurationContainer
chooseCategories={setCategories}
......
......@@ -6,19 +6,23 @@ export default function ConfigurationContainer({chooseCategories, chosenCategori
const categories = ["Potatoes", "Cars", "Shrek"];
//randomly choose categories
const randomExhibit = () => {
chooseCategories({Art: categories[Math.floor(Math.random() * 3)], Poetry: categories[Math.floor(Math.random() * 3)], Sound: categories[Math.floor(Math.random() * 3)]})
}
//save favorite categories to localStorage
const saveFavorite = () => {
if (chosenCategories["Art"] && chosenCategories["Poetry"] && chosenCategories["Sound"])
localStorage.setItem("favorite", JSON.stringify(chosenCategories))
};
//load favorite categories from localStorage
const loadFavorite = () => {
chooseCategories(JSON.parse(localStorage.getItem("favorite")))
};
//the configuration container is initially shown on desktop, but initially hidden on mobile
const [showHideState, setShowHideState] = useState(window.innerWidth > 600);
......
......@@ -9,9 +9,15 @@ function ExhibitType(
}
) {
//every category is mapped to a radio button input
const options = categories.map(category =>
<div key={type + category}>
<input type='radio' name={type} checked={category===chosenCategories[type]} value={category} onChange={() => choose({...chosenCategories, [type]: category})} />
<input
type='radio'
name={type}
checked={category===chosenCategories[type]}
value={category}
onChange={() => choose({...chosenCategories, [type]: category})} />
{category}
</div>
);
......
......@@ -4,6 +4,7 @@ export default function DisplayArt({artCategory, selectedTab}) {
const [image, setImage] = useState("");
//image is fetched as a blob and FileReader is used to create a URL which can be passed to the img tag
useEffect(() => {
fetch("media/art/"+ selectedTab + "_" + artCategory.toLowerCase() +".svg", {cache: "force-cache", mode: "same-origin"})
.then(res => res.blob())
......
......@@ -4,6 +4,7 @@ export default function DisplayPoem({poemCategory, selectedTab}) {
const [poem, setPoem] = useState([]);
//the poem is formatted as an array of strings and each string is turned into either a br tag or a div tag
useEffect(() => {
fetch("media/text/" + selectedTab + "_" + poemCategory.toLowerCase() +".json", {cache: "force-cache", mode: "same-origin"})
.then(res => res.json())
......
......@@ -4,6 +4,7 @@ export default function DisplaySound({soundCategory, selectedTab}) {
const [sound, setSound] = useState("");
//audio file is fetched as a blob and FileReader is used to create a URL which can be passed to the img tag
useEffect(() => {
fetch("media/sound/" + selectedTab + "_" + soundCategory.toLowerCase() + ".mp3", {cache: "force-cache", mode: "same-origin"})
.then(res => res.blob())
......
import React, {useEffect} from "react";
import React from "react";
export default function Tab({ name, selectedTab, setSelectedTab }) {
useEffect(() => {
sessionStorage.setItem("tab", JSON.stringify(selectedTab))
});
return (
<>
<div
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment