Extract components into a js object

Author: amoshydra

views/components/Main.jsx

@@ -2,8 +2,7 @@
 
 import React, { Component } from 'react';
 import NavBar from './NavBar';
-import Announcements from './Announcements/Container';
-import Multimedia from './Multimedia/Container';
+import ComponentList from './Shared/componentList';
 import Storage from './../../controllers/storage';
 
 export default class Main extends Component {
@@ -16,6 +15,7 @@ export default class Main extends Component {
 
     this.observeDatabase('list');
     this.switchView = this.switchView.bind(this);
+    this.renderContainer = this.renderContainer.bind(this);
   }
 
   observeDatabase(pathToWatch) {
@@ -28,22 +28,23 @@ export default class Main extends Component {
     this.setState({ windowToRender: view });
   }
 
+  renderContainer(containerName) {
+    const Container = ComponentList[containerName].container;
+    return <Container list={this.state.list} />;
+  }
+
   render() {
     return (
       <div>
         <div id="aSide">
-          <NavBar switchView={this.switchView} windowToRender={this.state.windowToRender} />
+          <NavBar
+            switchView={this.switchView}
+            windowToRender={this.state.windowToRender}
+            componentList={ComponentList}
+          />
         </div>
         <div id="content">
-          {(() => {
-            switch (this.state.windowToRender) {
-              case 'announcements': return <Announcements list={this.state.list} />;
-              case 'multimedia': return <Multimedia list={this.state.list} />;
-              case 'forum': return <Announcements list={this.state.list} />;
-              default: return <Announcements list={this.state.list} />;
-            }
-          })()}
-
+          { this.renderContainer(this.state.windowToRender) }
         </div>
       </div>
     );

views/components/NavBar.jsx

@@ -14,30 +14,21 @@ export default class NavBar extends Component {
   }
 
   render() {
-    const navToRender = [{
-      name: 'announcements',
-      icon: 'announcement'
-    }, {
-      name: 'multimedia',
-      icon: 'video_library'
-    }, {
-      name: 'forum',
-      icon: 'forum'
-    }];
     const self = this;
+    const compList = this.props.componentList;
     return (
       <div className={styles.navBar}>
         <ul>
-          {navToRender.map((navElement) =>
-            <li key={navElement.name}>
+          {Object.keys(compList).map((name) =>
+            <li key={name}>
               <button
-                className={`${styles.navButton} ${this.checkIsActive(navElement.name)}`}
+                className={`${styles.navButton} ${this.checkIsActive(name)}`}
                 onClick={function onClick() {
-                  self.handleClick(navElement.name);
+                  self.handleClick(name);
                 }}
               >
                 <i className="material-icons">
-                  {navElement.icon}
+                  {compList[name].icon}
                 </i>
               </button>
             </li>
@@ -49,6 +40,7 @@ export default class NavBar extends Component {
 }
 
 NavBar.propTypes = {
+  componentList: PropTypes.object.isRequired,
   windowToRender: PropTypes.string.isRequired,
   switchView: PropTypes.func.isRequired
 };

views/components/Shared/componentList.js

@@ -0,0 +1,19 @@
+import Announcements from '../Announcements/Container';
+import Multimedia from '../Multimedia/Container';
+
+const componentList = {
+  announcements: {
+    container: Announcements,
+    icon: 'announcement'
+  },
+  multimedia: {
+    container: Multimedia,
+    icon: 'video_library'
+  },
+  forum: {
+    container: Announcements,
+    icon: 'forum'
+  }
+};
+
+export default componentList;