OSB-29: move function to class

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationOverview.js

@@ -24,7 +24,7 @@ class Badge extends Component {
 
     render() {
         let props = this.props;
-        return (<div id={props.myid} className={"so-badge " + props.className} onMouseOver={props.togglePopOver} onMouseOut={props.togglePopOver}>
+        return (<div id={props.myid} className={"so-badge"} onMouseOver={props.togglePopOver} onMouseOut={props.togglePopOver}>
             {props.label}
             <span className={this.getClass()}>{props.count}</span>
         </div>);

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js

@@ -82,25 +82,26 @@ const mapDispatchToPropsToolBar = {
 
 const ToolBar = connect(mapStateToPropsToolBar, mapDispatchToPropsToolBar)(ToolBarC);
 
-/* Boiler plate for a Grid panel.
-   Looks like a React component but is ordinary function! */
-function createGridPanel(props) {
-    let body = props.body;
-    if (props.renderHeader) {
-        body = <React.Fragment>
-            <h5 className="react-grid-item-header">{props.title}</h5>
-            <div className="react-grid-item-body">
-                {props.body}
-            </div>
-        </React.Fragment>;
-    }
-    return (<div key={props.key}>
-        {body}
-    </div>);
-}
 
 class LandingPageC extends Component {
 
+    /* Boiler plate for a Grid panel.
+       Looks like a React component but is ordinary function! */
+    createGridPanel(props) {
+        let body = props.body;
+        if (props.renderHeader) {
+            body = <React.Fragment>
+                <h5 className="react-grid-item-header">{props.title}</h5>
+                <div className="react-grid-item-body">
+                    {props.body}
+                </div>
+            </React.Fragment>;
+        }
+        return (<div key={props.key}>
+            {body}
+        </div>);
+    }
+
     getStationOverviewURL() {
         const url = '/api/view/ctrl_stationoverview?format=json'
 
@@ -170,10 +171,10 @@ class LandingPageC extends Component {
             <Header active_page={this.props.location}/>
             <ToolBar/>
             <ResponsiveGridLayout className="layout" layouts={this.props.layout.panels} measureBeforeMount={true} breakpoints={this.props.layout.breakpoints} cols={this.props.layout.cols} onResizeStop={e => this.props.setNewLayout(e)}>
-                {createGridPanel({key: "ul", renderHeader: true, title: "Station overview", body: <StationOverview url={this.getStationOverviewURL()}/>})}
-                {createGridPanel({key: "ur", renderHeader: true, title: "Latest observations", body: <LatestObservations url={this.getLatestObservationURL()}/>})}
-                {createGridPanel({key: "bl", renderHeader: false, body: <StationTestSummary url={this.getStationTestSummaryURL()}/>})}
-                {createGridPanel({key: "br", renderHeader: false, body: <StationStatistics url={this.getStationStatisticsURL()}/>})}
+                {this.createGridPanel({key: "ul", renderHeader: true, title: "Station overview", body: <StationOverview url={this.getStationOverviewURL()}/>})}
+                {this.createGridPanel({key: "ur", renderHeader: true, title: "Latest observations", body: <LatestObservations url={this.getLatestObservationURL()}/>})}
+                {this.createGridPanel({key: "bl", renderHeader: false, body: <StationTestSummary url={this.getStationTestSummaryURL()}/>})}
+                {this.createGridPanel({key: "br", renderHeader: false, body: <StationStatistics url={this.getStationStatisticsURL()}/>})}
             </ResponsiveGridLayout>
         </div>);
     }