Rollback package-lock.json change

ui/package.json

@@ -49,7 +49,6 @@
     "@types/node": "^16.7.13",
     "@types/uuid": "^8.3.1",
     "node-html-parser": "^4.1.4",
-    "prettier": "^2.4.1",
     "raw-loader": "^4.0.2",
     "ts-node": "^10.2.0",
     "tslint": "^6.1.3",

ui/src/app/pages/apps-routes/app-list/app-list-rec/app-list-rec.component.ts

@@ -18,6 +18,7 @@ import { RecoveredInfo } from "src/app/util/parse-data-model";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppListRecComponent {
+  // Asynchronous actions initiators
   readonly install$ = new Subject<RecoveredInfo>();
   readonly delete$ = new Subject<RecoveredInfo>();
 
@@ -27,21 +28,30 @@ export class AppListRecComponent {
   @Output()
   readonly deleted = new EventEmitter<void>();
 
+  // Installing package
   readonly installing$ = this.install$.pipe(
     switchMap(({ id }) =>
+      // Mapping each installation to API request
       from(this.api.installPackage({ id })).pipe(
-        tap(() => this.deleted.emit()),
+        // Mapping operation to true/false loading indication
         loading(this.errToast)
       )
     )
   );
 
+  // Deleting package
   readonly deleting$ = this.delete$.pipe(
     switchMap(({ id }) =>
-      from(this.api.deleteRecoveredPackage({ id })).pipe(loading(this.errToast))
+      // Mapping each deletion to API request
+      from(this.api.deleteRecoveredPackage({ id })).pipe(
+        // Notifying parent component that package is removed from recovered items
+        tap(() => this.deleted.emit()),
+        // Mapping operation to true/false loading indication
+        loading(this.errToast))
     )
   );
 
+  // Merging both true/false loading indicators to a single stream
   readonly loading$ = merge(this.installing$, this.deleting$);
 
   constructor(
@@ -62,6 +72,7 @@ export class AppListRecComponent {
         {
           text: "Delete",
           handler: () => {
+            // Initiate deleting of 'pkg'
             this.delete$.next(pkg);
           },
           cssClass: "enter-click",
@@ -72,12 +83,16 @@ export class AppListRecComponent {
   }
 }
 
+// Custom RxJS operator to turn asynchronous operation into a true/false loading indicator
 function loading(
   errToast: ErrorToastService
 ): OperatorFunction<unknown, boolean> {
   return pipe(
+    // Start operation with true
     startWith(true),
+    // Show notification on error
     catchError((e) => from(errToast.present(e))),
+    // Map any result to false to stop loading inidicator
     mapTo(false)
   );
 }