Implemented post share button, which copies the post link to the clipboard (thanks to ngxClipboard module)

3 files changed, 28 insertions, 4 deletions

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cd796c2..47651d4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { HttpClientModule } from '@angular/common/http';
+import { ClipboardModule } from 'ngx-clipboard';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -54,7 +55,8 @@ import { NavbarComponent } from './components/navbar/navbar.component';
     MatInputModule,
     MatButtonModule,
     HttpClientModule,
-    RouterModule
+    RouterModule,
+    ClipboardModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 48f1d01..65bc73a 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -1,6 +1,6 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<section class="card flex-row" [hidden]="loaded">
+<section class="card flex-row" [hidden]="loaded" (mouseleave)="resetShareBtn()">
 	<aside class="left-pane">
 		<img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL" (click)="goToAuthorProfile()">
 	</aside>
@@ -61,11 +61,11 @@
 			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="toggleEditing()">
 				<img src="/assets/icons/tabler-icon-edit.svg">
 			</button>
-			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-message-2.svg">
 				&nbsp;Comment
 			</button>
-			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="showCopiedMessage()">
 				<img src="/assets/icons/tabler-icon-link.svg">
 				&nbsp;Share
 			</button>
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index e1d435d..fb6f262 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -2,6 +2,7 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChi
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
+import { AppConstants } from 'src/app/app-constants.module';
 import { CloudinaryService } from 'src/app/services/cloudinary.service';
 import { PostService } from 'src/app/services/post.service';
 import { RatingService } from 'src/app/services/rating.service';
@@ -24,6 +25,9 @@ export class PostComponent implements OnInit, AfterViewInit {
   @Input() paramId: string;
   @ViewChild('upvote') upvoteBtn: ElementRef;
   @ViewChild('downvote') downvoteBtn: ElementRef;
+  @ViewChild('share') shareBtn: ElementRef;
+  private _defaultShareBtnInnerHTML: string;
+  private _linkShared = false; // For optimisation purposes
   public loggedIn = false;
   public loggedInAuthor = false;
   public editingPost = false;
@@ -107,6 +111,8 @@ export class PostComponent implements OnInit, AfterViewInit {
         this.changeColorOfVoteButton(isLike, !isLike);
       }
     });
+
+    this._defaultShareBtnInnerHTML = this.shareBtn.nativeElement.innerHTML;
   }
 
   goToAuthorProfile(): void {
@@ -213,4 +219,20 @@ export class PostComponent implements OnInit, AfterViewInit {
     this._renderer.setStyle(this.upvoteBtn.nativeElement, 'backgroundColor', (isUpvoted) ? 'var(--upvote-highlight)' : 'inherit');
     this._renderer.setStyle(this.downvoteBtn.nativeElement, 'backgroundColor', (isDownvoted) ? 'var(--downvote-highlight)' : 'inherit');
   }
+
+  resetShareBtn(): void {
+    if (this._linkShared) {
+      this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', this._defaultShareBtnInnerHTML);
+      this._linkShared = false;
+    }
+  }
+
+  showCopiedMessage(): void {
+    this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', 'Link copied to clipboard!');
+    this._linkShared = true;
+  }
+
+  getPostLink(): string {
+    return AppConstants.API_POST_URL + '/' + this.paramId;
+  }
 }