Skip to content
This repository was archived by the owner on Jan 7, 2020. It is now read-only.

Commit e022608

Browse files
safesurferhitman401
safesurfer
authored and
hitman401
committed
feat/example: editable comments plugin (#320)
* feat/example: editable comments plugin simple javascript plugin for comments integration * chore/unused-files: remove unused files
1 parent afef34b commit e022608

22 files changed

+21667
-0
lines changed

‎editable-comments-web/.babelrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"react",
4+
"es2015",
5+
"stage-1"
6+
],
7+
"plugins": ["transform-decorators-legacy", "transform-async-to-generator" /* should always be the first plugin! */]
8+
}

‎editable-comments-web/.eslintrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "eslint-config-airbnb",
3+
"parser": "babel-eslint",
4+
"rules": {
5+
"linebreak-style": 0,
6+
"max-len": [ "error", 120 ],
7+
"no-console": 0,
8+
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
9+
},
10+
"env": {
11+
"browser": true
12+
}
13+
}

‎editable-comments-web/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
npm-debug.log
3+
.DS_Store
4+
build

‎editable-comments-web/README.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Comments Plugin (Editable)
2+
3+
Simple javascript plugin built using React and Mobx for enabling disqus like commenting feature where comments can be editable.
4+
5+
## Build the Plugin
6+
7+
1. Clone the project
8+
```bash
9+
$ git clone https://github.com/maidsafe/safe_examples
10+
$ cd safe_examples/editable-comments-web
11+
```
12+
13+
2. Install the Node.js dependencies.
14+
```bash
15+
$ yarn install
16+
```
17+
18+
3. `yarn build` will build the plugin to the `build` folder.
19+
20+
21+
## Integrating the plugin to your page
22+
23+
Two simple steps for integrating the plugin:
24+
25+
- Include the script in your html and initialise the plugin
26+
- Visit the page to enable comments for that page.
27+
28+
### Initialising the plugin
29+
Build and refer the `comments.js` file in your html page.
30+
31+
Initialise the plugin after the DOM is ready by passing a `topic` and `targetId` as parameters.
32+
`window.safeComments('unique-topic', 'div-comments');`
33+
34+
The above line of code will load the comments UI in target specified as `div-comments`. The comments added to this
35+
page will be saved against the topic `unique-topic` in a MutableData. The name of the MutableData is
36+
determisinstically generated (hash(window.localtion.hostname)). The `target` is an optional value and it defaults to `#comments`.
37+
38+
Every page must be supplied with a unique topic. The topic should unique under the hosting,
39+
since all the topics are added as keys in the MutableData. If a duplicate topic is passsed the
40+
comments related to that key if already present will be modified
41+
42+
Example snippet:
43+
44+
```HTML
45+
<html>
46+
<head>
47+
<script src="./comment.js"></script>
48+
<script>
49+
document.addEventListener("DOMContentLoaded", function(event) {
50+
window.safeComments('Page-Topic-My-Blog', 'CommentTarget');
51+
});
52+
</script>
53+
</head>
54+
<div>
55+
<div>
56+
<h1>My Blog</h1>
57+
<div>Blog content goes here!</div>
58+
</div>
59+
<div id="CommentTarget"></div>
60+
</div>
61+
</html>
62+
```
63+
64+
After publishing the page, admin must visit the page to enable comments for the page.

