implement timeout error on loading if GitHub is inaccessible

editor/src/app/components/commands/command-list/command-list.component.html

@@ -64,11 +64,11 @@
                     [routerLink]="['/', game, row.extension, row.command.id]"
                     [queryParams]="getQueryParamsForCommand(row.command, game)"
                     [name]="row.command.id"
-                    [innerHTML]="row.command | propExtract: 'id' | sanitize"
+                    [innerHTML]="row.command | propExtract : 'id' | sanitize"
                   ></a>
                   <div
                     class="text-break"
-                    [innerHTML]="row.command | propExtract: 'name' | sanitize"
+                    [innerHTML]="row.command | propExtract : 'name' | sanitize"
                   ></div>
                 </ng-container>
 
@@ -78,7 +78,7 @@
                     [routerLink]="['/', game, row.extension, row.command.name]"
                     [queryParams]="getQueryParamsForCommand(row.command, game)"
                     [name]="row.command.name"
-                    [innerHTML]="row.command | propExtract: 'name' | sanitize"
+                    [innerHTML]="row.command | propExtract : 'name' | sanitize"
                   ></a>
                 </ng-template>
               </div>
@@ -90,7 +90,7 @@
                   <div
                     (click)="interceptDescriptionClick($event)"
                     [innerHTML]="
-                      row.command | linkify: game:gameExtensions | sanitize
+                      row.command | linkify : game : gameExtensions | sanitize
                     "
                   ></div>
                 </ng-container>
@@ -123,13 +123,13 @@
                         [routerLink]="['/', game, 'classes', row.command.class]"
                         ><span
                           [innerHTML]="
-                            row.command | propExtract: 'class' | sanitize
+                            row.command | propExtract : 'class' | sanitize
                           "
                         ></span></a
                       >.<span
                         class="identifier"
                         [innerHTML]="
-                          row.command | propExtract: 'member' | sanitize
+                          row.command | propExtract : 'member' | sanitize
                         "
                       ></span
                       ><span
@@ -146,13 +146,13 @@
                       >
                         <span
                           [innerHTML]="
-                            row.command | propExtract: 'class' | sanitize
+                            row.command | propExtract : 'class' | sanitize
                           "
                         ></span></a
                       >.<span
                         class="identifier"
                         [innerHTML]="
-                          row.command | propExtract: 'member' | sanitize
+                          row.command | propExtract : 'member' | sanitize
                         "
                       ></span
                       ><span
@@ -179,7 +179,7 @@
                   >
                     <pre
                       class="sample mt-3"
-                      [innerHTML]="snippet | parametrify: row.command"
+                      [innerHTML]="snippet | parametrify : row.command"
                     ></pre>
                   </ng-container>
                 </ng-container>
@@ -247,4 +247,8 @@
     role="status"
     *ngIf="loading$ | async"
   ></div>
+
+  <div *ngIf="loadingError$ | async" class="error">
+    {{ "ui.commandList.errorLoading" | translate }}
+  </div>
 </ng-template>

