Commit 9ed80065 authored by Svein Olav Styve's avatar Svein Olav Styve

Refactor code

parent 56bbd7b0
......@@ -3,8 +3,6 @@ import './App.css';
import Title from './components/Title';
import Artwork from './components/Artwork';
import './artwork.css';
import {render} from "react-dom";
import Tabs from './components/Tabs';
import DisplayChooser from './components/DisplayChooser';
import FavoriteSection from './components/FavoriteSection';
import SessionElement from './components/SessionElement';
......
......@@ -4,31 +4,26 @@ import Image from "./Image"
import Audio from './Audio';
import Tabs from './Tabs';
class Artwork extends React.Component {
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.props.artworkChanged}/>
</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>
);
}
export default function Artwork(props) {
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.artworkChanged}/>
</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>
);
}
export default Artwork;
import React from 'react';
import '../style/CategoryComponent.css';
export default class Categories extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="Category-component">
<input name={this.props.mediaType} type="checkbox" onChange={this.props.handleChange}
value={this.props.value} id={this.props.selectionName} checked={this.props.checked}/>
<label htmlFor={this.props.selectionName}>{this.props.categoryName} {this.props.selectedIndex}</label>
</div>
);
}
export default function Categories(props) {
return (
<div className="Category-component">
<input name={props.mediaType} type="checkbox" onChange={props.handleChange}
value={props.value} id={props.selectionName} checked={props.checked}/>
<label htmlFor={props.selectionName}>{props.categoryName} {props.selectedIndex}</label>
</div>
);
}
......@@ -25,8 +25,7 @@ class Image extends React.Component {
fetchData() {
const resource = "img/" + this.props.cat + "/" + this.props.artwork + ".svg";
// fetch(resource, {cache: "force-cache"}) // TODO: This caching messes with the tab and category selection...
fetch(resource)
fetch(resource, {cache: "force-cache"})
.then(res => res.text())
.then(
(result) => {
......@@ -56,7 +55,7 @@ class Image extends React.Component {
return <div>Loading image...</div>;
} else {
return (
// TODO: This should probably be done in a better way
// NOTE: this is bad... but needed due to assignment requirements
<div className="Image" dangerouslySetInnerHTML={{ __html: imgRaw}} >
</div>
);
......
......@@ -4,10 +4,6 @@ import '../style/MediaComponent.css'
export default class MediaContainer extends React.Component {
constructor(props) {
super(props);
}
render() {
const categories = [0, 1, 2];
const checked = [false, false, false];
......
import React from 'react';
class Selector extends React.Component {
constructor(props) {
super(props);
function Selector(props) {
const artwork = props.value;
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.props.onArtworkChange(event.target.value);
}
render() {
const artwork = this.props.value;
return (
<form>
<label>
Pick artwork:
<select value={artwork} onChange={this.handleChange}>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
</label>
</form>
);
}
return (
<form>
<label>
Pick artwork:
<select value={artwork} onChange={e => this.props.onArtworkChange(e.target.value, e)}>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
</label>
</form>
);
}
export default Selector;
\ No newline at end of file
import React from 'react';
import '../style/SessionElement.css';
export default class SessionElement extends React.Component {
export default function SessionElement(props) {
render() {
let sessionHistory = [];
let sessionHistory = [];
if (this.props.sessionHistory !== null) {
sessionHistory = this.props.sessionHistory.map((items) =>
<p key={items} onClick={() => this.props.handler.sessionClicked(items.split("/").pop())}>{items.replace(/;/g, " - ").replace(/:/g, ": ").split("/").pop()}</p>
);
}
return (
<div className="sessionHolder">
<h4>Combination history</h4>
{sessionHistory}
</div>
if (props.sessionHistory !== null) {
sessionHistory = props.sessionHistory.map((items) =>
<p key={items} onClick={() => props.handler.sessionClicked(items.split("/").pop())}>{items.replace(/;/g, " - ").replace(/:/g, ": ").split("/").pop()}</p>
);
}
return (
<div className="sessionHolder">
<h4>Combination history</h4>
{sessionHistory}
</div>
);
}
import React from 'react';
class Tabs extends React.Component {
function Tabs(props) {
render(){
const classname = this.props.activeTab == this.props.id ? "active" : ""; //Check which tab is active and prepares value for className
const classname = props.activeTab === props.id ? "active" : ""; //Check which tab is active and prepares value for className
return(
<div id={this.props.id} onClick = {this.props.onClick} className={classname}>Category{parseInt(this.props.id)+1}</div>
<div id={props.id} onClick = {props.onClick} className={classname}>Category{parseInt(props.id)+1}</div>
)
}
}
export default Tabs;
import React from 'react';
import TabElement from './TabElement';
class Tabs extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const value = event.target.id; // Calls TabElement id-value
this.props.onArtworkChange(value); // Let parent handle the change
}
render(){
const artworkId = this.props.artwork;
function Tabs(props) {
return(
<div className="navbar">
<TabElement activeTab={this.props.artwork} id="0" onClick={this.handleChange}></TabElement>
<TabElement activeTab={this.props.artwork} id="1" onClick={this.handleChange}></TabElement>
<TabElement activeTab={this.props.artwork} id="2" onClick={this.handleChange}></TabElement>
<TabElement activeTab={this.props.artwork} id="3" onClick={this.handleChange}></TabElement>
<TabElement activeTab={parseInt(props.artwork)} id={0} onClick={e => props.onArtworkChange(e.target.id, e)}></TabElement>
<TabElement activeTab={parseInt(props.artwork)} id={1} onClick={e => props.onArtworkChange(e.target.id, e)}></TabElement>
<TabElement activeTab={parseInt(props.artwork)} id={2} onClick={e => props.onArtworkChange(e.target.id, e)}></TabElement>
<TabElement activeTab={parseInt(props.artwork)} id={3} onClick={e => props.onArtworkChange(e.target.id, e)}></TabElement>
</div>
)
}
}
export default Tabs;
......@@ -26,7 +26,7 @@ class Text extends React.Component {
fetchData() {
const resource = "txt/" + this.props.cat + "/" + this.props.artwork + ".json";
fetch(resource)
fetch(resource, {cache: "force-cache"}) // TODO: This caching messes with the tab and category selection...
.then(res => res.json())
.then(
(result) => {
......
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