Channel invites

import {
  Component,
  ElementRef,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
  ViewChild,
} from "@angular/core";
import { fromEvent } from "rxjs";
import { debounceTime, switchMap } from "rxjs/operators";
import { Channel, UserResponse } from "stream-chat";
import { ChatClientService, NotificationService } from "stream-chat-angular";

@Component({
  selector: "app-invite-button",
  templateUrl: "./invite-button.component.html",
  styleUrls: ["./invite-button.component.scss"],
})
export class InviteButtonComponent implements OnInit, OnChanges {
  @Input() channel?: Channel;
  usersToInvite: UserResponse[] = [];
  canInviteUsers = false;
  isModalOpen = false;
  autocompleteOptions: UserResponse[] = [];
  @ViewChild("input", { static: true })
  private input!: ElementRef<HTMLInputElement>;

  constructor(
    private chatClientService: ChatClientService,
    private notificationService: NotificationService,
  ) {}

  ngOnInit(): void {
    fromEvent(this.input.nativeElement, "input")
      .pipe(
        debounceTime(300),
        switchMap(() =>
          this.chatClientService.autocompleteUsers(
            this.input.nativeElement.value,
          ),
        ),
      )
      .subscribe((users) => (this.autocompleteOptions = users));
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.channel && this.channel) {
      this.canInviteUsers = (
        this.channel.data?.own_capabilities as string[]
      ).includes("update-channel-members");
      this.usersToInvite = [];
      this.autocompleteOptions = [];
    }
  }

  async inviteMembers() {
    try {
      await this.channel?.inviteMembers(this.usersToInvite.map((u) => u.id));
      this.notificationService.addTemporaryNotification(
        "User(s) successfully invited",
        "success",
      );
      this.usersToInvite = [];
      this.autocompleteOptions = [];
      this.isModalOpen = false;
    } catch {
      this.notificationService.addTemporaryNotification(
        `User(s) couldn't be invited`,
        "error",
      );
    }
  }

  addUser() {
    const inputValue = this.input.nativeElement.value;
    const user = this.autocompleteOptions.find(
      (u) => u.id === inputValue || u.name === inputValue,
    );
    if (user) {
      this.usersToInvite.push(user);
      this.input.nativeElement.value = "";
      this.autocompleteOptions = [];
    }
  }
}

import {
  AfterViewInit,
  Component,
  TemplateRef,
  ViewChild,
} from "@angular/core";
import {
  ChatClientService,
  ChannelService,
  StreamI18nService,
} from "stream-chat-angular";
import {
  CustomTemplatesService,
  ChannelActionsContext,
} from "stream-chat-angular";
import { environment } from "../environments/environment";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements AfterViewInit {
  // Create a reference to the custom template
  @ViewChild("channelActionsTemplate")
  private channelActionsTemplate!: TemplateRef<ChannelActionsContext>;

  constructor(
    private chatService: ChatClientService,
    private channelService: ChannelService,
    private streamI18nService: StreamI18nService,
    private customTemplatesService: CustomTemplatesService, // Import customTemplatesService
  ) {
    void this.chatService.init(
      environment.apiKey,
      environment.userId,
      environment.userToken,
    );
    void this.channelService.init({
      type: "messaging",
      members: { $in: [environment.userId] },
    });
    this.streamI18nService.setTranslation();
  }

  ngAfterViewInit(): void {
    // Register your custom template
    this.customTemplatesService.channelActionsTemplate$.next(
      this.channelActionsTemplate,
    );
  }
}

import { Component, Input, OnInit } from "@angular/core";
import { Channel } from "stream-chat";
import { ChatClientService, NotificationService } from "stream-chat-angular";

@Component({
  selector: "app-invitation",
  template: `
    <div>
      You have been invited to the
      {{ channelName }} channel. <button (click)="accept()">Accept</button> |
      <button (click)="decline()">Decline</button> |
      <button (click)="dismissFn()">Dismiss</button>
    </div>
  `,
  styles: [
    "button {border: none; background-color: transparent; color: var(--blue); font-weight: bold; cursor: pointer}",
  ],
})
export class InvitationComponent implements OnInit {
  @Input() channel?: Channel;
  @Input() dismissFn!: Function;

  constructor(
    private notificationService: NotificationService,
    private chatClientService: ChatClientService,
  ) {}

  ngOnInit(): void {}

  accept() {
    this.sendRequest("accept");
  }

  async decline() {
    this.sendRequest("reject");
  }

  get channelName() {
    return this.channel?.data?.name || this.channel?.id;
  }

  private async sendRequest(answer: "accept" | "reject") {
    const payload = {
      user_id: this.chatClientService?.chatClient.user?.id,
    };
    const request =
      answer === "accept"
        ? async () => await this.channel?.acceptInvite(payload)
        : async () => await this.channel?.rejectInvite(payload);
    try {
      await request();
      this.dismissFn();
      this.notificationService.addTemporaryNotification(
        `Invite from ${this.channelName} successfully ${answer}ed`,
        "success",
      );
    } catch {
      this.notificationService.addTemporaryNotification(
        `An error occured during ${answer}ing the invitation from ${this.channelName}`,
        "error",
      );
    }
  }
}

@ViewChild('inviteTemplate') private inviteTemplate!: TemplateRef<{channel: Channel<DefaultStreamChatGenerics> | ChannelResponse<DefaultStreamChatGenerics>}>;

this.chatService.init("<API key>", "<user>", "<token provider>", {
  trackPendingChannelInvites: true,
});

ngOnInit(): void {
  this.chatService.pendingInvites$.pipe(pairwise()).subscribe((pair) => {
    const [prevInvites, currentInvites] = pair;
    const notShownInvites = currentInvites.filter(
      (i) => !prevInvites.find((prevI) => prevI.cid === i.cid)
    );
    notShownInvites.forEach((i) =>
      this.notificationService.addPermanentNotification(
        this.inviteTemplate,
        'info',
        undefined,
        { channel: i }
      )
    );
  });
}

this.channelService.init({
  joined: true,
});

private customAddedToChannelNotificationHandler(
    clientEvent: ClientEvent,
    channelListSetter: (channels: (Channel | ChannelResponse)[]) => void
  ): void {
    let channels!: Channel[];
    this.channelService.channels$
      .pipe(take(1))
      .subscribe((c) => (channels = c || []));
    if (clientEvent.event.member?.invited) {
      return;
    }
    channelListSetter([clientEvent!.event!.channel!, ...channels]);
  }

this.channelService.customAddedToChannelNotificationHandler =
  this.customAddedToChannelNotificationHandler.bind(this);

this.chatService.events$
  .pipe(filter((n) => n.eventType === "notification.invite_accepted"))
  .subscribe(() => {
    this.channelService.reset();
    void this.channelService.init({
      joined: true,
    });
  });