Rendered printer stats component on button click

client/src/App.css

@@ -31,7 +31,15 @@
   margin: auto;
 }
 
-.Home-header-text {
+.Printer-stats-header {
+  width: 500px;
+  overflow: hidden;
+  position: relative;
+  margin: auto;
+  bottom: 25px;
+}
+
+.Header-text {
   font-family: 'Lobster', cursive;
   font-size: 12vmin;
   background: -webkit-linear-gradient(#38ef7d, #11998e);
@@ -40,7 +48,7 @@
   float:left;
 }
 
-.Home-header-logo {
+.Header-logo {
   float:left;
   width: 230px;
 }
@@ -57,11 +65,7 @@
   border-radius: 3px;
   position: relative;
   top: 10vh;
-}
-
-.Home-button:hover:focus:active{
   cursor: pointer;
-  background-color: #0b8a35;
 }
 
 .Home-printer-status {
@@ -81,4 +85,14 @@
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+.Printer-status-container {
+  background-color: #a3f0b8;
+  background-color: rgba(163, 240, 184, 0.87);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }

client/src/App.js

@@ -1,6 +1,7 @@
 import React, { Component }  from 'react';
 import './App.css';
 import Home from './Home.js';
+import PrinterStats from './PrinterStats.js';
 
 class App extends Component {
     state = {
@@ -49,9 +50,9 @@ class App extends Component {
             <div className="App">
                 <Home button1Text = {"PRINTER STATISTICS"}
                       button2Text = {"SEARCH 3D MODELS"}
-                      portStatus = {this.state.response}/>
-
-
+                      portStatus = {this.state.response}>
+                    <PrinterStats />
+                </Home>
                 {  /*<form onSubmit={this.handleSubmit}>
 
                     <input

client/src/Home.js

@@ -1,42 +1,45 @@
 import React, { Component } from 'react'
-import Logo from './logo.png'
+import LogoHeader from "./LogoHeader";
+import LargeButton from "./LargeButton";
+import PortStatus from "./PortStatus";
+import PrinterStats from "./PrinterStats";
 
-const PortStatusDisplay = props => {
-    const status = props.portStatus;
-    return (
-        <h2 className="Home-printer-status">PRINTER STATUS: {status}</h2>
-    )
-};
 
-const HomeHeader = () => {
-    return (
-        <div className="Home-header">
-            <img className="Home-header-logo" src={Logo} alt="Turtle logou"/>
-            <h1 className="Home-header-text">Turtle</h1>
-        </div>
-    )
-};
+class Home extends Component {
+    constructor(props){
+        super(props);
 
-const HomeButton = props => {
-    const text = props.buttonText;
-    return (
-        <div className="Home-button">{text}</div>
-    )
-};
+        this.state = {
+            printerStatsActive: false,
+        };
+
+        this.LoadPrinterStats = this.LoadPrinterStats.bind(this);
+    }
+
+    LoadPrinterStats() {
+        this.setState({ printerStatsActive: true });
+    }
 
-class Home extends Component {
     render() {
         const { portStatus } = this.props;
         const { button1Text } = this.props;
         const { button2Text } = this.props;
+        if (this.state.printerStatsActive) {
+            return (
+                <div className="Printer-status-container">
+                    <LogoHeader headerClass = {"Printer-stats-header"} />
+                    <PrinterStats />
+                    <PortStatus portStatus = { portStatus }/>
+                </div>
+            )
+    }
         return (
             <div className="Home-container">
-                <HomeHeader />
-                <HomeButton buttonText = { button1Text }/>
+                <LogoHeader headerClass = {"Home-header"} />
+                <LargeButton buttonText = { button1Text } clickEvent = { this.LoadPrinterStats }/>
                 <br/>
-                <HomeButton buttonText = { button2Text }/>
-                <PortStatusDisplay portStatus = { portStatus }/>
-
+                <LargeButton buttonText = { button2Text }/>
+                <PortStatus portStatus = { portStatus }/>
             </div>
         )
     }

client/src/LargeButton.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+class LargeButton extends Component {
+    render() {
+        const { buttonText } = this.props;
+        const { clickEvent } = this.props;
+        return (
+            <div onClick = {clickEvent} className="Home-button">{buttonText}</div>
+        )
+    }
+}
+
+export default LargeButton

client/src/LogoHeader.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import Logo from "./logo.png";
+
+class LogoHeader extends Component {
+    render() {
+        const { headerClass } = this.props;
+        return (
+            <div className = {headerClass}>
+                <img className="Header-logo" src={Logo} alt="Turtle logo"/>
+                <h1 className="Header-text">Turtle</h1>
+            </div>
+        )
+    }
+}
+
+export default LogoHeader

client/src/PortStatus.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+
+class PortStatus extends Component {
+    render() {
+        const { portStatus } = this.props;
+        return (
+            <h2 className="Home-printer-status">PRINTER STATUS: {portStatus}</h2>
+        )
+    }
+}
+
+export default PortStatus

client/src/PrinterStats.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+class PrinterStats extends Component {
+    render() {
+        return (
+            <div className="Printer-stats-container">
+
+            </div>
+        )
+    }
+}
+
+export default PrinterStats