Add disqus comments

package.json

@@ -26,6 +26,7 @@
     "@ngrx/store": "^9.1.2",
     "bootstrap": "^4.4.0",
     "firebase": "^7.14.3",
+    "ngx-disqus": "^2.4.3",
     "ngx-gist": "^1.0.4",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

src/app/app-routing.module.ts

@@ -22,8 +22,8 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       anchorScrolling: 'enabled',
-      // scrollPositionRestoration: 'enabled',
-      useHash: true,
+      scrollPositionRestoration: 'enabled',
+      // useHash: true,
     }),
   ],
   exports: [RouterModule],

src/app/app.component.ts

@@ -1,10 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.sass']
+  styleUrls: ['./app.component.sass'],
 })
-export class AppComponent {
-  title = 'tetianakh-site';
+export class AppComponent implements OnInit {
+  title = 'tetianakh';
+  constructor(private router: Router) {}
+
+  ngOnInit() {
+    let path = localStorage.getItem('path');
+    if (path) {
+      localStorage.removeItem('path');
+      this.router.navigate([path]);
+    }
+  }
 }

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AngularFireModule } from '@angular/fire';
 import { HttpClientModule } from '@angular/common/http';
+import { DisqusModule } from 'ngx-disqus';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -22,7 +23,6 @@ import { NewPostComponent } from './blog/new-post/new-post.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { PostComponent } from './blog/post/post.component';
 import { NotFoundComponent } from './not-found/not-found.component';
-import { PostCommentComponent } from './blog/post-comment/post-comment.component';
 import { GistComponent } from './shared/gist/gist.component';
 import { DynamicHTMLModule } from './dynamic-html';
 
@@ -43,7 +43,6 @@ import { DynamicHTMLModule } from './dynamic-html';
     NewPostComponent,
     PostComponent,
     NotFoundComponent,
-    PostCommentComponent,
     GistComponent,
   ],
   imports: [
@@ -56,6 +55,7 @@ import { DynamicHTMLModule } from './dynamic-html';
     DynamicHTMLModule.forRoot({
       components: [{ component: GistComponent, selector: 'app-gist' }],
     }),
+    DisqusModule.forRoot('tetianakh'),
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/blog/blog-post-preview/blog-post-preview.component.html

@@ -5,9 +5,6 @@ <h2>{{ post.title }}</h2>
       <div class="mr-auto">
         {{ post.timestamp | date: "medium" }}
       </div>
-      <div class="ml-auto">
-        <i class="fas fa-comment"></i> {{ post.comments.length }}
-      </div>
     </div>
   </div>
   <div class="card-body">

src/app/blog/blog.service.ts

@@ -21,7 +21,6 @@ export class BlogService {
               new Post(
                 p.payload.val().title,
                 p.payload.val().body,
-                p.payload.val().comments ? p.payload.val().comments : [],
                 p.payload.val().authorName,
                 +p.payload.val().timestamp,
                 p.payload.val().authorId,
@@ -58,7 +57,6 @@ export class BlogService {
             new Post(
               post.title,
               post.body,
-              post.comments ? post.comments : [],
               post.authorName,
               post.timestamp,
               post.authorId,

src/app/blog/new-post/new-post.component.ts

@@ -28,7 +28,6 @@ export class NewPostComponent implements OnInit {
     const newPost = new Post(
       this.newPostForm.value.title,
       this.newPostForm.value.body,
-      [],
       'Tetiana Khotiaintseva',
       new Date().getTime()
     );

src/app/blog/post.model.ts

@@ -1,10 +1,7 @@
-import { PostComment } from './post-comment.model';
-
 export class Post {
   constructor(
     public title: string,
     public body: string,
-    public comments: PostComment[],
     public authorName: string,
     public timestamp: number,
     public authorId: string = null,

src/app/blog/post/post.component.html

@@ -18,41 +18,12 @@ <h1 class="card-title">
         </div>
       </div>
 
-      <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3 py-3">
-        <h4 class="text-white ml-2">Comments</h4>
-        <p
-          class="m-2 text-white"
-          *ngIf="!post.comments || post.comments.length == 0"
-        >
-          No comments yet.
-        </p>
-
-        <div class="card">
+      <div class="col-lg-8 offset-lg-2 py-3">
+        <div class="card bg-white">
           <div class="card-body">
-            <form [formGroup]="newCommentForm" (ngSubmit)="onSubmit()">
-              <div class="form-group">
-                <textarea
-                  type="text"
-                  class="form-control"
-                  formControlName="body"
-                ></textarea>
-              </div>
-              <button
-                class="btn-outline-primary btn float-right"
-                type="submit"
-                [disabled]="newCommentForm.disabled"
-              >
-                Add comment
-              </button>
-            </form>
+            <disqus [identifier]="key"></disqus>
           </div>
         </div>
-
-        <app-post-comment
-          *ngFor="let comment of post.comments; let idx = index"
-          [comment]="comment"
-          [commentId]="idx"
-        ></app-post-comment>
       </div>
     </div>
   </div>

src/app/blog/post/post.component.ts

@@ -4,7 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Post } from '../post.model';
 import { Subscription } from 'rxjs';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { PostComment } from '../post-comment.model';
 
 @Component({
   selector: 'app-post',
@@ -16,7 +15,6 @@ export class PostComponent implements OnInit, OnDestroy {
   post: Post;
   keySub: Subscription;
   postSub: Subscription;
-  newCommentForm: FormGroup;
 
   constructor(
     private blogService: BlogService,
@@ -27,6 +25,7 @@ export class PostComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.keySub = this.route.params.subscribe((params) => {
       this.key = params['key'];
+
       if (this.postSub) {
         this.postSub.unsubscribe();
       }
@@ -39,10 +38,6 @@ export class PostComponent implements OnInit, OnDestroy {
           this.post = post;
         });
     });
-
-    this.newCommentForm = new FormGroup({
-      body: new FormControl(null, [Validators.required]),
-    });
   }
 
   ngOnDestroy() {
@@ -53,20 +48,4 @@ export class PostComponent implements OnInit, OnDestroy {
       this.postSub.unsubscribe();
     }
   }
-
-  onSubmit() {
-    const newComment = new PostComment(
-      'Foo',
-      'foo',
-      this.newCommentForm.value.body,
-      new Date().getTime()
-    );
-    this.post.comments = [newComment].concat(this.post.comments);
-    const resp = this.blogService
-      .updatePost(this.key, {
-        comments: this.post.comments,
-      })
-      .then(() => this.newCommentForm.reset());
-    console.log(resp);
-  }
 }