stopping for now

package.json

@@ -9,14 +9,22 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "bootstrap": "^4.0.0-beta.2",
+    "firebase": "^4.8.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-redux": "^5.0.6"
+    "react-redux": "^5.0.6",
+    "reactstrap": "^5.0.0-alpha.4",
+    "redux": "^3.7.2"
   },
   "devDependencies": {
+    "@types/react": "^16.0.31",
+    "@types/react-dom": "^16.0.3",
+    "@types/reactstrap": "^5.0.6",
     "awesome-typescript-loader": "^3.4.1",
-    "redux-devtools": "^3.4.1",
+    "css-loader": "^0.28.7",
     "source-map-loader": "^0.2.3",
+    "style-loader": "^0.19.1",
     "typescript": "^2.6.2"
   }
 }

src/actions/types.ts

@@ -0,0 +1,2 @@
+export const LOGGED_IN = "LOGGED_IN"
+export const LOGGED_OUT = "LOGGED_OUT"

src/components/Hello.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RaisedButton from 'material-ui/RaisedButton'
+require('../styles/main.css');
 export interface HelloProps { compiler: string; framework: string; }
 
 // 'HelloProps' describes the shape of props.
@@ -7,9 +7,8 @@ export interface HelloProps { compiler: string; framework: string; }
 export class Hello extends React.Component<HelloProps, {}> {
     render() {
     return (
-        <div>
-        <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>
-        <RaisedButton label="Default" />
+        <div className="main">
+            <p>Hello from {this.props.compiler} and {this.props.framework}!</p>
         </div>
     );
         

src/components/LoginButton.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Button } from 'reactstrap';
+import * as firebase from 'firebase'
+
+export interface LoginProps { onClick: React.MouseEventHandler<any> }
+export class LoginButton extends React.Component<LoginProps, {}>{
+    render(){
+        return <Button href="#" onClick={this.props.onClick} color="primary" outline>Login</Button>
+    }
+}

src/components/NavBar.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, NavbarBrand, Navbar } from 'reactstrap';
+
+export class NavBar extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+
+  }
+
+  render() {
+    return (
+      <div>
+        <Navbar color="faded" light expand="md">
+        <NavbarBrand href="/">minbin</NavbarBrand>
+        <Nav navbar className="ml-auto">
+          <NavItem>
+              {this.props.children}
+          </NavItem>
+        </Nav>
+        </Navbar>
+      </div>
+    );
+  }
+}

src/components/TabNav.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, NavbarBrand } from 'reactstrap';
+
+export class TabNav extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      activeTab: '1'
+    };
+  }
+
+  toggle(tab: string) {
+    if (this.state.activeTab !== tab) {
+        super.setState({
+        activeTab: tab
+      });
+    }
+  }
+  render() {
+    return (
+      <div>
+        <Nav tabs className="ml-auto">
+          <NavItem>
+            <NavLink
+              className={this.state.activeTab === '1' ? 'active': ''}
+              onClick={() => { this.toggle('1'); }}
+            >
+              Tab1
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={this.state.activeTab === '2' ? 'active': ''}
+              onClick={() => { this.toggle('2'); }}
+            >
+              Moar Tabs
+            </NavLink>
+          </NavItem>
+        </Nav>
+        <TabContent activeTab={this.state.activeTab}>
+          <TabPane tabId="1">
+            <Row>
+              <Col sm="12">
+                <h4>Tab 1 Contents</h4>
+              </Col>
+            </Row>
+          </TabPane>
+          <TabPane tabId="2">
+            <Row>
+              <Col sm="6">
+                <Card>
+                  <CardTitle>Special Title Treatment</CardTitle>
+                  <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+                  <Button>Go somewhere</Button>
+                </Card>
+              </Col>
+              <Col sm="6">
+                <Card>
+                  <CardTitle>Special Title Treatment</CardTitle>
+                  <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+                  <Button>Go somewhere</Button>
+                </Card>
+              </Col>
+            </Row>
+          </TabPane>
+        </TabContent>
+      </div>
+    );
+  }
+}

