[frontend] Add Twitter callback (add)

kibicara-frontend/src/app/dashboard/dashboard-routing.module.ts

@@ -4,6 +4,7 @@ import { DashboardComponent } from './dashboard.component';
 import { HoodsComponent } from './hoods/hoods.component';
 import { AuthGuard } from '../core/auth/auth.guard';
 import { BoardComponent } from './board/board.component';
+import { TwitterCallbackComponent } from '../platforms/twitter/twitter-callback/twitter-callback.component';
 
 const routes: Routes = [
   {
@@ -12,6 +13,8 @@ const routes: Routes = [
     children: [
       { path: '', component: HoodsComponent },
       { path: 'hoods/:id', component: BoardComponent },
+      // Platform-specific Routes
+      { path: 'twitter-callback', component: TwitterCallbackComponent },
     ],
     canActivate: [AuthGuard],
   },

kibicara-frontend/src/app/platforms/platforms.module.ts

@@ -8,8 +8,8 @@ import { EmailDialogComponent } from './email/email-dialog/email-dialog.componen
 import { EmailInfoDialogComponent } from './email/email-info-dialog/email-info-dialog.component';
 import { TelegramInfoDialogComponent } from './telegram/telegram-info-dialog/telegram-info-dialog.component';
 import { TelegramDialogComponent } from './telegram/telegram-dialog/telegram-dialog.component';
-import { TwitterDialogComponent } from './twitter/twitter-dialog/twitter-dialog.component';
 import { TwitterInfoDialogComponent } from './twitter/twitter-info-dialog/twitter-info-dialog.component';
+import { TwitterCallbackComponent } from './twitter/twitter-callback/twitter-callback.component';
 
 @NgModule({
   declarations: [
@@ -20,8 +20,8 @@ import { TwitterInfoDialogComponent } from './twitter/twitter-info-dialog/twitte
     EmailInfoDialogComponent,
     TelegramInfoDialogComponent,
     TelegramDialogComponent,
-    TwitterDialogComponent,
     TwitterInfoDialogComponent,
+    TwitterCallbackComponent,
   ],
   imports: [CommonModule, SharedModule],
   exports: [

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

@@ -0,0 +1,3 @@
+<div >
+  <mat-spinner class="spinner"></mat-spinner>
+</div>

kibicara-frontend/src/app/platforms/twitter/twitter-callback/twitter-callback.component.scss

@@ -0,0 +1,4 @@
+.spinner {
+  display: block;
+  margin: auto;
+}

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

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

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TwitterService } from 'src/app/core/api';
+
+@Component({
+  selector: 'app-twitter-callback',
+  templateUrl: './twitter-callback.component.html',
+  styleUrls: ['./twitter-callback.component.scss'],
+})
+export class TwitterCallbackComponent implements OnInit {
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private twitterService: TwitterService
+  ) {}
+
+  ngOnInit(): void {
+    if (
+      this.route.snapshot.queryParams['hood'] &&
+      this.route.snapshot.queryParams['oauth_token'] &&
+      this.route.snapshot.queryParams['oauth_verifier']
+    ) {
+      this.twitterService
+        .callbackTwitter(
+          this.route.snapshot.queryParams['oauth_token'],
+          this.route.snapshot.queryParams['oauth_verifier']
+        )
+        .subscribe(() => {
+          this.router.navigate([
+            '/dashboard/hoods',
+            this.route.snapshot.queryParams['hood'],
+          ]);
+        });
+    } else {
+      this.router.navigate(['/404']);
+    }
+  }
+}

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

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

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

@@ -1,12 +0,0 @@
-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-settings/twitter-settings.component.html

@@ -17,7 +17,7 @@
   <mat-card-content>
     <mat-list *ngIf="twitters$ | async as twitters">
       <mat-list-item *ngIf="twitters.length === 0">
-        <button mat-menu-item>
+        <button mat-menu-item (click)="onCreate()">
           <mat-icon>add</mat-icon>
           <span> Add a platform connection!</span>
         </button>
@@ -36,17 +36,17 @@
           </button>
         </div>
         <mat-divider></mat-divider>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="onDelete(twitter.id)">
+            <mat-icon>delete</mat-icon>
+            <span>Delete</span>
+          </button>
+          <button mat-menu-item (click)="onCreate()">
+            <mat-icon>add</mat-icon>
+            <span>Add another</span>
+          </button>
+        </mat-menu>
       </mat-list-item>
     </mat-list>
-    <mat-menu #menu="matMenu">
-      <button mat-menu-item>
-        <mat-icon>delete</mat-icon>
-        <span>Delete</span>
-      </button>
-      <button mat-menu-item>
-        <mat-icon>add</mat-icon>
-        <span>Add another</span>
-      </button>
-    </mat-menu>
   </mat-card-content>
 </mat-card>

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

@@ -19,10 +19,31 @@ export class TwitterSettingsComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
+    this.reload();
+  }
+
+  private reload() {
     this.twitters$ = this.twitterService.getTwitters(this.hoodId);
   }
 
   onInfoClick() {
     this.dialog.open(TwitterInfoDialogComponent);
   }
+
+  onDelete(twitterId) {
+    this.twitterService.deleteTwitter(twitterId, this.hoodId).subscribe(() => {
+      this.reload();
+    });
+  }
+
+  onCreate() {
+    this.twitterService.createTwitter(this.hoodId).subscribe((twitter) => {
+      if (twitter && twitter.access_token) {
+        const redirectUrl =
+          'https://api.twitter.com/oauth/authorize?oauth_token=' +
+          twitter.access_token;
+        window.location.href = redirectUrl;
+      }
+    });
+  }
 }

kibicara-frontend/src/app/shared/material/material.module.ts

@@ -12,6 +12,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @NgModule({
   declarations: [],
@@ -29,6 +30,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatSnackBarModule,
     MatSlideToggleModule,
     MatTooltipModule,
+    MatProgressSpinnerModule,
   ],
   exports: [
     MatButtonModule,
@@ -44,6 +46,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatSnackBarModule,
     MatSlideToggleModule,
     MatTooltipModule,
+    MatProgressSpinnerModule,
   ],
 })
 export class MaterialModule {}

kibicara-frontend/src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  API_BASE_PATH: 'http://localhost:8000',
+  API_BASE_PATH: 'http://127.0.0.1:8000',
-  EMAIL_DOMAIN: 'localhost',
+  EMAIL_DOMAIN: '127.0.0.1',
 };
 
 /*