From 66ae05998f7c8c9fcc3efbe0035024fb0607fd29 Mon Sep 17 00:00:00 2001 From: ZimGil Date: Fri, 23 Nov 2018 17:54:45 +0200 Subject: [PATCH 1/2] removed double subscriptions and unsubscriptions --- .../command-status-response.interface.ts | 6 + server/server.ts | 3 +- src/app/app.component.ts | 134 +++++++----------- src/app/components/serve/serve.component.ts | 6 +- .../command-status-response.interface.ts | 6 + src/app/services/command/command.service.ts | 9 +- 6 files changed, 73 insertions(+), 91 deletions(-) create mode 100644 server/models/command-status-response.interface.ts create mode 100644 src/app/models/command-status-response.interface.ts diff --git a/server/models/command-status-response.interface.ts b/server/models/command-status-response.interface.ts new file mode 100644 index 0000000..bfd8fea --- /dev/null +++ b/server/models/command-status-response.interface.ts @@ -0,0 +1,6 @@ +import { AngularCliProcessStatus } from './angular-cli-process-status.enum'; + +export interface CommandStatusResponse { + id: string; + status: AngularCliProcessStatus; +} diff --git a/server/server.ts b/server/server.ts index 3efab8f..f9d879a 100644 --- a/server/server.ts +++ b/server/server.ts @@ -11,6 +11,7 @@ import { AngularCliProcessStatus } from './models/angular-cli-process-status.enu import { AngularProjectChecker } from './angular-project-checker'; import { printLogo } from './logo-printer.helper'; import { NgWizLogger } from './ngWizLogger'; +import { CommandStatusResponse } from './models/command-status-response.interface'; const app = express(); const STATIC_FILES_LOCATION = path.join(__dirname, '../../..', '/dist/ngWiz'); @@ -123,7 +124,7 @@ app.get('/status', (req, res) => { if (processRunner.runningProcesses[id]) { const processStatus = processRunner.runningProcesses[id].status; - res.send({status: processStatus}); + res.send({id: id, status: processStatus}); if (processStatus === AngularCliProcessStatus.done && !processRunner.runningProcesses[id].command.includes('ng serve ')) { processRunner.runningProcesses[id] = null; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0240e90..bdbc2f0 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,15 @@ import { Component, OnInit } from '@angular/core'; -import { interval, timer, empty } from 'rxjs'; -import { exhaustMap, mergeMap, catchError } from 'rxjs/operators'; +import * as _ from 'lodash'; +import { timer, empty, throwError } from 'rxjs'; +import { exhaustMap, mergeMap, catchError, filter, take } from 'rxjs/operators'; import { CommandService } from './services/command/command.service'; import { CommandRequest } from './models/angular-command-request'; import { AngularCliProcessStatus } from './models/angular-cli-process-status.enum'; import { ErrorService } from './services/error/error.service'; import { AngularCommandType } from './models/angular-command-type.enum'; +import { CommandStatusResponse } from './models/command-status-response.interface'; @Component({ selector: 'app-root', @@ -19,10 +21,8 @@ export class AppComponent implements OnInit { title = 'ngWiz'; isAngularProject: boolean; isReadyForWork = false; - runningCommands = {}; - timedStatusCheck = interval(1000); KEEP_ALIVE_INTERVAL = 1000; - subscription = {}; + COMMAND_STATUS_CHECK_INTERVAL = 1000; serveCommandId: string; availableProjects: string[] = []; @@ -50,80 +50,31 @@ export class AppComponent implements OnInit { .subscribe((projects: string[]) => this.availableProjects = projects); } - checkCommandStatus(commandId: string): void { - this.commandService.checkCommandStatus(commandId) - .subscribe(response => { - this.runningCommands[commandId] = response; - }, error => { - if (error.status === 404) { - console.log('command not found in server, stop checking'); - this.doneCheckingCommand(commandId); - } - }); - } - - doneCheckingCommand(commandId: string): void { - this.subscription[commandId].unsubscribe(); - this.subscription[commandId] = null; - } - - commandDone(commandId: string, commandType?: AngularCommandType): void { - if (commandType === AngularCommandType.new) { - this.checkAngularProject(); - } - this.runningCommands[commandId] = null; - } - - startCheckingCommand(commandId: string, commandType?: AngularCommandType): void { - if (this.runningCommands[commandId]) { - const status = this.runningCommands[commandId].status; - - if (status === AngularCliProcessStatus.done) { - this.doneCheckingCommand(commandId); - this.commandDone(commandId, commandType); - if (commandType === AngularCommandType.serve) { - this.serveCommandId = commandId; - } - } else if (status === AngularCliProcessStatus.error) { - this.doneCheckingCommand(commandId); - } else if (status === AngularCliProcessStatus.working) { - this.checkCommandStatus(commandId); - } - } else { - this.checkCommandStatus(commandId); - } - } - chooseProject(projectName: string) { - this.commandService.chooseProject(projectName) - .subscribe( - res => this.isAngularProject = true, - () => { - this.errorService.addError({ - errorText: 'Could not choose this project', - errorDescription: 'There was an error while trying to choose this project', - }); - this.availableProjects.splice(this.availableProjects.indexOf(projectName)); + this.commandService.chooseProject(projectName).subscribe( + res => this.isAngularProject = true, + () => { + this.errorService.addError({ + errorText: 'Could not choose this project', + errorDescription: 'There was an error while trying to choose this project', }); - } + this.availableProjects.splice(this.availableProjects.indexOf(projectName)); + } + ); + } keepAlive(): void { - this.subscription['TimedkeepAlive'] = timer(0, this.KEEP_ALIVE_INTERVAL) - .pipe( - exhaustMap( - () => this.commandService.keepAlive() - ) - ) - .subscribe( - response => {}, - error => { - this.errorService.addError({ - errorText: 'The server is offline', - errorDescription: 'please run the server and restart the client' - }); - this.subscription['TimedkeepAlive'].unsubscribe(); - } - ); + timer(0, this.KEEP_ALIVE_INTERVAL).pipe( + exhaustMap(() => this.commandService.keepAlive()), + catchError(error => throwError(error).pipe(take(1))) + ) + .subscribe( + _.noop, + error => this.errorService.addError({ + errorText: 'The server is offline', + errorDescription: 'please run the server and restart the client' + }) + ); } leaveProject(): void { @@ -166,19 +117,32 @@ export class AppComponent implements OnInit { sendCommand(userCommand: string, commandType?: AngularCommandType): void { const request = new CommandRequest(userCommand); - // TO-DO: - // remove subscribe inside of subscribe - this.commandService.sendCommand(request) - .subscribe(commandId => { - if (commandType === AngularCommandType.serve) { - localStorage.setItem('ngServeCommandId', commandId); - } - console.log('started working on command, ID:', commandId); - this.subscription[commandId] = this.timedStatusCheck - .subscribe(() => this.startCheckingCommand(commandId, commandType)); + this.commandService.sendCommand(request).pipe( + mergeMap(commandId => timer(0, this.COMMAND_STATUS_CHECK_INTERVAL) + .pipe( + mergeMap(() => this.commandService.checkCommandStatus(commandId)), + filter((response: CommandStatusResponse) => response.status !== AngularCliProcessStatus.working), + take(1) + ) + ) + ) + .subscribe(response => { + switch (response.status) { + case AngularCliProcessStatus.done: + this.commandDone(response, commandType); + break; + } }); } + commandDone(response: CommandStatusResponse, commandType?: AngularCommandType) { + if (commandType === AngularCommandType.new) { + this.checkAngularProject(); + } else if (commandType === AngularCommandType.serve) { + this.serveCommandId = response.id; + } + } + sendServeCommand(serveCommand: string): void { this.sendCommand(serveCommand, AngularCommandType.serve); } diff --git a/src/app/components/serve/serve.component.ts b/src/app/components/serve/serve.component.ts index 6b3a2f6..dc6171c 100644 --- a/src/app/components/serve/serve.component.ts +++ b/src/app/components/serve/serve.component.ts @@ -1,5 +1,7 @@ import { Component, Output, EventEmitter, Input } from '@angular/core'; - +// +import * as _ from 'lodash'; +// import { AngularCliCommand } from '../../models/angular-cli-command.interface'; import { NgserveOptions } from '../../default-values/ng-serve-options'; import { CommandService } from './../../services/command/command.service'; @@ -34,7 +36,7 @@ export class ServeComponent { this.isStoppingServeCommand = true; this.commandService.stopServing(this.serveCommandId) .subscribe( - () => {}, + _.noop, error => { this.errorService.addError({ errorText: 'The "ng serve" command you\'re trying to stop was not found', diff --git a/src/app/models/command-status-response.interface.ts b/src/app/models/command-status-response.interface.ts new file mode 100644 index 0000000..bfd8fea --- /dev/null +++ b/src/app/models/command-status-response.interface.ts @@ -0,0 +1,6 @@ +import { AngularCliProcessStatus } from './angular-cli-process-status.enum'; + +export interface CommandStatusResponse { + id: string; + status: AngularCliProcessStatus; +} diff --git a/src/app/services/command/command.service.ts b/src/app/services/command/command.service.ts index c393f91..61ea3cd 100644 --- a/src/app/services/command/command.service.ts +++ b/src/app/services/command/command.service.ts @@ -1,7 +1,10 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; - +import { Observable } from 'rxjs'; +// import { CommandRequest } from '../../models/angular-command-request'; +import { CommandStatusResponse } from '../../models/command-status-response.interface'; + @Injectable({ providedIn: 'root' @@ -21,8 +24,8 @@ export class CommandService { return this.http.get(`${this.BASE_URL}:${this.PORT}/projects`); } - checkCommandStatus(commandId: string) { - return this.http.get(`${this.BASE_URL}:${this.PORT}/status?id=${commandId}`); + checkCommandStatus(commandId: string): Observable { + return this.http.get(`${this.BASE_URL}:${this.PORT}/status?id=${commandId}`); } chooseProject(projectName: string) { From ff618efc2d2b1cc7c5f5952470cea87130b76afe Mon Sep 17 00:00:00 2001 From: ZimGil Date: Fri, 23 Nov 2018 18:36:43 +0200 Subject: [PATCH 2/2] 3rd party import --- src/app/services/command/command.service.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/services/command/command.service.ts b/src/app/services/command/command.service.ts index 61ea3cd..97e3285 100644 --- a/src/app/services/command/command.service.ts +++ b/src/app/services/command/command.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; +// import { Observable } from 'rxjs'; // import { CommandRequest } from '../../models/angular-command-request';