editor/src/app/components/commands/command-list/command-list.component.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import "variables";
 
 code {
   display: block;
@@ -26,4 +26,8 @@ code {
 
 .badge-spacing + .badge-spacing {
   margin-right: 4px;
-}
+}
+
+.error {
+  color: $danger;
+}

editor/src/app/components/commands/command-list/command-list.component.ts

@@ -24,6 +24,7 @@ export class CommandListComponent {
   @Output() descriptionClick = new EventEmitter();
 
   loading$ = this._extensions.loading$;
+  loadingError$ = this._extensions.loadingError$;
   currentPage$ = this._ui.currentPage$;
   rows$ = this._ui.rows$;
   rowsCount$ = this.rows$.pipe(map((rows) => rows?.length ?? 0));

editor/src/app/state/enums/actions.ts

@@ -8,6 +8,10 @@ export const loadEnumsSuccess = createAction(
   props<{ game: Game; enums: Enums }>()
 );
 
+export const loadEnumsError = createAction(
+  '[enums] load error',
+);
+
 export const updateEnum = createAction(
   '[enums] update enum',
   props<{

editor/src/app/state/enums/effects.ts

@@ -10,6 +10,7 @@ import {
   tap,
   withLatestFrom,
   take,
+  catchError,
 } from 'rxjs/operators';
 
 import {
@@ -21,6 +22,7 @@ import {
   updateGameEnum,
   loadEnumsInfo,
   loadEnumsInfoSuccess,
+  loadEnumsError,
 } from './actions';
 import { GameFacade } from '../game/facade';
 import { EnumsService } from './service';
@@ -30,6 +32,7 @@ import { GameEnums } from '../../models';
 import { AuthFacade } from '../auth/facade';
 import { ExtensionsFacade } from '../extensions/facade';
 import { Router } from '@angular/router';
+import { of } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class EnumsEffects {
@@ -48,9 +51,10 @@ export class EnumsEffects {
       distinctUntilChanged((a, b) => GameEnums[a.game] === GameEnums[b.game]),
       withLatestFrom(this._auth.authToken$),
       concatMap(([{ game }, accessToken]) =>
-        this._service
-          .loadEnums(game, accessToken)
-          .pipe(map((enums) => loadEnumsSuccess({ game, enums })))
+        this._service.loadEnums(game, accessToken).pipe(
+          map((enums) => loadEnumsSuccess({ game, enums })),
+          catchError(() => of(loadEnumsError()))
+        )
       )
     )
   );
@@ -123,8 +127,12 @@ export class EnumsEffects {
   loadEnumsInfo$ = createEffect(() =>
     this._actions$.pipe(
       ofType(loadEnumsInfo),
-      switchMap(() => this._service.loadEnumsInfo()),
-      map((data) => loadEnumsInfoSuccess({ data }))
+      switchMap(() =>
+        this._service.loadEnumsInfo().pipe(
+          map((data) => loadEnumsInfoSuccess({ data })),
+          catchError(() => of(loadEnumsError()))
+        )
+      )
     )
   );
 

editor/src/app/state/extensions/actions.ts

@@ -26,6 +26,11 @@ export const loadExtensionsSuccess = createAction(
   }>()
 );
 
+export const loadExtensionsError = createAction(
+  '[extensions] load error',
+  props<{ game: Game }>()
+)
+
 export const updateCommands = createAction(
   '[extensions] batch update commands',
   props<{
@@ -60,6 +65,10 @@ export const loadSupportInfo = createAction(
   props<{ data: Record<Game, SupportInfo> }>()
 );
 
+export const loadSupportInfoError = createAction(
+  '[extensions] load support info error',
+);
+
 export const markCommandsToDelete = createAction(
   '[extensions] mark commands to delete',
   props<{ names: string[], game: Game }>()

editor/src/app/state/extensions/effects.ts

@@ -9,9 +9,9 @@ import {
   concatMap,
   map,
   take,
-  filter,
   distinctUntilChanged,
   first,
+  catchError,
 } from 'rxjs/operators';
 import { flatMap, groupBy, flatten } from 'lodash';
 
@@ -21,8 +21,10 @@ import {
   init,
   initSupportInfo,
   loadExtensions,
+  loadExtensionsError,
   loadExtensionsSuccess,
   loadSupportInfo,
+  loadSupportInfoError,
   updateCommands,
   updateGameCommands,
 } from './actions';
@@ -96,7 +98,8 @@ export class ExtensionsEffects {
             }
 
             return actions;
-          })
+          }),
+          catchError(() => of(loadExtensionsError({ game })))
         )
       )
     )
@@ -326,8 +329,12 @@ export class ExtensionsEffects {
   loadSupportInfo$ = createEffect(() =>
     this._actions$.pipe(
       ofType(init),
-      switchMap(() => this._service.loadSupportInfo()),
-      map((data) => loadSupportInfo({ data: unpackSupportInfo(data) }))
+      switchMap(() =>
+        this._service.loadSupportInfo().pipe(
+          map((data) => loadSupportInfo({ data: unpackSupportInfo(data) })),
+          catchError(() => of(loadSupportInfoError()))
+        )
+      )
     )
   );
 

editor/src/app/state/extensions/facade.ts

@@ -21,6 +21,7 @@ export class ExtensionsFacade {
   extensionNames$ = this.store$.select(selector.extensionNames);
   entities$ = this.store$.select(selector.entities);
   loading$ = this.store$.select(selector.loading);
+  loadingError$ = this.store$.select(selector.loadingError);
   lastUpdate$ = this.store$.select(selector.lastUpdate);
   version$ = this.store$.select(selector.version);
   supportInfo$ = this.store$.select(selector.supportInfo);

editor/src/app/state/extensions/reducer.ts

@@ -11,6 +11,7 @@ import {
 import {
   initSupportInfo,
   loadExtensions,
+  loadExtensionsError,
   loadExtensionsSuccess,
   loadSupportInfo,
   markCommandsToDelete,
@@ -23,6 +24,7 @@ import { getSupportInfo } from '../../utils/support-info';
 export interface GameState {
   extensions: Extension[];
   loading: boolean;
+  loadingError?: boolean;
   entities?: Record<string, Entity[]>;
   lastUpdate?: number;
   version?: string;
@@ -43,6 +45,7 @@ export const extensionsReducer = createReducer(
   on(loadExtensions, (state, { game }) =>
     updateState(state, game, {
       loading: true,
+      loadingError: false,
     })
   ),
   on(
@@ -56,10 +59,14 @@ export const extensionsReducer = createReducer(
         version,
         entities: getEntities(extensions, classes),
         loading: false,
+        loadingError: false,
         classesMeta: classes,
       });
     }
   ),
+  on(loadExtensionsError, (state, { game }) =>
+    updateState(state, game, { loading: false, loadingError: true })
+  ),
   on(updateGameCommands, (state, { game, batch }) => {
     const extensions: Extension[] = batch.reduce(
       (

editor/src/app/state/extensions/selectors.ts

@@ -66,6 +66,11 @@ export const loading = createSelector(
   (state: GameState | undefined) => state?.loading
 );
 
+export const loadingError = createSelector(
+  state,
+  (state: GameState | undefined) => state?.loadingError
+);
+
 export const extensionEntities = createSelector(
   state,
   (state: GameState | undefined, props: { extension: string }) =>

editor/src/app/state/game/actions.ts

@@ -1,5 +1,5 @@
 import { createAction, props } from '@ngrx/store';
-import { Game, GenerateJsonModel, Platform, SupportInfo, Version } from '../../models';
+import { Game, GenerateJsonModel, Platform, Version } from '../../models';
 
 export const onListEnter = createAction(
   '[game] on list enter',
@@ -16,13 +16,3 @@ export const onListEnter = createAction(
     generateJsonModel?: GenerateJsonModel
   }>()
 );
-
-export const loadSupportInfo = createAction(
-  '[game] load support info',
-  props<{ game: Game }>()
-);
-
-export const loadSupportInfoSuccess = createAction(
-  '[game] load support info success',
-  props<{ supportInfo: SupportInfo }>()
-);

editor/src/app/state/github/service.ts

@@ -1,14 +1,13 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Location } from '@angular/common';
 import { Inject, Injectable } from '@angular/core';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import { catchError, map, switchMap, timeout } from 'rxjs/operators';
+import type { components } from '@octokit/openapi-types';
+import { Observable } from 'rxjs';
 
 import { CONFIG, Config } from '../../config';
 import { Game } from '../../models';
 
-import type { components } from '@octokit/openapi-types';
-import { Observable } from 'rxjs';
-
 export type GetRepoContentResponseDataBlob = components['schemas']['blob'];
 export type GetRepoContentResponseDataDirectory =
   components['schemas']['content-directory'];
@@ -28,6 +27,7 @@ export class GitHubService {
     return this._http
       .get<T>(Location.joinWithSlash(this._config.endpoints.base, fileName))
       .pipe(
+        timeout(3000),
         catchError(() => this.loadFileFromApi<T>(fileName, accessToken, game))
       );
   }
@@ -37,7 +37,6 @@ export class GitHubService {
     accessToken: string | undefined,
     game: Game
   ): Observable<T> {
-    const ts = Date.now().toString();
     const headers = accessToken
       ? new HttpHeaders({
           'Content-Type': 'application/json',
@@ -47,20 +46,17 @@ export class GitHubService {
     return this._http
       .get<GetRepoContentResponseDataDirectory>(
         Location.joinWithSlash(this._config.endpoints.contents, game),
-        {
-          headers,
-        }
+        { headers }
       )
       .pipe(
+        timeout(3000),
         switchMap((dir) => {
           const { git_url } = dir.find((file) => file.path === fileName) ?? {};
           if (!git_url) {
             throw new Error(`File ${fileName} not found in the repo`);
           }
           return this._http
-            .get<GetRepoContentResponseDataBlob>(git_url, {
-              headers,
-            })
+            .get<GetRepoContentResponseDataBlob>(git_url, { headers })
             .pipe(map((blob) => JSON.parse(atob(blob.content)) as T));
         }),
         catchError(() => this.loadFileFromAssets<T>(fileName))
@@ -69,9 +65,11 @@ export class GitHubService {
 
   loadFileFromAssets<T extends object>(fileName: string) {
     const ts = Date.now().toString();
-    return this._http.get<T>(Location.joinWithSlash('/assets', fileName), {
-      params: { ts },
-    });
+    return this._http
+      .get<T>(Location.joinWithSlash('/assets', fileName), {
+        params: { ts },
+      })
+      .pipe(timeout(3000));
   }
 
   loadMarkdown(fileName: string) {