Refactor admin plugins

2 files changed, 15 insertions, 15 deletions

diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 2591c9a50..c5d440c8c 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -1,6 +1,4 @@
-<div class="toggle-plugin-type">
-  <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
-</div>
+<my-plugin-navigation [pluginType]="pluginType"></my-plugin-navigation>
 
 <div class="no-results" *ngIf="pagination.totalItems === 0">
   {{ getNoResultMessage() }}
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index 6fd238848..6d66869dd 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -10,14 +10,10 @@ import { PeerTubePlugin, PluginType } from '@shared/models'
 @Component({
   selector: 'my-plugin-list-installed',
   templateUrl: './plugin-list-installed.component.html',
-  styleUrls: [
-    '../shared/toggle-plugin-type.scss',
-    './plugin-list-installed.component.scss'
-  ]
+  styleUrls: [ './plugin-list-installed.component.scss' ]
 })
 export class PluginListInstalledComponent implements OnInit {
-  pluginTypeOptions: { label: string, value: PluginType }[] = []
-  pluginType: PluginType = PluginType.PLUGIN
+  pluginType: PluginType
 
   pagination: ComponentPagination = {
     currentPage: 1,
@@ -39,22 +35,28 @@ export class PluginListInstalledComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute
   ) {
-    this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions()
   }
 
   ngOnInit () {
-    const query = this.route.snapshot.queryParams
-    if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
+    if (!this.route.snapshot.queryParams['pluginType']) {
+      const queryParams = { pluginType: PluginType.PLUGIN }
 
-    this.reloadPlugins()
+      this.router.navigate([], { queryParams })
+    }
+
+    this.route.queryParams.subscribe(query => {
+      if (!query['pluginType']) return
+
+      this.pluginType = parseInt(query['pluginType'], 10)
+
+      this.reloadPlugins()
+    })
   }
 
   reloadPlugins () {
     this.pagination.currentPage = 1
     this.plugins = []
 
-    this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
-
     this.loadMorePlugins()
   }