Develop

package.json

@@ -7,6 +7,7 @@
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-google-maps": "^9.4.5",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4",
     "react-time": "^4.3.0",
     "request": "^2.87.0",

src/components/AboutUs/AboutUs.css

@@ -0,0 +1,7 @@
+div.aboutUs{
+    height: 100vh;
+}
+
+div.aboutUs p{
+    text-align: center;
+}

src/components/AboutUs/AboutUs.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import Header from './../Header/Header.js';
+import Footer from './../Footer/Footer.js';
+
+import './AboutUs.css'
+
+export default class AboutUs extends Component {
+    render(){
+        return (
+        <div className="aboutUs-bg">
+            <Header/>
+            <div className="ui sizer vertical segment">
+                <h3 className="ui center aligned header">
+                    <div className="ui huge header">About</div>
+                </h3>
+                    <p>STSI LearningLab is a web application developed by two interns at STSI, Jimmy Flores and Emmett Dorlester, with the mentorship of STSI Employees Kevin Melendez and Ben Morris. The idea of LearningLab is to create a set of web applications to run on a Raspberry Pi, web applications consisting of a Weather App, a Traffic App, and more.</p>
+                </div>
+            <Footer />
+        </div>
+        );
+    }
+}

src/components/AboutUs/AboutUs.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AboutUs from './AboutUs.js';
+
+it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<AboutUs />, div);
+    ReactDOM.unmountComponentAtNode(div);
+});

src/components/App.js

@@ -1,60 +1,28 @@
 import React, { Component } from 'react';
-import Header from './Header/Header.js';
-import Footer from './Footer/Footer.js';
-import WeatherData from './WeatherCard/WeatherData.js';
-import TrafficCard from './TrafficCard/TrafficCard.js';
-import CardContainer from './CardContainer/CardContainer.js';
+import home from './home.js';
+import AboutUs from './AboutUs/AboutUs.js';
+import TrafficCardArchive from './CardArchive/TrafficCardArchive.js';
+import WeatherCardArchive from './CardArchive/WeatherCardArchive.js';
+import FullScreen from './FullScreen/FullScreen.js';
+import {
+  BrowserRouter as Router,
+  Route
+} from 'react-router-dom'
 
 import './App.css';
 
 export default class App extends Component {
-    constructor(props){
-        super(props);
-        this.state = {
-            fixedCard: null
-        };
-    }
-
     render(){
-        let cards = [
-            <WeatherData
-                type='weather'
-                zipcode='22209'
-                key='Weather Card'
-                menuLabel='Weather Card'
-            />,
-            <TrafficCard
-                zoom={12}
-                lat={38.9}
-                lng={-77.08}
-                location='Arlington, VA'
-                description='Current traffic in STSI area'
-                key='Traffic Card'
-                menuLabel='Traffic Card'
-            />
-        ];
-        let cardToDropdown = (card, index) => ({
-            label: card.props.menuLabel,
-            index: index
-        });
         return (
+            <Router>
             <div className='App'>
-                <Header
-                    cardEntries={cards.map(cardToDropdown)}
-                    onChange={(index) => {this.setState({fixedCard: index})}}
-                />
-                <div className='ui centered cards'>
-                    <div className='ui relaxed grid'>
-                        <div className='row' />
-                        <CardContainer
-                            cardDuration={10000}
-                            fadeTime={1000}
-                            fixedCard={this.state.fixedCard}
-                        >{cards}</CardContainer>
-                    </div>
-                </div>
-                <Footer />
+                <Route path="/" exact component={home}/>
+                <Route path="/aboutUs" component={AboutUs}/>
+                <Route path="/WeatherCard" component={WeatherCardArchive}/>
+                <Route path="/TrafficCard" component={TrafficCardArchive}/>
+                <Route path="/FullScreen" component={FullScreen}/>
             </div>
+            </Router>
         );
     }
 }

