Change css to bootstrap

Author: styfle

src/components/app.tsx

@@ -38,21 +38,28 @@ export default class App extends React.Component<AppProps, AppState> {
     }
 
     render() {
+        const { items } = this.state;
 
-        var listuff = this.state.items.map((item, i) => <li key={i}>{item}</li>);
-        
-        return (
-            <div id="app">
-                <Header/>
-                <Main>
-                    <h1>Hello world</h1>
-                    <ul>
-                        {listuff}
-                    </ul>
-                    <Button onClick={this.handleAdd} disabled={this.state.disabled} className="blue-btn" value="Add Item Button" />
-                    <Button onClick={this.handleSort} disabled={this.state.disabled} className="gold-btn" value="Sort Items" />
-                </Main>
-            </div>
-        )
+        return (<div className="container">
+            <Header/>
+            <Main>
+                <ul>
+                    {items.map((item, i) =>
+                        <li key={i}>{item}</li>
+                    )}
+                </ul>
+                <Button
+                    onClick={this.handleAdd}
+                    disabled={this.state.disabled}
+                    type="primary"
+                    value="Add Item" />
+                <br/>
+                <Button
+                    onClick={this.handleSort}
+                    disabled={this.state.disabled}
+                    type="warning"
+                    value="Sort Items" />
+            </Main>
+        </div>);
     }
 }

src/components/button.tsx

@@ -1,22 +1,19 @@
 import * as React from 'react';
 
 interface ButtonProps {
-    className: 'gray-btn' | 'dark-gray-btn' | 'blue-btn' | 'gold-btn';
+    type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
     value: string;
     disabled: boolean;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-export default class Button extends React.Component<ButtonProps, {}> {
-  render() {
-      const { className, value, disabled, onClick } = this.props;
-      return (
-        <button type="button"
-                onClick={onClick}
-                disabled={disabled || false}
-                className={className || 'blue'}>
-                {value || 'Do it'}
-        </button>
-    );
-  }
+export default function Button (props: ButtonProps) {
+    const { type, value, disabled, onClick } = props;
+
+    return (<button type="button"
+        onClick={onClick}
+        disabled={disabled || false}
+        className={'btn btn-' + type}>
+        {value}
+    </button>);
 }

src/components/header.tsx

@@ -1,19 +1,8 @@
 import * as React from 'react';
 import Menu from './menu';
 
-export default class Header extends React.Component<{}, {}> {
-    render() {
-        return (
-            <header role="banner" className="clearfix">
-            <div className="top-header">
-                <a href="#">Logo</a>
-            </div>
-        
-            <nav id="navigation" className="closed clearfix">
-                <Menu />
-            </nav>
-        <button className="nav-toggle" id="nav-toggle">Menu</button>
-    </header>
-        )
-    }
+export default function Header() {
+    return (<header role="banner">
+        <h1>Hello React</h1>
+    </header>);
 }

src/components/main.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 
-export default class Main extends React.Component<{}, {}> {
-  render() {
-      return (
-        <div className="main" role="main">{this.props.children}</div>
+export default function Main(props: { children: React.ReactNode[] }) {
+    const { children } = props;
+    return (
+        <div role="main">{children}</div>
     );
-  }
 }

src/components/menu.tsx

@@ -62,9 +62,16 @@ export default class Menu extends React.Component<{}, MenuState> {
     render() {
         const { isVisible } = this.state;
         return (
-            <ul role="navigation" className="clearfix">
+            <ul role="navigation">
             {data.map( (o,i) => 
-                <MenuItem key={o.id} id={o.id} text={o.text} href={o.href} subitems={o.subitems} onClick={this.handleClick} isVisible={isVisible[o.id]} /> 
+                <MenuItem
+                    key={o.id}
+                    id={o.id}
+                    text={o.text}
+                    href={o.href}
+                    subitems={o.subitems}
+                    onClick={this.handleClick}
+                    isVisible={isVisible[o.id]} />
             )}
             </ul>
         );