malar/typeset-blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

implemented add post - todo create paragraphs

Browse Source
This commit is contained in:
Malar Kannan
2017-08-09 13:53:19 +05:30
parent a54d94f6ad
commit 3fec54ae75
21 changed files with 1497 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.tsx
View File

@@ -7,6 +7,5 @@ export const App: React.StatelessComponent<{}> = (props) => {
<Header />
{props.children}
</div>
);
}
};

79
src/components/about.tsx
View File

@@ -1,79 +0,0 @@
import * as React from 'react';
export const About: React.StatelessComponent<{}> = () => {
return (
<div className="row about-page">
<h1 className="jumbotron">03 Navigation</h1>
<div className="col-xs-12">
<h1>
<small>
This sample takes as starting point sample "02 Components".
</small>
</h1>
<div className="col-xs-12">
<h3>
<small>
We are adding page navigation to this project:
</small>
</h3>
<ul>
<li><h3><small>We have added two pages (about, members).</small></h3></li>
<li><h3><small>The user can navigate by clicking on links in a common navbar.</small></h3></li>
</ul>
<h3>
<small>
We are using <a target="_blank" href="https://github.com/reactjs/react-router">react-router</a> for the navigation support
</small>
</h3>
</div>
</div>
<div className="col-xs-12 top-buffer">
<h3>Highlights</h3>
<hr />
<h3>
<small>
The most interesting parts worth to take a look
</small>
</h3>
</div>
<div className="col-xs-12 top-buffer">
<ul>
<li className="top-buffer">
<h4><b>Router:</b></h4>
<ul className="top-buffer">
<li>
<h4>
index.ts: <small>routes configuration.</small>
</h4>
</li>
</ul>
</li>
<li className="top-buffer">
<h4><b>Components:</b></h4>
<ul className="top-buffer">
<li>
<h4>
app.tsx: <small>header + page container.</small>
</h4>
</li>
<li>
<h4>
header.tsx: <small>navigation links.</small>
</h4>
</li>
<li>
<h4>
aboutPage.tsx / membersPage.tsx: <small>pages</small>
</h4>
</li>
</ul>
</li>
</ul>
</div>
</div>
);
}

62
src/components/addpost.tsx
View File

@@ -1,8 +1,60 @@
import * as React from 'react';
// import { Segment } from 'semantic-ui-react';
import { Form, Container, Input, TextArea, Button } from 'semantic-ui-react';
export const About: React.StatelessComponent<{}> = () => {
return (
null
);
export class AddPost extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = { title: 'Title', content: 'Some Content' };
}
public render() {
let submitHandler = (e: any, d: any) => {
let postContent = JSON.stringify(this.state);
console.log('posting : ', postContent);
fetch('/api/post', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: postContent,
})
.then((response) => {
if (response.status === 200) {
console.log('submitted successfully');
}
})
.catch((err) => {
console.log('some error occurred');
});
};
return (
<Container>
<Form onSubmit={submitHandler}>
<Form.Group widths="equal">
<Form.Field
id="form-input-control-first-name"
control={Input}
label="Title"
placeholder="Give a title"
onChange={(t: any, d: any) => this.setState({ title: d.value })}
/>
</Form.Group>
<Form.Field
id="form-textarea-control-opinion"
control={TextArea}
label="Content"
placeholder="Write the paragraphs in the post here"
onChange={(t: any, d: any) => this.setState({ content: d.value })}
/>
<Form.Field
id="form-button-control-public"
control={Button}
content="Submit"
label="Submit"
/>
</Form>
</Container>
);
}
}

6
src/components/header.tsx
View File

@@ -7,11 +7,11 @@ export const Header: React.StatelessComponent<{}> = () => {
<nav className="navbar navbar-default">
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/members">Members</Link></li>
<li><Link to="/addpost">Add New Post</Link></li>
<li><Link to="/listposts">List Posts</Link></li>
</ul>
</div>
</nav>
</div>
);
}
};

3
src/components/index.ts
View File

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

1
src/components/members/index.ts
View File

@@ -1 +0,0 @@
export * from './page';

9
src/components/members/page.tsx
View File

@@ -1,9 +0,0 @@
import * as React from 'react';
export const MembersPage: React.StatelessComponent<{}> = () => {
return (
<div className="row">
<h2> Members Page</h2>
</div>
);
}

2
src/css/site.css
View File

@@ -19,3 +19,5 @@
background: #e7e7e7 !important;
color: #333 !important;
}
@import "~semantic-ui-css/semantic.min.css";

5
src/index.tsx
View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppRouter } from './router';
import './css/site.css';
ReactDOM.render(
<AppRouter />
, document.getElementById('root'));
ReactDOM.render(<AppRouter />, document.getElementById('root'));

8
src/router.tsx
View File

@@ -1,16 +1,16 @@
import * as React from 'react';
import { Route, HashRouter } from 'react-router-dom';
import { App } from './app';
import { About, MembersPage } from './components';
import { AddPost } from './components';
export const AppRouter: React.StatelessComponent<{}> = () => {
return (
<HashRouter>
<div >
<Route exact={true} path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/members" component={MembersPage} />
<Route path="/addpost" component={AddPost} />
<Route path="/listposts" component={AddPost} />
</div>
</HashRouter>
);
}
};