[frontend] Add Twitter callback (add)

This commit is contained in:
Cathy Hu 2020-08-31 21:43:24 +02:00
parent f1bc3cba8b
commit 0df7f39551
13 changed files with 93 additions and 34 deletions

View file

@ -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],
},

View file

@ -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: [

View file

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

View file

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

View file

@ -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', () => {
let component: TwitterDialogComponent;
let fixture: ComponentFixture<TwitterDialogComponent>;
describe('TwitterCallbackComponent', () => {
let component: TwitterCallbackComponent;
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();
});

View file

@ -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']);
}
}
}

View file

@ -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 {}
}

View file

@ -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>

View file

@ -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;
}
});
}
}

View file

@ -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 {}

View file

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