add blocked-users block

2018-03-18 23:12:53 +02:00
parent ba05e94738
commit 1a259da6a7
8 changed files with 140 additions and 0 deletions
@@ -0,0 +1,20 @@
+.blocked-users__action {
+  margin-left: 8px;
+  font-weight: 700;
+  color: #0aa;
+  cursor: pointer;
+
+  @media (hover: hover) {
+    opacity: 0;
+  }
+
+  &:hover {
+    color: #06c5c5;
+  }
+
+  &::before {
+    content: '•';
+    margin-right: 8px;
+    color: #777;
+  }
+}
@@ -0,0 +1,6 @@
+.blocked-users__list-item_view_invisible {
+  .blocked-users__username {
+    opacity: .5;
+    text-decoration: line-through;
+  }
+}
@@ -0,0 +1,11 @@
+.blocked-users__list-item {
+  cursor: default;
+
+  @media (hover: hover) {
+    &:hover {
+      .blocked-users__action {
+        opacity: 1;
+      }
+    }
+  }
+}
@@ -0,0 +1,3 @@
+.blocked-users__list {
+  padding: 0 0 0 20px;
+}
@@ -0,0 +1,3 @@
+.blocked-users__username {
+  font-weight: 700;
+}
@@ -0,0 +1,83 @@
+import { h, Component } from 'preact';
+
+import api from 'common/api'
+
+export default class BlockedUsers extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      unblockedUsers: [],
+    }
+  }
+
+  componentWillReceiveProps() {
+    this.setState({ unblockedUsers: [] });
+  }
+
+  block(user) {
+    if (confirm('Do you want to block this user?')) {
+      api.blockUser({ id: user.id }).then(() => {
+        this.setState({ unblockedUsers: this.state.unblockedUsers.filter(x => x !== user.id) });
+      });
+    }
+  }
+
+  unblock(user) {
+    if (confirm('Do you want to unblock this user?')) {
+      api.unblockUser({ id: user.id }).then(() => {
+        this.setState({ unblockedUsers: this.state.unblockedUsers.concat([user.id]) });
+      });
+    }
+  }
+
+  render(props, { unblockedUsers }) {
+    const { users } = props;
+
+    return (
+      <div className={b('blocked-users', props)}>
+        {
+          !users.length && (
+            <p>There are no blocked users.</p>
+          )
+        }
+
+        {
+          !!users.length && (
+            <p>List of blocked users:</p>
+          )
+        }
+
+        {
+          !!users.length && (
+            <ul className="blocked-users__list">
+              {
+                users.map(user => {
+                  const isUserUnblocked = unblockedUsers.includes(user.id);
+
+                  return (
+                    <li className={b('blocked-users__list-item', {}, { view: isUserUnblocked ? 'invisible' : null })}>
+                      <span className="blocked-users__username">{user.id}</span>
+
+                      {
+                        isUserUnblocked && (
+                          <span className="blocked-users__action" onClick={() => this.block(user)}>block</span>
+                        )
+                      }
+
+                      {
+                        !isUserUnblocked && (
+                          <span className="blocked-users__action" onClick={() => this.unblock(user)}>unblock</span>
+                        )
+                      }
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          )
+        }
+      </div>
+    );
+  }
+}
@@ -0,0 +1,3 @@
+.blocked-users {
+  padding: 10px 0;
+}
@@ -0,0 +1,11 @@
+export { default } from './blocked-users';
+
+require('./blocked-users.scss');
+
+require('./__action/blocked-users__action.scss');
+require('./__list/blocked-users__list.scss');
+
+require('./__list-item/blocked-users__list-item.scss');
+require('./__list-item/_view/_invisible/blocked-users__list-item_view_invisible.scss');
+
+require('./__username/blocked-users__username.scss');