feat(UI/picker): use a buffer to edit the server message

UI/src/components/role-picker/actions.js

@@ -69,7 +69,8 @@ export const constructView = id => (dispatch, getState) => {
       rolesSelected: selected,
       originalRolesSelected: selected,
       hidden: false,
-      isEditingMessage: false
+      isEditingMessage: false,
+      messageBuffer: ''
     }
   })
 
@@ -112,26 +113,36 @@ export const updateRoles = roles => ({
   data: roles
 })
 
-export const openMessageEditor = ({
+export const openMessageEditor = id => (dispatch, getState) => {
-  type: Symbol.for('rp: set message editor state'),
-  data: true
-})
-
-export const saveServerMessage = id => async (dispatch, getState) => {
   const message = getState().servers.getIn([id, 'message'])
-
+  dispatch(editServerMessage(id, message))
-  await superagent.patch(`/api/server/${id}`).send({ message })
-
   dispatch({
     type: Symbol.for('rp: set message editor state'),
-    data: false
+    data: true
   })
 }
 
-export const editServerMessage = (id, message) => ({
+export const saveServerMessage = id => async (dispatch, getState) => {
+  const message = getState().rolePicker.get('messageBuffer')
+
+  await superagent.patch(`/api/server/${id}`).send({ message })
+
+  dispatch(closeMessageEditor)
+  dispatch({
     type: Symbol.for('server: edit message'),
     data: {
       id,
       message
     }
+  })
+}
+
+export const editServerMessage = (id, message) => ({
+  type: Symbol.for('rp: edit message buffer'),
+  data: message
+})
+
+export const closeMessageEditor = ({
+  type: Symbol.for('rp: set message editor state'),
+  data: false
 })

UI/src/components/role-picker/index.js

@@ -31,6 +31,10 @@ class RolePicker extends Component {
     }
   }
 
+  get serverId () {
+    return this.props.server.get('id')
+  }
+
   isSelected = id => {
     return this.props.data.getIn([ 'rolesSelected', id ])
   }
@@ -42,23 +46,29 @@ class RolePicker extends Component {
 
   editServerMessage = (e) => {
     const { dispatch } = this.props
-    dispatch(Actions.editServerMessage(this.props.server.get('id'), e.target.value))
+    dispatch(Actions.editServerMessage(this.serverId, e.target.value))
   }
 
   saveServerMessage = (e) => {
     const { dispatch } = this.props
-    dispatch(Actions.saveServerMessage(this.props.server.get('id')))
+    dispatch(Actions.saveServerMessage(this.serverId))
   }
 
   openMessageEditor = () => {
     const { dispatch } = this.props
-    dispatch(Actions.openMessageEditor)
+    dispatch(Actions.openMessageEditor(this.serverId))
+  }
+
+  closeMessageEditor = () => {
+    const { dispatch } = this.props
+    dispatch(Actions.closeMessageEditor) 
   }
 
   renderServerMessage (server) {
     const isEditing = this.props.data.get('isEditingMessage')
     const roleManager = server.getIn(['perms', 'canManageRoles'])
     const msg = server.get('message')
+    const msgBuffer = this.props.data.get('messageBuffer')
 
     console.log(msg, roleManager, isEditing, this.props.data.toJS())
 
@@ -83,9 +93,10 @@ class RolePicker extends Component {
       return <section>
         <div className="role-picker__header">
           <h3>Server Message</h3>
-          <div uk-tooltip='' title='Save Server Message' onClick={this.saveServerMessage} style={{color: 'var(--c-green)'}} uk-icon="icon: check; scale: 1.1" />
+          <div uk-tooltip='' title='Save Server Message' onClick={this.saveServerMessage} style={{cursor: 'pointer', color: 'var(--c-green)'}} uk-icon="icon: check; ratio: 1.4" />
+          <div uk-tooltip='' title='Discard Edits' onClick={this.closeMessageEditor} style={{cursor: 'pointer', color: 'var(--c-red)', marginLeft: 10}} uk-icon="icon: trash; ratio: 0.9" />
         </div>
-        <textarea className="uk-width-1-2 uk-textarea role-picker__msg-editor" rows="3" onChange={this.editServerMessage} value={msg} />
+        <textarea className="uk-width-1-2 uk-textarea role-picker__msg-editor" rows="3" onChange={this.editServerMessage} value={msgBuffer} />
       </section>
     }
 

UI/src/reducers/role-picker.js

@@ -4,6 +4,7 @@ const initialState = Map({
   hidden: true, // should the view be hidden?
   // emptyRoles: true, // helps derender roles so there's no visible element state change
   isEditingMessage: false,
+  messageBuffer: '',
   viewMap: OrderedMap({}), // roles in categories
   originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected
   rolesSelected: Map({}) // Map<role id, bool> -- new roles for diffing
@@ -30,9 +31,10 @@ export default (state = initialState, { type, data }) => {
       return state.set('rolesSelected', state.get('originalRolesSelected'))
 
     case Symbol.for('rp: set message editor state'):
-      console.log(state.set('isEditingMessage', data))
       return state.set('isEditingMessage', data)
     
+    case Symbol.for('rp: edit message buffer'):
+      return state.set('messageBuffer', data)
     // case Symbol.for('rp: zero role picker'):
       // return initialState