fix(ui): load recents prj from localStorage (#4627)

* fix(ui): load recents prj from localStorage And use subscription instead of hard cleanCache on navbar Signed-off-by: Yvonnick Esnault <yvonnick@esnau.lt>
ovh · Oct 3, 2019 · 11d059c · 11d059c
1 parent c390f94
commit 11d059c
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 39 deletions.
diff --git a/ui/src/app/app.service.ts b/ui/src/app/app.service.ts
@@ -68,7 +68,7 @@ export class AppService {
             event.type_event === EventType.WORKFLOW_ADD || event.type_event === EventType.WORKFLOW_UPDATE ||
             event.type_event === EventType.WORKFLOW_DELETE) {
             this.updateProjectCache(event);
-            this._navbarService.cleanCache();
+            this._navbarService.refreshData();
         }
         if (event.type_event.indexOf(EventType.APPLICATION_PREFIX) === 0) {
             this.updateApplicationCache(event);

diff --git a/ui/src/app/service/navbar/navbar.service.ts b/ui/src/app/service/navbar/navbar.service.ts
@@ -11,37 +11,21 @@ import { Observable } from 'rxjs/Rx';
 export class NavbarService {
 
   private _navbar: BehaviorSubject<Array<NavbarProjectData>> = new BehaviorSubject(null);
-  private inCache = false;
 
   constructor(private _http: HttpClient) { }
 
-  /**
-   * return false if cache is cleaned
-   */
-  isInCache() {
-    return this.inCache;
+  getObservable(): Observable<Array<NavbarProjectData>> {
+    return new Observable<Array<NavbarProjectData>>(fn => this._navbar.subscribe(fn));
   }
 
-  /**
-   * clean current cache
-   */
-  cleanCache() {
-    this._navbar = new BehaviorSubject(null);
-    this.inCache = false;
-  }
   /**
    * Get the navbar data from API.
    * @returns {Observable<Array<NavbarProjectData>>}
    */
-  getData(fromCache?: boolean): Observable<Array<NavbarProjectData>> {
-    if (!this.inCache || !fromCache) {
-      this._http.get<Array<NavbarProjectData>>('/ui/navbar')
-        .subscribe((data) => {
-          this.inCache = true;
-          this._navbar.next(data);
-        });
-    }
-
-    return new Observable<Array<NavbarProjectData>>(fn => this._navbar.subscribe(fn));
+  refreshData(): void {
+    this._http.get<Array<NavbarProjectData>>('/ui/navbar')
+      .subscribe((data) => {
+        this._navbar.next(data);
+      });
   }
 }
diff --git a/ui/src/app/service/project/project.store.ts b/ui/src/app/service/project/project.store.ts
@@ -23,7 +23,12 @@ export class ProjectStore {
     constructor(
         private _projectService: ProjectService,
     ) {
+        this.loadRecentProjects();
+    }
 
+    loadRecentProjects(): void {
+        let arrayApp = JSON.parse(localStorage.getItem(ProjectStore.RECENT_PROJECTS_KEY));
+        this._recentProjects.next(List.of(...arrayApp));
     }
 
     getProjectsList(resync: boolean = false): Observable<List<Project>> {

diff --git a/ui/src/app/store/project.state.ts b/ui/src/app/store/project.state.ts
@@ -441,7 +441,7 @@ export class ProjectState {
                 project_key: action.payload.projectKey
             }
         ).pipe(tap(() => {
-            this._navbarService.getData(); // TODO: to delete
+            this._navbarService.refreshData();
             if (state.project && state.project.key) {
                 ctx.setState({
                     ...state,

diff --git a/ui/src/app/store/workflow.state.ts b/ui/src/app/store/workflow.state.ts
@@ -677,7 +677,7 @@ export class WorkflowState {
                 workflow_name: action.payload.workflowName,
             }
         ).pipe(tap(() => {
-            this._navbarService.getData(); // TODO: to delete
+            this._navbarService.refreshData();
             if (state.workflow) {
                 ctx.setState({
                     ...state,

diff --git a/ui/src/app/views/admin/broadcast/add/broadcast.add.component.ts b/ui/src/app/views/admin/broadcast/add/broadcast.add.component.ts
@@ -41,7 +41,7 @@ export class BroadcastAddComponent {
         private _broadcastService: BroadcastService,
         private _cd: ChangeDetectorRef
     ) {
-        this.navbarSub = this._navbarService.getData(true).subscribe((data) => {
+        this.navbarSub = this._navbarService.getObservable().subscribe((data) => {
             this.loading = false;
             if (Array.isArray(data)) {
                 let voidProj = new NavbarProjectData();

diff --git a/ui/src/app/views/admin/broadcast/edit/broadcast.edit.component.ts b/ui/src/app/views/admin/broadcast/edit/broadcast.edit.component.ts
@@ -51,7 +51,7 @@ export class BroadcastEditComponent {
         this.broadcastLevelsList.forEach(element => {
             this.levels.push(element.value);
         });
-        this.navbarSub = this._navbarService.getData(true)
+        this.navbarSub = this._navbarService.getObservable()
             .subscribe((data) => {
                 this.loading = false;
                 if (Array.isArray(data)) {

diff --git a/ui/src/app/views/favorite/favorite.component.ts b/ui/src/app/views/favorite/favorite.component.ts
@@ -30,7 +30,7 @@ export class FavoriteComponent {
     ) {
       this.loadBookmarks();
 
-      this._navbarSub = this._navbarService.getData(true)
+      this._navbarSub = this._navbarService.getObservable()
         .subscribe((data) => {
             this._cd.markForCheck();
             this.loading = false;

diff --git a/ui/src/app/views/home/home.component.ts b/ui/src/app/views/home/home.component.ts
@@ -41,7 +41,7 @@ export class HomeComponent implements OnInit {
     ) {
         this.user = this._authStore.getUser();
         this.filter = new TimelineFilter();
-        this._navbarSub = this._navbarService.getData(true)
+        this._navbarSub = this._navbarService.getObservable()
             .subscribe((data) => {
                 if (Array.isArray(data)) {
                     this.favorites = data.filter((fav) => fav.favorite);

diff --git a/ui/src/app/views/navbar/navbar.component.ts b/ui/src/app/views/navbar/navbar.component.ts
@@ -34,7 +34,6 @@ export class NavbarComponent implements OnInit, AfterViewInit {
     ready = false;
 
     // List of projects in the nav bar
-    navProjects: Array<NavbarProjectData> = [];
     listFavs: Array<NavbarProjectData> = [];
     navRecentProjects: List<Project>;
     navRecentApp: List<Application>;
@@ -188,11 +187,6 @@ export class NavbarComponent implements OnInit, AfterViewInit {
         this.searchApplications = new Array<NavbarSearchItem>();
         this.searchWorkflows = new Array<NavbarSearchItem>();
 
-        // refresh data if cache was cleaned
-        if (!this._navbarService.isInCache()) {
-            this.getData();
-        }
-
         if (this.searchValue && this.searchValue !== '') {
             this.isSearch = true;
             this.processSearch(this.searchItems);
@@ -313,9 +307,9 @@ export class NavbarComponent implements OnInit, AfterViewInit {
      * Listen change on project list.
      */
     getData(): void {
-        this.navbarSubscription = this._navbarService.getData().subscribe(data => {
+        this._navbarService.refreshData();
+        this.navbarSubscription = this._navbarService.getObservable().subscribe(data => {
             if (Array.isArray(data) && data.length > 0) {
-                this.navProjects = data;
                 this.searchItems = new Array<NavbarSearchItem>();
                 let favProj = [];
                 this.listFavs = data.filter((p) => {
@@ -329,7 +323,7 @@ export class NavbarComponent implements OnInit, AfterViewInit {
                     return p.favorite;
                 }).slice(0, 7);
 
-                this.navProjects.forEach(p => {
+                data.forEach(p => {
                     switch (p.type) {
                         case 'workflow':
                             this.searchItems.push({