Seperate the classes into different files

nus-mtp · Feb 21, 2017 · c5843e8 · c5843e8
1 parent ec2d5bc
commit c5843e8
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 61 deletions.
diff --git a/app/components/home/collapsable.js b/app/components/home/collapsable.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+class Collapsable extends React.Component {
+  render() {
+    let showCollapse = (this.props.open[this.props.serial]) ? 'collapse show' : 'collapse';
+    return (
+      <div className={showCollapse} id={"collapseExample"+this.props.serial-1} aria-expanded={this.props.open[this.props.serial]}>
+        <div className="card card-block">
+          <div>
+            <h6>Title {this.props.serial}</h6>
+            <div id="event-title" />
+            <h6>Description {this.props.serial}</h6>
+            <div id="event-description" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Collapsable;
diff --git a/app/components/home/event.js b/app/components/home/event.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+class Event extends React.Component {
+  handleClick(event) {
+    this.props.openCollapsable(this.props.serial);
+  }
+  render() {
+    return (
+      <div>
+        <div onClick={this.handleClick.bind(this)} className="event-picture" href={"#collapseExample"+this.props.serial}
+           aria-expanded={this.props.open[this.props.serial]} aria-controls={"collapseExample"+this.props.serial}>
+          <img className="img-fluid text-center event-poster" src="https://goo.gl/T2k8fq" alt="Event picture" />
+          <div id="event-poster" />
+        </div>
+    </div>
+    );
+  }
+}
+
+export default Event;
diff --git a/app/components/home/homeView.js b/app/components/home/homeView.js
@@ -1,4 +1,7 @@
 import React from 'react';
+import Tabs from './tabs';
+import Event from './event';
+import Collapsable from './collapsable';
 
 class HomeView extends React.Component {
   constructor(props) {
@@ -51,7 +54,6 @@ class HomeView extends React.Component {
       </div>
     );
   }
-
   render() {
     return (
       <div className="home-body">
@@ -61,65 +63,5 @@ class HomeView extends React.Component {
     );
   }
 }
-class Tabs extends React.Component {
-  render() {
-    return (
-      <div className="event-tabs">
-        <ul className="nav nav-tabs justify-content-around">
-          <Tab name="Ongoing" />
-          <Tab name="Upcoming" />
-          <Tab name="Past" />
-        </ul>
-      </div>
-    );
-  }
-}
-
-class Tab extends React.Component {
-  render() {
-    return (
-      <div className="event-tab">
-        <li className="nav-item">
-          <a className="nav-link" href="#">{this.props.name}</a>
-        </li>
-      </div>
-    );
-  }
-}
-
-class Event extends React.Component {
-  handleClick(event) {
-    this.props.openCollapsable(this.props.serial);
-  }
-  render() {
-    return (
-      <div>
-        <div onClick={this.handleClick.bind(this)} className="event-picture" href={"#collapseExample"+this.props.serial}
-           aria-expanded={this.props.open[this.props.serial]} aria-controls={"collapseExample"+this.props.serial}>
-          <img className="img-fluid text-center event-poster" src="https://goo.gl/T2k8fq" alt="Event picture" />
-          <div id="event-poster" />
-        </div>
-    </div>
-    );
-  }
-}
-
-class Collapsable extends React.Component {
-  render() {
-    let showCollapse = (this.props.open[this.props.serial]) ? 'collapse show' : 'collapse';
-    return (
-      <div className={showCollapse} id={"collapseExample"+this.props.serial-1} aria-expanded={this.props.open[this.props.serial]}>
-        <div className="card card-block">
-          <div>
-            <h6>Title {this.props.serial}</h6>
-            <div id="event-title" />
-            <h6>Description {this.props.serial}</h6>
-            <div id="event-description" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
 
 export default HomeView;
diff --git a/app/components/home/tab.js b/app/components/home/tab.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+class Tab extends React.Component {
+  render() {
+    return (
+      <div className="event-tab">
+        <li className="nav-item">
+          <a className="nav-link" href="#">{this.props.name}</a>
+        </li>
+      </div>
+    );
+  }
+}
+
+export default Tab;
diff --git a/app/components/home/tabs.js b/app/components/home/tabs.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Tab from './tab';
+
+class Tabs extends React.Component {
+  render() {
+    return (
+      <div className="event-tabs">
+        <ul className="nav nav-tabs justify-content-around">
+          <Tab name="Ongoing" />
+          <Tab name="Upcoming" />
+          <Tab name="Past" />
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default Tabs;