add /articles/:article_id to get an article in html

arpith · arpith · commit ede1cbdecf81 · 2017-04-10T11:40:17.000+05:30
/articles/:article_id/body returns just the body, rendered as html
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["es2015", "react"]
 }
diff --git a/index.js b/index.js
@@ -10,6 +10,10 @@ app.get('/articles/:articleID', function(req, res) {
   res.sendFile(path.join(__dirname, 'static/label.html'));
 });
 
+app.get('/articles/:articleID/body', function(req, res) {
+  res.sendFile(path.join(__dirname, 'static/article.html'));
+});
+
 app.get('/bookmarklet/js', function(req, res) {
   res.redirect(301, '/bookmarklet.js');
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,10 @@
 {
   "name": "feedreader-website",
-  "version": "1.0.1",
+  "version": "1.0.2",
+  "engines": {
+    "node": "6.3.1",
+	"npm": "4.0.5"
+  },
   "description": "What happens at feedreader.co",
   "main": "index.js",
   "scripts": {
@@ -20,12 +24,14 @@
   "homepage": "https://github.com/feedreaderco/web#readme",
   "dependencies": {
     "express": "^4.13.4",
-    "webpack": "^1.12.13"
-  },
-  "devDependencies": {
+    "html-to-react": "^1.2.4",
+    "react": "^15.5.3",
+    "react-dom": "^15.5.3",
+    "webpack": "^1.14.0",
     "babel-core": "^6.24.1",
     "babel-loader": "^6.4.1",
     "babel-preset-es2015": "^6.24.1",
-    "webpack": "^1.14.0"
+    "babel-preset-react": "^6.24.1",
+    "json-loader": "^0.5.4"
   }
 }
diff --git a/src/article.js b/src/article.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Parser } from 'html-to-react';
+import api from './api';
+
+const pathname_split = window.location.pathname.split('/');
+const hash = pathname_split[pathname_split.length - 2];
+const mountNode = document.getElementById('articles');
+
+class Article extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { article: {} };
+  }
+
+  componentWillMount() {
+    const uri = `articles/${this.props.id}`;
+    api('GET', uri, ({ article }) => this.setState({ article }));
+  }
+
+  render() {
+    if (!this.state.article.description) return <div></div>;
+    const parser = new Parser();
+    const Body = parser.parse(this.state.article.description);
+    return <div id="article">{Body}</div>;
+  }
+}
+
+ReactDOM.render(<Article id={hash} />, mountNode);
diff --git a/static/article.html b/static/article.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel='stylesheet' type='text/css' href='https://feedreader.co/style.css'>
+<title>Feed Reader</title>
+<body>
+<div id=articles>
+</div>
+</body>
+<script src='https://feedreader.co/article.js' type='text/javascript'></script>
diff --git a/webpack.config.js b/webpack.config.js
@@ -7,16 +7,24 @@ module.exports = {
     userpage: './src/userpage.js',
     login: './src/login.js',
     signup: './src/signup.js',
-    bookmarklet: './src/bookmarklet.js'
+    bookmarklet: './src/bookmarklet.js',
+    article: './src/article.js'
   },
   output: {
     path: path.join(__dirname, 'static'),
     filename: '[name].js'
   },
   module: {
-    loaders: [{
-      exclude: /node_modules/,
-      loader: 'babel-loader'
-    }]
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+    ]
   }
 };

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "presets": ["es2015"]`
	`2`	`+ "presets": ["es2015", "react"]`
`3`	`3`	`}`