From abc605859aaa8d0b219d3af6454ac1538c7425bf Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Mon, 16 Apr 2018 08:28:43 -0700
Subject: [PATCH] refactor footer into class
---
src/assets/stylesheets/footer.css | 2 ++
src/react-components/footer.js | 41 ++++++++++++++++---------------
2 files changed, 23 insertions(+), 20 deletions(-)
create mode 100644 src/assets/stylesheets/footer.css
diff --git a/src/assets/stylesheets/footer.css b/src/assets/stylesheets/footer.css
new file mode 100644
index 000000000..ffab91afb
--- /dev/null
+++ b/src/assets/stylesheets/footer.css
@@ -0,0 +1,2 @@
+:local(.container) {
+}
diff --git a/src/react-components/footer.js b/src/react-components/footer.js
index 45f855feb..1045da49f 100644
--- a/src/react-components/footer.js
+++ b/src/react-components/footer.js
@@ -1,26 +1,27 @@
-import React from "react";
+import React, { Component } from "react";
import PropTypes from "prop-types";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft";
import styles from "../assets/stylesheets/footer.css";
-const Footer = ({ hubName, participantCount }) => (
- <div className={styles.container}>
- <span className={styles.hubName}>{hubName}</span>
- <button className="{style.shareButton}" onClick={this.emitChangeToPrevious}>
- <FontAwesomeIcon icon={faAngleLeft} />
- </button>
- <div>
- <FontAwesomeIcon icon={faAngleLeft} />
- <span>{participantCount}</span>
- </div>
- </div>
-);
-
-Footer.propTypes = {
- hubName: PropTypes.string,
- participantCount: PropTypes.number
-};
-
-export default Footer;
+export default class Footer extends Component {
+ static propTypes = {
+ hubName: PropTypes.string,
+ participantCount: PropTypes.number
+ };
+ render() {
+ return (
+ <div className={styles.container}>
+ <span className={styles.hubName}>{this.props.hubName}</span>
+ <button className="{styles.shareButton}" onClick={this.emitChangeToPrevious}>
+ <FontAwesomeIcon icon={faAngleLeft} />
+ </button>
+ <div>
+ <FontAwesomeIcon icon={faAngleLeft} />
+ <span>{this.props.participantCount}</span>
+ </div>
+ </div>
+ );
+ }
+}
--
GitLab