2.3 - Refactoring remaining components

Author: quead

src/app/components/category/category.component.ts

@@ -21,16 +21,20 @@ export class CategoryComponent implements OnInit {
     private activatedRoute: ActivatedRoute,
     private router: Router
   ) {
+    // INIT SETTINGS
+    this.shared.getSettings();
+    this.shared.setSettings();
   }
 
   ngOnInit() {
+
     this.activatedRoute.paramMap.subscribe(data => {
       if (data['params'].id === 'all') {
         this.getFeedVideos();
       } else {
         this.globals.currentCategory = data['params'].id;
       }
-      this.initCategories();
+      this.getCategories();
     });
   }
 
@@ -54,26 +58,11 @@ export class CategoryComponent implements OnInit {
     await this.shared.initChannel();
   }
 
-  async initCategories() {
-    this.shared.setApiSettings();
-    if (this.globals.settings) {
-      this.getCategories();
-    } else {
-      await this.shared.initSettings().then(
-        (done) => {
-          this.getCategories();
-        }
-      );
-    }
-  }
-
   async getFeedVideos() {
     if (!this.globals.feedVideos) {
       await this.shared.initFeed();
     }
-    if (!this.globals.channel) {
-      await this.shared.initChannel();
-    }
+    await this.shared.initChannel();
     this.loading = false;
   }
 

src/app/components/youtube-history.component.ts

@@ -9,29 +9,26 @@ import { GlobalsService } from '../services/globals.service';
 
 export class HistoryComponent implements OnInit {
 
-  _app: any;
-
   constructor(
     private globals: GlobalsService,
     private app: AppComponent
   ) {
-    this._app = app;
   }
 
   ngOnInit() {
     console.log('history');
   }
 
   addPlaylistItem(i: number, list: number) {
-      this._app.addPlaylistItem(i, list);
+      this.app.addPlaylistItem(i, list);
   }
 
   onCopyVideoItemLink(i: number, list: number) {
-    this._app.onCopyVideoItemLink(i, list);
+    this.app.onCopyVideoItemLink(i, list);
   }
 
   onClickHistory(event: Event, i: number) {
-    this._app.getVideo(this.globals.historyVideos[i]);
+    this.app.getVideo(this.globals.historyVideos[i]);
   }
 
 }

src/app/components/youtube-search.component.ts

