#15 Update Title Component

src/App.js

@@ -20,7 +20,6 @@ class App extends React.Component {
         super(props);
 
         this.handleArtworkChange = this.handleArtworkChange.bind(this);
-        this.getImageTitle = this.getImageTitle.bind(this);
         this.handleCategoryChange = this.handleCategoryChange.bind(this);
         this.checkForEmptyLocalStorage = this.checkForEmptyLocalStorage.bind(this);
         this.saveAsFavorite = this.saveAsFavorite.bind(this);
@@ -121,11 +120,6 @@ class App extends React.Component {
         this.setState({artwork: artworkId}, event => this.updateSession());
     }
 
-    getImageTitle() {
-        let titles = ["Artwork 1", "Artwork 2", "Artwork 3", "Artwork 4"];
-        return titles[this.state.artwork] + JSON.stringify(this.state.categorySelections); // CategorySelection added for testing
-    }
-
     handleCategoryChange(name, valueAsString) {
         let value = parseInt(valueAsString);
         const oldCatSel = this.state.categorySelections;
@@ -180,7 +174,7 @@ class App extends React.Component {
             <div className="App">
                 <header className="App-header">
                     <div className="title">
-                        <Title title={this.getImageTitle()}/>
+                        <Title artwork={this.state.artwork} categorySelections={this.state.categorySelections}/>
                     </div>
                     <div className="cluster">
                         <div className="chooser">

src/App.test.js

@@ -13,7 +13,12 @@ describe('My Test Suite', () => {
 // Snapshot Test Title-component
 describe('Title', () => {
   test('snapshot renders', () => {
-    const component = renderer.create(<Title title={"my title"} />);
+    const component = renderer.create(<Title artworkId={1}
+      categorySelections={{
+        textCat: 1,
+        imageCat: 1,
+        audioCat: 1,
+      }} />);
     let tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });

src/__snapshots__/App.test.js.snap

@@ -4,6 +4,6 @@ exports[`Title snapshot renders 1`] = `
 <h1
   className="Title"
 >
-  my title
+  undefined, txt 2, img 2, audio 2
 </h1>
 `;

src/components/Title.js

 import React from 'react';
 
+function getImageTitle(artworkId, categorySelections) {
+    let titles = ["Artwork 1", "Artwork 2", "Artwork 3", "Artwork 4"];
+    let txtCatTitles = ["txt 1", "txt 2", "txt 3", "txt 4"];
+    let imgCatTitles = ["img 1", "img 2", "img 3", "img 4"];
+    let audioCatTitles = ["audio 1", "audio 2", "audio 3", "audio 4"];
+    return titles[artworkId] + ", " + txtCatTitles[categorySelections.textCat]
+                             + ", " + imgCatTitles[categorySelections.imageCat]
+                             + ", " + audioCatTitles[categorySelections.audioCat]
+}
+
 function Title(props) {
     return (
-        <h1 className="Title">{props.title}</h1>
+        <h1 className="Title">{getImageTitle(props.artwork, props.categorySelections)}</h1>
     )
 }