Conditional rendering of avatars

2020-02-25 17:26:45 +11:00 · 2020-02-25 17:26:45 +11:00 · 03df4891bd
parent 752ee8a614
commit 03df4891bd
4 changed files with 129 additions and 56 deletions
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@ -77,6 +77,7 @@ export interface Props {
  authorProfileName?: string;
  /** Note: this should be formatted for display */
  authorPhoneNumber: string;
+  firstMessageOfSeries: boolean;
  authorColor?: ColorType;
  conversationType: 'group' | 'direct';
  attachments?: Array<AttachmentType>;
@ -664,6 +665,7 @@ export class Message extends React.PureComponent<Props, State> {
      authorName,
      authorPhoneNumber,
      authorProfileName,
+      firstMessageOfSeries,
      collapseMetadata,
      senderIsModerator,
      authorColor,
@ -673,29 +675,31 @@ export class Message extends React.PureComponent<Props, State> {
      onShowUserDetails,
    } = this.props;

-    if (
-      collapseMetadata ||
-      conversationType !== 'group' ||
-      direction === 'outgoing'
-    ) {
-      return;
-    }
+    const shouldRenderAvatar =
+      (firstMessageOfSeries ||
+      ! collapseMetadata ||
+      conversationType === 'group') &&
+      direction === 'incoming';

    return (
      <div className="module-message__author-avatar">
-        <Avatar
-          avatarPath={authorAvatarPath}
-          color={authorColor}
-          conversationType="direct"
-          i18n={i18n}
-          name={authorName}
-          phoneNumber={authorPhoneNumber}
-          profileName={authorProfileName}
-          size={36}
-          onAvatarClick={() => {
-            onShowUserDetails(authorPhoneNumber);
-          }}
-        />
+        <>
+          {shouldRenderAvatar && (
+            <Avatar
+              avatarPath={authorAvatarPath}
+              color={authorColor}
+              conversationType="direct"
+              i18n={i18n}
+              name={authorName}
+              phoneNumber={authorPhoneNumber}
+              profileName={authorProfileName}
+              size={36}
+              onAvatarClick={() => {
+                onShowUserDetails(authorPhoneNumber);
+              }}
+            />
+          )}
+        </>
        {senderIsModerator && (
          <div className="module-avatar__icon--crown-wrapper">
            <div className="module-avatar__icon--crown" />
--- a/ts/components/conversation/TimerNotification.tsx
+++ b/ts/components/conversation/TimerNotification.tsx
@ -6,6 +6,7 @@ import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';

 import { missingCaseError } from '../../util/missingCaseError';
+import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';

 interface Props {
  type: 'fromOther' | 'fromMe' | 'fromSync';
@ -69,12 +70,12 @@ export class TimerNotification extends React.Component<Props> {
    return (
      <div className="module-timer-notification">
        <div className="module-timer-notification__icon-container">
-          <div
-            className={classNames(
-              'module-timer-notification__icon',
-              disabled ? 'module-timer-notification__icon--disabled' : null
-            )}
-          />
+          { !disabled && (
+            <SessionIcon
+              iconType={SessionIconType.Stopwatch}
+              iconSize={SessionIconSize.Large}
+            />
+          )}
          <div className="module-timer-notification__icon-label">
            {timespan}
          </div>
--- a/ts/components/session/SessionConversation.tsx
+++ b/ts/components/session/SessionConversation.tsx
@ -5,8 +5,10 @@ import { SessionCompositionBox } from './SessionCompositionBox';
 import { SessionProgress } from './SessionProgress'

 import { Message } from '../conversation/Message';
+import { FriendRequest } from '../conversation/FriendRequest';
 import { TimerNotification } from '../conversation/TimerNotification';

+
 import { SessionSpinner } from './SessionSpinner';
 import { SessionScrollButton } from './SessionScrollButton';

@ -50,6 +52,7 @@ export class SessionConversation extends React.Component<any, State> {

    this.renderMessage = this.renderMessage.bind(this);
    this.renderTimerNotification = this.renderTimerNotification.bind(this);
+    this.renderFriendRequest = this.renderFriendRequest.bind(this);

    this.messagesEndRef = React.createRef();
  }
@ -71,7 +74,7 @@ export class SessionConversation extends React.Component<any, State> {

  public async componentWillReceiveProps() {
    const { conversationKey } = this.state;
-
+    await this.getMessages(conversationKey);
  }

  render() {
@ -84,7 +87,6 @@ export class SessionConversation extends React.Component<any, State> {

    console.log(`[vince] Loading: `, loading);
    console.log(`[vince] My conversation key is: `, conversationKey);
-    console.log(`[vince][messages]`, messages);


    // TMEPORARY SOLUTION TO GETTING CONVERSATION UNTIL
@ -131,26 +133,26 @@ export class SessionConversation extends React.Component<any, State> {

  public renderMessages() {
    const { messages } = this.state;
-  
-    // FIXME PAY ATTENTION; ONLY RENDER MESSAGES THAT ARE VISIBLE
+    
    return (
      <>{
        messages.map((message: any) => {
          const messageProps = message.propsForMessage;
          const timerProps = message.propsForTimerNotification;
+          const friendRequestProps = message.propsForFriendRequest;
          const attachmentProps = message.propsForAttachment;
+          const groupNotificationProps = message.propsForGroupNotification;
          const quoteProps = message.propsForQuote;
          
-          console.log(`[vince][props] messageProps`, messageProps);
-          console.log(`[vince][props] timerProps`, timerProps);
-          console.log(`[vince][props] attachmentProps`, attachmentProps);
-          console.log(`[vince][props] quoteProps`, quoteProps);
-
          let item;
-          item = messageProps     ? this.renderMessage(messageProps) : item;
+          // firstMessageOfSeries tells us to render the avatar only for the first message
+          // in a series of messages from the same user
+          item = messageProps     ? this.renderMessage(messageProps, message.firstMessageOfSeries) : item;
          item = timerProps       ? this.renderTimerNotification(timerProps) : item;
-          item = attachmentProps  ? this.renderMessage(timerProps) : item;
-          item = quoteProps       ? this.renderMessage(timerProps) : item;
+          item = quoteProps       ? this.renderMessage(timerProps, message.firstMessageOfSeries, quoteProps) : item;
+          item = friendRequestProps
+            ? this.renderFriendRequest(friendRequestProps): item;
+          // item = attachmentProps  ? this.renderMessage(timerProps) : item;

          return item;
        })
@ -222,33 +224,73 @@ export class SessionConversation extends React.Component<any, State> {
      { limit, MessageCollection: window.Whisper.MessageCollection },
    );

-    console.log(`[vince][messages] MessageSet!!!`, messageSet);32
+    // Set first member of series here.
+    const messageModels = messageSet.models;
+    let messages = [];
+    let previousSender;
+    for (let i = 0; i < messageModels.length; i++){
+      let firstMessageOfSeries = true;
+      if (i > 0 && previousSender === messageModels[i].authorPhoneNumber){
+        firstMessageOfSeries = false;
+      }
+      messages.push({...messageModels[i], firstMessageOfSeries});
+      previousSender = messageModels[i].authorPhoneNumber;
+    }
+
+    console.log(`[vince][messages] Messages`, messages);

-    const messages = messageSet.models;
    this.setState({ messages });
  }

-  public renderMessage(messageProps: any) {
+  public renderMessage(messageProps: any, firstMessageOfSeries: boolean, quoteProps?: any) {
+
    return (
      <Message
-        text = {messageProps.text || ''}
-        direction = {messageProps.direction}
-        timestamp = {messageProps.timestamp}
        i18n = {window.i18n}
-        authorPhoneNumber = {messageProps.source}
-        conversationType = {messageProps.conversationType}
-        previews = {messageProps.previews}
-        isExpired = {messageProps.isExpired}
-        isDeletable = {messageProps.isDeletable}
-        convoId = {messageProps.convoId}
-        selected = {messageProps.selected}
-        multiSelectMode = {messageProps.multiSelectMode}
-        onSelectMessage = {messageProps.onSelectMessage}
-        onSelectMessageUnchecked = {messageProps.onSelectMessageUnchecked}
-        onShowDetail = {messageProps.onShowDetail}
-        onShowUserDetails = {messageProps.onShowUserDetails}
+        text = {messageProps?.text}
+        direction = {messageProps?.direction}
+        timestamp = {messageProps?.timestamp}
+        attachments = {messageProps?.attachments}
+        authorAvatarPath = {messageProps?.authorAvatarPath}
+        authorColor = {messageProps?.authorColor}
+        authorName = {messageProps?.authorName}
+        authorPhoneNumber = {messageProps?.authorPhoneNumber}
+        firstMessageOfSeries = {firstMessageOfSeries}
+        authorProfileName = {messageProps?.authorProfileName}
+        contact = {messageProps?.contact}
+        conversationType = {messageProps?.conversationType}
+        convoId = {messageProps?.convoId}
+        expirationLength = {messageProps?.expirationLength}
+        expirationTimestamp = {messageProps?.expirationTimestamp}
+        id = {messageProps?.id}
+        isDeletable = {messageProps?.isDeletable}
+        isExpired = {messageProps?.isExpired}
+        isModerator = {messageProps?.isModerator}
+        isPublic = {messageProps?.isPublic}
+        isRss = {messageProps?.isRss}
+        multiSelectMode = {messageProps?.multiSelectMode}
+        onBanUser = {messageProps?.onBanUser}
+        onClickAttachment = {messageProps?.onClickAttachment}
+        onClickLinkPreview = {messageProps?.onClickLinkPreview}
+        onCopyPubKey = {messageProps?.onCopyPubKey}
+        onCopyText = {messageProps?.onCopyText}
+        onDelete = {messageProps?.onDelete}
+        onDownload = {messageProps?.onDownload}
+        onReply = {messageProps?.onReply}
+        onRetrySend = {messageProps?.onRetrySend}
+        onSelectMessage = {messageProps?.onSelectMessage}
+        onSelectMessageUnchecked = {messageProps?.onSelectMessageUnchecked}
+        onShowDetail = {messageProps?.onShowDetail}
+        onShowUserDetails = {messageProps?.onShowUserDetails}
+        previews = {messageProps?.previews}
+        quote = {quoteProps || undefined}
+        selected = {messageProps?.selected}
+        senderIsModerator = {messageProps?.senderIsModerator}
+        status = {messageProps?.status}
+        textPending = {messageProps?.textPending}
      />
    );
+
  }

  public renderTimerNotification(timerProps: any) {
@ -264,5 +306,25 @@ export class SessionConversation extends React.Component<any, State> {
      />
    );
  }
+
+  public renderFriendRequest(friendRequestProps: any){
+    return (
+      <FriendRequest
+        text={friendRequestProps.text}
+        direction={friendRequestProps.direction}
+        status={friendRequestProps.status}
+        friendStatus={friendRequestProps.friendStatus}
+        i18n={window.i18n}
+        isBlocked={friendRequestProps.isBlocked}
+        timestamp={friendRequestProps.timestamp}
+        onAccept={friendRequestProps.onAccept}
+        onDecline={friendRequestProps.onDecline}
+        onDeleteConversation={friendRequestProps.onDeleteConversation}
+        onRetrySend={friendRequestProps.onRetrySend}
+        onBlockUser={friendRequestProps.onBlockUser}
+        onUnblockUser={friendRequestProps.onUnblockUser}
+      />
+    );
+  }
 }

--- a/ts/components/session/icon/Icons.tsx
+++ b/ts/components/session/icon/Icons.tsx
@ -27,6 +27,7 @@ export enum SessionIconType {
  Search = 'search',
  Send = 'send',
  Star = 'star',
+  Stopwatch = 'stopwatch',
  QR = 'qr',
  Users = 'users',
  Upload = 'upload',
@ -180,6 +181,11 @@ export const icons = {
      'M9.80779568,8.70262392 C9.66225594,8.99747141 9.38107073,9.20193068 9.05571654,9.24948607 L4.1495,9.9666031 L7.69882113,13.4236419 C7.93469487,13.6533829 8.0423575,13.9845141 7.98669695,14.3090433 L7.14926913,19.1916734 L11.5356371,16.8849265 C11.8270199,16.7316912 12.1751567,16.7316912 12.4665396,16.8849265 L16.8529075,19.1916734 L16.0154797,14.3090433 C15.9598192,13.9845141 16.0674818,13.6533829 16.3033555,13.4236419 L19.8526767,9.9666031 L14.9464601,9.24948607 C14.6211059,9.20193068 14.3399207,8.99747141 14.194381,8.70262392 L12.0010883,4.25925434 L9.80779568,8.70262392 Z M8.24682697,7.3464661 L11.104381,1.55737608 C11.4712164,0.814207972 12.5309603,0.814207972 12.8977957,1.55737608 L15.7553497,7.3464661 L22.1457165,8.28051393 C22.9656312,8.40035674 23.2924147,9.40819801 22.6988211,9.98635811 L18.0756101,14.4893656 L19.166697,20.8509567 C19.3068155,21.6679189 18.4492666,22.2908819 17.7156371,21.9050735 L12.0010883,18.8998497 L6.28653961,21.9050735 C5.55291004,22.2908819 4.69536119,21.6679189 4.83547972,20.8509567 L5.92656655,14.4893656 L1.30335554,9.98635811 C0.709762006,9.40819801 1.03654545,8.40035674 1.85646012,8.28051393 L8.24682697,7.3464661',
    viewBox: '0 0 22 21',
  },
+  [SessionIconType.Stopwatch]: {
+    path:
+      'M11.74 4.64L12.96 5.22L14.06 6L14.56 6.49L14.5 6.21L14.57 5.83L14.79 5.5L15.5 4.79L15.83 4.57L16.21 4.5L16.58 4.57L16.91 4.79L17.13 5.12L17.21 5.5L17.13 5.88L16.91 6.21L16.21 6.91L15.88 7.13L15.5 7.21L15.14 7.14L15.78 8.04L16.36 9.26L16.72 10.59L16.85 12L16.72 13.41L16.36 14.74L15.78 15.96L15 17.06L14.06 18L12.96 18.78L11.74 19.36L10.41 19.72L9 19.85L7.59 19.72L6.26 19.36L5.04 18.78L3.94 18L3 17.06L2.22 15.96L1.64 14.74L1.28 13.41L1.15 12L1.28 10.59L1.64 9.26L2.22 8.04L3 6.94L3.94 6L5.04 5.22L6.26 4.64L7.59 4.28L9 4.15L10.41 4.28L11.74 4.64ZM11.75 0.47L11.94 0.73L12 1L11.92 1.39L11.71 1.71L11.39 1.92L11 2L10 2L10 4L8 4L8 2L7 2L6.61 1.92L6.29 1.71L6.08 1.39L6 1L6.08 0.61L6.29 0.29L6.61 0.08L7 0L11 0L11.44 0.23L11.75 0.47Z M10 13C10 13.55 9.55 14 9 14C9 14 9 14 9 14C8.45 14 8 13.55 8 13C8 12.8 8 11.2 8 11C8 10.45 8.45 10 9 10C9 10 9 10 9 10C9.55 10 10 10.45 10 11C10 11.4 10 12.8 10 13Z',
+    viewBox: '0 0 21 21',
+  },
  [SessionIconType.QR]: {
    path:
      'M0 0v170h170V0H0zm130 130H40V40h90v90z M65 65h40v40H65zM342 0v170h170V0H342zm130 130h-90V40h90v90z M407 65h40v40h-40zM0 342v170h170V342H0zm130 130H40v-90h90v90z M65 407h40v40H65zM40 197h40v40H40zM120 277v-40H80v40h39v40h40v-40zM280 77h40v40h-40zM200 40h40v77h-40zM240 0h40v40h-40zM240 117v40h-40v40h80v-80zM280 355v-39h-40v-79h-40v80h40v39h40v39h80v-40z M280 197h40v80h-40zM472 236v-39h-73v40h-39v40h40v39h112v-80h-40zm0 40h-72v-39h72v39zM472 355h40v80h-40zM320 277h40v40h-40zM360 395h40v40h-40zM400 355h40v40h-40zM400 435v77h40v-37h32v-40zM200 356h40v76h-40zM320 472v-40h-80v80h40v-40h39v40h40v-40zM120 197h80v40h-80zM0 237h40v80H0z',