@@ -15,15 +15,12 @@ export class SearchComponent implements OnInit {
   searchForm: FormGroup;
   noResults = false;
 
-  _app: any;
-
   constructor(
     private youtube: YoutubeGetVideo,
     private globals: GlobalsService,
     private shared: SharedService,
     private app: AppComponent,
   ) {
-    this._app = app;
   }
 
   ngOnInit() {
@@ -63,21 +60,21 @@ export class SearchComponent implements OnInit {
 
   onClickVideo(event: Event, i: any, list: number) {
     if (list === 1) {
-      this._app.getVideo(this.globals.searchedVideos[i]);
+      this.app.getVideo(this.globals.searchedVideos[i]);
       this.clearSearch();
     } else if (list === 3) {
-      this._app.getVideo(this.globals.feedVideos[i]);
+      this.app.getVideo(this.globals.feedVideos[i]);
     }
     this.clearSearch();
   }
 
   onCopyVideoItemLink(i: number, list: number) {
-    this._app.onCopyVideoItemLink(i, list);
+    this.app.onCopyVideoItemLink(i, list);
     this.clearSearch();
   }
 
   addPlaylistItem(i: number, list: number) {
-    this._app.addPlaylistItem(i, list);
+    this.app.addPlaylistItem(i, list);
     this.clearSearch();
   }
 }

src/app/components/youtube-settings.component.html

@@ -2,7 +2,7 @@
     <h2>Settings</h2>
 </div>
 <div class="app-content">
-    <form *ngIf="finished" [formGroup]="internalSettings" id="internalSettings" class="settingsForm" novalidate>
+    <form *ngIf="loading" [formGroup]="internalSettings" id="internalSettings" class="settingsForm" novalidate>
         <h3>Internal Settings</h3>
         <div *ngFor="let setting of initInternalForm.controls; let i=index" [ngClass]="{'hide': !globals.internal_settings[i].visible}" class="form-group">
             <input type="checkbox" [attr.id]="'setting-' + i" [formControl]="setting"/>

src/app/components/youtube-settings.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormArray, FormGroup, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { AppComponent } from '../app.component';
-import { SearchComponent } from './youtube-search.component';
 import { CategoryComponent } from './category/category.component';
 import { SharedService } from '../services/shared.service';
 import { GlobalsService } from '../services/globals.service';
@@ -11,18 +10,12 @@ import { HttpClient } from '@angular/common/http';
 @Component({
     selector: 'app-settings',
     templateUrl: 'youtube-settings.component.html',
-    providers: [ SearchComponent, CategoryComponent, NumberVal ]
+    providers: [ CategoryComponent, NumberVal ]
 })
 
 export class SettingsComponent implements OnInit {
 
-    finished = false;
-
-    _shared: any;
-    _fb: any;
-    _app: any;
-    _search: any;
-    _category: any;
+    loading = false;
 
     internalSettings: FormGroup;
     externalSettings: FormGroup;
@@ -33,14 +26,8 @@ export class SettingsComponent implements OnInit {
         private shared: SharedService,
         private globals: GlobalsService,
         private app: AppComponent,
-        private search: SearchComponent,
         private category: CategoryComponent,
     ) {
-        this._shared = shared;
-        this._fb = fb;
-        this._app = app;
-        this._search = search;
-        this._category = category;
     }
 
     ngOnInit() {
@@ -49,7 +36,7 @@ export class SettingsComponent implements OnInit {
     }
 
     setForm() {
-        this.internalSettings = this._fb.group({
+        this.internalSettings = this.fb.group({
             settings: this.mapSettings()
         });
         this.checkInputs();
@@ -82,49 +69,49 @@ export class SettingsComponent implements OnInit {
                 this.globals.internal_settings[i].value = data.settings[i];
             });
             this.globals.settings.form_settings = this.globals.internal_settings;
-            this._shared.updateSettings();
-            this._shared.setSettings();
+            this.shared.updateSettings();
+            this.shared.setSettings();
 
-            this._app.checkVolumeRange();
+            this.app.checkVolumeRange();
 
-            this._shared.triggerNotify('Changed');
+            this.shared.triggerNotify('Changed');
         });
     }
 
     mapSettings() {
         const arr = this.globals.internal_settings.map(s => {
-            return this._fb.control(s.value);
+            return this.fb.control(s.value);
         });
         return this.fb.array(arr);
     }
 
     getDefaultSettings() {
-        this._shared.setApiSettings();
+        this.shared.getSettings();
         this.globals.internal_settings = this.globals.settings.form_settings;
         this.globals.external_settings = this.globals.settings.api_settings;
         this.initExternalForm();
-        this.finished = true;
+        this.loading = true;
         this.setForm();
     }
 
     externalSave() {
         if (this.externalSettings.valid) {
-            this._shared.triggerNotify('Saved');
+            this.shared.triggerNotify('Saved');
             this.globals.external_settings[0].value = this.externalSettings.controls.fcApi.value;
             this.globals.external_settings[1].value = this.externalSettings.controls.fcRegion.value;
             this.globals.external_settings[2].value = parseInt(this.externalSettings.controls.fcSearchresults.value, 10);
             this.globals.external_settings[3].value = parseInt(this.externalSettings.controls.fcRelatedResults.value, 10);
             this.globals.settings.api_settings = this.globals.external_settings;
             this.globals.feedVideos = null;
 
-            this._shared.updateSettings();
-            this._shared.setApiSettings();
-            this._shared.setSettings();
+            this.shared.updateSettings();
+            this.shared.getSettings();
+            this.shared.setSettings();
 
-            this._app.getFeedVideos();
+            this.category.getFeedVideos();
 
         } else {
-            this._shared.triggerNotify('Please check external settings');
+            this.shared.triggerNotify('Please check external settings');
         }
     }
 }

src/app/models/channel.model.ts

@@ -29,6 +29,9 @@ export class GlobalsService {
   darkMode = true;
 
   regionCode = '';
+  apiKey = '';
+  numSearchRes = '';
+  numRelatedRes = '';
 
   settings: any;