completed - todo cleanup requirements.txt

app/models.py

@@ -42,11 +42,17 @@ class Comment(db.Model):
     message = db.Column(db.String(140))
     paragraph_id = db.Column(db.Integer, db.ForeignKey('paragraph.id'))
     post_id = db.Column(db.String(32), db.ForeignKey('post.id'))
+    # pub_date = db.Column(db.DateTime)
     paragraph = db.relationship('Paragraph',backref=db.backref('comments', lazy='dynamic'))
 
-    def __init__(self, name,message):
+    def __init__(self, name,message,paragraph_id,post_id, pub_date=None):
         self.name = name
         self.message = message
+        self.post_id = post_id
+        self.paragraph_id = paragraph_id
+        if pub_date is None:
+            pub_date = datetime.utcnow()
+        # self.pub_date = pub_date
 
     def __repr__(self):
         return '<Comment %r>' % self.name

app/views.py

@@ -15,8 +15,9 @@ from models import Post,Paragraph,Comment
 manager = APIManager(app, flask_sqlalchemy_db=db)
 # Create API endpoints, which will be available at /api/<tablename> by
 # default. Allowed HTTP methods can be specified as well.
-manager.create_api(Post, methods=['GET'],results_per_page=5)
-manager.create_api(Paragraph, methods=['GET'])
+manager.create_api(Post, methods=['GET'],exclude_columns=['paragraphs'],results_per_page=5)
+manager.create_api(Post, methods=['GET'],results_per_page=None,collection_name='post_para')
+manager.create_api(Paragraph, methods=['GET'],results_per_page=None)
 manager.create_api(Comment, methods=['GET','POST'])
 
 restapi = Api(app)
@@ -26,9 +27,9 @@ restapi = Api(app)
 def index():
     return app.send_static_file('index.html')
 
-class CreatePost(Resource):
+@restapi.route('/api/post_misc')
+class PostMisc(Resource):
     def post(self):
-        print('hello')
         try:
             post_data = json.loads(request.data)
             title = post_data['title']
@@ -42,10 +43,16 @@ class CreatePost(Resource):
             db.session.commit()
             return {'post_id':p_e.id}
         except Exception as e:
-            print(e)
             return restapi.abort(400,'Invalid data')
 
-restapi.add_resource(CreatePost,'/api/create_post')
+# @app.route('/api/post_misc')
+# def get_post():
+#     post_id  = request.args.get('post_id')
+#     print(post_id)
+#     p_e = Post.query.get(post_id)
+#     return {'paragraphs':p_e.paragraphs}
+
+# restapi.add_resource(PostMisc,'/api/post_misc')
 # @app.route('/api/create_post',methods=['POST'])
 # def create_post():
 #     title = request.form.get('title',None);

setup.sh

@@ -5,10 +5,9 @@
 ## gcc, make, Python 2.5+, python-pip, virtualenv
 
 ## Instalation
-## Create a virtualenv, and activate this: 
+## Create a virtualenv, and activate this:
 
-virtualenv env 
+virtualenv env
 source env/bin/activate
 pip install -r requirements.txt
-python run.py
-
+yarn install

src/components/addpost.tsx