src/containers/Login.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import * as firebase from "firebase"
+import { LoginButton } from "../components/LoginButton"
+export interface LoginState { isLoggedIn: Boolean; displayName: string; uid: string }
+
+export class LoginContainer extends React.Component<{}, LoginState>{
+
+    constructor(props: any){
+        super(props, {isLoggedIn: false, displayName: '', uid: null}) 
+        firebase.auth().onAuthStateChanged((e)=>this.handleLogin(e));
+                 
+    }
+    handleLogin(user: firebase.User){
+        if (user) {
+            this.setState({isLoggedIn: true, displayName: user.displayName, uid: user.uid})
+            
+          } else {
+              this.setState({isLoggedIn: false})
+          }
+    }
+    async logout(){
+        await firebase.auth().signOut()
+        this.setState({isLoggedIn: false, displayName: '', uid: ''})
+    }
+    login(){
+        var provider = new firebase.auth.GoogleAuthProvider();
+        firebase.auth().signInWithPopup(provider).then(result => {
+        });
+    }
+    render(){
+        
+            
+        if(this.state && this.state.isLoggedIn){
+            return <span> Hi, {this.state.displayName} <a href="#" onClick={()=>this.logout()}>Log Out</a> </span>
+        }
+        else{
+            return <LoginButton onClick={this.login} />
+        }
+      
+    }
+}

src/index.tsx

@@ -1,16 +1,23 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import { Hello } from "./components/Hello";
-import darkBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-const darkMuiTheme = getMuiTheme(darkBaseTheme);
-
-
+import 'bootstrap/dist/css/bootstrap.css';
+import { TabNav } from './components/TabNav'
+import { NavBar } from './components/NavBar'
+import { BoostrapFirebase } from './startup/firebase'
+import { LoginContainer } from './containers/Login'
+import { createStore } from 'redux'
+import { MainReducer } from './reducers/MainReducer'
+BoostrapFirebase();
+let store = createStore(MainReducer)
 const App = () => (
-    <MuiThemeProvider muiTheme={darkMuiTheme}>
-       <Hello compiler="theme prov" framework="React" />
-    </MuiThemeProvider>
+      <div className="app container-fluid">
+        <NavBar>
+          <LoginContainer/>
+        </NavBar>
+        <TabNav />
+        <Hello compiler="yodawg" framework="React" />
+       </div>
   );
   
 ReactDOM.render(

src/models/AppState.ts

@@ -0,0 +1,8 @@
+export interface AppState {
+    user:{
+        isLoggedIn: Boolean,
+        displayName: String
+    }
+    
+
+}

src/reducers/MainReducer.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { AppState } from './../models/AppState'
+import { Action, AnyAction } from 'redux';
+import * as appActions from '../actions/types';
+export function MainReducer(state:AppState = {user: { isLoggedIn: false, displayName: ''}}, action: AnyAction) {
+    switch(action.type){
+        case appActions.LOGGED_IN:
+            return Object.assign({}, state, {user:{ isLoggedIn: true, displayName: action.displayName}})
+        case appActions.LOGGED_OUT:
+            return Object.assign({}, state, {user:{ isLoggedIn: false, displayName: ""}})
+        default:
+            return state
+    }
+}

src/startup/firebase.ts

@@ -0,0 +1,14 @@
+import * as firebase from "firebase"
+
+
+  export function BoostrapFirebase(){
+    var config = {
+        apiKey: "AIzaSyBi1oHDSe7juSTOZws30RkyXgv9u9ey-HA",
+        authDomain: "minbin-784f1.firebaseapp.com",
+        databaseURL: "https://minbin-784f1.firebaseio.com",
+        projectId: "minbin-784f1",
+        storageBucket: "minbin-784f1.appspot.com",
+        messagingSenderId: "437102882585"
+    };
+    firebase.initializeApp(config);
+  }

src/styles/main.css

@@ -0,0 +1,5 @@
+.main {
+    background-color: lightgray;
+    width: 100%;
+    height: 100;
+}

tsconfig.json

@@ -4,7 +4,7 @@
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "commonjs",
-        "target": "es6",
+        "target": "es2017",
         "jsx": "react"
     },
     "include": [

webpack.config.js

@@ -19,7 +19,11 @@ module.exports = {
             { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
 
             // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
+            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader' ]
+            }
         ]
     },