‎editable-comments-web/index.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Comment plugin example</title>
5+
<style>
6+
* {
7+
margin: 0;
8+
padding: 0;
9+
box-sizing: border-box;
10+
}
11+
body {
12+
font-family: "arial", "sans-serif";
13+
}
14+
.root {
15+
width: 800px;
16+
margin: 50px auto 0;
17+
}
18+
.title {
19+
font-size: 36px;
20+
text-align: center;
21+
font-weight: 600;
22+
margin-bottom: 48px;
23+
}
24+
.p {
25+
font-size: 16px;
26+
line-height: 20px;
27+
font-weight: normal;
28+
margin-top: 10px;
29+
}
30+
.sub-title {
31+
margin-top: 24px;
32+
font-size: 18px;
33+
font-weight: 600;
34+
}
35+
.sub-sub-title {
36+
margin-top: 22px;
37+
font-size: 16px;
38+
font-weight: 600;
39+
}
40+
.code {
41+
background-color: #f7f7f7;
42+
display: inline-block;
43+
white-space: pre-line;
44+
padding: 16px;
45+
margin: 16px auto;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<div class="root">
51+
<h2 class="title">Comments Plugin</h2>
52+
<p class="p">This plugin helps post the comments to the blogs or websites in the SAFE Browser. This can be integrated with any webpages. </p>
53+
<h3 class="sub-title">How to Use</h3>
54+
<p class="p">To use this plugin, upload the build folder to your website using Web Hosting Manager. Add the following <code> script </code> tag to your <b>index.html</b>.</p>
55+
<pre class="code">
56+
&lt;script src="comment.js"&gt;&lt;/script&gt;
57+
&lt;script&gt;
58+
&nbsp;&nbsp;window.safeComments('CommentTitle', 'CommentTargetID');
59+
&lt;/script&gt;
60+
</pre>
61+
62+
<h3 class="sub-title">Design</h3>
63+
64+
<h4 class="sub-sub-title">Fetching Comments</h4>
65+
66+
<p class="p">The Mutable Data is fetched from the network with a deterministic name and tag type. The name of the Mutable Data is computed by hashing it using <code>sha3Hash(window.location.hostname)</code> and defined tag type of <code>15001</code>. </p>
67+
68+
<p class="p">The topic is fetched as a key from the Mutable Data and its value is fetched as a list of comments which finally gets displayed.</p>
69+
70+
<h4 class="sub-sub-title">Setting Up Mutable Data</h4>
71+
72+
<p class="p">The app is authorised with the access for <code>_publicNames</code> and <code>own_container</code>.</p>
73+
74+
<p class="p">After the authorisation, validating the user is the owner by verifying whether the Public ID is in the user's <code>publicNames</code> container.</p>
75+
76+
<p class="p">If the Public Id is validated, then get the app's own container and insert the key 'isAdmin' with the value 'true'. Using this value, the app can decide in the future whether the authorised user is an Admin or not </p>
77+
78+
<p class="p"> Now, the Mutable Data is created with the deterministic Id and tag type. Also set the permission to <code>USER_ANYONE</code> by setting the handle to <code>null</code>. This permission is set to allow all the users to insert data into the Mutable Data</p>
79+
80+
</div>
81+
<div id="comments"></div>
82+
<script src="/static/bundle.js"></script>
83+
<script type="application/javascript">
84+
window.safeComments('CommentsTitle');
85+
</script>
86+
</body>
87+
</html>

‎editable-comments-web/package.json‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"name": "editable-comments",
3+
"version": "0.1.0",
4+
"description": "Simple comment plugin (editable)",
5+
"scripts": {
6+
"start": "webpack-dev-server --hot --open",
7+
"build": "webpack --config webpack.production.config.js",
8+
"lint": "eslint src"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/maidsafe/safe_examples/editable-comments-web"
13+
},
14+
"keywords": [
15+
"comments",
16+
"react",
17+
"reactjs",
18+
"mobx"
19+
],
20+
"author": "MaidSafe",
21+
"license": "MIT",
22+
"bugs": {
23+
"url": "https://github.com/maidsafe/safe_examples/issues"
24+
},
25+
"homepage": "https://github.com/maidsafe/safe_examples/editable-comments-web",
26+
"devDependencies": {
27+
"babel-core": "^6.9.1",
28+
"babel-eslint": "^7.2.3",
29+
"babel-loader": "^7.1.2",
30+
"babel-plugin-transform-async-to-generator": "^6.24.1",
31+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
32+
"babel-polyfill": "^6.26.0",
33+
"babel-preset-es2015": "^6.9.0",
34+
"babel-preset-react": "^6.5.0",
35+
"babel-preset-stage-1": "^6.5.0",
36+
"css-loader": "^0.28.7",
37+
"eslint": "^4.8.0",
38+
"eslint-config-airbnb": "^16.0.0",
39+
"eslint-plugin-import": "^2.7.0",
40+
"eslint-plugin-jsx-a11y": "^6.0.2",
41+
"eslint-plugin-react": "^7.4.0",
42+
"style-loader": "^0.19.0",
43+
"uglifyjs-webpack-plugin": "^1.0.0-beta.3",
44+
"url-loader": "^0.6.2",
45+
"webpack": "^3.5.5",
46+
"webpack-dev-server": "^2.7.1"
47+
},
48+
"dependencies": {
49+
"mobx": "^3.0.0",
50+
"mobx-react": "^4.1.0",
51+
"mobx-react-devtools": "^4.2.11",
52+
"nessie": "https://github.com/sociomantic-tsunami/nessie.git",
53+
"prop-types": "^15.6.0",
54+
"react": "^15.1.0",
55+
"react-dom": "^15.1.0",
56+
"react-stylable-diff": "https://github.com/shankar2105/react-stylable-diff.git"
57+
}
58+
}

‎editable-comments-web/src/components/Comment.jsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { observer } from 'mobx-react';
4+
import { Icon } from 'nessie';
5+
6+
7+
@observer
8+
class Comment extends Component {
9+
render() {
10+
const { comment, showEditModal, showHistoryModal, showDeleteModal, isOwner } = this.props;
11+
12+
const editButton = comment.isEditable ? (<button className="_edit" onClick={() => { showEditModal(comment); }}> Edit </button>) : null;
13+
14+
const historyButton = (comment.version > 1) ? (<button className="_history" onClick={() => { showHistoryModal(comment); }}> {comment.version - 1}</button>) : null;
15+
return (
16+
<div>
17+
<li className="_comment-item">
18+
<div className="_user">
19+
{comment.name}
20+
</div>
21+
<div className="_message">
22+
{comment.messages[comment.version - 1]}
23+
</div>
24+
<div className="_delete">
25+
{isOwner ? (
26+
<span>
27+
<button className="_del" onClick={() => { showDeleteModal(comment); }}> Delete </button>
28+
</span>
29+
) : null}
30+
{historyButton}
31+
{editButton}
32+
</div>
33+
</li>
34+
</div>
35+
);
36+
}
37+
}
38+
39+
Comment.propTypes = {
40+
comment: PropTypes.shape({
41+
name: PropTypes.string.isRequired,
42+
}).isRequired,
43+
};
44+
45+
export default Comment;

0 commit comments

Comments
 (0)