Commit 91d4cfcc authored by Turid Cecilie Dahl's avatar Turid Cecilie Dahl
Browse files

Minor fixes and cleanup

parent 358f6792
...@@ -15,6 +15,7 @@ class MiddlePart extends React.Component{ ...@@ -15,6 +15,7 @@ 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);
this.changeContent = this.changeContent.bind(this);
//State keeps track of which category of text, sound and image is selected //State keeps track of which category of text, sound and image is selected
//Check if the user has stored anything, and if so then use it //Check if the user has stored anything, and if so then use it
if (sessionStorage.currentText && sessionStorage.currentIndex){ if (sessionStorage.currentText && sessionStorage.currentIndex){
...@@ -36,7 +37,7 @@ class MiddlePart extends React.Component{ ...@@ -36,7 +37,7 @@ class MiddlePart extends React.Component{
} }
} }
else{ else{
//Nothing stored, first time on the website in that session //Nothing stored, first time on the website in that session. Use default values
this.state = { this.state = {
currentIndex: 0, currentIndex: 0,
soundIndex: 'animals', soundIndex: 'animals',
...@@ -44,7 +45,6 @@ class MiddlePart extends React.Component{ ...@@ -44,7 +45,6 @@ class MiddlePart extends React.Component{
textIndex: 'clicheQuotes' textIndex: 'clicheQuotes'
} }
} }
this.changeContent = this.changeContent.bind(this);
// Boolean variables to know when content should be changed, // Boolean variables to know when content should be changed,
// and when favorite collection should be displayed. // and when favorite collection should be displayed.
...@@ -74,7 +74,7 @@ class MiddlePart extends React.Component{ ...@@ -74,7 +74,7 @@ class MiddlePart extends React.Component{
} }
} }
//Set the radio buttons to favorite combination //Set the radio buttons to favorite combination with HTML Storage
handleGetFav(){ handleGetFav(){
if(localStorage.favSound){ if(localStorage.favSound){
this.setState({ this.setState({
...@@ -187,7 +187,7 @@ class MiddlePart extends React.Component{ ...@@ -187,7 +187,7 @@ class MiddlePart extends React.Component{
if (width < 768 || (width < height)) { if (width < 768 || (width < height)) {
return ( return (
<div> <div>
<Sidebar <Sidebar
currentIndex={this.state.currentIndex} currentIndex={this.state.currentIndex}
soundIndex={this.state.soundIndex} soundIndex={this.state.soundIndex}
imageIndex={this.state.imageIndex} imageIndex={this.state.imageIndex}
...@@ -240,7 +240,9 @@ class MiddlePart extends React.Component{ ...@@ -240,7 +240,9 @@ class MiddlePart extends React.Component{
goToThirdSlide={this.goToThirdSlide} goToThirdSlide={this.goToThirdSlide}
goToFourthSlide={this.goToFourthSlide} /> goToFourthSlide={this.goToFourthSlide} />
</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}
......
import React, {Component} from 'react'; import React, {Component} from 'react';
//http://react.tips/radio-buttons-in-reactjs/
class Sidebar extends Component { class Sidebar extends Component {
constructor(props){ constructor(props){
...@@ -12,10 +11,11 @@ class Sidebar extends Component { ...@@ -12,10 +11,11 @@ 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
} else {
// Sorry! No Web Storage support..
} }
} }
...@@ -29,9 +29,9 @@ class Sidebar extends Component { ...@@ -29,9 +29,9 @@ class Sidebar extends Component {
} else { } else {
// Sorry! No Web Storage support.. // Sorry! No Web Storage support..
} }
console.log(localStorage.favImage)
} }
//http://react.tips/radio-buttons-in-reactjs/
render() { render() {
return ( return (
<div> <div>
...@@ -133,7 +133,7 @@ class Sidebar extends Component { ...@@ -133,7 +133,7 @@ class Sidebar extends Component {
<button onClick={(e) => this.seeCombinationClickHandler(e)}> <button onClick={(e) => this.seeCombinationClickHandler(e)}>
See combination See combination
</button> </button>
<button onClick={(e) => this.saveFav(e)}> <button onClick={this.saveFav}>
Save as favorite Save as favorite
</button> </button>
<button onClick={this.props.handleGetFav}> <button onClick={this.props.handleGetFav}>
......
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