feat/example: editable comments plugin (#320)

* feat/example: editable comments plugin simple javascript plugin for comments integration * chore/unused-files: remove unused files
maidsafe-archive · Nov 9, 2017 · e022608 · e022608
1 parent afef34b
commit e022608
Show file tree

Hide file tree

Showing 22 changed files with 21,667 additions and 0 deletions.
diff --git a/editable-comments-web/.babelrc b/editable-comments-web/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "react",
+    "es2015",
+    "stage-1"
+  ],
+  "plugins": ["transform-decorators-legacy", "transform-async-to-generator" /* should always be the first plugin! */]
+}
diff --git a/editable-comments-web/.eslintrc b/editable-comments-web/.eslintrc
@@ -0,0 +1,13 @@
+{
+    "extends": "eslint-config-airbnb",
+    "parser": "babel-eslint",
+    "rules": {
+        "linebreak-style": 0,
+        "max-len": [ "error", 120 ],
+        "no-console": 0,
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+    },
+    "env": {
+        "browser": true
+    }
+}
diff --git a/editable-comments-web/.gitignore b/editable-comments-web/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+.DS_Store
+build
diff --git a/editable-comments-web/README.md b/editable-comments-web/README.md
@@ -0,0 +1,64 @@
+# Comments Plugin (Editable)
+
+Simple javascript plugin built using React and Mobx for enabling disqus like commenting feature where comments can be editable.
+
+## Build the Plugin
+
+1. Clone the project
+    ```bash
+    $ git clone https://github.com/maidsafe/safe_examples
+    $ cd safe_examples/editable-comments-web
+    ```
+
+2. Install the Node.js dependencies.
+    ```bash
+    $ yarn install
+    ```
+
+3. `yarn build` will build the plugin to the `build` folder.
+
+
+## Integrating the plugin to your page
+
+Two simple steps for integrating the plugin:
+
+- Include the script in your html and initialise the plugin
+- Visit the page to enable comments for that page.
+
+### Initialising the plugin
+Build and refer the `comments.js` file in your html page.
+
+Initialise the plugin after the DOM is ready by passing a `topic` and `targetId` as parameters.
+`window.safeComments('unique-topic', 'div-comments');`
+
+The above line of code will load the comments UI in target specified as `div-comments`. The comments added to this 
+page will be saved against the topic `unique-topic` in a MutableData. The name of the MutableData is 
+determisinstically generated (hash(window.localtion.hostname)). The `target` is an optional value and it defaults to `#comments`.
+
+Every page must be supplied with a unique topic. The topic should unique under the hosting, 
+since all the topics are added as keys in the MutableData. If a duplicate topic is passsed the 
+comments related to that key if already present will be modified
+
+Example snippet:
+
+```HTML
+<html>
+	<head>
+		<script src="./comment.js"></script>
+		<script>
+		document.addEventListener("DOMContentLoaded", function(event) {
+			window.safeComments('Page-Topic-My-Blog', 'CommentTarget');
+		});
+		</script>
+	</head>
+	<div>
+		<div>
+			<h1>My Blog</h1>
+			<div>Blog content goes here!</div>
+		</div>
+		<div id="CommentTarget"></div>
+	</div>
+</html>
+```
+
+After publishing the page, admin must visit the page to enable comments for the page.
diff --git a/editable-comments-web/index.html b/editable-comments-web/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Comment plugin example</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: "arial", "sans-serif";
+      }
+      .root {
+        width: 800px;
+        margin: 50px auto 0;
+      }
+      .title {
+        font-size: 36px;
+        text-align: center;
+        font-weight: 600;
+        margin-bottom: 48px;
+      }
+      .p {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: normal;
+        margin-top: 10px;
+      }
+      .sub-title {
+        margin-top: 24px;
+        font-size: 18px;
+        font-weight: 600;
+      }
+      .sub-sub-title {
+        margin-top: 22px;
+        font-size: 16px;
+        font-weight: 600;
+      }
+      .code {
+        background-color: #f7f7f7;
+        display: inline-block;
+        white-space: pre-line;
+        padding: 16px;
+        margin: 16px auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="root">
+      <h2 class="title">Comments Plugin</h2>
+      <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>
+      <h3 class="sub-title">How to Use</h3>
+      <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>
+      <pre class="code">
+          &lt;script src="comment.js"&gt;&lt;/script&gt;
+          &lt;script&gt;
+          &nbsp;&nbsp;window.safeComments('CommentTitle', 'CommentTargetID');
+          &lt;/script&gt;
+      </pre>
+
+      <h3 class="sub-title">Design</h3>
+
+      <h4 class="sub-sub-title">Fetching Comments</h4>
+
+      <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>
+
+      <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>
+
+      <h4 class="sub-sub-title">Setting Up Mutable Data</h4>
+
+      <p class="p">The app is authorised with the access for <code>_publicNames</code> and <code>own_container</code>.</p>
+
+      <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>
+
+      <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>
+
+      <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>
+
+    </div>
+    <div id="comments"></div>
+    <script src="/static/bundle.js"></script>
+    <script type="application/javascript">
+      window.safeComments('CommentsTitle');
+    </script>
+  </body>
+</html>
diff --git a/editable-comments-web/package.json b/editable-comments-web/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "editable-comments",
+  "version": "0.1.0",
+  "description": "Simple comment plugin (editable)",
+  "scripts": {
+    "start": "webpack-dev-server --hot --open",
+    "build": "webpack --config webpack.production.config.js",
+    "lint": "eslint src"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maidsafe/safe_examples/editable-comments-web"
+  },
+  "keywords": [
+    "comments",
+    "react",
+    "reactjs",
+    "mobx"
+  ],
+  "author": "MaidSafe",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/maidsafe/safe_examples/issues"
+  },
+  "homepage": "https://github.com/maidsafe/safe_examples/editable-comments-web",
+  "devDependencies": {
+    "babel-core": "^6.9.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-async-to-generator": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb": "^16.0.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "style-loader": "^0.19.0",
+    "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
+  },
+  "dependencies": {
+    "mobx": "^3.0.0",
+    "mobx-react": "^4.1.0",
+    "mobx-react-devtools": "^4.2.11",
+    "nessie": "https://github.com/sociomantic-tsunami/nessie.git",
+    "prop-types": "^15.6.0",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-stylable-diff": "https://github.com/shankar2105/react-stylable-diff.git"
+  }
+}
diff --git a/editable-comments-web/src/components/Comment.jsx b/editable-comments-web/src/components/Comment.jsx
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Icon } from 'nessie';
+
+
+@observer
+class Comment extends Component {
+  render() {
+    const { comment, showEditModal, showHistoryModal, showDeleteModal, isOwner } = this.props;
+
+    const editButton = comment.isEditable ? (<button className="_edit" onClick={() => { showEditModal(comment); }}> Edit </button>) : null;
+
+    const historyButton = (comment.version > 1) ? (<button className="_history" onClick={() => { showHistoryModal(comment); }}> {comment.version - 1}</button>) : null;
+    return (
+      <div>
+        <li className="_comment-item">
+          <div className="_user">
+            {comment.name}
+          </div>
+          <div className="_message">
+            {comment.messages[comment.version - 1]}
+          </div>
+          <div className="_delete">
+            {isOwner ? (
+              <span>
+                <button className="_del" onClick={() => { showDeleteModal(comment); }}> Delete </button>
+              </span>
+            ) : null}
+            {historyButton}
+            {editButton}
+          </div>
+        </li>
+      </div>
+    );
+  }
+}
+
+Comment.propTypes = {
+  comment: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default Comment;