refactor: use inject() instead of constructor dependency injection

ideatic · Apr 13, 2024 · 00a9e73 · 00a9e73
1 parent 124de6b
commit 00a9e73
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 68 deletions.
diff --git a/projects/ng-talk/src/lib/components/bubble/ng-talk-bubble-channel.component.ts b/projects/ng-talk/src/lib/components/bubble/ng-talk-bubble-channel.component.ts
@@ -1,7 +1,7 @@
+import {ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, forwardRef, HostListener, inject, Input, signal, viewChild} from "@angular/core";
 import {CdkDrag, CdkDragEnd, CdkDragMove} from '@angular/cdk/drag-drop';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {DecimalPipe} from "@angular/common";
-import {ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, forwardRef, HostListener, Input, signal, viewChild} from '@angular/core';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {fromEvent, Subscription} from 'rxjs';
 import {ChatAdapter} from '../../models/chat-adapter';
@@ -46,7 +46,12 @@ import {NgTalkSettings} from '../ng-talk-settings';
   styleUrl: `ng-talk-bubble-channel.component.less`
 })
 export class NgTalkBubbleChannelComponent {
+  // Deps
+  private _host = inject(ElementRef<HTMLElement>);
+  private _destroyRef = inject(DestroyRef);
+  private _overlayContainer = inject(OverlayContainer);
 
+  // State
   @Input() public dragBoundarySelector = 'body';
   @Input() public channel: ChatChannel;
   @Input() public adapter: ChatAdapter;
@@ -77,11 +82,6 @@ export class NgTalkBubbleChannelComponent {
 
   private _documentClickSubscription: Subscription;
 
-  constructor(private _host: ElementRef<HTMLElement>,
-              private _destroyRef: DestroyRef,
-              private _overlayContainer: OverlayContainer) {
-  }
-
   /* Dragging */
 
   protected onDragStart() {

diff --git a/projects/ng-talk/src/lib/components/channel-list/ng-talk-channel-list.component.ts b/projects/ng-talk/src/lib/components/channel-list/ng-talk-channel-list.component.ts
@@ -6,14 +6,15 @@ import {
   forwardRef,
   HostBinding,
   HostListener,
+  inject,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   output,
   signal,
   SimpleChanges
-} from '@angular/core';
+} from "@angular/core";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {FormsModule} from "@angular/forms";
 import {Subscription} from 'rxjs';
@@ -41,7 +42,11 @@ import {NG_TALK_CHANNEL_LIST_TOKEN} from "../../tokens";
   ]
 })
 export class NgTalkChannelListComponent implements OnInit, OnChanges, OnDestroy {
+  // Deps
+  private _host = inject(ElementRef<HTMLElement>);
+  private _destroyRef = inject(DestroyRef);
 
+  // Bindings
   @Input() public user: ChatUser;
   @Input() public adapter: ChatAdapter;
   @Input() public settings = new NgTalkSettings();
@@ -54,6 +59,7 @@ export class NgTalkChannelListComponent implements OnInit, OnChanges, OnDestroy
   @HostBinding('class')
   public displayMode: 'desktop' | 'mobile';
 
+  // State
   public activeChannel: ChatChannel;
   private _channelsSubscription: Subscription;
   protected channels = signal<ChatChannel[]>(null);
@@ -65,10 +71,6 @@ export class NgTalkChannelListComponent implements OnInit, OnChanges, OnDestroy
   // Import types
   protected readonly MessagesLoading = MessageLoadingMethod;
 
-  constructor(private _host: ElementRef<HTMLElement>,
-              private _destroyRef: DestroyRef) {
-  }
-
   public ngOnInit() {
     // Choose initial displayMode
     this._onResized();

diff --git a/projects/ng-talk/src/lib/components/channel/header/ng-talk-channel-header.component.ts b/projects/ng-talk/src/lib/components/channel/header/ng-talk-channel-header.component.ts
@@ -1,8 +1,7 @@
-import {ChangeDetectionStrategy, Component, Inject, Optional} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
 import {ChatChannel} from '../../../models/chat-channel';
 import type {BubbleChannelRef} from "../../../service/bubble-channel-ref";
 import {BubbleChannelService} from '../../../service/bubble-channel.service';
-import type {NgTalkChannelListComponent} from '../../channel-list/ng-talk-channel-list.component';
 import {NgTalkChannelComponent} from '../ng-talk-channel.component';
 import {NG_TALK_CHANNEL_LIST_TOKEN} from "../../../tokens";
 
@@ -26,11 +25,10 @@ import {NG_TALK_CHANNEL_LIST_TOKEN} from "../../../tokens";
   styleUrl: 'ng-talk-channel-header.component.less'
 })
 export class NgTalkChannelHeaderComponent {
-  constructor(protected chat: NgTalkChannelComponent,
-              protected bubbleChannelSvc: BubbleChannelService,
-              @Optional() @Inject(NG_TALK_CHANNEL_LIST_TOKEN) protected channelList: NgTalkChannelListComponent) {
-
-  }
+  // Deps
+  protected readonly chat = inject(NgTalkChannelComponent);
+  protected readonly bubbleChannelSvc = inject(BubbleChannelService);
+  protected readonly channelList = inject(NG_TALK_CHANNEL_LIST_TOKEN, {optional: true});
 
   protected openBubbleChat(channel: ChatChannel): BubbleChannelRef | void {
     if (channel && !this.bubbleChannelSvc.hasInstance(channel)) {

diff --git a/...ng-talk/src/lib/components/channel/message/body/ng-talk-channel-message-body.component.ts b/...ng-talk/src/lib/components/channel/message/body/ng-talk-channel-message-body.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, Input} from "@angular/core";
 import type Autolinker from 'autolinker';
 import {ChatMessage, ChatMessageType} from '../../../../models/chat-message';
 import {FnPipe} from "../../../../pipes/fn.pipe";
@@ -30,15 +30,16 @@ import {NgTalkChannelMessageWritingComponent} from "./ng-talk-channel-message-wr
   styleUrl: 'ng-talk-channel-message-body.component.less'
 })
 export class NgTalkChannelMessageBodyComponent {
+  // Deps
+  private _chat = inject(NgTalkChannelComponent);
+  private _autoLinker = inject(AutoLinkerService);
+
+  // Bindings
   @Input() public message: ChatMessage;
 
   // Import types and enums
   protected readonly MessageType = ChatMessageType;
 
-  constructor(private _chat: NgTalkChannelComponent,
-              private _autoLinker: AutoLinkerService) {
-  }
-
   protected transformContent(message: ChatMessage): string {
     let content = message.content;
     if (this._chat.settings.autoLinks) {

diff --git a/projects/ng-talk/src/lib/components/channel/message/ng-talk-channel-message.component.ts b/projects/ng-talk/src/lib/components/channel/message/ng-talk-channel-message.component.ts
@@ -1,6 +1,6 @@
+import {ChangeDetectionStrategy, Component, ElementRef, HostBinding, inject, Input, OnChanges, OnDestroy, viewChild} from "@angular/core";
 import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {DatePipe} from "@angular/common";
-import {ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnChanges, OnDestroy, viewChild} from '@angular/core';
 import {MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
 import {fromEvent} from 'rxjs';
 import {ChatMessage, ChatMessageType} from '../../../models/chat-message';
@@ -58,9 +58,15 @@ import {NgTalkChannelMessageRefComponent} from "./ref/ng-talk-channel-message-re
   styleUrl: 'ng-talk-channel-message.component.less'
 })
 export class NgTalkChannelMessageComponent implements OnChanges, OnDestroy {
+  // Deps
+  protected readonly chat = inject(NgTalkChannelComponent);
+  private readonly _host = inject(ElementRef<HTMLElement>);
+
+  // Bindings
   @Input() public message: ChatMessage;
   @Input() public prevMessage: ChatMessage;
 
+  // State
   private _toolsMenu = viewChild(MatMenuTrigger);
 
   @HostBinding('class') private _className: string;
@@ -73,10 +79,6 @@ export class NgTalkChannelMessageComponent implements OnChanges, OnDestroy {
   // Import types and enums
   protected readonly MessageType = ChatMessageType;
 
-  constructor(protected chat: NgTalkChannelComponent,
-              private _host: ElementRef<HTMLElement>) {
-  }
-
   public ngOnChanges() {
     this.showAuthor = !this.prevMessage || this.prevMessage.from().id != this.message.from().id || !isSameDay(this.prevMessage.date, this.message.date);
 

diff --git a/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts b/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts
@@ -4,6 +4,7 @@ import {
   Component,
   DestroyRef,
   ElementRef,
+  inject,
   Input,
   OnChanges,
   OnInit,
@@ -12,7 +13,7 @@ import {
   SimpleChanges,
   viewChild,
   viewChildren
-} from '@angular/core';
+} from "@angular/core";
 import {ChatAdapter} from '../../models/chat-adapter';
 import {ChatChannel} from '../../models/chat-channel';
 import {ChatMessage, ChatMessageType} from '../../models/chat-message';
@@ -43,6 +44,10 @@ declare const ngDevMode: boolean;
   ]
 })
 export class NgTalkChannelComponent implements OnInit, OnChanges, AfterViewInit {
+  // Deps
+  private _destroyRef = inject(DestroyRef);
+
+  // Bindings
   @Input() public user: ChatUser;
   @Input() public adapter: ChatAdapter;
   @Input() public channel: ChatChannel;
@@ -53,6 +58,7 @@ export class NgTalkChannelComponent implements OnInit, OnChanges, AfterViewInit
   public userClicked = output<ChatUser>();
   public deleted = output<void>();
 
+  // State
   private _chatBox = viewChild('chatBox', {read: ElementRef<HTMLElement>});
   private _sendMessageComponent = viewChild(NgTalkSendMessageComponent);
   private _messageComponents = viewChildren(NgTalkChannelMessageComponent);
@@ -72,9 +78,6 @@ export class NgTalkChannelComponent implements OnInit, OnChanges, AfterViewInit
   // Import types and enums
   protected readonly MessageType = ChatMessageType;
 
-  constructor(private _destroyRef: DestroyRef) {
-  }
-
   public ngOnInit() {
     if (!this.user) {
       throw new Error('Chat current user must be defined');

diff --git a/projects/ng-talk/src/lib/components/channel/preview/ng-talk-channel-preview.component.ts b/projects/ng-talk/src/lib/components/channel/preview/ng-talk-channel-preview.component.ts
@@ -1,7 +1,6 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, Input} from "@angular/core";
 import {ChatChannel, ChatChannelType} from '../../../models/chat-channel';
 import {ChatMessageType} from '../../../models/chat-message';
-import type {NgTalkChannelListComponent} from '../../channel-list/ng-talk-channel-list.component';
 import {NG_TALK_CHANNEL_LIST_TOKEN} from "../../../tokens";
 import {DecimalPipe} from "@angular/common";
 
@@ -49,12 +48,13 @@ import {DecimalPipe} from "@angular/common";
   styleUrl: './ng-talk-channel-preview.component.less'
 })
 export class NgTalkChannelPreviewComponent {
+  // Deps
+  protected readonly channels = inject(NG_TALK_CHANNEL_LIST_TOKEN);
+
+  // Bindings
   @Input() public channel: ChatChannel;
 
   // Import types
   protected readonly ChannelType = ChatChannelType;
   protected readonly MessageType = ChatMessageType;
-
-  constructor(@Inject(NG_TALK_CHANNEL_LIST_TOKEN) protected channels: NgTalkChannelListComponent) {
-  }
 }
diff --git a/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts b/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts
@@ -1,5 +1,5 @@
+import {ChangeDetectionStrategy, Component, inject, output} from "@angular/core";
 import {KeyValue, KeyValuePipe} from '@angular/common';
-import {ChangeDetectionStrategy, Component, output} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {FnPipe} from "../../../../pipes/fn.pipe";
 import {NgTalkChannelComponent} from '../../ng-talk-channel.component';
@@ -53,14 +53,16 @@ import emojis from './emoji.json';
   `
 })
 export class NgTalkSendEmojiComponent {
+  // Deps
+  protected readonly chat = inject(NgTalkChannelComponent);
+
+  // Bindings
   public emojiSelected = output<string>();
 
+  // State
   protected readonly emojis = emojis;
   protected searchQuery: string;
 
-  constructor(protected chat: NgTalkChannelComponent) {
-  }
-
   protected filter(entries: KeyValue<string, string>[], searchQuery: string): KeyValue<string, string>[] {
     return (searchQuery
       ? entries.filter(pair => pair.key.toLowerCase().includes(searchQuery.toLowerCase()))

diff --git a/projects/ng-talk/src/lib/components/channel/send/gif/ng-talk-send-gif.component.ts b/projects/ng-talk/src/lib/components/channel/send/gif/ng-talk-send-gif.component.ts
@@ -1,6 +1,6 @@
+import {ChangeDetectionStrategy, Component, inject, OnInit, output} from "@angular/core";
 import {AsyncPipe} from "@angular/common";
 import {HttpClient} from '@angular/common/http';
-import {ChangeDetectionStrategy, Component, OnInit, output} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {debounceTime, map, Observable, Subject} from 'rxjs';
 import {FnPipe} from "../../../../pipes/fn.pipe";
@@ -58,17 +58,19 @@ import {NgTalkChannelComponent} from '../../ng-talk-channel.component';
   `
 })
 export class NgTalkSendGifComponent implements OnInit {
+  // Deps
+  protected readonly chat = inject(NgTalkChannelComponent);
+  private readonly _http = inject(HttpClient);
+
+  // Bindings
   public gifSelected = output<string>();
 
+  // State
   protected searchQuery: string;
   protected gifs$: Observable<any>;
 
   private _deBouncer: Subject<string>;
 
-  constructor(protected chat: NgTalkChannelComponent,
-              private _http: HttpClient) {
-  }
-
   public ngOnInit() {
     this._getTrendingGIFs();
   }

diff --git a/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts b/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts
@@ -1,9 +1,8 @@
-import {ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Inject, Optional, signal, viewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, signal, viewChild} from "@angular/core";
 import {FormsModule} from "@angular/forms";
 import {ChatChannel} from '../../../models/chat-channel';
 import {ChatMessage, ChatMessageType} from '../../../models/chat-message';
 import {NG_TALK_CHANNEL_LIST_TOKEN} from "../../../tokens";
-import type {NgTalkChannelListComponent} from '../../channel-list/ng-talk-channel-list.component';
 import {NgTalkChannelMessageRefComponent} from "../message/ref/ng-talk-channel-message-ref.component";
 import {NgTalkChannelComponent} from '../ng-talk-channel.component';
 import {NgTalkSendEmojiComponent} from "./emoji/ng-talk-send-emoji.component";
@@ -80,20 +79,22 @@ import {growAnimation} from './grow-animation';
   animations: [growAnimation]
 })
 export class NgTalkSendMessageComponent {
+  protected readonly chat = inject(NgTalkChannelComponent);
+
   private _textInput = viewChild('textInput', {read: ElementRef<HTMLInputElement>});
 
   protected newMessage = '';
   protected mediaSelector: string = null;
 
-  constructor(protected chat: NgTalkChannelComponent,
-              destroyRef: DestroyRef,
-              @Optional() @Inject(NG_TALK_CHANNEL_LIST_TOKEN) channelList: NgTalkChannelListComponent) {
+  constructor() {
+    const channelList = inject(NG_TALK_CHANNEL_LIST_TOKEN, {optional: true});
+
     if (channelList) { // Detectar cambio de canal si estamos en un listado
       const subscription = channelList.channelChanged.subscribe((c) => this._onChannelChanged(c));
-      destroyRef.onDestroy(() => subscription.unsubscribe());
+      inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
     }
 
-    chat.focus = () => this.focus();
+    this.chat.focus = () => this.focus();
   }
 
   private _sendMessage(message: Partial<ChatMessage>) {

diff --git a/projects/ng-talk/src/lib/directives/in-viewport.directive.ts b/projects/ng-talk/src/lib/directives/in-viewport.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Input, OnDestroy, OnInit, output} from '@angular/core';
+import {Directive, ElementRef, inject, Input, OnDestroy, OnInit, output} from "@angular/core";
 
 /**
  * From https://github.com/thisissoon/angular-inviewport
@@ -24,16 +24,18 @@ import {Directive, ElementRef, Input, OnDestroy, OnInit, output} from '@angular/
   standalone: true
 })
 export class InViewportDirective implements OnDestroy, OnInit {
+  // Deps
+  private _host = inject(ElementRef);
+  private _window = inject(Window);
+
+  // Bindings
   @Input() public inViewportOptions: IntersectionObserverInit & { delay?: number };
   public inViewportChange = output<boolean>();
 
+  // State
   private _inViewport: boolean;
   protected observer: IntersectionObserver;
 
-  constructor(private _host: ElementRef,
-              private _window: Window) {
-  }
-
   public ngOnInit() {
     if (InViewportDirective.intersectionObserverFeatureDetection()) {
       const activateObserver = () => {

diff --git a/projects/ng-talk/src/lib/service/bubble-channel.service.ts b/projects/ng-talk/src/lib/service/bubble-channel.service.ts
@@ -1,4 +1,4 @@
-import {ApplicationRef, createComponent, EmbeddedViewRef, EnvironmentInjector, Injectable, signal} from '@angular/core';
+import {ApplicationRef, createComponent, EmbeddedViewRef, EnvironmentInjector, inject, Injectable, signal} from "@angular/core";
 import {ChatChannel} from '../models/chat-channel';
 import {ChatAdapter} from '../models/chat-adapter';
 import {ChatUser} from '../models/chat-user';
@@ -14,10 +14,10 @@ import {NgTalkBubbleChannelComponent} from "../components/bubble/ng-talk-bubble-
 export class BubbleChannelService {
   private static _activeInstances = signal<BubbleChannelRef[]>([]);
 
-  constructor(private _appRef: ApplicationRef,
-              private _injector: EnvironmentInjector,
-              private _overlaySvc: Overlay) {
-  }
+  // Deps
+  private _appRef = inject(ApplicationRef);
+  private _injector = inject(EnvironmentInjector);
+  private _overlaySvc = inject(Overlay);
 
   public get activeChannels(): ChatChannel[] {
     return BubbleChannelService._activeInstances().map(ref => ref.channel);

diff --git a/projects/ng-talk/src/lib/tokens.ts b/projects/ng-talk/src/lib/tokens.ts
@@ -1,3 +1,4 @@
 import {InjectionToken} from '@angular/core';
+import type {NgTalkChannelListComponent} from "./components/channel-list/ng-talk-channel-list.component";
 
-export const NG_TALK_CHANNEL_LIST_TOKEN = new InjectionToken('NgTalkChannelListComponent');
+export const NG_TALK_CHANNEL_LIST_TOKEN = new InjectionToken<NgTalkChannelListComponent>('NgTalkChannelListComponent');