lint

2017-12-31 15:19:21 -05:00
parent a6085f3c28
commit c7416883ec
27 changed files with 517 additions and 462 deletions
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --output-public-path=dist --history-api-fallback",
-    "build": "webpack --optimize-minimize"
+    "build": "npm run lint && webpack --optimize-minimize",
+    "lint": "tslint --project ./tslint.json src/**/*.ts src/**/*.tsx"
  },
  "author": "",
  "license": "ISC",
@@ -39,6 +40,7 @@
    "css-loader": "^0.28.7",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.19.1",
+    "tslint": "^5.8.0",
    "typescript": "^2.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
--- a/src/actions/loginActions.ts
+++ b/src/actions/loginActions.ts
@@ -1,19 +1,17 @@
-import { LoginState } from '../models/LoginState';
-import {LOGGED_IN, LOGGED_OUT} from './types'
-import { MinAction } from '../models/MinAction';
+import { LoginState } from "../models/LoginState";
+import { MinAction } from "../models/MinAction";
+import {LOGGED_IN, LOGGED_OUT} from "./types";

-export function login(loginState: LoginState) : MinAction<LoginState>{
+export function login(loginState: LoginState): MinAction<LoginState> {
    return {
        type: LOGGED_IN,
-        payload: loginState
-    }
+        payload: loginState,
+    };
 }

-
-
-export function logout() : MinAction<LoginState> {
+export function logout(): MinAction<LoginState> {
    return {
        type: LOGGED_OUT,
-        payload: {isLoggedIn: false, displayName: '', uid: ''}
-    }
+        payload: {isLoggedIn: false, displayName: "", uid: ""},
+    };
 }
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -1,2 +1,2 @@
-export const LOGGED_IN = "LOGGED_IN"
-export const LOGGED_OUT = "LOGGED_OUT"
+export const LOGGED_IN = "LOGGED_IN";
+export const LOGGED_OUT = "LOGGED_OUT";
--- a/src/components/Conditional.tsx
+++ b/src/components/Conditional.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";

