Channel preview supports polls, quote poll preview

Author: szuperaz

angular.json

@@ -13,7 +13,8 @@
         "@schematics/angular:component": {
           "style": "scss",
           "inlineStyle": true,
-          "export": true
+          "export": true,
+          "changeDetection": "OnPush"
         }
       },
       "root": "projects/stream-chat-angular",
@@ -219,8 +220,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss",
-          "changeDetection": "OnPush"
+          "style": "scss"
         },
         "@schematics/angular:application": {
           "strict": true

projects/sample-app/src/app/app.component.html

@@ -55,6 +55,19 @@
   <app-emoji-picker [emojiInput$]="emojiInput$"></app-emoji-picker>
 </ng-template>
 
-<ng-template #pollTemplate let-pollId="pollId" let-messageId="messageId">
-  <stream-poll [pollId]="pollId" [messageId]="messageId"> </stream-poll>
+<ng-template
+  #pollTemplate
+  let-pollId="pollId"
+  let-messageId="messageId"
+  let-isQuote="isQuote"
+>
+  <ng-container *ngIf="isQuote; else poll">
+    <stream-poll-preview
+      [pollId]="pollId"
+      [messageId]="messageId"
+    ></stream-poll-preview>
+  </ng-container>
+  <ng-template #poll>
+    <stream-poll [pollId]="pollId" [messageId]="messageId"> </stream-poll>
+  </ng-template>
 </ng-template>

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts

@@ -169,6 +169,8 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
         ) || message.text;
     } else if (message?.attachments && message.attachments.length) {
       this.latestMessageText = 'streamChat.🏙 Attachment...';
+    } else if (message?.poll_id) {
+      this.latestMessageText = `📊 ${message.poll?.name}`;
     }
     if (this.latestMessage && this.latestMessage.type === 'regular') {
       this.latestMessageTime = isOnSeparateDate(

projects/stream-chat-angular/src/lib/message-input/message-input.component.html

@@ -91,6 +91,23 @@
               [attachments]="quotedMessageAttachments"
               [messageId]="quotedMessage.id"
             ></stream-attachment-list>
+            <ng-container
+              *ngIf="
+                quotedMessage?.poll_id &&
+                (customTemplatesService.pollTemplate$ | async)
+              "
+            >
+              <ng-container
+                *ngTemplateOutlet="
+                  (customTemplatesService.pollTemplate$ | async)!;
+                  context: {
+                    pollId: quotedMessage?.poll_id,
+                    messageId: quotedMessage?.id,
+                    isQuote: true
+                  }
+                "
+              ></ng-container>
+            </ng-container>
             <div class="str-chat__quoted-message-text">
               <ng-container
                 *ngTemplateOutlet="

projects/stream-chat-angular/src/lib/message/message.component.html

@@ -199,7 +199,11 @@
               <ng-container
                 *ngTemplateOutlet="
                   (customTemplatesService.pollTemplate$ | async)!;
-                  context: { pollId: message?.poll_id, messageId: message?.id }
+                  context: {
+                    pollId: message?.poll_id,
+                    messageId: message?.id,
+                    isQuote: false
+                  }
                 "
               ></ng-container>
             </ng-container>
@@ -380,6 +384,23 @@
             "
           ></ng-container>
         </ng-container>
+        <ng-container
+          *ngIf="
+            message?.quoted_message?.poll_id &&
+            (customTemplatesService.pollTemplate$ | async)
+          "
+        >
+          <ng-container
+            *ngTemplateOutlet="
+              (customTemplatesService.pollTemplate$ | async)!;
+              context: {
+                pollId: message?.quoted_message?.poll_id,
+                messageId: message?.quoted_message?.id,
+                isQuote: true
+              }
+            "
+          ></ng-container>
+        </ng-container>
         <ng-container *ngIf="message?.quoted_message">
           <ng-container
             *ngTemplateOutlet="

projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.html

@@ -123,8 +123,11 @@
   <stream-notification-list></stream-notification-list>
 </ng-template>
 <ng-template #endVote>
-  <div class="str-chat__dialog">
-    <div class="str-chat__dialog__body str-chat-angular__dialog-body">
+  <div
+    class="str-chat__dialog str-chat__dialog--prompt str-chat__modal__end-vote"
+  >
+    <div class="str-chat__dialog__body">
+      <div class="str-chat__dialog__title" translate>End poll</div>
       <div class="str-chat__dialog__prompt" translate>
         After a poll is closed, no more votes can be cast
       </div>

projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.html

@@ -1 +1,7 @@
-<p>poll-preview works!</p>
+<div
+  class="str-chat__quoted-poll-preview"
+  [class.str-chat__quoted-poll-preview--closed]="isClosed"
+>
+  <div class="str-chat__quoted-poll-preview__icon">📊</div>
+  <div class="str-chat__quoted-poll-preview__name">{{ name }}</div>
+</div>

projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.ts

@@ -1,8 +1,33 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BasePollComponent } from '../base-poll.component';
+import { Poll } from 'stream-chat';
 
 @Component({
   selector: 'stream-poll-preview',
   templateUrl: './poll-preview.component.html',
   styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PollPreviewComponent {}
+export class PollPreviewComponent extends BasePollComponent {
+  name = '';
+  isClosed = false;
+
+  protected stateStoreSelector(
+    poll: Poll,
+    markForCheck: () => void
+  ): () => void {
+    const unsubscribe = poll.state.subscribeWithSelector(
+      (state) => ({
+        name: state.name,
+        is_closed: state.is_closed,
+      }),
+      (state) => {
+        this.name = state.name;
+        this.isClosed = state.is_closed ?? false;
+        markForCheck();
+      }
+    );
+
+    return unsubscribe;
+  }
+}

projects/stream-chat-angular/src/public-api.ts

@@ -100,3 +100,4 @@ export * from './lib/polls/poll-actions/poll-results/poll-vote/poll-vote.compone
 export * from './lib/polls/poll-actions/poll-answers-list/poll-answers-list.component';
 export * from './lib/polls/poll-actions/upsert-answer/upsert-answer.component';
 export * from './lib/polls/poll-actions/add-option/add-option.component';
+export * from './lib/polls/poll-preview/poll-preview.component';