Commit ebf93d07 authored by Svein Olav Styve's avatar Svein Olav Styve

Some final fixes

parent e0b0c118
......@@ -219,12 +219,13 @@ class App extends React.Component {
<div className="App">
<div className="cluster">
<div className="chooser">
<DisplayChooser categorySelections={categorySelections} handler={this}/>
<DisplayChooser categorySelections={categorySelections}
handleCategoryChange={this.handleCategoryChange} />
<FavoriteSection save={this.saveAsFavorite} open={this.openFavorite}/>
</div>
<div className="artworkArea">
<Artwork artwork={this.state.artwork}
handler={this}
handleArtworkChange={this.handleArtworkChange}
categorySelections={categorySelections}/>
</div>
</div>
......
......@@ -5,37 +5,26 @@ import Audio from './Audio';
import Tabs from './Tabs';
import '../style/Artwork.css';
export default class Artwork extends React.Component {
constructor(props) {
super(props);
export default function Artwork(props) {
this.handleArtworkChange = this.handleArtworkChange.bind(this);
}
handleArtworkChange(artwork) {
this.props.handler.handleArtworkChange(artwork);
}
render() {
const artwork = this.props.artwork;
const textCat = this.props.categorySelections.textCat;
const imgCat = this.props.categorySelections.imageCat;
const audioCat = this.props.categorySelections.audioCat;
return (
<div className="theArtwork">
<div className="tabs">
<Tabs artwork={artwork} onArtworkChange={this.handleArtworkChange}/>
</div>
<div className="text">
<Text artwork={artwork} cat={textCat}/>
</div>
<div className="theImage">
<Image id="myImage" artwork={artwork} cat={imgCat}/>
</div>
<div className="audio">
<Audio artwork={artwork} cat={audioCat}/>
</div>
const artwork = props.artwork;
const textCat = props.categorySelections.textCat;
const imgCat = props.categorySelections.imageCat;
const audioCat = props.categorySelections.audioCat;
return (
<div className="theArtwork">
<div className="tabs">
<Tabs artwork={artwork} onArtworkChange={props.handleArtworkChange}/>
</div>
<div className="text">
<Text artwork={artwork} cat={textCat}/>
</div>
<div className="theImage">
<Image id="myImage" artwork={artwork} cat={imgCat}/>
</div>
<div className="audio">
<Audio artwork={artwork} cat={audioCat}/>
</div>
);
}
</div>
);
}
......@@ -10,7 +10,7 @@ export default class DisplayChooser extends React.Component {
}
combineMediaCategories = event => {
this.props.handler.handleCategoryChange(event.target.name, event.target.value);
this.props.handleCategoryChange(event.target.name, event.target.value);
localStorage.setItem(event.target.name, event.target.value);
};
......@@ -19,11 +19,11 @@ export default class DisplayChooser extends React.Component {
return (
<div className="Display-chooser">
<MediaContainer checkedIndex={this.props.categorySelections.textCat} categoryNames={categoryNames}
media="Text" handler={this}/>
media="Text" combineMediaCategories={this.combineMediaCategories} />
<MediaContainer checkedIndex={this.props.categorySelections.imageCat} categoryNames={categoryNames}
media="Image" handler={this}/>
media="Image" combineMediaCategories={this.combineMediaCategories} />
<MediaContainer checkedIndex={this.props.categorySelections.audioCat} categoryNames={categoryNames}
media="Audio" handler={this}/>
media="Audio" combineMediaCategories={this.combineMediaCategories} />
</div>
);
}
......
......@@ -16,17 +16,17 @@ export default class MediaContainer extends React.Component {
<div className="Media-component">
<h3>{this.props.media}</h3>
<Categories value={categories[0]} mediaType={this.props.media}
handleChange={this.props.handler.combineMediaCategories}
handleChange={this.props.combineMediaCategories}
categoryName={this.props.categoryNames[0]}
selectionName={this.props.media + categories[0]}
checked={checked[0]}/>
<Categories value={categories[1]} mediaType={this.props.media}
handleChange={this.props.handler.combineMediaCategories}
handleChange={this.props.combineMediaCategories}
categoryName={this.props.categoryNames[1]}
selectionName={this.props.media + categories[1]}
checked={checked[1]}/>
<Categories value={categories[2]} mediaType={this.props.media}
handleChange={this.props.handler.combineMediaCategories}
handleChange={this.props.combineMediaCategories}
categoryName={this.props.categoryNames[2]}
selectionName={this.props.media + categories[2]}
checked={checked[2]}/>
......
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