-export class Conditional extends React.Component<{render:boolean}, any>{
-    render(){
-        let toRender = this.props.render? this.props.children : null;
-        return <span>{toRender}</span>
+export class Conditional extends React.Component<{render: boolean}, any> {
+    public render() {
+        const toRender = this.props.render ? this.props.children : null;
+        return <span>{toRender}</span>;
    }
 }
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -1,21 +1,21 @@
-import { LoginState } from '../models/LoginState';
-import { AppState } from '../models/AppState';
-import * as React from 'react';
-import * as _ from 'underscore';
-import fbData from '../startup/firebase'
-import {Document} from '../models/Document'
-import { Col } from 'reactstrap';
+import * as React from "react";
+import { Col } from "reactstrap";
+import * as _ from "underscore";
+import { AppState } from "../models/AppState";
+import {Document} from "../models/Document";
+import { LoginState } from "../models/LoginState";
+import fbData from "../startup/firebase";

-interface EditProps {documentBody: string, onChange?: (doc:string)=>void}
+interface EditProps {documentBody: string; onChange?: (doc: string) => void; }

-export class Editor extends React.Component<EditProps, {}>{
-    updateDocument(docBody: string){
-        if(this.props.onChange) this.props.onChange(docBody);
+export class Editor extends React.Component<EditProps, {}> {
+    public updateDocument(docBody: string) {
+        if (this.props.onChange) { this.props.onChange(docBody); }
    }
-    render(){
+    public render() {
        return(
        <Col sm="12">
-            <textarea className="form-control" style={{height: "70vh"}} value={this.props.documentBody || ""} onChange={(event)=>this.updateDocument(event.target.value)}></textarea>
+            <textarea className="form-control" style={{height: "70vh"}} value={this.props.documentBody || ""} onChange={(event) => this.updateDocument(event.target.value)}></textarea>
        </Col>
        );
    }
--- a/src/components/ForOhFour.tsx
+++ b/src/components/ForOhFour.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";

-export class ForOhFour extends React.Component<any, any>{
-    render(){
+export class ForOhFour extends React.Component<any, any> {
+    public render() {
        return <h4>404! oh noes</h4>;
    }
 }
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,9 +1,9 @@
-import { LoginState } from '../models/LoginState';
-import * as React from 'react';
+import * as React from "react";
+import { LoginState } from "../models/LoginState";

-export class Home extends React.Component<any,any>{
+export class Home extends React.Component<any, any> {

-    render(){
-        return <h4> Hi, welcome to minbin a simple pastebin. Please login to get started!</h4>
+    public render() {
+        return <h4> Hi, welcome to minbin a simple pastebin. Please login to get started!</h4>;
    }
 }
--- a/src/components/ListItem.tsx
+++ b/src/components/ListItem.tsx
@@ -1,15 +1,15 @@
-import { Viewer } from './Viewer';
-import { getLanguage } from '../util/doc';
-import * as React from 'react';
-import {Document} from "../models/Document"
+import * as React from "react";
 import { Link } from "react-router-dom";
-export class ListItem extends React.PureComponent<{doc: Document, uid: string, docId: string}>{
-    render(){
+import {Document} from "../models/Document";
+import { getLanguage } from "../util/doc";
+import { Viewer } from "./Viewer";
+export class ListItem extends React.PureComponent<{doc: Document, uid: string, docId: string}> {
+    public render() {
        return <div key={`li_div_${this.props.docId}`}>
        <h4>
-            <Link to={`/d/${this.props.uid}/${this.props.docId}/edit`}>{this.props.doc.Title || 'Untitled'}</Link>
+            <Link to={`/d/${this.props.uid}/${this.props.docId}/edit`}>{this.props.doc.Title || "Untitled"}</Link>
        </h4>
        <Viewer  doc={this.props.doc.Body} language={getLanguage(this.props.doc.Title)} maxHeight={"200px"} />
-    </div>
+    </div>;
    }
 }
--- a/src/components/LoginButton.tsx
+++ b/src/components/LoginButton.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import { Button } from 'reactstrap';
-import * as firebase from 'firebase'
+import * as firebase from "firebase";
+import * as React from "react";
+import { Button } from "reactstrap";

-export interface LoginButtonProps { onClick: React.MouseEventHandler<any> }
-export class LoginButton extends React.Component<LoginButtonProps, {}>{
-    render(){
-        return <Button href="#" onClick={this.props.onClick} color="primary" outline>Login</Button>
+export interface LoginButtonProps { onClick: React.MouseEventHandler<any>; }
+export class LoginButton extends React.Component<LoginButtonProps, {}> {
+    public render() {
+        return <Button href="#" onClick={this.props.onClick} color="primary" outline>Login</Button>;
    }
 }
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,8 +1,8 @@
-import { LoginState } from '../models/LoginState';
-import * as React from 'react';
-import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, NavbarBrand, Navbar } from 'reactstrap';
-import { LoginContainer } from '../containers/Login';
-import { Link } from 'react-router-dom';
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { Button, Card, CardText, CardTitle, Col, Nav, Navbar, NavbarBrand, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap";
+import { LoginContainer } from "../containers/Login";
+import { LoginState } from "../models/LoginState";

 export class NavBar extends React.Component<{loginState: LoginState}, any> {
  constructor(props: any) {
@@ -10,8 +10,8 @@ export class NavBar extends React.Component<{loginState: LoginState}, any> {

  }

-  render() {
-    let newButton = this.props.loginState.isLoggedIn ? (
+  public render() {
+    const newButton = this.props.loginState.isLoggedIn ? (
      <NavItem>
          <Link to="/d/new" className="btn btn-sm btn-outline-success" >+ New</Link>
          </NavItem>
--- a/src/components/Viewer.tsx
+++ b/src/components/Viewer.tsx
@@ -1,20 +1,20 @@
 /// <reference path="../react-syntax-highlighter.d.ts" />
 import * as React from "react";
-import { Row, Col, Card, CardText } from "reactstrap";
-import SyntaxHighlighter from 'react-syntax-highlighter';
+import SyntaxHighlighter from "react-syntax-highlighter";
 import googlecode from "react-syntax-highlighter/styles/hljs/googlecode";
+import { Card, CardText, Col, Row } from "reactstrap";

-export interface ViewerProps {doc?: string, language?: string, maxHeight?: string} 
-export class Viewer extends React.Component<ViewerProps, any>{
-    render(){
-		let style : React.CSSProperties = { paddingTop: "10px" };
-		if(this.props.maxHeight){
-			style.maxHeight = this.props.maxHeight
+export interface ViewerProps {doc?: string; language?: string; maxHeight?: string; }
+export class Viewer extends React.Component<ViewerProps, any> {
+    public render() {
+		const style: React.CSSProperties = { paddingTop: "10px" };
+		if (this.props.maxHeight) {
+			style.maxHeight = this.props.maxHeight;
 		}
-        return(
+  return(

                <Card style={style}>
-                    <SyntaxHighlighter showLineNumbers={true} language={this.props.language || null} style={googlecode} >{this.props.doc || ''}</SyntaxHighlighter>
+                    <SyntaxHighlighter showLineNumbers={true} language={this.props.language || null} style={googlecode} >{this.props.doc || ""}</SyntaxHighlighter>
 				</Card>
 			);
    }
--- a/src/containers/AppContainer.tsx
+++ b/src/containers/AppContainer.tsx
@@ -1,51 +1,49 @@
-import { HomeContainer } from './HomeContainer';
-import { LoginState } from '../models/LoginState';
-import { Edit } from './Edit';
-import { LoginContainer } from './Login';
-import { NavBar } from '../components/NavBar';
-import * as React from 'react';
-import * as redux from 'redux';
-import {Store} from "redux"
-import { connect } from 'react-redux';
-import { AppState } from '../models/AppState';
-import { Route, RouteProps, RouterChildContext, RouteComponentProps, Redirect, Switch } from 'react-router';
-import { ForOhFour } from '../components/ForOhFour'
-import {generateDocId} from '../util/doc'
-import { BrowserRouter } from 'react-router-dom';
-const mapStateToProps = (state : AppState) : AppState  =>
-{
+import * as React from "react";
+import { connect } from "react-redux";
+import { Redirect, Route, RouteComponentProps, RouteProps, RouterChildContext, Switch } from "react-router";
+import { BrowserRouter } from "react-router-dom";
+import * as redux from "redux";
+import {Store} from "redux";
+import { ForOhFour } from "../components/ForOhFour";
+import { NavBar } from "../components/NavBar";
+import { AppState } from "../models/AppState";
+import { LoginState } from "../models/LoginState";
+import {generateDocId} from "../util/doc";
+import { Edit } from "./Edit";
+import { HomeContainer } from "./HomeContainer";
+import { LoginContainer } from "./Login";
+const mapStateToProps = (state: AppState): AppState  => {
    return state;
 };
-class appContainer extends React.Component<AppState, any>{
-    render(){
+class appContainer extends React.Component<AppState, any> {
+    public render() {
        return <BrowserRouter><div className="app container-fluid">
        <NavBar loginState={this.props.login} />
        <Switch>
-        <Route path="/d/new" render={()=>{
-            return <Redirect to={`/d/${this.props.login.uid}/${generateDocId()}`} />
+        <Route path="/d/new" render={() => {
+            return <Redirect to={`/d/${this.props.login.uid}/${generateDocId()}`} />;
        }} />
-        <Route path="/d/:uid/:docId/:edit" render={(routeProps: RouteComponentProps<{docId?: string, uid?: string, login: LoginState, edit: string}>)=>{
+        <Route path="/d/:uid/:docId/:edit" render={(routeProps: RouteComponentProps<{docId?: string, uid?: string, login: LoginState, edit: string}>) => {
            let showEdit;
-            if(routeProps.match.params.edit === "edit"){
+            if (routeProps.match.params.edit === "edit") {
                showEdit = true;
-            }
-            else{
+            } else {
                showEdit = false;
            }
-            return <Edit login={this.props.login} uid={routeProps.match.params.uid} docId={routeProps.match.params.docId} showEdit={showEdit} />
+            return <Edit login={this.props.login} uid={routeProps.match.params.uid} docId={routeProps.match.params.docId} showEdit={showEdit} />;
        }} />
-        <Route path="/d/:uid/:docId" render={(routeProps: RouteComponentProps<{docId?: string, uid?: string, login: LoginState}>)=>{
+        <Route path="/d/:uid/:docId" render={(routeProps: RouteComponentProps<{docId?: string, uid?: string, login: LoginState}>) => {

-            return <Redirect to={`/d/${routeProps.match.params.uid}/${routeProps.match.params.docId}/view`} />
+            return <Redirect to={`/d/${routeProps.match.params.uid}/${routeProps.match.params.docId}/view`} />;
        }} />
        <Route path="/" strict={true}>
            <HomeContainer login={this.props.login} />
        </Route>
        <Route component={ForOhFour} />
        </Switch>
-       </div></BrowserRouter>
+       </div></BrowserRouter>;
    }

 }

-export const AppContainer = connect(mapStateToProps)(appContainer)
+export const AppContainer = connect(mapStateToProps)(appContainer);
--- a/src/containers/Edit.tsx
+++ b/src/containers/Edit.tsx
@@ -1,56 +1,57 @@
-import { generateDocId, getLanguage } from '../util/doc';
-import { LoginState } from '../models/LoginState';
-import { Editor } from '../components/Editor';
-import { Viewer } from '../components/Viewer';
-import * as React from 'react';
-import fbData from '../startup/firebase'
-import {Document} from '../models/Document'
-import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, NavbarBrand, FormText, Input } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { Conditional } from '../components/Conditional';
-import { ChangeEventHandler } from 'react';
+import { ChangeEventHandler } from "react";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { Button, Card, CardText, CardTitle, Col, FormText, Input, Nav, NavbarBrand, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap";
+import { Conditional } from "../components/Conditional";
+import { Editor } from "../components/Editor";
+import { Viewer } from "../components/Viewer";
+import {Document} from "../models/Document";
+import { LoginState } from "../models/LoginState";
+import fbData from "../startup/firebase";
+import { generateDocId, getLanguage } from "../util/doc";

-export interface EditState {document: Document}
-export interface EditProps {login: LoginState, docId: string, uid: string, showEdit? : Boolean}
+export interface EditState {document: Document; }
+export interface EditProps {login: LoginState; docId: string; uid: string; showEdit?: boolean; }

 export class Edit extends React.Component<EditProps, EditState> {
+  public ref: any;
  constructor(props: EditProps) {
    super(props);

    this.state = {
      document: {
-        Title: '',
-        Body: ''
-      }
+        Title: "",
+        Body: "",
+      },
    };
  }
-  ref: any
-  componentDidMount() {
+
+  public componentDidMount() {
      this.ref = fbData.rebase.syncState(`docs/${this.props.uid}/${this.props.docId}`, {
        context: this,
-        state: 'document',
-        asArray: false
+        state: "document",
+        asArray: false,
      });
    }

-  componentWillUnmount() {
+  public componentWillUnmount() {
      fbData.rebase.removeBinding(this.ref);
  }
-  updateTitle(docTitle: string){
-    this.setState({document:{Title: docTitle}});
+  public updateTitle(docTitle: string) {
+    this.setState({document: {Title: docTitle}});
  }
-  updateDocument(docBody: string){
+  public updateDocument(docBody: string) {
      this.setState({
          document: {
-              Body: docBody
-          }
+              Body: docBody,
+          },
      });
  }

-  render() {
-    let tabNumber = this.props.showEdit ? '2': '1'
-    let displayEdit = this.props.login.isLoggedIn && this.props.login.uid === this.props.uid;
-    let displayViewer = tabNumber === '1';
+  public render() {
+    const tabNumber = this.props.showEdit ? "2" : "1";
+    const displayEdit = this.props.login.isLoggedIn && this.props.login.uid === this.props.uid;
+    const displayViewer = tabNumber === "1";

     // : null;
    return (
@@ -59,7 +60,7 @@ export class Edit extends React.Component<EditProps, EditState> {
          <NavItem>
            <Link
              to="view"
-              className={`nav-link ${tabNumber === '1' ? 'active': ''}`}
+              className={`nav-link ${tabNumber === "1" ? "active" : ""}`}
            >
              View
            </Link>
@@ -67,7 +68,7 @@ export class Edit extends React.Component<EditProps, EditState> {
          <NavItem>
            <Link
              to="edit"
-              className={`nav-link ${tabNumber === '2' ? 'active': ''}`}
+              className={`nav-link ${tabNumber === "2" ? "active" : ""}`}
            >
              Edit
            </Link>
@@ -75,7 +76,7 @@ export class Edit extends React.Component<EditProps, EditState> {
        </Nav>
        <TabContent activeTab={tabNumber}>
          <TabPane tabId="1">
-            <Row style={{height: '100vh'}}>
+            <Row style={{height: "100vh"}}>
              <Col sm="12">
                <Conditional render={displayViewer}>
                  <br />
@@ -87,17 +88,17 @@ export class Edit extends React.Component<EditProps, EditState> {
          </TabPane>
          <TabPane tabId="2">
                <Conditional render={displayEdit}>
-                    <Row style={{height: '60vh'}}>
-                      <Col sm="12" style={{height: '100%'}}>
+                    <Row style={{height: "60vh"}}>
+                      <Col sm="12" style={{height: "100%"}}>
                      <div>Permalink: <Input readOnly type="text" value={`https://minbin.co/d/${this.props.login.uid}/${this.props.docId}`} /></div><br />
-                      <textarea className="form-control" style={{height: "40vh"}} value={this.state.document.Body || ""} onChange={(event)=>this.updateDocument(event.target.value)}></textarea>
+                      <textarea className="form-control" style={{height: "40vh"}} value={this.state.document.Body || ""} onChange={(event) => this.updateDocument(event.target.value)}></textarea>
                      </Col>
                    </Row>
-                    <Row style={{height: '20vh'}} >
+                    <Row style={{height: "20vh"}} >
                      <Col sm="12">
-                        <form style={{paddingLeft: "10px"}} className={'form-inline'}>
+                        <form style={{paddingLeft: "10px"}} className={"form-inline"}>
                            <label htmlFor="title-input">Title: &nbsp;</label>
-                            <input placeholder={"KittensAttack.cpp"} type="text" onChange={(event)=>this.updateTitle(event.target.value)} value={this.state.document.Title} className="form-control" id="title-input" />
+                            <input placeholder={"KittensAttack.cpp"} type="text" onChange={(event) => this.updateTitle(event.target.value)} value={this.state.document.Title} className="form-control" id="title-input" />
                        </form>
                      </Col>
                    </Row>
--- a/src/containers/HomeContainer.tsx
+++ b/src/containers/HomeContainer.tsx
@@ -1,17 +1,17 @@
-import { Home } from '../components/Home';
-import { LoginState } from '../models/LoginState';
-import * as React from 'react';
-import { ListContainer } from './ListContainer';
+import * as React from "react";
+import { Home } from "../components/Home";
+import { LoginState } from "../models/LoginState";
+import { ListContainer } from "./ListContainer";

-export class HomeContainer extends React.Component<{login: LoginState},any>{
+export class HomeContainer extends React.Component<{login: LoginState}, any> {

-    render(){
-        let render = this.props.login.isLoggedIn ? <ListContainer login={this.props.login} /> : <Home /> 
+    public render() {
+        const render = this.props.login.isLoggedIn ? <ListContainer login={this.props.login} /> : <Home />;
        return(
        <div>
            {render}
        </div>
-        )
+        );

    }
 }
--- a/src/containers/ListContainer.tsx
+++ b/src/containers/ListContainer.tsx
@@ -1,50 +1,49 @@
-import { ListItem } from '../components/ListItem';
-import { Viewer } from '../components/Viewer';
-import { LoginState } from '../models/LoginState';
-import * as React from 'react';
-import fbData from '../startup/firebase';
-import Progress from 'reactstrap/lib/Progress';
-import { DocumentPlusKey } from '../models/Document'
-import { getLanguage } from '../util/doc';
+import * as React from "react";
+import Progress from "reactstrap/lib/Progress";
+import { ListItem } from "../components/ListItem";
+import { Viewer } from "../components/Viewer";
+import { DocumentPlusKey } from "../models/Document";
+import { LoginState } from "../models/LoginState";
+import fbData from "../startup/firebase";
+import { getLanguage } from "../util/doc";

-export class ListContainer extends React.Component<{login: LoginState}, {inProgress: Boolean, docs: Array<DocumentPlusKey>, error : Boolean }>{
-    inProgress: Boolean = true;
-    getPastes(){
+export class ListContainer extends React.Component<{login: LoginState}, {inProgress: boolean, docs: DocumentPlusKey[], error: boolean }> {
+    public inProgress: boolean = true;
+    constructor(login: {login: LoginState}) {
+        super(login);
+        this.state = {inProgress: true, docs: new Array<DocumentPlusKey>(), error: false};
+    }
+    public getPastes() {
        fbData.rebase.fetch(`/docs/${this.props.login.uid}`,
        {
            context: this,
-            asArray: true
+            asArray: true,
        })
-        .then((data: Array<DocumentPlusKey>)=>
-        {
+        .then((data: DocumentPlusKey[]) => {
            this.setState({docs: data, inProgress: false});
        })
-        .catch((err: any)=>{
+        .catch((err: any) => {
            console.error(err);
            this.setState({error: true, inProgress: false});
        });
    }
-    constructor(login: {login: LoginState}){
-        super(login)
-        this.state = {inProgress: true, docs: new Array<DocumentPlusKey>(), error: false}
+    public componentDidMount() {
+        this.getPastes();
    }
-    componentDidMount(){
-        this.getPastes()
-    }
-    render(){
-        if(this.state.inProgress){
-            return <div><Progress striped={true} animated={true} max={100}  value={100}   /></div>
+    public render() {
+        if (this.state.inProgress) {
+            return <div><Progress striped={true} animated={true} max={100}  value={100}   /></div>;
        }
-        if(this.state.error){
-            return <h4>Oh No! An error occured</h4>
+        if (this.state.error) {
+            return <h4>Oh No! An error occured</h4>;
        }
-        if(this.state.docs.length < 1){
-            return <h4>No pastes found <small>Press new in the upper right to make a paste!</small></h4>
+        if (this.state.docs.length < 1) {
+            return <h4>No pastes found <small>Press new in the upper right to make a paste!</small></h4>;
        }
-        let elems =this.state.docs.map(doc => {
-           return <ListItem key={`${doc.key}_li`} docId={doc.key} doc={doc} uid={this.props.login.uid}   />
+        const elems = this.state.docs.map((doc) => {
+           return <ListItem key={`${doc.key}_li`} docId={doc.key} doc={doc} uid={this.props.login.uid}   />;
        });
-        return <div>{elems}</div>
+        return <div>{elems}</div>;

    }
 }
--- a/src/containers/Login.tsx
+++ b/src/containers/Login.tsx
@@ -1,38 +1,37 @@
-import { Reducer, Action } from 'redux';
-import * as actions from '../actions/loginActions';
-import { LoginState } from '../models/LoginState';
-import * as React from 'react';
-import * as firebase from 'firebase';
+import * as firebase from "firebase";
+import * as React from "react";
+import * as reactRedux from "react-redux";
+import { connect, Dispatch } from "react-redux";
+import { Link } from "react-router-dom";
+import { Button } from "reactstrap";
+import * as redux from "redux";
+import { Action, Reducer } from "redux";
+import * as actions from "../actions/loginActions";
 import { LoginButton } from "../components/LoginButton";
-import * as reactRedux from 'react-redux';
-import {AppState} from '../models/AppState';
-import { Dispatch, connect } from 'react-redux';
-import * as redux from 'redux';
-import { Button } from 'reactstrap';
-import { Link } from 'react-router-dom';
+import {AppState} from "../models/AppState";
+import { LoginState } from "../models/LoginState";

-const mapStateToProps = (state : AppState) : IBaseLoginProps  =>
-    {
+const mapStateToProps = (state: AppState): IBaseLoginProps  => {
        return {loginState: state.login};
    };
-const mapDispatchToProps  = (dispatch: (action: Action)=>any) : IBaseLoginDispatches => {
+const mapDispatchToProps  = (dispatch: (action: Action) => any): IBaseLoginDispatches => {
    return {
-        onLogin:(loginState: LoginState) => dispatch(actions.login(loginState)),
-        onLogOut:() => dispatch(actions.logout())
-    }
+        onLogin: (loginState: LoginState) => dispatch(actions.login(loginState)),
+        onLogOut: () => dispatch(actions.logout()),
+    };
 };
-interface IBaseLoginProps {loginState: LoginState;}
-interface IBaseLoginDispatches {onLogin: (loginState: LoginState)=>any; onLogOut: ()=>any;}
-interface ILoginProps extends IBaseLoginProps,IBaseLoginDispatches {}
-class loginContainer extends React.Component<ILoginProps,{}>{
+interface IBaseLoginProps {loginState: LoginState; }
+interface IBaseLoginDispatches {onLogin: (loginState: LoginState) => any; onLogOut: () => any; }
+interface ILoginProps extends IBaseLoginProps, IBaseLoginDispatches {}
+class loginContainer extends React.Component<ILoginProps, {}> {

-    constructor(props: ILoginProps){
+    constructor(props: ILoginProps) {
        super(props);
-        firebase.auth().onAuthStateChanged((e)=>this.handleLogin(e));
+        firebase.auth().onAuthStateChanged((e) => this.handleLogin(e));

    }

-    handleLogin(user: firebase.User){
+    public handleLogin(user: firebase.User) {
        if (user) {
            this.props.onLogin({isLoggedIn: true, displayName: user.displayName, uid: user.uid});

@@ -40,23 +39,22 @@ class loginContainer extends React.Component<ILoginProps,{}>{
              this.props.onLogOut();
          }
    }
-    logout(){
+    public logout() {
        firebase.auth().signOut()
-        .then(()=>this.props.onLogOut());
+        .then(() => this.props.onLogOut());

    }
-    login(){
-        let provider = new firebase.auth.GoogleAuthProvider();
+    public login() {
+        const provider = new firebase.auth.GoogleAuthProvider();
        firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
-        .then(()=>firebase.auth().signInWithPopup(provider).then(result => {}));
+        .then(() => firebase.auth().signInWithPopup(provider).then((result) => { return; }));
    }
    //todo I should seperate the UI layer from the login business logic, redux posting
-    render(){
+    public render() {

-        if(this.props && this.props.loginState && this.props.loginState.isLoggedIn){
-            return <span style={{verticalAlign: 'middle'}}>&nbsp; Hi, {this.props.loginState.displayName} <a href="#" onClick={()=>this.logout()}>Log Out</a> </span>;
-        }
-        else{
+        if (this.props && this.props.loginState && this.props.loginState.isLoggedIn) {
+            return <span style={{verticalAlign: "middle"}}>&nbsp; Hi, {this.props.loginState.displayName} <a href="#" onClick={() => this.logout()}>Log Out</a> </span>;
+        } else {
            return <LoginButton onClick={this.login} />;
        }

--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,19 +1,18 @@
+import "bootstrap/dist/css/bootstrap.css";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import 'bootstrap/dist/css/bootstrap.css';
-import { NavBar } from './components/NavBar'
-import rebase from './startup/firebase'
-import { LoginContainer } from './containers/Login'
-import { createStore } from 'redux'
-import {MainReducer} from './reducers/MainReducer'
-import { Provider } from 'react-redux'
-import { AppContainer } from "./containers/AppContainer";
+import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
-let store = createStore(MainReducer)
+import { createStore } from "redux";
+import { NavBar } from "./components/NavBar";
+import { AppContainer } from "./containers/AppContainer";
+import { LoginContainer } from "./containers/Login";
+import {MainReducer} from "./reducers/MainReducer";
+import rebase from "./startup/firebase";
+const store = createStore(MainReducer);
 const App = () => (
           <AppContainer />

-       
  );

 ReactDOM.render(
@@ -21,5 +20,5 @@ ReactDOM.render(
   <App />
   </Provider>
   ,
-    document.getElementById("example")
+    document.getElementById("example"),
 );
--- a/src/models/AppState.ts
+++ b/src/models/AppState.ts
@@ -1,4 +1,4 @@
-import { LoginState } from './LoginState';
+import { LoginState } from "./LoginState";
 export interface AppState {
-    login:LoginState
+    login: LoginState;
 }
--- a/src/models/Document.ts
+++ b/src/models/Document.ts
@@ -3,8 +3,8 @@ export enum Theme {
 }

 export interface Document {
-    Title?: string,
-    Body?: string,
-    Theme?: Theme
+    Title?: string;
+    Body?: string;
+    Theme?: Theme;
 }
-export interface DocumentPlusKey extends Document{key: string}
+export interface DocumentPlusKey extends Document {key: string; }
--- a/src/models/LoginState.ts
+++ b/src/models/LoginState.ts
@@ -1 +1 @@
-export interface LoginState { isLoggedIn: Boolean; displayName: string; uid: string }
+export interface LoginState { isLoggedIn: boolean; displayName: string; uid: string; }
--- a/src/models/MinAction.ts
+++ b/src/models/MinAction.ts
@@ -1,10 +1,10 @@
-import { LoginState } from './LoginState';
-import { Action } from 'redux';
+import { Action } from "redux";
+import { LoginState } from "./LoginState";
 // export class MinAction<T> implements Action{
 //     constructor(public type: any, public payload : T){

 //     }

 export interface MinAction<T> extends Action {
-    payload: T
+    payload: T;
 }
--- a/src/react-syntax-highlighter.d.ts
+++ b/src/react-syntax-highlighter.d.ts
@@ -1,470 +1,464 @@
-declare module 'react-syntax-highlighter/dist/hljs/styles' {
-    export { default as agate } from 'react-syntax-highlighter/styles/hljs/agate';
-    export { default as androidstudio } from 'react-syntax-highlighter/styles/hljs/androidstudio';
-    export { default as arduinoLight } from 'react-syntax-highlighter/styles/hljs/arduino-light';
-    export { default as arta } from 'react-syntax-highlighter/styles/hljs/arta';
-    export { default as ascetic } from 'react-syntax-highlighter/styles/hljs/ascetic';
-    export { default as atelierCaveDark } from 'react-syntax-highlighter/styles/hljs/atelier-cave-dark';
-    export { default as atelierCaveLight } from 'react-syntax-highlighter/styles/hljs/atelier-cave-light';
-    export { default as atelierDuneDark } from 'react-syntax-highlighter/styles/hljs/atelier-dune-dark';
-    export { default as atelierDuneLight } from 'react-syntax-highlighter/styles/hljs/atelier-dune-light';
-    export { default as atelierEstuaryDark } from 'react-syntax-highlighter/styles/hljs/atelier-estuary-dark';
-    export { default as atelierEstuaryLight } from 'react-syntax-highlighter/styles/hljs/atelier-estuary-light';
-    export { default as atelierForestDark } from 'react-syntax-highlighter/styles/hljs/atelier-forest-dark';
-    export { default as atelierForestLight } from 'react-syntax-highlighter/styles/hljs/atelier-forest-light';
-    export { default as atelierHeathDark } from 'react-syntax-highlighter/styles/hljs/atelier-heath-dark';
-    export { default as atelierHeathLight } from 'react-syntax-highlighter/styles/hljs/atelier-heath-light';
-    export { default as atelierLakesideDark } from 'react-syntax-highlighter/styles/hljs/atelier-lakeside-dark';
-    export { default as atelierLakesideLight } from 'react-syntax-highlighter/styles/hljs/atelier-lakeside-light';
-    export { default as atelierPlateauDark } from 'react-syntax-highlighter/styles/hljs/atelier-plateau-dark';
-    export { default as atelierPlateauLight } from 'react-syntax-highlighter/styles/hljs/atelier-plateau-light';
-    export { default as atelierSavannaDark } from 'react-syntax-highlighter/styles/hljs/atelier-savanna-dark';
-    export { default as atelierSavannaLight } from 'react-syntax-highlighter/styles/hljs/atelier-savanna-light';
-    export { default as atelierSeasideDark } from 'react-syntax-highlighter/styles/hljs/atelier-seaside-dark';
-    export { default as atelierSeasideLight } from 'react-syntax-highlighter/styles/hljs/atelier-seaside-light';
-    export { default as atelierSulphurpoolDark } from 'react-syntax-highlighter/styles/hljs/atelier-sulphurpool-dark';
-    export { default as atelierSulphurpoolLight } from 'react-syntax-highlighter/styles/hljs/atelier-sulphurpool-light';
-    export { default as atomOneDark } from 'react-syntax-highlighter/styles/hljs/atom-one-dark';
-    export { default as atomOneLight } from 'react-syntax-highlighter/styles/hljs/atom-one-light';
-    export { default as brownPaper } from 'react-syntax-highlighter/styles/hljs/brown-paper';
-    export { default as codepenEmbed } from 'react-syntax-highlighter/styles/hljs/codepen-embed';
-    export { default as colorBrewer } from 'react-syntax-highlighter/styles/hljs/color-brewer';
-    export { default as darcula } from 'react-syntax-highlighter/styles/hljs/darcula';
-    export { default as dark } from 'react-syntax-highlighter/styles/hljs/dark';
-    export { default as darkula } from 'react-syntax-highlighter/styles/hljs/darkula';
-    export { default as defaultStyle } from 'react-syntax-highlighter/styles/hljs/default-style';
-    export { default as docco } from 'react-syntax-highlighter/styles/hljs/docco';
-    export { default as dracula } from 'react-syntax-highlighter/styles/hljs/dracula';
-    export { default as far } from 'react-syntax-highlighter/styles/hljs/far';
-    export { default as foundation } from 'react-syntax-highlighter/styles/hljs/foundation';
-    export { default as githubGist } from 'react-syntax-highlighter/styles/hljs/github-gist';
-    export { default as github } from 'react-syntax-highlighter/styles/hljs/github';
-    export { default as googlecode } from 'react-syntax-highlighter/styles/hljs/googlecode';
-    export { default as grayscale } from 'react-syntax-highlighter/styles/hljs/grayscale';
-    export { default as gruvboxDark } from 'react-syntax-highlighter/styles/hljs/gruvbox-dark';
-    export { default as gruvboxLight } from 'react-syntax-highlighter/styles/hljs/gruvbox-light';
-    export { default as hopscotch } from 'react-syntax-highlighter/styles/hljs/hopscotch';
-    export { default as hybrid } from 'react-syntax-highlighter/styles/hljs/hybrid';
-    export { default as idea } from 'react-syntax-highlighter/styles/hljs/idea';
-    export { default as irBlack } from 'react-syntax-highlighter/styles/hljs/ir-black';
-    export { default as kimbieDark } from 'react-syntax-highlighter/styles/hljs/kimbie.dark';
-    export { default as kimbieLight } from 'react-syntax-highlighter/styles/hljs/kimbie.light';
-    export { default as magula } from 'react-syntax-highlighter/styles/hljs/magula';
-    export { default as monoBlue } from 'react-syntax-highlighter/styles/hljs/mono-blue';
-    export { default as monokaiSublime } from 'react-syntax-highlighter/styles/hljs/monokai-sublime';
-    export { default as monokai } from 'react-syntax-highlighter/styles/hljs/monokai';
-    export { default as obsidian } from 'react-syntax-highlighter/styles/hljs/obsidian';
-    export { default as ocean } from 'react-syntax-highlighter/styles/hljs/ocean';
-    export { default as paraisoDark } from 'react-syntax-highlighter/styles/hljs/paraiso-dark';
-    export { default as paraisoLight } from 'react-syntax-highlighter/styles/hljs/paraiso-light';
-    export { default as pojoaque } from 'react-syntax-highlighter/styles/hljs/pojoaque';
-    export { default as purebasic } from 'react-syntax-highlighter/styles/hljs/purebasic';
-    export { default as qtcreatorDark } from 'react-syntax-highlighter/styles/hljs/qtcreator_dark';
-    export { default as qtcreatorLight } from 'react-syntax-highlighter/styles/hljs/qtcreator_light';
-    export { default as railscasts } from 'react-syntax-highlighter/styles/hljs/railscasts';
-    export { default as rainbow } from 'react-syntax-highlighter/styles/hljs/rainbow';
-    export { default as schoolBook } from 'react-syntax-highlighter/styles/hljs/school-book';
-    export { default as solarizedDark } from 'react-syntax-highlighter/styles/hljs/solarized-dark';
-    export { default as solarizedLight } from 'react-syntax-highlighter/styles/hljs/solarized-light';
-    export { default as sunburst } from 'react-syntax-highlighter/styles/hljs/sunburst';
-    export { default as tomorrowNightBlue } from 'react-syntax-highlighter/styles/hljs/tomorrow-night-blue';
-    export { default as tomorrowNightBright } from 'react-syntax-highlighter/styles/hljs/tomorrow-night-bright';
-    export { default as tomorrowNightEighties } from 'react-syntax-highlighter/styles/hljs/tomorrow-night-eighties';
-    export { default as tomorrowNight } from 'react-syntax-highlighter/styles/hljs/tomorrow-night';
-    export { default as tomorrow } from 'react-syntax-highlighter/styles/hljs/tomorrow';
-    export { default as vs } from 'react-syntax-highlighter/styles/hljs/vs';
-    export { default as xcode } from 'react-syntax-highlighter/styles/hljs/xcode';
-    export { default as xt256 } from 'react-syntax-highlighter/styles/hljs/xt256';
-    export { default as zenburn } from 'react-syntax-highlighter/styles/hljs/zenburn';
+declare module "react-syntax-highlighter/dist/hljs/styles" {
+    export { default as agate } from "react-syntax-highlighter/styles/hljs/agate";
+    export { default as androidstudio } from "react-syntax-highlighter/styles/hljs/androidstudio";
+    export { default as arduinoLight } from "react-syntax-highlighter/styles/hljs/arduino-light";
+    export { default as arta } from "react-syntax-highlighter/styles/hljs/arta";
+    export { default as ascetic } from "react-syntax-highlighter/styles/hljs/ascetic";
+    export { default as atelierCaveDark } from "react-syntax-highlighter/styles/hljs/atelier-cave-dark";
+    export { default as atelierCaveLight } from "react-syntax-highlighter/styles/hljs/atelier-cave-light";
+    export { default as atelierDuneDark } from "react-syntax-highlighter/styles/hljs/atelier-dune-dark";
+    export { default as atelierDuneLight } from "react-syntax-highlighter/styles/hljs/atelier-dune-light";
+    export { default as atelierEstuaryDark } from "react-syntax-highlighter/styles/hljs/atelier-estuary-dark";
+    export { default as atelierEstuaryLight } from "react-syntax-highlighter/styles/hljs/atelier-estuary-light";
+    export { default as atelierForestDark } from "react-syntax-highlighter/styles/hljs/atelier-forest-dark";
+    export { default as atelierForestLight } from "react-syntax-highlighter/styles/hljs/atelier-forest-light";
+    export { default as atelierHeathDark } from "react-syntax-highlighter/styles/hljs/atelier-heath-dark";
+    export { default as atelierHeathLight } from "react-syntax-highlighter/styles/hljs/atelier-heath-light";
+    export { default as atelierLakesideDark } from "react-syntax-highlighter/styles/hljs/atelier-lakeside-dark";
+    export { default as atelierLakesideLight } from "react-syntax-highlighter/styles/hljs/atelier-lakeside-light";
+    export { default as atelierPlateauDark } from "react-syntax-highlighter/styles/hljs/atelier-plateau-dark";
+    export { default as atelierPlateauLight } from "react-syntax-highlighter/styles/hljs/atelier-plateau-light";
+    export { default as atelierSavannaDark } from "react-syntax-highlighter/styles/hljs/atelier-savanna-dark";
+    export { default as atelierSavannaLight } from "react-syntax-highlighter/styles/hljs/atelier-savanna-light";
+    export { default as atelierSeasideDark } from "react-syntax-highlighter/styles/hljs/atelier-seaside-dark";
+    export { default as atelierSeasideLight } from "react-syntax-highlighter/styles/hljs/atelier-seaside-light";
+    export { default as atelierSulphurpoolDark } from "react-syntax-highlighter/styles/hljs/atelier-sulphurpool-dark";
+    export { default as atelierSulphurpoolLight } from "react-syntax-highlighter/styles/hljs/atelier-sulphurpool-light";
+    export { default as atomOneDark } from "react-syntax-highlighter/styles/hljs/atom-one-dark";
+    export { default as atomOneLight } from "react-syntax-highlighter/styles/hljs/atom-one-light";
+    export { default as brownPaper } from "react-syntax-highlighter/styles/hljs/brown-paper";
+    export { default as codepenEmbed } from "react-syntax-highlighter/styles/hljs/codepen-embed";
+    export { default as colorBrewer } from "react-syntax-highlighter/styles/hljs/color-brewer";
+    export { default as darcula } from "react-syntax-highlighter/styles/hljs/darcula";
+    export { default as dark } from "react-syntax-highlighter/styles/hljs/dark";
+    export { default as darkula } from "react-syntax-highlighter/styles/hljs/darkula";
+    export { default as defaultStyle } from "react-syntax-highlighter/styles/hljs/default-style";
+    export { default as docco } from "react-syntax-highlighter/styles/hljs/docco";
+    export { default as dracula } from "react-syntax-highlighter/styles/hljs/dracula";
+    export { default as far } from "react-syntax-highlighter/styles/hljs/far";
+    export { default as foundation } from "react-syntax-highlighter/styles/hljs/foundation";
+    export { default as githubGist } from "react-syntax-highlighter/styles/hljs/github-gist";
+    export { default as github } from "react-syntax-highlighter/styles/hljs/github";
+    export { default as googlecode } from "react-syntax-highlighter/styles/hljs/googlecode";
+    export { default as grayscale } from "react-syntax-highlighter/styles/hljs/grayscale";
+    export { default as gruvboxDark } from "react-syntax-highlighter/styles/hljs/gruvbox-dark";
+    export { default as gruvboxLight } from "react-syntax-highlighter/styles/hljs/gruvbox-light";
+    export { default as hopscotch } from "react-syntax-highlighter/styles/hljs/hopscotch";
+    export { default as hybrid } from "react-syntax-highlighter/styles/hljs/hybrid";
+    export { default as idea } from "react-syntax-highlighter/styles/hljs/idea";
+    export { default as irBlack } from "react-syntax-highlighter/styles/hljs/ir-black";
+    export { default as kimbieDark } from "react-syntax-highlighter/styles/hljs/kimbie.dark";
+    export { default as kimbieLight } from "react-syntax-highlighter/styles/hljs/kimbie.light";
+    export { default as magula } from "react-syntax-highlighter/styles/hljs/magula";
+    export { default as monoBlue } from "react-syntax-highlighter/styles/hljs/mono-blue";
+    export { default as monokaiSublime } from "react-syntax-highlighter/styles/hljs/monokai-sublime";
+    export { default as monokai } from "react-syntax-highlighter/styles/hljs/monokai";
+    export { default as obsidian } from "react-syntax-highlighter/styles/hljs/obsidian";
+    export { default as ocean } from "react-syntax-highlighter/styles/hljs/ocean";
+    export { default as paraisoDark } from "react-syntax-highlighter/styles/hljs/paraiso-dark";
+    export { default as paraisoLight } from "react-syntax-highlighter/styles/hljs/paraiso-light";
+    export { default as pojoaque } from "react-syntax-highlighter/styles/hljs/pojoaque";
+    export { default as purebasic } from "react-syntax-highlighter/styles/hljs/purebasic";
+    export { default as qtcreatorDark } from "react-syntax-highlighter/styles/hljs/qtcreator_dark";
+    export { default as qtcreatorLight } from "react-syntax-highlighter/styles/hljs/qtcreator_light";
+    export { default as railscasts } from "react-syntax-highlighter/styles/hljs/railscasts";
+    export { default as rainbow } from "react-syntax-highlighter/styles/hljs/rainbow";
+    export { default as schoolBook } from "react-syntax-highlighter/styles/hljs/school-book";
+    export { default as solarizedDark } from "react-syntax-highlighter/styles/hljs/solarized-dark";
+    export { default as solarizedLight } from "react-syntax-highlighter/styles/hljs/solarized-light";
+    export { default as sunburst } from "react-syntax-highlighter/styles/hljs/sunburst";
+    export { default as tomorrowNightBlue } from "react-syntax-highlighter/styles/hljs/tomorrow-night-blue";
+    export { default as tomorrowNightBright } from "react-syntax-highlighter/styles/hljs/tomorrow-night-bright";
+    export { default as tomorrowNightEighties } from "react-syntax-highlighter/styles/hljs/tomorrow-night-eighties";
+    export { default as tomorrowNight } from "react-syntax-highlighter/styles/hljs/tomorrow-night";
+    export { default as tomorrow } from "react-syntax-highlighter/styles/hljs/tomorrow";
+    export { default as vs } from "react-syntax-highlighter/styles/hljs/vs";
+    export { default as xcode } from "react-syntax-highlighter/styles/hljs/xcode";
+    export { default as xt256 } from "react-syntax-highlighter/styles/hljs/xt256";
+    export { default as zenburn } from "react-syntax-highlighter/styles/hljs/zenburn";
 }

-declare module 'react-syntax-highlighter/styles/hljs/agate' {
+declare module "react-syntax-highlighter/styles/hljs/agate" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/androidstudio' {
+declare module "react-syntax-highlighter/styles/hljs/androidstudio" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/arduino-light' {
+declare module "react-syntax-highlighter/styles/hljs/arduino-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/arta' {
+declare module "react-syntax-highlighter/styles/hljs/arta" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/ascetic' {
+declare module "react-syntax-highlighter/styles/hljs/ascetic" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-cave-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-cave-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-cave-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-cave-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-dune-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-dune-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-dune-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-dune-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-estuary-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-estuary-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-estuary-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-estuary-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-forest-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-forest-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-forest-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-forest-light" {
    const style: any;
    export default style;
 }

-
-declare module 'react-syntax-highlighter/styles/hljs/atelier-heath-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-heath-dark" {
    const style: any;
    export default style;
 }

-
-declare module 'react-syntax-highlighter/styles/hljs/atelier-heath-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-heath-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-lakeside-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-lakeside-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-lakeside-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-lakeside-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-plateau-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-plateau-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-plateau-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-plateau-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-savanna-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-savanna-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-savanna-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-savanna-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-seaside-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-seaside-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-seaside-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-seaside-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-sulphurpool-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-sulphurpool-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atelier-sulphurpool-light' {
+declare module "react-syntax-highlighter/styles/hljs/atelier-sulphurpool-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atom-one-dark' {
+declare module "react-syntax-highlighter/styles/hljs/atom-one-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/atom-one-light' {
+declare module "react-syntax-highlighter/styles/hljs/atom-one-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/brown-paper' {
+declare module "react-syntax-highlighter/styles/hljs/brown-paper" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/codepen-embed' {
+declare module "react-syntax-highlighter/styles/hljs/codepen-embed" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/color-brewer' {
+declare module "react-syntax-highlighter/styles/hljs/color-brewer" {
    const style: any;
    export default style;
 }

-
-declare module 'react-syntax-highlighter/styles/hljs/darcula' {
+declare module "react-syntax-highlighter/styles/hljs/darcula" {
    const style: any;
    export default style;
 }

-
-declare module 'react-syntax-highlighter/styles/hljs/dark' {
+declare module "react-syntax-highlighter/styles/hljs/dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/darkula' {
+declare module "react-syntax-highlighter/styles/hljs/darkula" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/default-style' {
+declare module "react-syntax-highlighter/styles/hljs/default-style" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/docco' {
+declare module "react-syntax-highlighter/styles/hljs/docco" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/dracula' {
+declare module "react-syntax-highlighter/styles/hljs/dracula" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/far' {
+declare module "react-syntax-highlighter/styles/hljs/far" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/foundation' {
+declare module "react-syntax-highlighter/styles/hljs/foundation" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/github-gist' {
+declare module "react-syntax-highlighter/styles/hljs/github-gist" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/github' {
+declare module "react-syntax-highlighter/styles/hljs/github" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/googlecode' {
+declare module "react-syntax-highlighter/styles/hljs/googlecode" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/grayscale' {
+declare module "react-syntax-highlighter/styles/hljs/grayscale" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/gruvbox-dark' {
+declare module "react-syntax-highlighter/styles/hljs/gruvbox-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/gruvbox-light' {
+declare module "react-syntax-highlighter/styles/hljs/gruvbox-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/hopscotch' {
+declare module "react-syntax-highlighter/styles/hljs/hopscotch" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/hybrid' {
+declare module "react-syntax-highlighter/styles/hljs/hybrid" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/idea' {
+declare module "react-syntax-highlighter/styles/hljs/idea" {
    const style: any;
    export default style;
 }

-
-declare module 'react-syntax-highlighter/styles/hljs/ir-black' {
+declare module "react-syntax-highlighter/styles/hljs/ir-black" {
    const style: any;
    export default style;
 }

-
-declare module 'react-syntax-highlighter/styles/hljs/kimbie.dark' {
+declare module "react-syntax-highlighter/styles/hljs/kimbie.dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/kimbie.light' {
+declare module "react-syntax-highlighter/styles/hljs/kimbie.light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/magula' {
+declare module "react-syntax-highlighter/styles/hljs/magula" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/mono-blue' {
+declare module "react-syntax-highlighter/styles/hljs/mono-blue" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/monokai-sublime' {
+declare module "react-syntax-highlighter/styles/hljs/monokai-sublime" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/monokai' {
+declare module "react-syntax-highlighter/styles/hljs/monokai" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/obsidian' {
+declare module "react-syntax-highlighter/styles/hljs/obsidian" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/ocean' {
+declare module "react-syntax-highlighter/styles/hljs/ocean" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/paraiso-dark' {
+declare module "react-syntax-highlighter/styles/hljs/paraiso-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/paraiso-light' {
+declare module "react-syntax-highlighter/styles/hljs/paraiso-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/pojoaque' {
+declare module "react-syntax-highlighter/styles/hljs/pojoaque" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/purebasic' {
+declare module "react-syntax-highlighter/styles/hljs/purebasic" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/qtcreator_dark' {
+declare module "react-syntax-highlighter/styles/hljs/qtcreator_dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/qtcreator_light' {
+declare module "react-syntax-highlighter/styles/hljs/qtcreator_light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/railscasts' {
+declare module "react-syntax-highlighter/styles/hljs/railscasts" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/rainbow' {
+declare module "react-syntax-highlighter/styles/hljs/rainbow" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/school-book' {
+declare module "react-syntax-highlighter/styles/hljs/school-book" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/solarized-dark' {
+declare module "react-syntax-highlighter/styles/hljs/solarized-dark" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/solarized-light' {
+declare module "react-syntax-highlighter/styles/hljs/solarized-light" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/sunburst' {
+declare module "react-syntax-highlighter/styles/hljs/sunburst" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/tomorrow-night-blue' {
+declare module "react-syntax-highlighter/styles/hljs/tomorrow-night-blue" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/tomorrow-night-bright' {
+declare module "react-syntax-highlighter/styles/hljs/tomorrow-night-bright" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/tomorrow-night-eighties' {
+declare module "react-syntax-highlighter/styles/hljs/tomorrow-night-eighties" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/tomorrow-night' {
+declare module "react-syntax-highlighter/styles/hljs/tomorrow-night" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/tomorrow' {
+declare module "react-syntax-highlighter/styles/hljs/tomorrow" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/vs' {
+declare module "react-syntax-highlighter/styles/hljs/vs" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/xcode' {
+declare module "react-syntax-highlighter/styles/hljs/xcode" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/xt256' {
+declare module "react-syntax-highlighter/styles/hljs/xt256" {
    const style: any;
    export default style;
 }

-declare module 'react-syntax-highlighter/styles/hljs/zenburn' {
+declare module "react-syntax-highlighter/styles/hljs/zenburn" {
    const style: any;
    export default style;
 }
--- a/src/reducers/MainReducer.ts
+++ b/src/reducers/MainReducer.ts
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { AppState } from './../models/AppState'
-import { Action, AnyAction } from 'redux';
-import * as appActions from '../actions/types';
-import * as _ from 'underscore'
-export function MainReducer(state:AppState = {login: { isLoggedIn: false, displayName: '', uid: ''}}, action: AnyAction) {
-    switch(action.type){
+import * as React from "react";
+import { Action, AnyAction } from "redux";
+import * as _ from "underscore";
+import * as appActions from "../actions/types";
+import { AppState } from "./../models/AppState";
+export function MainReducer(state: AppState = {login: { isLoggedIn: false, displayName: "", uid: ""}}, action: AnyAction) {
+    switch (action.type) {
        case appActions.LOGGED_IN:
-            return _.extend({}, state, {login:{ isLoggedIn: true, displayName: action.payload.displayName, uid: action.payload.uid}})
+            return _.extend({}, state, {login: { isLoggedIn: true, displayName: action.payload.displayName, uid: action.payload.uid}});
        case appActions.LOGGED_OUT:
-            return _.extend({}, state, {login:{ isLoggedIn: false, displayName: "", uid: ''}})
+            return _.extend({}, state, {login: { isLoggedIn: false, displayName: "", uid: ""}});
        default:
-            return state
+            return state;
    }
 }
--- a/src/startup/firebase.ts
+++ b/src/startup/firebase.ts
@@ -1,14 +1,14 @@
-import * as firebase from "firebase"
-import * as Rebase from "re-base"
+import * as firebase from "firebase";
+import * as Rebase from "re-base";

-let config = {
+const 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"
+  messagingSenderId: "437102882585",
 };
-let app = firebase.initializeApp(config);
-let db = firebase.database(app);
-export default {db:firebase.database(app), rebase:  Rebase.createClass(db)}
+const app = firebase.initializeApp(config);
+const db = firebase.database(app);
+export default {db: firebase.database(app), rebase:  Rebase.createClass(db)};
--- a/src/util/doc.ts
+++ b/src/util/doc.ts
@@ -1,17 +1,17 @@
-export function generateDocId(){
-    let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    let result = '';
-    for (let i = 0; i < 8; i++){
-        result += str.charAt(Math.floor(Math.random()*str.length))
+export function generateDocId() {
+    const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    for (let i = 0; i < 8; i++) {
+        result += str.charAt(Math.floor(Math.random() * str.length));
    }
    return result;
 }

-export function getLanguage(title?: string){
+export function getLanguage(title?: string) {
    let language = null;
-    if(title){
-      let split = title.split('.');
-      if(split.length == 2){
+    if (title) {
+      const split = title.split(".");
+      if (split.length === 2) {
        language = split[1];
      }
    }
--- a/tslint.json
+++ b/tslint.json
@@ -0,0 +1,22 @@
+{
+    "defaultSeverity": "error",
+    "extends": [
+        "tslint:recommended"
+    ],
+    "jsRules": {},
+    "rules": { 
+        "no-console": false,
+        "jsdoc-format": false,
+        "no-reference": false,
+        "no-reference-import": false,
+        "interface-name": false,
+        "newline-before-return": false,
+        "max-line-length": [true, 400],
+        "comment-format": false,
+        "class-name": false,
+        "object-literal-sort-keys": false,
+        "indent": false,
+        "eofline": false
+     },
+    "rulesDirectory": []
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -435,7 +435,7 @@ aws4@^1.2.1:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"

-babel-code-frame@^6.11.0:
+babel-code-frame@^6.11.0, babel-code-frame@^6.22.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
  dependencies:
@@ -652,7 +652,7 @@ buffer@^4.3.0:
    ieee754 "^1.1.4"
    isarray "^1.0.0"

-builtin-modules@^1.0.0:
+builtin-modules@^1.0.0, builtin-modules@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"

@@ -745,7 +745,7 @@ chalk@^1.1.3:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

-chalk@^2.3.0:
+chalk@^2.1.0, chalk@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
  dependencies:
@@ -912,6 +912,10 @@ comma-separated-tokens@^1.0.0:
  dependencies:
    trim "0.0.1"

+commander@^2.9.0:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+
 component-emitter@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
@@ -1243,6 +1247,10 @@ detect-node@^2.0.3:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"

+diff@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+
 diffie-hellman@^5.0.0:
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
@@ -1838,7 +1846,7 @@ glob-parent@^2.0.0:
  dependencies:
    is-glob "^2.0.0"

-glob@^7.0.3, glob@^7.0.5:
+glob@^7.0.3, glob@^7.0.5, glob@^7.1.1:
  version "7.1.2"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
  dependencies:
@@ -3182,6 +3190,10 @@ path-key@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"

+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
 path-to-regexp@0.1.7:
  version "0.1.7"
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
@@ -4006,6 +4018,12 @@ resolve-url@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"

+resolve@^1.3.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
 right-align@^0.1.1:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -4555,6 +4573,32 @@ trough@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.1.tgz#a9fd8b0394b0ae8fff82e0633a0a36ccad5b5f86"

+tslib@^1.7.1, tslib@^1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.1.tgz#6946af2d1d651a7b1863b531d6e5afa41aa44eac"
+
+tslint@^5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.8.0.tgz#1f49ad5b2e77c76c3af4ddcae552ae4e3612eb13"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.1.0"
+    commander "^2.9.0"
+    diff "^3.2.0"
+    glob "^7.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.7.1"
+    tsutils "^2.12.1"
+
+tsutils@^2.12.1:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.14.0.tgz#bc5291622aa2448c1baffc544bcc14ecfa528fb7"
+  dependencies:
+    tslib "^1.8.0"
+
 tty-browserify@0.0.0:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"