wip block button, v1.6.1

src/css/style.css

@@ -1408,32 +1408,39 @@ form.public {
   font-weight: bold;
 }
 
-.follow {
+.follow, .block {
   min-width: 110px;
   transition: background-color 0.1s ease;
   padding: 5px 20px;
 }
 
-.follow.following {
+.block.blocked, .follow.following {
   background-color: var(--notify);
   color: var(--text-color);
   border: var(--button-border-size) solid var(--notify);
 }
 
-.follow.following:hover {
+.block.blocked {
   background-color: var(--warning-background);
-  border-color: var(--warning-background);
 }
 
-.follow .hover {
+.block.blocked:hover {
+  background-color: var(--notify);
+}
+
+.follow.following:hover {
+  background-color: var(--warning-background);
+}
+
+.block .hover, .follow .hover {
   display: none;
 }
 
-.follow.following:hover .hover {
+.block.blocked:hover .hover, .follow.following:hover .hover {
   display: inline;
 }
 
-.follow.following:hover .nonhover {
+.block.blocked:hover .nonhover, .follow.following:hover .nonhover {
   display: none;
 }
 

src/js/Session.js

@@ -12,6 +12,7 @@ let onlineTimeout;
 let ourActivity;
 let hasFollowers;
 const follows = {};
+const blocks = {};
 const channels = window.channels = {};
 
 const DEFAULT_SETTINGS = {
@@ -50,7 +51,8 @@ function getFollowsFn(callback, k, maxDepth = 2, currentDepth = 1) {
 
   addFollow(k, currentDepth - 1);
 
-  State.public.user(k).get('follow').map().once((isFollowing, followedKey) => { // TODO: .on for unfollow
+  State.public.user(k).get('follow').map().on((isFollowing, followedKey) => { // TODO: .on for unfollow
+    if (follows[followedKey] === isFollowing) { return; }
     if (isFollowing) {
       addFollow(followedKey, currentDepth, k);
       if (currentDepth < maxDepth) {
@@ -137,6 +139,11 @@ function login(k) {
   State.local.get('follows').put({a:null});
   Notifications.init();
   State.local.get('loggedIn').put(true);
+  State.public.get('block').map().on((isBlocked, user) => {
+    blocks[user] = isBlocked;
+    isBlocked && (follows[user] = null);
+    State.local.get('follows').get(user).put(isBlocked);
+  });
   getFollowsFn((k, info) => {
     State.local.get('follows').get(k).put(true);
     if (!hasFollowers && k === getPubKey() && info.followers.size) {

src/js/components/FollowButton.js

@@ -8,21 +8,30 @@ class FollowButton extends Component {
   constructor() {
     super();
     this.eventListeners = {};
+    this.key = 'follow';
+    this.activeClass = 'following';
+    this.hoverAction = 'unfollow';
   }
 
   onClick(e) {
     e.preventDefault();
-    const follow = !this.state.following;
-    State.public.user().get('follow').get(this.props.id).put(follow);
-    if (follow) {
+    const value = !this.state[this.key];
+    if (value && this.key === 'follow') {
       Session.newChannel(this.props.id);
+      State.public.user().get('block').get(this.props.id).put(false);
     }
+    if (value && this.key === 'block') {
+      State.public.user().get('follow').get(this.props.id).put(false);
+    }
+    State.public.user().get(this.key).get(this.props.id).put(value);
   }
 
   componentDidMount() {
-    State.public.user().get('follow').get(this.props.id).on((following, a, b, e) => {
-      this.setState({following});
-      this.eventListeners['follow'] = e;
+    State.public.user().get(this.key).get(this.props.id).on((value, a, b, e) => {
+      const s = {};
+      s[this.key] = value;
+      this.setState(s);
+      this.eventListeners[this.key] = e;
     });
   }
 
@@ -32,9 +41,9 @@ class FollowButton extends Component {
 
   render() {
     return html`
-      <button class="follow ${this.state.following ? 'following' : ''}" onClick=${e => this.onClick(e)}>
-        <span class="nonhover">${this.state.following ? t('following') : t('follow')}</span>
-        <span class="hover">${t('unfollow')}</span>
+      <button class="${this.key} ${this.state[this.key] ? this.activeClass : ''}" onClick=${e => this.onClick(e)}>
+        <span class="nonhover">${this.state[this.key] ? t(this.activeClass) : t(this.key)}</span>
+        <span class="hover">${t(this.hoverAction)}</span>
       </button>
     `;
   }

src/js/components/SearchBox.js

@@ -15,7 +15,7 @@ class SearchBox extends Component {
     this.state = {results:[]};
     this.debouncedIndexAndSearch = _.debounce(() => {
       const options = {keys: ['name'], includeScore: true, includeMatches: true, threshold: 0.3};
-      this.fuse = new Fuse(Object.values(Session.getFollows()), options);
+      this.fuse = new Fuse(Object.values(Session.getFollows()), options); // TODO: this gets reinitialized with Header on each view change. slow?
       this.search();
     }, 200);
   }

src/js/views/About.js

@@ -19,7 +19,7 @@ class About extends View {
           <li><b>Available</b>: It works offline-first and is not dependent on any single centrally managed server. Users can even connect directly to each other.</li>
         </ul>
         <p>Released under MIT license. Code: <a href="https://github.com/irislib/iris-messenger">Github</a>.</p>
-        <p><small>Version 1.6.0</small></p>
+        <p><small>Version 1.6.1</small></p>
 
         ${iris.util.isElectron ? '' : html`
           <div id="desktop-application-about">

src/js/views/Chat.js

@@ -52,7 +52,7 @@ class Chat extends View {
     this.unsubscribe();
     this.sortedMessages = [];
     this.participants = {};
-    this.setState({sortedMessages: this.sortedMessages, participants: this.participants});
+    this.setState({sortedMessages: this.sortedMessages, participants: this.participants, sidebarOpen: false});
     this.iv = null;
     this.chat = null;
     const go = () => {
@@ -218,7 +218,7 @@ class Chat extends View {
       <div class="chat-message-form"><${MessageForm} activeChat=${this.props.id} onSubmit=${() => this.scrollDown()}/></div>
       `: ''}
       </div>
-      ${this.props.id && this.props.id.length < 40 ? html`
+      ${this.props.id && this.props.id !== 'new' && this.props.id.length < 40 ? html`
         <div class="participant-list">
           ${this.state.participants ? Object.keys(this.state.participants).map(k =>
             html`

src/js/views/Profile.js

@@ -9,6 +9,7 @@ import { route } from '../lib/preact-router.es.js';
 import SafeImg from '../components/SafeImg.js';
 import CopyButton from '../components/CopyButton.js';
 import FollowButton from '../components/FollowButton.js';
+import BlockButton from '../components/BlockButton.js';
 import MessageFeed from '../components/MessageFeed.js';
 import Identicon from '../components/Identicon.js';
 import Name from '../components/Name.js';
@@ -240,6 +241,7 @@ class Profile extends View {
                 ${this.isMyProfile ? '' : html`
                   <button class="show-settings" onClick=${() => this.onClickSettings()}>${t('settings')}</button>
                 `}
+                ${followable ? html`<${BlockButton} id=${this.props.id}/>` : ''}
               </div>
             </div>
           </div>
@@ -280,7 +282,6 @@ class Profile extends View {
             <hr/>
             <p>
               <button class="delete-chat" onClick=${() => deleteChat(this.props.id)}>${t('delete_chat')}</button>
-              <!-- <button class="block-user">${t('block_user')}</button> -->
             </p>
             <hr/>
           </div>