src/components/CardArchive/TrafficCardArchive.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import Header from './../Header/Header.js';
+import Footer from './../Footer/Footer.js';
+import TrafficCard from './../TrafficCard/TrafficCard.js';
+
+import './../App.css';
+
+
+export default class TrafficCardArchive extends Component {
+    render(){
+        return (
+            <div className='TrafficCardArchive'>
+                <Header/>
+                <div className='ui centered cards'>
+                    <div className='ui relaxed grid'>
+                        <div className='row' />
+                            <TrafficCard
+                                zoom={12}
+                                lat={38.9}
+                                lng={-77.08}
+                                location='Arlington, VA'
+                                description='Current traffic in STSI area'
+                                key='Traffic Card'
+                                menuLabel='Traffic Card'
+                            />
+                        </div>
+                </div>
+                <Footer />
+            </div>
+        );
+    }
+}

src/components/CardArchive/TrafficCardArchive.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TrafficCardArchive from './TrafficCardArchive.js';
+
+it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<TrafficCardArchive />, div);
+    ReactDOM.unmountComponentAtNode(div);
+});

src/components/CardArchive/WeatherCardArchive.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Header from './../Header/Header.js';
+import Footer from './../Footer/Footer.js';
+import WeatherData from './../WeatherCard/WeatherData.js';
+
+import './../App.css';
+
+
+export default class WeatherCardArchive extends Component {
+    render(){
+        return (
+            <div className='WeatherCardArchive'>
+                <Header/>
+                <div className='ui centered cards'>
+                    <div className='ui relaxed grid'>
+                        <div className='row' />
+                        <WeatherData
+                            type='weather'
+                            zipcode='22209'
+                            key='Weather Card'
+                            menuLabel='Weather Card'
+                        />
+                    </div>
+                </div>
+                <Footer />
+            </div>
+        );
+    }
+}

src/components/CardArchive/WeatherCardArchive.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import WeatherCardArchive from './WeatherCardArchive.js';
+
+it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<WeatherCardArchive />, div);
+    ReactDOM.unmountComponentAtNode(div);
+});

src/components/CardContainer/CardContainer.test.js

@@ -3,16 +3,17 @@ import ReactDOM from 'react-dom';
 import { Card } from 'semantic-ui-react';
 import CardContainer from './CardContainer.js';
 
+const DummyCard = (props) => (
+    <Card>
+        <Card.Content>
+            <Card.Header>{props.header}</Card.Header>
+            <Card.Description>{props.description}</Card.Description>
+        </Card.Content>
+    </Card>
+);
+
 it('transitions between cards without crashing', (done) => {
     const div = document.createElement('div');
-    const DummyCard = (props) => (
-        <Card>
-            <Card.Content>
-                <Card.Header>{props.header}</Card.Header>
-                <Card.Description>{props.description}</Card.Description>
-            </Card.Content>
-        </Card>
-    );
     ReactDOM.render(
         <CardContainer cardDuration={1000} fadeTime={200}>
             <DummyCard header='header1' description='description1' />
@@ -24,3 +25,33 @@ it('transitions between cards without crashing', (done) => {
         done();
     }, 3000);
 });
+
+it('sets and clears fixed card without crashing', (done) => {
+    const div = document.createElement('div');
+    ReactDOM.render(
+        <CardContainer cardDuration={1000} fadeTime={200}>
+            <DummyCard header='header1' description='description1' />
+            <DummyCard header='header1' description='description2' />
+        </CardContainer>
+    , div);
+    setTimeout(() => {
+        ReactDOM.render(
+            <CardContainer cardDuration={1000} fadeTime={200} fixedCard={1}>
+                <DummyCard header='header1' description='description1' />
+                <DummyCard header='header1' description='description2' />
+            </CardContainer>
+        , div);
+        setTimeout(() => {
+            ReactDOM.render(
+                <CardContainer cardDuration={1000} fadeTime={200} fixedCard={null}>
+                    <DummyCard header='header1' description='description1' />
+                    <DummyCard header='header1' description='description2' />
+                </CardContainer>
+            , div);
+            setTimeout(() => {
+                ReactDOM.unmountComponentAtNode(div);
+                done();        
+            }, 1000);
+        }, 1000);
+    }, 1000);
+});