added in sign in check component for hiding components as necessary, …

…applied to all simulators

web/src/components/signin_check.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react"
+import ContentSignIn from './simulation/content_signin';
+
+class SigninCheck extends Component {
+  render() {
+    return (
+      this.props.auth === "true" ? this.props.data : <ContentSignIn content={this.props.content}/>
+    )
+  }
+}
+
+export default SigninCheck

web/src/components/simulation/simulation_signin.js → web/src/components/simulation/content_signin.js

@@ -1,9 +1,9 @@
 import React from "react"
 import { StaticImage } from "gatsby-plugin-image"
 
-const SimulationSignIn = () => {
+const ContentSignIn = ({content}) => {
   return (
-    <>
+    <div style={{ backgroundColor: "#f7f7f7" }}>
       <StaticImage
         src="../../images/wrench_logo.png"
         width={40}
@@ -12,11 +12,11 @@ const SimulationSignIn = () => {
         backgroundColor="#f7f7f7"
         style={{ marginRight: "1em", float: "left" }}
       />
-      <strong style={{ backgroundColor: "#f7f7f7" }}>eduWRENCH Pedagogic Module Simulator</strong>
+      <strong>eduWRENCH Pedagogic Modules</strong>
       <br />
-      Sign in on the top of the page to access the simulator.
-    </>
+      Sign in on the top of the page to access the {content}.
+    </div>
   )
 }
 
-export default SimulationSignIn
+export default ContentSignIn

web/src/pages/pedagogic_modules/include_client_server/client_server_basics_simulation.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react"
 import axios from "axios"
-import { Form, Label, Segment } from "semantic-ui-react"
+import { Form, Segment } from "semantic-ui-react"
 import { Formik } from "formik"
 import SimulationScenario from "../../../components/simulation/simulation_scenario"
 import SimulationOutput from "../../../components/simulation/simulation_output"
-import SimulationSignIn from "../../../components/simulation/simulation_signin"
 import { validateFieldInMultipleRanges } from "../../../components/simulation/simulation_validation"
 
 import ClientServerBasicsScenario from "../../../images/vector_graphs/client_server/client_server_basics.svg"
 import SimulationFeedback from "../../../components/simulation/simulation_feedback";
+import SigninCheck from '../../../components/signin_check';
 
 const ClientServerBasicsSimulation = () => {
 
@@ -19,12 +19,12 @@ const ClientServerBasicsSimulation = () => {
 
   useEffect(() => {
     setAuth(localStorage.getItem("login"))
-  })
+  }, [])
 
   return (
-    auth === "true" ? (
+    <SigninCheck data={[
       <>
-        <SimulationScenario scenario={<ClientServerBasicsScenario />} />
+        <SimulationScenario scenario={<ClientServerBasicsScenario/>}/>
 
         <Segment.Group>
           <Segment color="teal"><strong>Simulation Parameters</strong></Segment>
@@ -67,7 +67,7 @@ const ClientServerBasicsSimulation = () => {
                     response => {
                       setSimulationResults(
                         <>
-                          <SimulationOutput output={response.data.simulation_output} />
+                          <SimulationOutput output={response.data.simulation_output}/>
                         </>
                       )
                       setSubmitting(false)
@@ -140,9 +140,7 @@ const ClientServerBasicsSimulation = () => {
         {simulationResults}
 
       </>
-    ) : (
-      <SimulationSignIn />
-    )
+    ]} auth={auth} content="simulator"></SigninCheck>
   )
 }
 

web/src/pages/pedagogic_modules/include_client_server/client_server_pipelining_simulation.js

@@ -1,19 +1,17 @@
 import React, { useEffect, useState } from "react"
 import axios from "axios"
-import { Form, Label, Segment } from "semantic-ui-react"
+import { Form, Segment } from "semantic-ui-react"
 import { Formik } from "formik"
 import SimulationScenario from "../../../components/simulation/simulation_scenario"
 import SimulationOutput from "../../../components/simulation/simulation_output"
-import HostUtilizationChart from "../../../components/charts/host_utilization_chart"
-import NetworkBandwidthUsageChart from "../../../components/charts/network_bandwidth_usage"
-import SimulationSignIn from "../../../components/simulation/simulation_signin"
 import {
   validateFieldInRange,
   validateFieldInMultipleRanges
 } from "../../../components/simulation/simulation_validation"
 
 import ClientServerDiskScenario from "../../../images/vector_graphs/client_server/client_server_disk.svg"
 import SimulationFeedback from "../../../components/simulation/simulation_feedback";
+import SigninCheck from '../../../components/signin_check';
 
 const ClientServerPipeliningSimulation = () => {
 
@@ -24,10 +22,10 @@ const ClientServerPipeliningSimulation = () => {
 
   useEffect(() => {
     setAuth(localStorage.getItem("login"))
-  })
+  }, [])
 
   return (
-    auth === "true" ? (
+    <SigninCheck data={[
       <>
         <SimulationScenario scenario={<ClientServerDiskScenario />} />
 
@@ -170,9 +168,7 @@ const ClientServerPipeliningSimulation = () => {
         {simulationResults}
 
       </>
-    ) : (
-      <SimulationSignIn />
-    )
+    ]} auth={auth} content="simulator"></SigninCheck>
   )
 }