Commit 358f6792 authored by Turid Cecilie Dahl's avatar Turid Cecilie Dahl
Browse files

Added current index to local and session storage

parent 4dd2486d
...@@ -15,19 +15,30 @@ class MiddlePart extends React.Component{ ...@@ -15,19 +15,30 @@ class MiddlePart extends React.Component{
this.handleOptionChangeImage = this.handleOptionChangeImage.bind(this); this.handleOptionChangeImage = this.handleOptionChangeImage.bind(this);
this.handleOptionChangeText = this.handleOptionChangeText.bind(this); this.handleOptionChangeText = this.handleOptionChangeText.bind(this);
this.handleGetFav = this.handleGetFav.bind(this); this.handleGetFav = this.handleGetFav.bind(this);
//If session has stored one of the radio buttons means that they have been here before so keep that combination //State keeps track of which category of text, sound and image is selected
if (sessionStorage.currentText){ //Check if the user has stored anything, and if so then use it
if (sessionStorage.currentText && sessionStorage.currentIndex){
//User has stored both radio button combination and navigation index
this.state = { this.state = {
currentIndex: 0, currentIndex: Number(sessionStorage.currentIndex),
soundIndex: sessionStorage.currentSound, soundIndex: sessionStorage.currentSound,
imageIndex: sessionStorage.currentImage, imageIndex: sessionStorage.currentImage,
textIndex: sessionStorage.currentText textIndex: sessionStorage.currentText
} }
} }
else if (sessionStorage.currentIndex){
//Only stored nagivation index
this.state = {
currentIndex: Number(sessionStorage.currentIndex),
soundIndex: 'animals',
imageIndex: 'pokemon',
textIndex: 'clicheQuotes'
}
}
else{ else{
//Nothing stored, first time on the website in that session
this.state = { this.state = {
currentIndex: 0, currentIndex: 0,
//Keeps track of which category of text, sound and image is selected
soundIndex: 'animals', soundIndex: 'animals',
imageIndex: 'pokemon', imageIndex: 'pokemon',
textIndex: 'clicheQuotes' textIndex: 'clicheQuotes'
...@@ -67,10 +78,12 @@ class MiddlePart extends React.Component{ ...@@ -67,10 +78,12 @@ class MiddlePart extends React.Component{
handleGetFav(){ handleGetFav(){
if(localStorage.favSound){ if(localStorage.favSound){
this.setState({ this.setState({
currentIndex: Number(localStorage.favIndex),
soundIndex: localStorage.favSound, soundIndex: localStorage.favSound,
imageIndex: localStorage.favImage, imageIndex: localStorage.favImage,
textIndex: localStorage.favText textIndex: localStorage.favText
}); });
sessionStorage.currentIndex = localStorage.favIndex
sessionStorage.currentSound = localStorage.favSound sessionStorage.currentSound = localStorage.favSound
sessionStorage.currentImage = localStorage.favImage sessionStorage.currentImage = localStorage.favImage
sessionStorage.currentText = localStorage.favText sessionStorage.currentText = localStorage.favText
...@@ -86,9 +99,11 @@ class MiddlePart extends React.Component{ ...@@ -86,9 +99,11 @@ class MiddlePart extends React.Component{
goToPrevSlide = () => { goToPrevSlide = () => {
if(this.state.currentIndex === 0){ if(this.state.currentIndex === 0){
this.setState({currentIndex: 3}) this.setState({currentIndex: 3})
sessionStorage.currentIndex = 3;
} }
else{ else{
this.setState({currentIndex: this.state.currentIndex - 1}); this.setState({currentIndex: this.state.currentIndex - 1});
sessionStorage.currentIndex = this.state.currentIndex -1;
} }
this._updateIndex = true; this._updateIndex = true;
} }
...@@ -97,9 +112,11 @@ class MiddlePart extends React.Component{ ...@@ -97,9 +112,11 @@ class MiddlePart extends React.Component{
goToNextSlide = () => { goToNextSlide = () => {
if(this.state.currentIndex === 3){ if(this.state.currentIndex === 3){
this.setState({currentIndex: 0}) this.setState({currentIndex: 0})
sessionStorage.currentIndex = 0;
} }
else{ else{
this.setState({currentIndex: this.state.currentIndex + 1}); this.setState({currentIndex: this.state.currentIndex + 1});
sessionStorage.currentIndex = this.state.currentIndex +1;
} }
this._updateIndex = true; this._updateIndex = true;
} }
...@@ -107,18 +124,22 @@ class MiddlePart extends React.Component{ ...@@ -107,18 +124,22 @@ class MiddlePart extends React.Component{
//Functions for navigation buttons at the bottom of the page. //Functions for navigation buttons at the bottom of the page.
goToFirstSlide = () => { goToFirstSlide = () => {
this.setState({currentIndex: 0}) this.setState({currentIndex: 0})
sessionStorage.currentIndex = 0;
this._updateIndex = true this._updateIndex = true
} }
goToSecondSlide = () => { goToSecondSlide = () => {
this.setState({currentIndex: 1}) this.setState({currentIndex: 1})
sessionStorage.currentIndex = 1;
this._updateIndex = true this._updateIndex = true
} }
goToThirdSlide = () => { goToThirdSlide = () => {
this.setState({currentIndex: 2}) this.setState({currentIndex: 2})
sessionStorage.currentIndex = 2;
this._updateIndex = true this._updateIndex = true
} }
goToFourthSlide = () => { goToFourthSlide = () => {
this.setState({currentIndex: 3}) this.setState({currentIndex: 3})
sessionStorage.currentIndex = 3;
this._updateIndex = true this._updateIndex = true
} }
...@@ -166,7 +187,9 @@ class MiddlePart extends React.Component{ ...@@ -166,7 +187,9 @@ class MiddlePart extends React.Component{
if (width < 768 || (width < height)) { if (width < 768 || (width < height)) {
return ( return (
<div> <div>
<Sidebar soundIndex={this.state.soundIndex} <Sidebar
currentIndex={this.state.currentIndex}
soundIndex={this.state.soundIndex}
imageIndex={this.state.imageIndex} imageIndex={this.state.imageIndex}
textIndex={this.state.textIndex} textIndex={this.state.textIndex}
handleOptionChangeSound={this.handleOptionChangeSound} handleOptionChangeSound={this.handleOptionChangeSound}
......
...@@ -12,6 +12,7 @@ class Sidebar extends Component { ...@@ -12,6 +12,7 @@ class Sidebar extends Component {
seeCombinationClickHandler(){ seeCombinationClickHandler(){
this.props.changeContent(); this.props.changeContent();
if (typeof(Storage) !== "undefined") { if (typeof(Storage) !== "undefined") {
sessionStorage.currentIndex = this.props.currentIndex
sessionStorage.currentSound = this.props.soundIndex sessionStorage.currentSound = this.props.soundIndex
sessionStorage.currentImage = this.props.imageIndex sessionStorage.currentImage = this.props.imageIndex
sessionStorage.currentText = this.props.textIndex sessionStorage.currentText = this.props.textIndex
...@@ -21,6 +22,7 @@ class Sidebar extends Component { ...@@ -21,6 +22,7 @@ class Sidebar extends Component {
//saves the combination in local storage //saves the combination in local storage
saveFav(){ saveFav(){
if (typeof(Storage) !== "undefined") { if (typeof(Storage) !== "undefined") {
localStorage.favIndex = this.props.currentIndex;
localStorage.favSound = this.props.soundIndex; localStorage.favSound = this.props.soundIndex;
localStorage.favImage = this.props.imageIndex; localStorage.favImage = this.props.imageIndex;
localStorage.favText = this.props.textIndex; localStorage.favText = this.props.textIndex;
......
Supports Markdown
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