Skip to content

Commit

Permalink
Communication: Fix an issue with link previews (#9532)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pzdr7
pzdr7 authored Oct 20, 2024
1 parent f3a48ad commit 97e17e6
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 49 deletions.
14 changes: 7 additions & 7 deletions ...ared/link-preview/components/link-preview-container/link-preview-container.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@for (preview of linkPreviews; track trackLinks($index, preview)) {
@for (preview of linkPreviews(); track trackLinks($index, preview)) {
<div>
<jhi-link-preview
[linkPreview]="preview"
[showLoadingsProgress]="showLoadingsProgress"
[hasError]="hasError"
[loaded]="loaded"
[posting]="posting"
[isReply]="isReply"
[multiple]="multiple"
[showLoadingsProgress]="showLoadingsProgress()"
[hasError]="hasError()"
[loaded]="loaded()"
[posting]="posting()"
[isReply]="isReply()"
[multiple]="multiple()"
/>
</div>
}
62 changes: 31 additions & 31 deletions ...shared/link-preview/components/link-preview-container/link-preview-container.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, OnChanges, OnInit, inject, input, signal } from '@angular/core';
import { LinkPreview, LinkPreviewService } from 'app/shared/link-preview/services/link-preview.service';
import { Link, LinkifyService } from 'app/shared/link-preview/services/linkify.service';
import { User } from 'app/core/user/user.model';
Expand All @@ -8,45 +8,41 @@ import { Posting } from 'app/entities/metis/posting.model';
selector: 'jhi-link-preview-container',
templateUrl: './link-preview-container.component.html',
styleUrls: ['./link-preview-container.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LinkPreviewContainerComponent implements OnInit, OnChanges {
@Input() data: string | undefined;
@Input() author?: User;
@Input() posting?: Posting;
@Input() isEdited?: boolean;
@Input() isReply?: boolean;
private readonly linkPreviewService: LinkPreviewService = inject(LinkPreviewService);
private readonly linkifyService: LinkifyService = inject(LinkifyService);

linkPreviews: LinkPreview[] = [];
hasError: boolean;
loaded = false;
showLoadingsProgress = true;
multiple = false;
readonly data = input<string>();
readonly author = input<User>();
readonly posting = input<Posting>();
readonly isEdited = input<boolean>();
readonly isReply = input<boolean>();

constructor(
public linkPreviewService: LinkPreviewService,
public linkifyService: LinkifyService,
) {}
readonly linkPreviews = signal<LinkPreview[]>([]);
readonly hasError = signal<boolean>(false);
readonly loaded = signal<boolean>(false);
readonly showLoadingsProgress = signal<boolean>(true);
readonly multiple = signal<boolean>(false);

ngOnInit() {
this.data = this.data ?? '';
this.findPreviews();
}

ngOnChanges() {
if (this.isEdited) {
this.reloadLinkPreviews();
}
this.reloadLinkPreviews();
}

private reloadLinkPreviews() {
this.loaded = false;
this.showLoadingsProgress = true;
this.linkPreviews = []; // Clear the existing link previews
this.loaded.set(false);
this.showLoadingsProgress.set(true);
this.linkPreviews.set([]); // Clear the existing link previews
this.findPreviews();
}

private findPreviews() {
const links: Link[] = this.linkifyService.find(this.data!);
const links: Link[] = this.linkifyService.find(this.data() ?? '');
// TODO: The limit of 5 link previews should be configurable (maybe in course level)
links
.filter((link) => !link.isLinkPreviewRemoved)
Expand All @@ -56,17 +52,21 @@ export class LinkPreviewContainerComponent implements OnInit, OnChanges {
next: (linkPreview) => {
linkPreview.shouldPreviewBeShown = !!(linkPreview.url && linkPreview.title && linkPreview.description && linkPreview.image);

const existingLinkPreview = this.linkPreviews.find((preview) => preview.url === linkPreview.url);
if (existingLinkPreview) {
Object.assign(existingLinkPreview, linkPreview);
const existingLinkPreviewIndex = this.linkPreviews().findIndex((preview) => preview.url === linkPreview.url);
if (existingLinkPreviewIndex !== -1) {
this.linkPreviews.update((previews) => {
const existingLinkPreview = previews[existingLinkPreviewIndex];
Object.assign(existingLinkPreview, linkPreview);
return previews;
});
} else {
this.linkPreviews.push(linkPreview);
this.linkPreviews.set([...this.linkPreviews(), linkPreview]);
}

this.hasError = false;
this.loaded = true;
this.showLoadingsProgress = false;
this.multiple = this.linkPreviews.length > 1;
this.hasError.set(false);
this.loaded.set(true);
this.showLoadingsProgress.set(false);
this.multiple.set(this.linkPreviews().length > 1);
},
});
});
Expand Down
22 changes: 11 additions & 11 deletions src/test/javascript/spec/component/link-preview/link-preview-container.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe('LinkPreviewContainerComponent', () => {
});

it('should fetch link previews and update linkPreviews array', () => {
component.data = 'Check out these links: https://example.com/link1 and https://example.com/link2';
fixture.componentRef.setInput('data', 'Check out these links: https://example.com/link1 and https://example.com/link2');
const links: Link[] = [
{ type: '', value: '', href: 'https://example.com/link1' },
{ type: '', value: '', href: 'https://example.com/link2' },
Expand All @@ -52,18 +52,18 @@ describe('LinkPreviewContainerComponent', () => {

component.ngOnInit();

expect(linkifyServiceSpy).toHaveBeenCalledWith(component.data);
expect(linkifyServiceSpy).toHaveBeenCalledWith(component.data());
expect(linkPreviewServiceSpy).toHaveBeenCalledTimes(2);
expect(linkPreviewServiceSpy).toHaveBeenCalledWith('https://example.com/link1');
expect(linkPreviewServiceSpy).toHaveBeenCalledWith('https://example.com/link2');
expect(component.linkPreviews).toEqual(mockLinkPreviews);
expect(component.hasError).toBeFalse();
expect(component.loaded).toBeTrue();
expect(component.showLoadingsProgress).toBeFalse();
expect(component.linkPreviews()).toEqual(mockLinkPreviews);
expect(component.hasError()).toBeFalse();
expect(component.loaded()).toBeTrue();
expect(component.showLoadingsProgress()).toBeFalse();
});

it('should update existing link preview if it already exists', () => {
component.data = 'Check out these links: https://example.com/link1';
fixture.componentRef.setInput('data', 'Check out these links: https://example.com/link1');
const links: Link[] = [{ type: '', value: '', href: 'https://example.com/link1' }];
const existingLinkPreview: LinkPreview = {
url: 'https://example.com/link1',
Expand All @@ -77,14 +77,14 @@ describe('LinkPreviewContainerComponent', () => {
const linkifyServiceSpy = jest.spyOn(linkifyService, 'find').mockReturnValue(links);
const linkPreviewServiceSpy = jest.spyOn(linkPreviewService, 'fetchLink').mockReturnValueOnce(of(newLinkPreview));

component.linkPreviews.push(existingLinkPreview);
component.linkPreviews().push(existingLinkPreview);

component.ngOnInit();

expect(linkifyServiceSpy).toHaveBeenCalledWith(component.data);
expect(linkifyServiceSpy).toHaveBeenCalledWith(component.data());
expect(linkPreviewServiceSpy).toHaveBeenCalledOnce();
expect(linkPreviewServiceSpy).toHaveBeenCalledWith('https://example.com/link1');
expect(component.linkPreviews).toHaveLength(1);
expect(component.linkPreviews[0]).toEqual(newLinkPreview);
expect(component.linkPreviews()).toHaveLength(1);
expect(component.linkPreviews()[0]).toEqual(newLinkPreview);
});
});

0 comments on commit 97e17e6

Please sign in to comment.