add post with paragraphs wip

src/app.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { Header } from './components';
+import { AddPost } from './components';
 
 export const App: React.StatelessComponent<{}> = (props) => {
   return (
-    <div className="container-fluid">
-      <Header />
-      {props.children}
-    </div>
+    <AddPost />
   );
 };

src/components/addpost.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Form, Container, Input, TextArea, Button } from 'semantic-ui-react';
+import { Form, Input, TextArea, Button } from 'semantic-ui-react';
+import { HeaderMenu } from './headermenu';
 
 export class AddPost extends React.Component<any, any> {
   constructor(props: any) {
@@ -10,7 +11,7 @@ export class AddPost extends React.Component<any, any> {
     let submitHandler = (e: any, d: any) => {
       let postContent = JSON.stringify(this.state);
       console.log('posting : ', postContent);
-      fetch('/api/post', {
+      fetch('/api/create_post', {
         method: 'POST',
         headers: {
           'Accept': 'application/json',
@@ -28,7 +29,7 @@ export class AddPost extends React.Component<any, any> {
         });
     };
     return (
-      <Container>
+      <HeaderMenu>
         <Form onSubmit={submitHandler}>
           <Form.Group widths="equal">
             <Form.Field
@@ -54,7 +55,7 @@ export class AddPost extends React.Component<any, any> {
 
           />
         </Form>
-      </Container>
+      </HeaderMenu>
     );
   }
 }

src/components/header.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-export const Header: React.StatelessComponent<{}> = () => {
-  return (
-    <div className="row">
-      <nav className="navbar navbar-default">
-        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-          <ul className="nav navbar-nav">
-            <li><Link to="/addpost">Add New Post</Link></li>
-            <li><Link to="/listposts">List Posts</Link></li>
-          </ul>
-        </div>
-      </nav>
-    </div>
-  );
-};

src/components/headermenu.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Container, Segment, Menu } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+
+export class HeaderMenu extends React.Component<any, any> {
+  state = { activeItem: 'listpost' };
+
+  handleItemClick = (e: any, d: any) => this.setState({ activeItem: d.name });
+
+  render() {
+    let { activeItem } = this.state;
+    return (
+      <Container>
+        <Segment inverted={true} size="tiny" attached={true}>
+          <Menu>
+            <Menu.Item
+              as={Link}
+              to="/addpost"
+              name="newpost"
+              active={activeItem === 'newpost'}
+              onClick={this.handleItemClick}
+            >
+              Add New Post
+            </Menu.Item>
+
+            <Menu.Item
+              as={Link}
+              to="/listposts"
+              name="listpost"
+              active={activeItem === 'listpost'}
+              onClick={this.handleItemClick}
+            >
+              List Posts
+            </Menu.Item>
+          </Menu>
+        </Segment>
+        {this.props.children}
+      </Container>
+    );
+  }
+}

src/components/index.ts

@@ -1,2 +1,3 @@
-export * from './header';
 export * from './addpost';
+export * from './listposts';
+export * from './headermenu';

src/components/listposts.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+// import { Comment } from 'semantic-ui-react';
+
+export class ListPost extends React.Component<any, any> {
+  render() {
+    return (
+      null
+    );
+  }
+}