ui/src/components/private-message.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Link } from 'inferno-router';
   3 import {
   4   PrivateMessage as PrivateMessageI,
   5   EditPrivateMessageForm,
   6 } from '../interfaces';
   7 import { WebSocketService, UserService } from '../services';
   8 import {
   9   mdToHtml,
  10   pictshareAvatarThumbnail,
  11   showAvatars,
  12   toast,
  13 } from '../utils';
  14 import { MomentTime } from './moment-time';
  15 import { PrivateMessageForm } from './private-message-form';
  16 import { i18n } from '../i18next';
  17 import { T } from 'inferno-i18next';
  18
  19 interface PrivateMessageState {
  20   showReply: boolean;
  21   showEdit: boolean;
  22   collapsed: boolean;
  23   viewSource: boolean;
  24 }
  25
  26 interface PrivateMessageProps {
  27   privateMessage: PrivateMessageI;
  28 }
  29
  30 export class PrivateMessage extends Component<
  31   PrivateMessageProps,
  32   PrivateMessageState
  33 > {
  34   private emptyState: PrivateMessageState = {
  35     showReply: false,
  36     showEdit: false,
  37     collapsed: false,
  38     viewSource: false,
  39   };
  40
  41   constructor(props: any, context: any) {
  42     super(props, context);
  43
  44     this.state = this.emptyState;
  45     this.handleReplyCancel = this.handleReplyCancel.bind(this);
  46     this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
  47       this
  48     );
  49     this.handlePrivateMessageEdit = this.handlePrivateMessageEdit.bind(this);
  50   }
  51
  52   get mine(): boolean {
  53     return UserService.Instance.user.id == this.props.privateMessage.creator_id;
  54   }
  55
  56   render() {
  57     let message = this.props.privateMessage;
  58     return (
  59       <div class="mb-2">
  60         <div>
  61           <ul class="list-inline mb-0 text-muted small">
  62             <li className="list-inline-item">
  63               {this.mine ? i18n.t('to') : i18n.t('from')}
  64             </li>
  65             <li className="list-inline-item">
  66               <Link
  67                 className="text-info"
  68                 to={
  69                   this.mine
  70                     ? `/u/${message.recipient_name}`
  71                     : `/u/${message.creator_name}`
  72                 }
  73               >
  74                 {(this.mine
  75                   ? message.recipient_avatar
  76                   : message.creator_avatar) &&
  77                   showAvatars() && (
  78                     <img
  79                       height="32"
  80                       width="32"
  81                       src={pictshareAvatarThumbnail(
  82                         this.mine
  83                           ? message.recipient_avatar
  84                           : message.creator_avatar
  85                       )}
  86                       class="rounded-circle mr-1"
  87                     />
  88                   )}
  89                 <span>
  90                   {this.mine ? message.recipient_name : message.creator_name}
  91                 </span>
  92               </Link>
  93             </li>
  94             <li className="list-inline-item">
  95               <span>
  96                 <MomentTime data={message} />
  97               </span>
  98             </li>
  99             <li className="list-inline-item">
 100               <div
 101                 className="pointer text-monospace"
 102                 onClick={linkEvent(this, this.handleMessageCollapse)}
 103               >
 104                 {this.state.collapsed ? '[+]' : '[-]'}
 105               </div>
 106             </li>
 107           </ul>
 108           {this.state.showEdit && (
 109             <PrivateMessageForm
 110               privateMessage={message}
 111               onEdit={this.handlePrivateMessageEdit}
 112               onCancel={this.handleReplyCancel}
 113             />
 114           )}
 115           {!this.state.showEdit && !this.state.collapsed && (
 116             <div>
 117               {this.state.viewSource ? (
 118                 <pre>{this.messageUnlessRemoved}</pre>
 119               ) : (
 120                 <div
 121                   className="md-div"
 122                   dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
 123                 />
 124               )}
 125               <ul class="list-inline mb-1 text-muted small font-weight-bold">
 126                 {!this.mine && (
 127                   <>
 128                     <li className="list-inline-item">
 129                       <span
 130                         class="pointer"
 131                         onClick={linkEvent(this, this.handleMarkRead)}
 132                       >
 133                         {message.read
 134                           ? i18n.t('mark_as_unread')
 135                           : i18n.t('mark_as_read')}
 136                       </span>
 137                     </li>
 138                     <li className="list-inline-item">
 139                       <span
 140                         class="pointer"
 141                         onClick={linkEvent(this, this.handleReplyClick)}
 142                       >
 143                         <T i18nKey="reply">#</T>
 144                       </span>
 145                     </li>
 146                   </>
 147                 )}
 148                 {this.mine && (
 149                   <>
 150                     <li className="list-inline-item">
 151                       <span
 152                         class="pointer"
 153                         onClick={linkEvent(this, this.handleEditClick)}
 154                       >
 155                         <T i18nKey="edit">#</T>
 156                       </span>
 157                     </li>
 158                     <li className="list-inline-item">
 159                       <span
 160                         class="pointer"
 161                         onClick={linkEvent(this, this.handleDeleteClick)}
 162                       >
 163                         {!message.deleted
 164                           ? i18n.t('delete')
 165                           : i18n.t('restore')}
 166                       </span>
 167                     </li>
 168                   </>
 169                 )}
 170                 <li className="list-inline-item">•</li>
 171                 <li className="list-inline-item">
 172                   <span
 173                     className="pointer"
 174                     onClick={linkEvent(this, this.handleViewSource)}
 175                   >
 176                     <T i18nKey="view_source">#</T>
 177                   </span>
 178                 </li>
 179               </ul>
 180             </div>
 181           )}
 182         </div>
 183         {this.state.showReply && (
 184           <PrivateMessageForm
 185             params={{
 186               recipient_id: this.props.privateMessage.creator_id,
 187             }}
 188             onCreate={this.handlePrivateMessageCreate}
 189           />
 190         )}
 191         {/* A collapsed clearfix */}
 192         {this.state.collapsed && <div class="row col-12"></div>}
 193       </div>
 194     );
 195   }
 196
 197   get messageUnlessRemoved(): string {
 198     let message = this.props.privateMessage;
 199     return message.deleted ? `*${i18n.t('deleted')}*` : message.content;
 200   }
 201
 202   handleReplyClick(i: PrivateMessage) {
 203     i.state.showReply = true;
 204     i.setState(i.state);
 205   }
 206
 207   handleEditClick(i: PrivateMessage) {
 208     i.state.showEdit = true;
 209     i.setState(i.state);
 210   }
 211
 212   handleDeleteClick(i: PrivateMessage) {
 213     let form: EditPrivateMessageForm = {
 214       edit_id: i.props.privateMessage.id,
 215       deleted: !i.props.privateMessage.deleted,
 216     };
 217     WebSocketService.Instance.editPrivateMessage(form);
 218   }
 219
 220   handleReplyCancel() {
 221     this.state.showReply = false;
 222     this.state.showEdit = false;
 223     this.setState(this.state);
 224   }
 225
 226   handleMarkRead(i: PrivateMessage) {
 227     let form: EditPrivateMessageForm = {
 228       edit_id: i.props.privateMessage.id,
 229       read: !i.props.privateMessage.read,
 230     };
 231     WebSocketService.Instance.editPrivateMessage(form);
 232   }
 233
 234   handleMessageCollapse(i: PrivateMessage) {
 235     i.state.collapsed = !i.state.collapsed;
 236     i.setState(i.state);
 237   }
 238
 239   handleViewSource(i: PrivateMessage) {
 240     i.state.viewSource = !i.state.viewSource;
 241     i.setState(i.state);
 242   }
 243
 244   handlePrivateMessageEdit() {
 245     this.state.showEdit = false;
 246     this.setState(this.state);
 247   }
 248
 249   handlePrivateMessageCreate() {
 250     this.state.showReply = false;
 251     this.setState(this.state);
 252     toast(i18n.t('message_sent'));
 253   }
 254 }