Merge pull request #267 from cabal-club/add-moderation-messages

Add moderation system messages

Author: nikolaiwarner

app/actions.js

@@ -697,6 +697,7 @@ const initializeCabal = ({ addr, username, settings }) => async dispatch => {
   ]
   cabalDetailsEvents.forEach((event) => {
     cabalDetails.on(event.name, throttle((data) => {
+      // console.log('Event', event.name, data)
       event.action(data)
     }), event.throttleDelay || 200, { leading: true, trailing: true })
   })
@@ -756,42 +757,43 @@ const generateUniqueName = () => {
   return `${randomItem(adjectives)}-${randomItem(nouns)}`
 }
 
-export const moderationHide = ({ addr, channel, reason, userKey }) => async dispatch => {
-  const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.hide([[userKey, reason]], { channel, reason } )
+export const moderationHide = (props) => async dispatch => {
+  dispatch(moderationAction('hide', props))
 }
 
-export const moderationUnhide = ({ addr, channel, reason, userKey }) => async dispatch => {
-  const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.unhide([[userKey, reason]], { channel, reason } )
+export const moderationUnhide = (props) => async dispatch => {
+  dispatch(moderationAction('unhide', props))
 }
 
-export const moderationBlock = ({ addr, channel, reason, userKey }) => async dispatch => {
-  const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.block([[userKey, reason]], { channel, reason } )
+export const moderationBlock = (props) => async dispatch => {
+  dispatch(moderationAction('block', props))
 }
 
-export const moderationUnblock = ({ addr, channel, reason, userKey }) => async dispatch => {
-  const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.unblock([[userKey, reason]], { channel, reason } )
+export const moderationUnblock = (props) => async dispatch => {
+  dispatch(moderationAction('unblock', props))
 }
 
-export const moderationAddMod = ({ addr, channel, reason, userKey }) => async dispatch => {
-  const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.addMod([[userKey, reason]], { channel, reason } )
+export const moderationAddMod = (props) => async dispatch => {
+  dispatch(moderationAction('addMod', props))
 }
 
-export const moderationRemoveMod = ({ addr, channel, reason, userKey }) => async dispatch => {
-  const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.removeMod([[userKey, reason]], { channel, reason } )
+export const moderationRemoveMod = (props) => async dispatch => {
+  dispatch(moderationAction('removeMod', props))
 }
 
-export const moderationAddAdmin = ({ addr, channel, reason, userKey }) => async dispatch => {
-  const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.addAdmin([[userKey, reason]], { channel, reason } )
+export const moderationAddAdmin = (props) => async dispatch => {
+  dispatch(moderationAction('addAdmin', props))
+} 
+
+export const moderationRemoveAdmin = (props) => async dispatch => {
+  dispatch(moderationAction('removeAdmin', props))
 }
 
-export const moderationRemoveAdmin = ({ addr, channel, reason, userKey }) => async dispatch => {
+export const moderationAction = (action, { addr, channel, reason, userKey}) => async dispatch => {
   const cabalDetails = client.getDetails(addr)
-  cabalDetails.moderation.removeAdmin([[userKey, reason]], { channel, reason } )
+  await cabalDetails.moderation[action](userKey, { channel, reason })
+  setTimeout(() => {
+    const users = cabalDetails.getUsers()
+    dispatch({ type: 'UPDATE_CABAL', addr, users })
+  }, 500)
 }

app/containers/messages.js

@@ -45,6 +45,7 @@ function MessagesContainer (props) {
       </div>
     )
   } else {
+    const defaultSystemName = 'Cabalbot'
     let prevMessage = {}
     return (
       <div className='messages'>
@@ -71,7 +72,6 @@ function MessagesContainer (props) {
           let item = (<div />)
           prevMessage = message
           if (message.type === 'status') {
-            const defaultSystemName = 'Cabalbot'
             item = (
               <div className='messages__item messages__item--system'>
                 <div className='messages__item__avatar'>
@@ -86,6 +86,35 @@ function MessagesContainer (props) {
               </div>
             )
           }
+          if (message.type === 'chat/moderation') {
+            const { role, type, issuerid, receiverid, reason } = message.content
+            const issuer = props.getUsers({ addr: props.addr })[issuerid]
+            const receiver = props.getUsers({ addr: props.addr })[receiverid]
+            const issuerName = issuer && issuer.name ? issuer.name : issuerid.slice(0, 8)
+            const receiverName = receiver && receiver.name ? receiver.name : receiverid.slice(0, 8)
+            item = (
+              <div className='messages__item messages__item--system'>
+                <div className='messages__item__avatar'>
+                  <div className='messages__item__avatar__img'>
+                    <Avatar name={message.key || defaultSystemName} />
+                  </div>
+                </div>
+                <div className='messages__item__metadata'>
+                  <div className='messages__item__metadata__name'>{message.name || defaultSystemName}{renderDate(formattedTime)}</div>
+                  <div className='text'>
+                    Moderation:
+                    {role === 'hide' &&
+                      <span><span onClick={onClickProfile.bind(this, issuer)}>{issuerName}</span> {(type === 'add' ? 'hid' : 'unhid')} <span onClick={onClickProfile.bind(this, receiver)}>{receiverName}</span></span>}
+                    {role !== 'hide' &&
+                      <span><span onClick={onClickProfile.bind(this, issuer)}>{issuerName}</span> {(type === 'add' ? 'added' : 'removed')} <span onClick={onClickProfile.bind(this, receiver)}>{receiverName}</span> as {role}</span>}
+                    {!!reason &&
+                      <span>({reason})</span>
+                    }
+                  </div>
+                </div>
+              </div>
+            )
+          }
           if (message.type === 'chat/text') {
             item = (
               <div className='messages__item'>

app/containers/sidebar.js

@@ -181,7 +181,8 @@ class SidebarScreen extends React.Component {
     const deduplicatedNicks = []
     users && users.forEach((user) => {
       const userIndex = deduplicatedNicks.findIndex((u) => u.name === user.name)
-      if (user.name && userIndex > -1) {
+      const moderated = user.isHidden || user.isAdmin || user.isModerator
+      if (user.name && userIndex > -1 && !moderated) {
         deduplicatedNicks[userIndex].users.push(user)
       } else {
         deduplicatedNicks.push({
@@ -311,6 +312,7 @@ class SidebarScreen extends React.Component {
                 const isAdmin = peer.users.some((u) => u.isAdmin())
                 const isModerator = peer.users.some((u) => u.isModerator())
                 const isHidden = peer.users.some((u) => u.isHidden())
+                const name = isHidden ? peer.name.substring(0, 3) + peer.key.substring(0, 6) : peer.name
                 return (
                   <div
                     key={index}
@@ -327,7 +329,7 @@ class SidebarScreen extends React.Component {
                     </div>
                     <div className={`collection__item__content ${(peer.online && !isHidden) ? 'active' : ''}`}>
                       <span className='name'>
-                        {peer.name || peer.key.substring(0, 6)}
+                        {peer.name ? name : peer.key.substring(0, 6)}
                         {peer.users.length > 1 && <span className='collection__item__count'>({peer.users.length})</span>}
                       </span>
                       {!isAdmin && !isModerator && isHidden && <span className='sigil hidden'>HIDDEN</span>}

app/styles/style.scss

@@ -949,8 +949,6 @@ form {
     border: 2px solid rgba(0, 0, 0, 0.25);
     border-radius: 3px;
     transition: all 0.1s ease-in-out;
-    padding: .5rem 0;
-    min-height: 48px;
 
     &:hover, &:focus {
       border-color: rgba(0, 0, 0, 0.5);
@@ -967,13 +965,13 @@ form {
 
     .composer__input {
       width: 100%;
-      padding: 0 1rem;
     }
 
     .composer__input form {
       width: 100%;
       display: flex;
       align-content: center;
+      padding: 0.5rem;
     }
 
     .composer__input textarea {
@@ -995,7 +993,7 @@ form {
     }
 
     .composer__other {
-      align-self: flex-end;
+      align-self: center;
       display: table-cell;
       width: 3rem;
       height: 1.5rem;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cabal-desktop",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Cabal p2p offline-first desktop application",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack",
@@ -51,7 +51,7 @@
     "@babel/runtime": "^7.7.7",
     "@reduxjs/toolkit": "^1.3.5",
     "babel-runtime": "^6.26.0",
-    "cabal-client": "^6.0.0",
+    "cabal-client": "6.1.0",
     "collect-stream": "^1.2.1",
     "dat-encoding": "^5.0.1",
     "debug": "^4.1.1",

yarn.lock

@@ -2359,10 +2359,10 @@ bulk-write-stream@^1.1.3:
     inherits "^2.0.1"
     readable-stream "^2.1.4"
 
-cabal-client@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cabal-client/-/cabal-client-6.0.0.tgz#081f64f839116e681447dbeb5ac72ee5c649945a"
-  integrity sha512-Fb357yv3TzcEH0fX1crtx2m4Ua+WF0HqFznnu9mEZUaGk8BCKv9Sk+g2QXc2BdqJ59mjlTRvflFio1UzFzfqJw==
+cabal-client@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/cabal-client/-/cabal-client-6.1.0.tgz#5e350c836d5c46bbf55ef032897ed8dd948531e7"
+  integrity sha512-y/8CJBR4+f8MIdwXCfKevYzkV7Jdnb19WDixFValn6U180zKIA4dWkoWaD0B1Kr9PNy2bKLT1/ixG2Tsn76e/g==
   dependencies:
     cabal-core "^13.0.0"
     collect-stream "^1.2.1"