Fixed server loading in web

web/src/app/models/graphql/queries.model.ts

@@ -62,6 +62,19 @@ export class Queries {
   static serversQuery = `
     query ServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
       serverCount
+      servers(filter: $filter, page: $page, sort: $sort) {
+        id
+        discordId
+        name
+        iconURL
+        userCount
+        activeUserCount
+      }
+    }
+  `;
+
+  static serversDashboardQuery = `
+    query DetailedServerInfo($filter: ServerFilter, $page: Page, $sort: Sort) {
       servers(filter: $filter, page: $page, sort: $sort) {
         id
         discordId

web/src/app/modules/view/server/server-dashboard/server-dashboard.component.html

@@ -12,7 +12,7 @@
   <div class="content">
     <div class="server-list-wrapper">
       <div class="server-list">
-        <div class="server">
+        <div class="server" *ngIf="server">
           <div class="logo">
             <img *ngIf="server ? server.iconURL : ''" [src]="server ? server.iconURL : ''">
           </div>

web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts

@@ -5,6 +5,10 @@ import { DataService } from "src/app/services/data/data.service";
 import { SpinnerService } from "src/app/services/spinner/spinner.service";
 import { SidebarService } from "../../../../services/sidebar/sidebar.service";
 import { ServerService } from "../../../../services/server.service";
+import { Query } from "../../../../models/graphql/query.model";
+import { Queries } from "../../../../models/graphql/queries.model";
+import { catchError } from "rxjs/operators";
+import { throwError } from "rxjs";
 
 @Component({
   selector: "app-server-dashboard",
@@ -27,14 +31,30 @@ export class ServerDashboardComponent implements OnInit {
 
   ngOnInit(): void {
     this.data.getServerFromRoute(this.route).then(server => {
-      this.server = server;
+      // this.server = server;
+
+      this.loadServer(server.id);
     });
 
     this.serverService.server$.subscribe(server => {
       if (!server) {
         return;
       }
-      this.server = server;
+      this.loadServer(server.id);
+    });
+  }
+
+  loadServer(id?: number): void {
+    this.data.query<Query>(Queries.serversDashboardQuery, {
+      filter: {
+        id: id
+      }
+    }).pipe(catchError(err => {
+      this.spinner.hideSpinner();
+      return throwError(() => err);
+    })).subscribe(data => {
+      this.server = data.servers[0];
+      this.spinner.hideSpinner();
     });
   }
 

web/src/app/services/data/data.service.ts

@@ -29,6 +29,18 @@ export class DataService {
   ) {
   }
 
+  public getServerIdFromRoute(route: ActivatedRoute): Promise<number> {
+    return new Promise((resolve, reject) => {
+      this.spinner.showSpinner();
+      if (!route.snapshot.params["serverId"] || route.snapshot.params["serverId"] == "undefined") {
+        this.spinner.hideSpinner();
+        this.router.navigate(["/dashboard"]);
+        reject();
+      }
+      resolve(route.snapshot.params["serverId"]);
+    });
+  }
+
   public getServerFromRoute(route: ActivatedRoute): Promise<Server> {
     return new Promise((resolve, reject) => {
       this.spinner.showSpinner();
@@ -50,7 +62,6 @@ export class DataService {
         resolve(server);
       });
     });
-
   }
 
   public query<T>(query: string, variables?: Variables, f?: Function): Observable<T> {