notifications

.eslintignore

@@ -8,3 +8,4 @@ bower_components/**
 build/**
 webpack/**
 src/redux/**
+test/**

package.json

@@ -13,6 +13,7 @@
     "eslint-plugin-html": "^4.0.5",
     "ethereumjs-tx": "^1.3.7",
     "ethereumjs-util": "^5.2.0",
+    "mocha": "^5.2.0",
     "moment": "^2.22.2",
     "polymer-cli": "^1.8.0",
     "qrcode": "^1.2.2",
@@ -28,6 +29,7 @@
     "lint": "npm run lint:javascript",
     "lint:javascript": "eslint . --ext js,html --ignore-path .eslintignore",
     "test": "polymer test",
+    "mocha": "mocha \"test/**/*.test.js\"",
     "test:integration": "polymer build # test that psk builds without error with the CLI",
     "build": "npm install && npm run webpack && node --max-old-space-size=8192 ./node_modules/.bin/polymer build",
     "build:nowp": "node --max-old-space-size=8192 ./node_modules/.bin/polymer build --verbose",

src/data/data-notifications.html

@@ -0,0 +1,45 @@
+<!--
+@license
+Copyright (c) 2018 Swarm City
+This code may only be used under the license found at https://github.com/swarmcity/license
+-->
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="./socket-redux.html" />
+<link rel="import" href="../redux-state.html">
+
+<!-- This component will catch all events that send out notifications and act on those events  -->
+
+<dom-module id="data-notifications">
+
+    <template>
+        <socket-redux id="socket"></socket-redux>
+    </template>
+    <script>
+        class DataNotifications extends new ReduxMixin(Polymer.Element) {
+            static get is() {
+                return 'data-notifications';
+            }
+            static get properties() {
+                return {
+                    notifications: {
+                        type: Object,
+                        statePath: AppStore.selectors.notifications,
+                    },
+                };
+            }
+
+
+            ready() {
+                super.ready();
+                window.addEventListener('newItem', function () {
+
+                    console.log('new item noticed in data-notifications')
+
+                }.bind(this), false);
+            }
+
+
+        }
+        window.customElements.define(DataNotifications.is, DataNotifications);
+    </script>
+</dom-module>

src/data/socket-redux.html

@@ -57,51 +57,6 @@
                     nonce: {
                         type: Number,
                     },
