Twitter Comments Beta #7

src/app/core/components/card-detail/card-detail.component.html

@@ -27,4 +27,5 @@
       <div class="updated" *ngIf="detail.lastUpdated">Updated {{detail.created}}</div>
     </ion-card-content>
   </ion-card>
+  <app-twitter-comments *ngIf="detail && showComments" [date]="date"></app-twitter-comments>
 </div>

src/app/core/components/card-detail/card-detail.component.ts

@@ -11,7 +11,9 @@ import advancedFormat from 'dayjs/plugin/advancedFormat';
 })
 export class CardDetailComponent implements OnChanges {
   detail?: Item;
+  date?: Date;
   @Input() item?: Feed | Dayjs;
+  @Input() showComments: boolean = false;
 
   ngOnChanges(changes: SimpleChanges) {
     dayjs.extend(relativeTime);
@@ -20,6 +22,7 @@ export class CardDetailComponent implements OnChanges {
     if (currentItem.currentValue) {
       const data: Feed | Dayjs = changes['item'].currentValue;
       if (!dayjs.isDayjs(data)) {
+        this.date = data.date.toDate();
         this.detail = {
           ...data,
           created: dayjs(data.created.toDate()).fromNow(),
@@ -28,6 +31,7 @@ export class CardDetailComponent implements OnChanges {
           dayjs(data.date.toDate()).isSame(dayjs().add(1, 'day'), 'day')
         };
       } else {
+        this.date = data.toDate();
         this.detail = {
           active: true,
           created: data.fromNow(),

src/app/core/components/modal-detail/modal-detail.component.html

@@ -6,5 +6,5 @@
   </ion-toolbar>
 </ion-header>
 <ion-content fullscreen>
-  <app-card-detail [item]="item"></app-card-detail>
+  <app-card-detail [item]="item" [showComments]="true"></app-card-detail>
 </ion-content>

src/app/core/components/twitter-comments/twitter-comments.component.html

@@ -0,0 +1,17 @@
+<div *ngIf="comments$ | async as item$">
+	<div *ngIf="item$ | async as comments">
+		<div *ngIf="comments">
+			<ion-list *ngFor="let item of comments | slice:1" lines="inset">
+				<ion-item>
+					<ion-avatar slot="start">
+						<img [src]="item.image" />
+					</ion-avatar>
+					<ion-label>
+						<h2>{{item.name}}</h2>
+						<p text-wrap>{{item.text}}</p>
+					</ion-label>
+				</ion-item>
+			</ion-list>
+		</div>
+	</div>
+</div>

src/app/core/components/twitter-comments/twitter-comments.component.ts

@@ -0,0 +1,37 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+import { DbService } from 'app/core/services';
+import dayjs from 'dayjs';
+
+@Component({
+  selector: 'app-twitter-comments',
+  templateUrl: './twitter-comments.component.html'
+})
+export class TwitterCommentsComponent implements OnInit {
+  @Input() date?: Date;
+  comments$?: Observable<Observable<Comment[]>>;
+
+  constructor(private db: DbService, private http: HttpClient) {
+  }
+
+  ngOnInit(): void {
+    console.log(dayjs(this.date).set('hour', 0).set('minute', 0).toDate());
+    this.comments$ = this.db.collection$('feed', (ref) =>
+      ref
+        .where('date', '>', dayjs(this.date).set('hour', 0).set('minute', 0).subtract(3, 'hour').toDate())
+        .where('date', '<', dayjs(this.date).set('hour', 23).set('minute', 59).subtract(3, 'hour').toDate()).orderBy('date', 'desc')).pipe(take(1), map(feed => {
+          console.log(feed);
+          const item = feed[0];
+          if (!item) return of([]);
+          return this.http.get<Comment[]>(`https://us-central1-paras-293d5.cloudfunctions.net/endpoints/nyc/comments/1493329454915018758${item.id}`);
+        }));
+  }
+}
+
+interface Comment {
+  name: String;
+  text: String;
+  image: String;
+}

src/app/home/home.module.ts

@@ -1,20 +1,23 @@
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { SwiperModule } from 'swiper/angular';
-import { HorizontalCalendarComponent } from '../core/components/horizontal-calendar/horizontal-calendar.component';
 import { CalendarModule } from 'ion2-calendar';
 import { HomePage } from './home.page';
-import { ModalDetailComponent } from '../core/components/modal-detail/modal-detail.component';
 import { CardDetailComponent } from '../core/components/card-detail/card-detail.component';
+import { HorizontalCalendarComponent } from '../core/components/horizontal-calendar/horizontal-calendar.component';
+import { ModalDetailComponent } from '../core/components/modal-detail/modal-detail.component';
+import { TwitterCommentsComponent } from 'app/core/components/twitter-comments/twitter-comments.component';
 
 @NgModule({
   imports: [
     CalendarModule,
     CommonModule,
     FormsModule,
+    HttpClientModule,
     IonicModule,
     RouterModule.forChild([
       {
@@ -28,6 +31,12 @@ import { CardDetailComponent } from '../core/components/card-detail/card-detail.
     ]),
     SwiperModule
   ],
-  declarations: [HomePage, HorizontalCalendarComponent, ModalDetailComponent, CardDetailComponent]
+  declarations: [
+    CardDetailComponent,
+    HomePage,
+    HorizontalCalendarComponent,
+    ModalDetailComponent,
+    TwitterCommentsComponent
+  ]
 })
 export class HomePageModule { }