[frontend] Add twitter info dialog wiring

kibicara-frontend/src/app/platforms/twitter/twitter-dialog/twitter-dialog.component.html

@@ -0,0 +1 @@
+<p>twitter-dialog works!</p>

kibicara-frontend/src/app/platforms/twitter/twitter-dialog/twitter-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TwitterDialogComponent } from './twitter-dialog.component';
+
+describe('TwitterDialogComponent', () => {
+  let component: TwitterDialogComponent;
+  let fixture: ComponentFixture<TwitterDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TwitterDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TwitterDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/platforms/twitter/twitter-dialog/twitter-dialog.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-twitter-dialog',
+  templateUrl: './twitter-dialog.component.html',
+  styleUrls: ['./twitter-dialog.component.scss'],
+})
+export class TwitterDialogComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

kibicara-frontend/src/app/platforms/twitter/twitter-info-dialog/twitter-info-dialog.component.html

@@ -0,0 +1,42 @@
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu at
+  magna euismod sollicitudin. Vestibulum ut auctor libero. Etiam volutpat, nisl
+  sed efficitur hendrerit, nunc risus hendrerit nulla, sollicitudin malesuada
+  neque sem sed tortor. Vestibulum laoreet elementum nibh ultrices ullamcorper.
+  Sed porta gravida lectus, suscipit dictum ligula pharetra posuere. Vivamus
+  pellentesque ex eget lacus consectetur, at pulvinar est pellentesque.
+  Phasellus a elit tempor, tristique tortor auctor, maximus eros. Duis magna
+  sapien, accumsan nec massa nec, porta auctor leo. Nam nibh nisl, hendrerit nec
+  convallis in, porttitor nec sapien. Morbi in lacus convallis, elementum turpis
+  in, venenatis mi. Vestibulum bibendum rhoncus pulvinar. Sed hendrerit ipsum
+  eget varius venenatis. Maecenas consectetur felis libero, fringilla fringilla
+  justo pellentesque non. Quisque congue dictum arcu ut fermentum. Aliquam
+  egestas, lectus at mollis pulvinar, diam libero sagittis eros, a lobortis
+  neque ligula eget odio. Praesent a tortor consequat, viverra odio id, feugiat
+  sem. Mauris orci velit, molestie sit amet urna laoreet, aliquet consectetur
+  risus. Cras tristique odio nec placerat viverra. Suspendisse id pretium risus,
+  sit amet consectetur turpis. Nunc mattis, felis a iaculis varius, est nulla
+  aliquam massa, aliquet dictum ipsum est nec erat. Integer tristique tellus
+  felis, ut porttitor nisi blandit nec. Pellentesque habitant morbi tristique
+  senectus et netus et malesuada fames ac turpis egestas. Integer sagittis justo
+  ut elit gravida, vitae dignissim urna vehicula. Ut in ante non neque dignissim
+  scelerisque non id nisi. Sed sit amet posuere felis. Integer eget eros auctor,
+  ultrices arcu vel, feugiat erat. Curabitur rhoncus porta erat ut ullamcorper.
+  Duis in dictum tortor. Nam rutrum volutpat libero id interdum. Vestibulum vel
+  ante eget risus elementum iaculis eget ut mauris. Vestibulum ultrices nunc
+  quis leo venenatis, id tristique purus tempus. Fusce nec tellus dui. Nulla
+  bibendum nisi ut posuere pellentesque. Vivamus malesuada mollis dui a posuere.
+  Curabitur et lacus at augue posuere facilisis. Ut posuere orci mauris, at
+  hendrerit elit dignissim vel. Quisque vitae ipsum sed sem mattis hendrerit.
+  Pellentesque consectetur convallis consectetur. Praesent sit amet augue in dui
+  congue efficitur ac gravida metus. Sed nibh urna, facilisis at urna vitae,
+  tristique vestibulum velit. Maecenas et aliquet purus, non rutrum eros. Donec
+  maximus orci vel tortor maximus, finibus porttitor mauris convallis. Maecenas
+  eget quam vel nulla dapibus hendrerit. Vivamus malesuada neque ut elit
+  commodo, non viverra magna facilisis. Maecenas finibus ante non dui posuere,
+  sed varius leo elementum. Nullam eget vestibulum mauris. Maecenas in ipsum
+  lectus. Sed tempus at dolor sed posuere. Proin eget nulla dignissim, finibus
+  arcu eu, fringilla tellus. Nullam bibendum felis sed nulla lobortis sodales.
+  Nunc in elementum felis, quis aliquam velit. Morbi sodales sollicitudin
+  mollis.
+</p>

kibicara-frontend/src/app/platforms/twitter/twitter-info-dialog/twitter-info-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TwitterInfoDialogComponent } from './twitter-info-dialog.component';
+
+describe('TwitterInfoDialogComponent', () => {
+  let component: TwitterInfoDialogComponent;
+  let fixture: ComponentFixture<TwitterInfoDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TwitterInfoDialogComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TwitterInfoDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/platforms/twitter/twitter-info-dialog/twitter-info-dialog.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-twitter-info-dialog',
+  templateUrl: './twitter-info-dialog.component.html',
+  styleUrls: ['./twitter-info-dialog.component.scss'],
+})
+export class TwitterInfoDialogComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html

@@ -5,7 +5,12 @@
         Twitter
       </div>
       <button mat-icon-button aria-label="How to use">
-        <mat-icon matTooltip="How to use" class="info-button">info</mat-icon>
+        <mat-icon
+          matTooltip="How to add an twitter account to your hood"
+          class="info-button"
+          (click)="onInfoClick()"
+          >info</mat-icon
+        >
       </button>
     </mat-card-title>
   </mat-card-header>
@@ -20,7 +25,7 @@
       </mat-list-item>
       <mat-list-item *ngFor="let twitter of twitters">
         <div class="entry">
-          Twitterdummy
+          @{{ twitter.username }}
           <mat-slide-toggle></mat-slide-toggle>
           <button
             mat-icon-button
@@ -34,10 +39,6 @@
       </mat-list-item>
     </mat-list>
     <mat-menu #menu="matMenu">
-      <button mat-menu-item>
-        <mat-icon>edit</mat-icon>
-        <span>Edit</span>
-      </button>
       <button mat-menu-item>
         <mat-icon>delete</mat-icon>
         <span>Delete</span>

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 import { TwitterService } from 'src/app/core/api';
+import { TwitterInfoDialogComponent } from '../twitter-info-dialog/twitter-info-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-twitter-settings',
@@ -11,9 +13,16 @@ export class TwitterSettingsComponent implements OnInit {
   @Input() hoodId;
   twitters$: Observable<Array<any>>;
 
-  constructor(private twitterService: TwitterService) {}
+  constructor(
+    private twitterService: TwitterService,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit(): void {
     this.twitters$ = this.twitterService.getTwitters(this.hoodId);
   }
+
+  onInfoClick() {
+    this.dialog.open(TwitterInfoDialogComponent);
+  }
 }