-                    /**
-                     * This is the shortCode we want a public key for
-                     * as given by the ETH network
-                     * @type {Number}
-                     */
-                    reqtokey: {
-                        type: Number,
-                        statePath: 'reqtokey',
-                        observer: '_reqToKey',
-                    },
-                    /**
-                     * Historic transactions for publickey
-                     * @type {Array}
-                     */
-                    transactions: {
-                        type: Array,
-                        statePath: 'transactions',
-                    },
-                    /**
-                     * Get base 64 image from IPFS hash
-                     * @type {Array}
-                     */
-                    reqipfs: {
-                        type: String,
-                        statePath: 'reqipfs',
-                        observer: '_reqipfs',
-                    },
-                    /**
-                     * An ipfs hash we want to resolve over the API
-                     * @type {Array}
-                     */
-                    ipfsHash: {
-                        type: String,
-                        statePath: 'ipfsHash',
-                        observer: '_ipfsHashResolve',
-                    },
-                    /**
-                     * Send new request metadata to IPFS
-                     * @type {Object}
-                     */
-                    itemToIpfs: {
-                        type: Object,
-                        statePath: 'itemToIpfs',
-                        observer: '_itemToIpfs',
-                    },
                     /**
                      * Send new signed tx to the blockchain
                      * @type {Object}
@@ -119,27 +74,6 @@
                         type: Array,
                         statePath: 'confirmedTx',
                     },
-                    /**
-                     * An Object containing the data for a hashtagItem
-                     * @type {Object}
-                     */
-                    hashtagItem: {
-                        type: Object,
-                        statePath: 'hashtagItem',
-                    },
-                    /**
-                     * The selected user's reputation balance
-                     * @type {Object}
-                     */
-                    userReputation: {
-                        type: Object,
-                        statePath: 'userReputation',
-                        observer: '_getUserReputation',
-                    },
-                    chats: {
-                        type: Object,
-                        statePath: AppStore.selectors.chats,
-                    },
                 };
             }
             /**
@@ -227,12 +161,8 @@
                     this._subscribeToChat({
                         itemHash,
                     })
-                    .then(() => {
-                        console.log('Successfully joined chat channel for item: ', itemHash)
-                    })
-                    .catch(err => {
-                        console.log('Error instantiating chat channel:', err)
-                    });
+                        .then(() => console.log('Successfully joined chat channel for item: ', { itemHash }))
+                        .catch(e => console.error(`Error instantiating chat channel for itemHash ${itemHash}: ${e.stack}`));
                 }.bind(this), false);
             }
 
@@ -302,25 +232,16 @@
                         });
                 })
             }
-            // Get a certain user's reputation balance by address
-            _getUserReputation() {
-                if (this.userReputation.request) {
-                    this.socket.emit('getReputation', {
-                        address: this.userReputation.request,
-                    }, (reply) => {
-                        this.dispatch({
-                            type: 'USERREPUTATION',
-                            userReputation: reply.data
-                        });
-                    });
-                }
-            }
 
-            _subscribeToChat({ accessKeys, itemHash}) {
+            _subscribeToChat({ accessKeys, itemHash, hashtagAddress }) {
                 return new Promise((resolve, reject) => {
+                    // Store hashtagAddress in the db's chatObject to latter know 
+                    // which hashtag this item belongs to
+                    const info = hashtagAddress ? { hashtagAddress } : {}
                     this.socket.emit('subscribeToChat', {
-                        accessKeys, 
-                        itemHash
+                        accessKeys,
+                        itemHash,
+                        info
                     }, (reply) => {
                         if (reply.response == 200) {
                             resolve(reply.data);

src/displays/display-button-text.html

@@ -0,0 +1,80 @@
+<!--
+@license
+Copyright (c) 2018 Swarm City
+This code may only be used under the license found at https://github.com/swarmcity/license
+-->
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
+<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html">
+<!--
+
+Example:
+```
+<display-button-text></display-button-text>
+```
+
+### Styling
+
+Style the button with CSS as you would a normal DOM element.
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--display-button-text` | Mixin applied to the deal button | `{}` |
+-->
+<dom-module id="display-button-text">
+    <template>
+        <style include="shared-styles">
+            :host {
+                display: block;
+            }
+
+            .button {
+                @apply --small-light;
+                color: var(--sc-grey4);
+                width: 115px;
+                height: 40px;
+                box-sizing: border-box;
+                padding: 10px;
+                cursor: pointer;
+                @apply --layout-vertical;
+                @apply --layout-center-center;
+                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+                -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+                -moz-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+                -o-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+            }
+
+            .container[wide-layout] .button {
+                box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+                -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+                -moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+                -o-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+            }
+
+            .button:active {
+                @apply --button-active;
+            }
+        </style>
+        <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
+        <div class="container" wide-layout$="{{wide}}">
+            <div class="button">
+                [[label]]
+            </div>
+        </div>
+
+    </template>
+    <script>
+        class MyDisplayButtonText extends new ReduxMixin(Polymer.mixinBehaviors([
+            Polymer.AppLocalizeBehavior,
+        ],
+            Polymer.Element
+        )) {
+            static get is() {
+                return 'display-button-text';
+            }
+        }
+        window.customElements.define(MyDisplayButtonText.is, MyDisplayButtonText);
+    </script>
+</dom-module>

src/displays/display-my-info.html

@@ -140,6 +140,25 @@
         background-color: var(--sc-yellow);
         opacity: 0.6;
       }
+
+      .notificationsCount {
+        color: var(--sc-white);
+        border-radius: 50%;
+        @apply --small-bold;
+        @apply --layout-vertical;
+        @apply --layout-center-center;
+        text-align: center;
+        height: 24px;
+        width: 24px;
+        min-width: 24px;
+        background-color: var(--sc-grey4);
+        margin: 18px 0 0 -8px;
+        z-index: 99;
+      }
+
+      .container[wide-layout] .notificationsCount {
+        margin: 25px 0 0 -8px;
+      }
     </style>
 
     <app-location route="{{route}}"></app-location>
@@ -157,7 +176,9 @@
 
       <dom-if if="{{publicKey}}">
         <template>
-          <iron-image id="image" sizing="cover" on-click="_toProfile" preload src="https://scapiweb3-c.swarm.city/img/[[avatarHash]]" placeholder="../images/defaultavatar.png"></iron-image>
+          <iron-image id="image" sizing="cover" on-click="_toProfile" preload src="https://scapiweb3-c.swarm.city/img/[[avatarHash]]"
+            placeholder="../images/defaultavatar.png"></iron-image>
+          <div class="notificationsCount" on-tap="_toNotifications">[[notificationsCount]]</div>
           <div class="totalbox">
             <div id="username" on-click="_toProfile">{{ username }}</div>
             <div id="balance" on-click="_toWallet">
@@ -216,6 +237,14 @@
             type: String,
             statePath: AppStore.selectors.avatarHash
           },
+          /**
+           * Avatar represents the user's base64 of their avatar image
+           * @type {String}
+           */
+          notificationsCount: {
+            type: String,
+            statePath: AppStore.selectors.notificationsCount
+          },
           /**
            * Balance represents the users SWT balance
            * @type {Number}
@@ -275,6 +304,10 @@
         }
       }
 
+      _toNotifications() {
+        this.dispatchEvent(new CustomEvent("notifications"));
+      }
+
       /**
        * takes the user to the my-wallet page
        */