Render organizer message in CallListItem

locale/lists/callList/en.yaml

@@ -9,3 +9,5 @@ item:
         allocated: On-going...
         notReached: Not reached
         reached: Reached
+    organizerMsg:
+        noMessage: Caller did not leave a message

locale/lists/callList/sv.yaml

@@ -9,3 +9,5 @@ item:
         allocated: Pågår...
         notReached: Nåddes inte
         reached: Nåddes
+    organizerMsg:
+        noMessage: Ringaren lämnade inget meddelande

src/actions/call.js

@@ -31,13 +31,13 @@ export function retrieveCalls(page = 0, filters = {}) {
     };
 }
 
-export function retrieveCall(id) {
+export function retrieveCall(id, retrieveMessage = false) {
     return ({ dispatch, getState, z }) => {
         let orgId = getState().org.activeId;
 
         dispatch({
             type: types.RETRIEVE_CALL,
-            meta: { id },
+            meta: { id, retrieveMessage },
             payload: {
                 promise: z.resource('orgs', orgId, 'calls', id).get()
             }

src/components/lists/items/CallListItem.jsx

@@ -1,16 +1,31 @@
+import { connect } from 'react-redux';
 import React from 'react';
 import cx from 'classnames';
 import { FormattedMessage as Msg } from 'react-intl';
+import { retrieveCall } from '../../../actions/call';
 
 import Avatar from '../../misc/Avatar';
 
-
+@connect()
 export default class CallListItem extends React.Component {
     static propTypes = {
         onItemClick: React.PropTypes.func.isRequired,
         data: React.PropTypes.object,
     };
 
+    componentDidUpdate(prevProps) {
+        const call = this.props.data;
+
+        if (this.props.inView && !prevProps.inView) {
+            if (!call || call.message_to_organizer !== undefined) {
+                return;
+            }
+            else if (call.organizer_action_needed) {
+                this.props.dispatch(retrieveCall(call.id, true))
+            }
+        }
+    }
+
     render() {
         let call = this.props.data;
         if (!call) return null;
@@ -19,6 +34,7 @@ export default class CallListItem extends React.Component {
         let stateClass = "CallListItem-state";
         let stateLabel = null;
         let actionStatus = null;
+        let organizerMessage = null;
 
         switch (call.state) {
             case 0:
@@ -41,7 +57,34 @@ export default class CallListItem extends React.Component {
             actionStatus = "needed";
         }
 
-         let actionClassNames  = cx('CallListItem-action', actionStatus );
+        if (actionStatus) {
+            const messageClassNames = cx('CallListItem-organizerMsg', {
+                loading: call.message_to_organizer === undefined,
+                empty: call.message_to_organizer === null,
+            });
+
+            let messageContent = null;
+
+            if (call.message_to_organizer === null) {
+                messageContent = (
+                    <Msg tagName="span"
+                        id="lists.callList.item.organizerMsg.noMessage"/>
+                );
+            }
+            else if (call.message_to_organizer && call.message_to_organizer.length > 180) {
+                messageContent = call.message_to_organizer.substr(0, 180) + '...';
+            }
+            else {
+                messageContent = call.message_to_organizer;
+            }
+
+            organizerMessage = (
+                <span className={ messageClassNames }>
+                    { messageContent }</span>
+            );
+        }
+
+        let actionClassNames  = cx('CallListItem-action', actionStatus );
 
         return (
             <div className="CallListItem"
@@ -66,6 +109,7 @@ export default class CallListItem extends React.Component {
                         </span>
                         <span className="CallListItem-caller">
                             { call.caller.name }</span>
+                        { organizerMessage }
                     </div>
                     <div className="CallListItem-callStatuses"/>
                     <div className="CallListItem-organizerStatuses"/>

src/components/lists/items/CallListItem.scss

@@ -17,10 +17,6 @@
     .CallListItem-content {
         @include col(11,12);
         padding: 1em;
-
-        @include medium-screen {
-            @include col(12,12);
-        }
     }
 
     .CallListItem-target {
@@ -107,6 +103,38 @@
                 @include icon($fa-var-phone);
             }
         }
+
+        .CallListItem-organizerMsg {
+            @include col(12,12, $align:middle, $first:true);
+            display: flex;
+            align-items: baseline;
+
+            @include small-screen {
+                margin-top: 0.5em;
+                padding: 0;
+            }
+
+            &:before {
+                @include icon($fa-var-sticky-note-o);
+                min-width: 1.6em;
+            }
+
+            &.loading {
+                &::after {
+                    display: inline-block;
+                    animation: CallListItem-organizerMsg-loadingAnimation steps(1, end) 1s infinite;
+                    content: '.';
+                }
+            }
+
+            &.empty {
+                span {
+                    font-size: inherit;
+                    font-style: italic;
+                    color: #666666;
+                }
+            }
+        }
     }
 
     .CallListItem-action {
@@ -185,3 +213,10 @@
         }
     }
 }
+
+@keyframes CallListItem-organizerMsg-loadingAnimation {
+    0%   { content: '.'; }
+    33%  { content: '..'; }
+    66%  { content: '...'; }
+    99%  { content: '.'; }
+}

src/store/calls.js

@@ -39,9 +39,11 @@ export default function calls(state = null, action) {
             });
 
         case types.RETRIEVE_CALL + '_PENDING':
+            const messageIsPending = action.meta.retrieveMessage;
+
             return Object.assign({
                 callList: updateOrAddListItem(state.callList,
-                    action.meta.id, null, { isPending: true }),
+                    action.meta.id, null, { isPending: !messageIsPending }),
             });
 
         case types.RETRIEVE_CALL + '_FULFILLED':