Merge branch 'master' into Henry

reactcode/package.json

@@ -8,7 +8,8 @@
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.3.2",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.4"
+    "react-scripts": "1.1.4",
+    "reactstrap": "^6.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

reactcode/src/App.js

@@ -2,25 +2,31 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import MainPage from './Main/MainPage.js';
+import Login from './Main/Components/Login'
+import firebase from 'firebase';
+
 
 class App extends Component {
-  render() {
-    return (
-        <div>
-            <MainPage/>
 
+  constructor(props){
+    super(props);
+
+      var config = {
+          apiKey: "AIzaSyDHND3EVIe-S8r0k_3DLf_GClaM2qazGMI",
+          authDomain: "trytonsplan.firebaseapp.com",
+          databaseURL: "https://trytonsplan.firebaseio.com",
+          projectId: "trytonsplan",
+          storageBucket: "trytonsplan.appspot.com",
+          messagingSenderId: "242589223564"
+      };
+      firebase.initializeApp(config);
 
-        </div>
-      /*
-        <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>*/
+  }
+  render() {
+    return (
+      <div className = 'App'>
+        <Login db={firebase}/>
+      </div>
     );
   }
 }

reactcode/src/Main/Components/Login.css

@@ -0,0 +1,17 @@
+.outer {
+    display: table;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+.middle {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.inner {
+    margin-left: auto;
+    margin-right: auto;
+    width: 400px;
+}

reactcode/src/Main/Components/Login.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  BrowserRouter as Router,
+  Route,
+  Link,
+  Redirect,
+  withRouter
+} from "react-router-dom";
+
+import MainPage from '../MainPage';
+import { Button, form, FormGroup, FormControl, HelpBlock, ControlLabel } from 'react-bootstrap';
+
+import './Login.css';
+
+
+
+////////////////////////////////////////////////////////////
+// 1. Click the public page
+// 2. Click the protected page
+// 3. Log in
+// 4. Click the back button, note the URL each time
+
+const fakeAuth = {
+    isAuthenticated: false,
+    authenticate(cb) {
+        this.isAuthenticated = true;
+        setTimeout(cb, 100); // fake async
+    }
+};
+
+
+class Login extends React.Component {
+
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            email: '',
+            pass: '',
+            redirectToReferrer: false
+        };
+
+    }
+
+    login = () => {
+        fakeAuth.authenticate(() => {
+            this.setState({ redirectToReferrer: true });
+        });
+    };
+
+    render() {
+
+        const { redirectToReferrer } = this.state;
+        if (redirectToReferrer) {
+            return <MainPage db={this.props.db}/>;
+        }
+        return (
+
+            <div className="outer">
+                <div className="middle">
+                    <div className="inner">
+
+                            <form>
+                                <FormGroup
+                                    controlId='inputlogin'
+                                >
+                                    <ControlLabel>Working example with validation</ControlLabel>
+                                    <FormControl
+                                        type="text"
+                                        value={this.state.value}
+                                        placeholder="Enter UCSD Email"
+                                        onChange={e => this.setState({email: e.target.value})}
+                                    />
+                                    <FormControl
+                                        type="text"
+                                        value={this.state.value}
+                                        placeholder="Enter UCSD Password"
+                                        onChange={e => this.setState({pass: e.target.value})}
+                                    />
+                                    <FormControl.Feedback />
+                                    <HelpBlock>Validation is based on UCSD Login.</HelpBlock>
+                                </FormGroup>
+                            </form>
+                            <Button bsStyle='primary' bsSize='large' onClick={this.login}>Log in</Button>
+
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Login;

reactcode/src/Main/MainPage.js

@@ -1,25 +1,72 @@
-import React, {Component} from 'react';
-import CourseSearchBar from "./Components/CourseSearchBar";
+import React from 'react';
+import {BrowserRouter as Router, Switch, Route, Link, withRouter} from "react-router-dom";
+import Login from './Components/Login'
+import CourseSearchBar from './Components/CourseSearchBar'
 
 
-class MainPage extends Component {
-    constructor(props) {
+
+class MainPage extends React.Component {
+
+    constructor(props){
         super(props);
 
+        this.state = {
+            redirectToReferrer: true,
+            items:[]
+        };
 
+        this.firebaseRef = this.props.db.database().ref('course');
+
+        this.firebaseRef.on('value', dataSnapshot => {
+            let items = [];
+            dataSnapshot.forEach(childSnapshot => {
+                let item = childSnapshot.val();
+                item['.Key'] = childSnapshot.key;
+                items.push(item);
+            });
+            this.setState({items});
+        });
     }
 
-    render() {
-        return (
-            <div>
-            <div><CourseSearchBar/></div>
-            </div>
-        )
+    logout = () => {
+        this.setState({ redirectToReferrer: false });
+    };
 
-    }
 
+    render(){
 
+        const { redirectToReferrer } = this.state;
+        const records = this.state.items.map(items =>
+            <tr key = {items.courseid}>
+                <td style={{width: '200px', textAlign: 'center'}}>{items.courseID}</td>
+                <td style={{width: '200px', textAlign: 'center'}}>{items.title}</td>
+            </tr>
+        )
+
+        if (!redirectToReferrer) {
+            return <Login db={this.props.db} />;
+        }
 
+        return (
+            <div>
+                <button onClick={this.logout}>Log out</button>
+
+                <h1>Trytonsplan</h1>
+                <CourseSearchBar />
+                <table style={{border: '1px solid black'}}>
+                    <thead>
+                    <tr>
+                        <th>Course ID</th>
+                        <th>Course Title</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {records}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
 }
 
 export default MainPage;

reactcode/src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 
 ReactDOM.render(<App />, document.getElementById('root'));