From a2b8f657d797470f6f87b43ab4be1482b185377f Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 28 Aug 2020 17:35:04 +0200
Subject: [PATCH] [frontend] Snackbaring all the things

---
 .../app/dashboard/board/hoodpage/hoodpage.component.html | 2 +-
 .../board/hoodsettings/badwords/badwords.component.html  | 1 -
 .../board/hoodsettings/badwords/badwords.component.ts    | 8 ++++++--
 .../board/hoodsettings/hoodsettings.component.html       | 2 +-
 .../board/hoodsettings/trigger/trigger.component.html    | 1 -
 .../board/hoodsettings/trigger/trigger.component.ts      | 9 ++++++---
 .../hoods/new-hood-dialog/new-hood-dialog.component.html | 4 +++-
 .../hoods/new-hood-dialog/new-hood-dialog.component.ts   | 8 ++++++--
 8 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.html b/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.html
index e07ea7c..7553ea6 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/hoodpage/hoodpage.component.html
@@ -4,7 +4,7 @@
       <mat-expansion-panel>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <mat-icon>info</mat-icon>
+            <mat-icon class="info-button">info</mat-icon>
             <div class="info-title">How to configure the public hood page</div>
           </mat-panel-title>
         </mat-expansion-panel-header>
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
index cb8d59c..1ffb019 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
@@ -5,7 +5,6 @@
       <mat-form-field>
         <mat-label>Add badword</mat-label>
         <input formControlName="regex" matInput />
-        <mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
       </mat-form-field>
       <button mat-icon-button color="primary" aria-label="Add" class="button">
         <mat-icon>add</mat-icon>
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts
index d9f6673..bf5818b 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts
@@ -3,6 +3,7 @@ import { BadwordsService, BodyBadWord } from 'src/app/core/api';
 import { Observable } from 'rxjs';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { first } from 'rxjs/operators';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-badwords',
@@ -16,7 +17,8 @@ export class BadwordsComponent implements OnInit {
 
   constructor(
     private badwordService: BadwordsService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
   ) {}
 
   ngOnInit(): void {
@@ -54,7 +56,9 @@ export class BadwordsComponent implements OnInit {
           this.reload();
         },
         (error) => {
-          this.regexForm.controls['regex'].setErrors({ incorrect: true });
+          this.snackBar.open('Invalid regular expression', 'Close', {
+            duration: 2000,
+          });
         }
       );
   }
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html b/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html
index 2920a21..2e05e90 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.html
@@ -4,7 +4,7 @@
       <mat-expansion-panel>
         <mat-expansion-panel-header>
           <mat-panel-title>
-            <mat-icon>info</mat-icon>
+            <mat-icon class="info-button">info</mat-icon>
             <div class="info-title">
               How to use triggers and badwords to filter messages
             </div>
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
index 77d789d..e2228bb 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
@@ -5,7 +5,6 @@
       <mat-form-field>
         <mat-label>Add trigger</mat-label>
         <input formControlName="regex" matInput />
-        <mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
       </mat-form-field>
       <button mat-icon-button color="primary" aria-label="Add" class="button">
         <mat-icon>add</mat-icon>
diff --git a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts
index 1ad2030..9f01783 100644
--- a/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts
+++ b/kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts
@@ -5,6 +5,7 @@ import { ResourceLoader } from '@angular/compiler';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { first } from 'rxjs/operators';
 import { invalid } from '@angular/compiler/src/render3/view/util';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-trigger',
@@ -18,7 +19,8 @@ export class TriggerComponent implements OnInit {
 
   constructor(
     private triggersService: TriggersService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
   ) {}
 
   ngOnInit(): void {
@@ -56,8 +58,9 @@ export class TriggerComponent implements OnInit {
           this.reload();
         },
         (error) => {
-          console.log(error);
-          this.regexForm.controls['regex'].setErrors({ incorrect: true });
+          this.snackBar.open('Invalid regular expression', 'Close', {
+            duration: 2000,
+          });
         }
       );
   }
diff --git a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html
index a162439..7964af7 100644
--- a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html
+++ b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.html
@@ -5,7 +5,9 @@
     <mat-form-field>
       <mat-label>New hood name</mat-label>
       <input matInput formControlName="hoodName" />
-      <mat-error *ngIf="hoodForm.invalid">Name already taken</mat-error>
+      <mat-error *ngIf="hoodForm.controls.hoodName"
+        >Hood name is required</mat-error
+      >
     </mat-form-field>
   </form>
 </mat-dialog-content>
diff --git a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts
index 62c1798..ce690ec 100644
--- a/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts
+++ b/kibicara-frontend/src/app/dashboard/hoods/new-hood-dialog/new-hood-dialog.component.ts
@@ -3,6 +3,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HoodsService } from 'src/app/core/api';
 import { first } from 'rxjs/operators';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-new-hood-dialog',
@@ -15,7 +16,8 @@ export class NewHoodDialogComponent implements OnInit {
   constructor(
     public dialogRef: MatDialogRef<NewHoodDialogComponent>,
     private hoodsService: HoodsService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
   ) {}
 
   ngOnInit(): void {
@@ -44,7 +46,9 @@ export class NewHoodDialogComponent implements OnInit {
           this.dialogRef.close(data);
         },
         (error) => {
-          this.hoodForm.controls['hoodName'].setErrors({ incorrect: true });
+          this.snackBar.open('Hood name already taken', 'Close', {
+            duration: 2000,
+          });
         }
       );
   }