From 2ad2c02c52b1c48956edcaafd6e13d5f0bd02d46 Mon Sep 17 00:00:00 2001 From: Nicholas Seney Date: Tue, 8 Oct 2019 14:48:39 -0400 Subject: [PATCH 1/7] fix(MatLinkPreviewDirective.ngOnChanges): removed document input sub and replaced with ngonchanges --- .../directives/mat-link-preview.directive.ts | 36 +++++++------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/src/module/directives/mat-link-preview.directive.ts b/src/module/directives/mat-link-preview.directive.ts index e86a30e..d258192 100644 --- a/src/module/directives/mat-link-preview.directive.ts +++ b/src/module/directives/mat-link-preview.directive.ts @@ -1,38 +1,26 @@ -import {Directive, OnInit} from '@angular/core'; -import {fromEvent} from 'rxjs'; -import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators'; -import {Link, NgxLinkifyjsService} from 'ngx-linkifyjs'; -import {MatLinkPreviewService} from '../../module/service/mat-link-preview.service'; +import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { Link, NgxLinkifyjsService } from 'ngx-linkifyjs'; + +import { MatLinkPreviewService } from '../../module/service/mat-link-preview.service'; @Directive({ selector: '[matLinkPreview]', exportAs: '[matLinkPreview]', }) -export class MatLinkPreviewDirective implements OnInit { +export class MatLinkPreviewDirective implements OnChanges { + @Input() + input: string constructor(public linkifyService: NgxLinkifyjsService, public linkPreviewService: MatLinkPreviewService) { } - ngOnInit(): void { - this._init(); - } - - private _init() { - fromEvent(document, 'input') - .pipe( - debounceTime(2000), - distinctUntilChanged(), - map(event => { - const data = event.target['value']; - const links: Link[] = this.linkifyService.find(data); - console.log('data: ', data); - console.log('links: ', links); - // event.target['value'] = this.linkifyService.linkify(data); - return links; - })).subscribe((links) => { + ngOnChanges(changes: SimpleChanges): void { + if (changes.input && changes.input.currentValue) { + const data = changes.input.currentValue; + const links: Link[] = this.linkifyService.find(data); this.linkPreviewService.onLinkFound.emit(links); - }); + } } } From f53c5f61ea913d66f09e7103b95280d2d18a9644 Mon Sep 17 00:00:00 2001 From: Nicholas Seney Date: Fri, 18 Oct 2019 11:06:19 -0400 Subject: [PATCH 2/7] refactor(MatLinkPreviewDirective): removed ngonchanges and pull text value direct from html element --- .../directives/mat-link-preview.directive.ts | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/module/directives/mat-link-preview.directive.ts b/src/module/directives/mat-link-preview.directive.ts index d258192..bdbedf9 100644 --- a/src/module/directives/mat-link-preview.directive.ts +++ b/src/module/directives/mat-link-preview.directive.ts @@ -1,26 +1,28 @@ -import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core'; -import { Link, NgxLinkifyjsService } from 'ngx-linkifyjs'; - -import { MatLinkPreviewService } from '../../module/service/mat-link-preview.service'; +import {Directive, ElementRef, Input, OnInit} from '@angular/core'; +import {Link, NgxLinkifyjsService} from 'ngx-linkifyjs'; +import {MatLinkPreviewService} from '../../module/service/mat-link-preview.service'; @Directive({ selector: '[matLinkPreview]', exportAs: '[matLinkPreview]', }) -export class MatLinkPreviewDirective implements OnChanges { +export class MatLinkPreviewDirective implements OnInit { @Input() - input: string + input: string; constructor(public linkifyService: NgxLinkifyjsService, - public linkPreviewService: MatLinkPreviewService) { + public linkPreviewService: MatLinkPreviewService, + private _elemRef: ElementRef) { } - ngOnChanges(changes: SimpleChanges): void { - if (changes.input && changes.input.currentValue) { - const data = changes.input.currentValue; - const links: Link[] = this.linkifyService.find(data); - this.linkPreviewService.onLinkFound.emit(links); - } + ngOnInit() { + this._elemRef.nativeElement.oninput = (inputEvent: any) => { + setTimeout( () => { + const data = inputEvent.target.value; + const links: Link[] = this.linkifyService.find(data); + this.linkPreviewService.onLinkFound.emit(links); + }, 2000) + }; } } From 98f4cc581b8ef4eb2a179e59247ec452ce6f8ad1 Mon Sep 17 00:00:00 2001 From: Nicholas Seney Date: Fri, 18 Oct 2019 11:24:07 -0400 Subject: [PATCH 3/7] refactor(MatLinkPreviewDirective): removed unnecessary input binding --- src/module/directives/mat-link-preview.directive.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/module/directives/mat-link-preview.directive.ts b/src/module/directives/mat-link-preview.directive.ts index bdbedf9..6cf0001 100644 --- a/src/module/directives/mat-link-preview.directive.ts +++ b/src/module/directives/mat-link-preview.directive.ts @@ -7,8 +7,6 @@ import {MatLinkPreviewService} from '../../module/service/mat-link-preview.servi exportAs: '[matLinkPreview]', }) export class MatLinkPreviewDirective implements OnInit { - @Input() - input: string; constructor(public linkifyService: NgxLinkifyjsService, public linkPreviewService: MatLinkPreviewService, From 9e9b446ce0b9b2628c23904eb288b5deb8987e88 Mon Sep 17 00:00:00 2001 From: Nicholas Seney Date: Mon, 21 Oct 2019 16:09:33 -0400 Subject: [PATCH 4/7] chore(*): updated version number --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5cc5fa3..ab5c1f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@angular-material-extensions/link-preview", - "version": "1.1.1", + "version": "1.1.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1d38f59..88add60 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@angular-material-extensions/link-preview", "description": "Angular open source UI library to preview web links", - "version": "1.1.1", + "version": "1.1.2", "homepage": "https://github.com/angular-material-extensions/link-preview", "author": { "name": "Anthony Nahas", From 967a4331bc4c6fb24cd8b98317cb179cdbe43f2f Mon Sep 17 00:00:00 2001 From: Nicholas Seney Date: Tue, 14 Jan 2020 12:45:19 -0500 Subject: [PATCH 5/7] chore(*): Added new input for accesskey --- package.json | 2 +- src/module/service/mat-link-preview.service.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 88add60..3c5cc9f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@angular-material-extensions/link-preview", "description": "Angular open source UI library to preview web links", - "version": "1.1.2", + "version": "1.1.3", "homepage": "https://github.com/angular-material-extensions/link-preview", "author": { "name": "Anthony Nahas", diff --git a/src/module/service/mat-link-preview.service.ts b/src/module/service/mat-link-preview.service.ts index c4048bc..14b2421 100644 --- a/src/module/service/mat-link-preview.service.ts +++ b/src/module/service/mat-link-preview.service.ts @@ -8,7 +8,7 @@ import {LinkPreview} from '../..'; @Injectable() export class MatLinkPreviewService { - private _accessKey = '5b54e80a65c77848ceaa4630331e8384950e09d392365'; + private _accessKey = ''; private _apiURL = 'https://api.linkpreview.net/'; onLinkFound: EventEmitter> = new EventEmitter>(); @@ -19,8 +19,11 @@ export class MatLinkPreviewService { this.onLinkFound.subscribe((links: Array) => this.links = links); } + setAccessKey(accessKey: string) { + this._accessKey = accessKey; + } + fetchLink(url: string): Observable { - console.log('fetching the following link: ', url); const params = new HttpParams() .append('key', this._accessKey) .append('q', url); From a43c6a6972c9a9622d525ca041a13d9b9f333677 Mon Sep 17 00:00:00 2001 From: Nicholas Seney Date: Tue, 14 Jan 2020 13:09:35 -0500 Subject: [PATCH 6/7] fix(*): broken tests for api key --- package-lock.json | 2 +- src/module/service/link-preview.service.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index ab5c1f6..3b268bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@angular-material-extensions/link-preview", - "version": "1.1.2", + "version": "1.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/module/service/link-preview.service.spec.ts b/src/module/service/link-preview.service.spec.ts index f5be72f..c416f39 100644 --- a/src/module/service/link-preview.service.spec.ts +++ b/src/module/service/link-preview.service.spec.ts @@ -35,7 +35,7 @@ describe('MatLinkPreviewService', () => { return req.url === 'https://api.linkpreview.net/' && req.method === 'GET' - && params.get('key') === '5b54e80a65c77848ceaa4630331e8384950e09d392365' + && params.get('key') === '' && params.get('q') === 'github.com'; }, `Get link info from api`); }))); From 5db72212e0064e12013678411c26078100220cdf Mon Sep 17 00:00:00 2001 From: Nicholas Seney Date: Tue, 14 Jan 2020 14:39:56 -0500 Subject: [PATCH 7/7] refactor(*): use post instead of get --- src/module/service/mat-link-preview.service.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/module/service/mat-link-preview.service.ts b/src/module/service/mat-link-preview.service.ts index 14b2421..0e1371e 100644 --- a/src/module/service/mat-link-preview.service.ts +++ b/src/module/service/mat-link-preview.service.ts @@ -24,10 +24,8 @@ export class MatLinkPreviewService { } fetchLink(url: string): Observable { - const params = new HttpParams() - .append('key', this._accessKey) - .append('q', url); + const body = { key: this._accessKey, q: url }; - return this.http.get(this._apiURL, {params: params}).pipe(map(value => value as LinkPreview)); + return this.http.post(this._apiURL, body).pipe(map(value => value as LinkPreview)); } }