Refactor code

src/App.js

@@ -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';

src/components/Artwork.js

@@ -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;

src/components/Categories.js

 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>
+    );
 }

src/components/Image.js

@@ -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>
             );

src/components/MediaContainer.js

@@ -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];

src/components/Selector.js

 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

src/components/SessionElement.js

 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>
+    );
+
 }

src/components/TabElement.js

 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;

src/components/Tabs.js

 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;

src/components/Text.js

@@ -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) => {