@@ -10,8 +10,8 @@ export class AddPost extends React.Component<any, any> {
   public render() {
     let submitHandler = (e: any, d: any) => {
       let postContent = JSON.stringify(this.state);
-      console.log('posting : ', postContent);
-      fetch('/api/create_post', {
+      // console.log('posting : ', postContent);
+      fetch('/api/post_misc', {
         method: 'POST',
         headers: {
           'Accept': 'application/json',
@@ -20,12 +20,12 @@ export class AddPost extends React.Component<any, any> {
         body: postContent,
       })
         .then((response) => {
-          if (response.status === 200) {
-            console.log('submitted successfully');
-          }
+          // if (response.status === 200) {
+          //   // console.log('submitted successfully');
+          // }
         })
         .catch((err) => {
-          console.log('some error occurred');
+          // console.log('some error occurred');
         });
     };
     return (

src/components/index.ts

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

src/components/listposts.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Menu, List } from 'semantic-ui-react';
 import { HeaderMenu } from './headermenu';
+import { Link } from 'react-router-dom';
 import * as _ from 'lodash';
 
 export const PostLinks: React.StatelessComponent<any> = (props) => {
@@ -8,8 +9,8 @@ export const PostLinks: React.StatelessComponent<any> = (props) => {
     <List.Item key={i}>
       <List.Icon name="book" size="large" verticalAlign="middle" />
       <List.Content>
-        <List.Header as="a">{o.title}</List.Header>
-        <List.Description as="a">published at {o.pub_date}</List.Description>
+        <List.Header as={Link} to={`/showpost/${o.id}`}>{o.title}</List.Header>
+        <List.Description as={Link} to={`/showpost/${o.id}`}>published at {o.pub_date}</List.Description>
       </List.Content>
     </List.Item>
   ));
@@ -60,11 +61,10 @@ export class ListPosts extends React.Component<any, any> {
       .then((response) => response.text())
       .then((responseText) => {
         let pageContent = JSON.parse(responseText);
-        console.log('postlist', pageContent);
         this.setState({ pageContent });
       })
       .catch((err) => {
-        console.log('some error occurred');
+        return null;
       });
   }
 }

src/components/showpost.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { Segment, Header, Comment, Form, Button, Container, Icon } from 'semantic-ui-react';
+import { HeaderMenu } from './headermenu';
+
+export class ShowPara extends React.Component<any, any> {
+  state = { commentName: '', commentMessage: '', comments: [] };
+  // constructor(props:any){
+  //   super(props);
+  // }
+  componentDidMount() {
+    this.getComments();
+  }
+  public render() {
+    let cont = this.props.para.body;
+    let handleComment = () => {
+      let name = this.state.commentName;
+      let message = this.state.commentMessage;
+      let pgId = this.props.para.id;
+      let pId = this.props.para.post_id;
+      let pc = { name, message, paragraph_id: pgId, post_id: pId };
+      let postContent = JSON.stringify(pc);
+      fetch(`/api/comment`, {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: postContent,
+      })
+        .then((response) => {
+          this.getComments();
+        })
+        .catch((err) => {
+          // console.log('some error occurred');
+        });
+    };
+    let handleMessage = (name: boolean) => {
+      let field = name ? 'commentName' : 'commentMessage';
+      return (e: any, d: any) => {
+        this.setState({ [field]: d.value });
+      };
+    };
+    let comments = this.state.comments.map((c: any, i: number) => (
+      <Comment key={i}>
+        <Icon name="user" />
+        <Comment.Content>
+          <Comment.Author>{c.name}</Comment.Author>
+          <Comment.Text>{c.name}</Comment.Text>
+        </Comment.Content>
+      </Comment>
+    ));
+    return (
+      <Container>
+        <Segment>{cont}</Segment>
+        <Comment.Group size="mini">
+          {comments}
+          <Form reply={true} onSubmit={handleComment}>
+            <Form.Group inline={true}>
+              <Form.Input width={2} placeholder="Name" onChange={handleMessage(true)} />
+              <Form.Input width={10} placeholder="Message" onChange={handleMessage(false)} />
+              <Button
+                size="mini"
+                width={2}
+                content="Add Comment"
+                labelPosition="left"
+                icon="edit"
+                primary={true}
+              />
+            </Form.Group>
+          </Form>
+        </Comment.Group>
+      </Container>
+    );
+  }
+
+  getComments() {
+    fetch(`/api/paragraph/${this.props.para.id}`)
+      .then((response) => response.text())
+      .then((txt) => {
+        let { comments } = JSON.parse(txt);
+        this.setState({ comments });
+      })
+      .catch((err) => {
+        // console.log('some error occurred');
+      });
+  }
+}
+
+export class ShowPostR extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    let postId = props.match.params.postId;
+    let emptyPost = { paragraphs: [], title: '' };
+    this.state = { postId, postData: emptyPost };
+  }
+  componentDidMount() {
+    this.getParagraphs();
+  }
+  public render() {
+    let pd = this.state.postData;
+    let paraList = pd.paragraphs;
+    let paraL = (o: any, i: number) => (
+      <ShowPara key={i} para={o} />
+    );
+    let paras = paraList.map(paraL);
+    return (
+      <HeaderMenu>
+        <Header size="medium">{pd.title}</Header>
+        {paras}
+      </HeaderMenu>
+    );
+  }
+  getParagraphs() {
+    fetch(`/api/post_para/${this.state.postId}`)
+      .then((response) => response.text())
+      .then((txt) => {
+        let postData = JSON.parse(txt);
+        this.setState({ postData });
+      })
+      .catch((err) => {
+        // console.log('some error occurred');
+      });
+  }
+}
+
+export const ShowPost = withRouter(ShowPostR);

src/router.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Route, HashRouter } from 'react-router-dom';
 // import { App } from './app';
-import { AddPost, ListPosts } from './components';
+import { AddPost, ListPosts, ShowPost } from './components';
 
 export const AppRouter: React.StatelessComponent<{}> = () => {
   return (
@@ -10,6 +10,7 @@ export const AppRouter: React.StatelessComponent<{}> = () => {
         <Route exact={true} path="/" component={ListPosts} />
         <Route path="/addpost" component={AddPost} />
         <Route path="/listposts" component={ListPosts} />
+        <Route path="/showpost/:postId" component={ShowPost} />
       </div>
     </HashRouter>
   );

tslint.json

@@ -33,6 +33,7 @@
         "no-bitwise": true,
         "no-console": [
             true,
+            "log",
             "error",
             "debug",
             "info",