diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts index ef3487b..5d15273 100644 --- a/src/app/components/post/post.component.ts +++ b/src/app/components/post/post.component.ts @@ -29,10 +29,17 @@ export class PostComponent implements OnInit { this.htmlContainer.nativeElement.innerHTML = content; }); + this.stateService.getLanguageObservable().subscribe(language => { + // change the content: language has been updated + this.dataloaderService.getFullHtml(this.post, language).subscribe(content => { + this.htmlContainer.nativeElement.innerHTML = content; + }); + }); + console.log('PostComponent.ngOnInit is done.'); } - isActiveTag(tag:string):boolean { + isActiveTag(tag: string): boolean { return this.stateService.isActiveTag(tag); } diff --git a/src/app/components/posts/posts.component.html b/src/app/components/posts/posts.component.html index d548c06..67aa8b5 100644 --- a/src/app/components/posts/posts.component.html +++ b/src/app/components/posts/posts.component.html @@ -8,5 +8,5 @@
- +
diff --git a/src/app/components/posts/posts.component.ts b/src/app/components/posts/posts.component.ts index 4979c3b..45c9258 100644 --- a/src/app/components/posts/posts.component.ts +++ b/src/app/components/posts/posts.component.ts @@ -16,7 +16,8 @@ import 'rxjs/add/operator/distinct'; }) export class PostsComponent implements OnInit, OnDestroy { - posts: Post[]; + allPosts: Post[]; + filteredPosts: Post[]; tags = new Array(); constructor(private dataloaderService: DataloaderService, private stateService: StateService) { @@ -31,14 +32,12 @@ export class PostsComponent implements OnInit, OnDestroy { // console.log('PostsComponent ngOnInit()'); // fetch the posts const posts2 = this.dataloaderService.getPosts(); - // subscribing means big fat memory leak - // TODO fix this!!! posts2.subscribe(p => { - this.posts = p; + this.allPosts = p; //figure out the different tags so we can filter on them const temptags = new Array(); - this.posts.forEach(p => p.tags.forEach(t => temptags.push(t))); + this.allPosts.forEach(p => p.tags.forEach(t => temptags.push(t))); console.log(temptags); //copy the temptags into the tags array, don't include duplicates temptags.forEach(tt => { @@ -48,41 +47,54 @@ export class PostsComponent implements OnInit, OnDestroy { }); //sort the array this.tags.sort((a, b) => a.localeCompare(b)); + + //do the first filtered update! + this.updateFilteredPosts(this.stateService.getLanguage()); }); console.log('PostsComponent ngOnInit() is done'); + + //we start listening to language changes + this.stateService.getLanguageObservable().subscribe(language=>{ + console.log('posts component needs to switch languages!'); + this.updateFilteredPosts(language); + }); + } filterOnType(type: String): void { } - postsToDisplay(): Post[] { - //console.log('postsToDisplay called'); + /** + * Something happened and we need to update our filtering. This includes the tags or language changes. Afterwards, 'filteredPosts' should + * contain the new modified list of posts. + * @returns {Post[]} + */ + updateFilteredPosts(language: string) { + console.log('updating filtered posts for language '+language); const res = new Array(); - if (this.posts == null) { + if (this.allPosts == null) { return res; } - for (const post of this.posts) { + for (const post of this.allPosts) { // console.log(post); if (this.stateService.shouldDisplay(post)) { // console.log('we should display this'); // also check the language! // console.log(post.languages + ' ' + this.stateService.getLanguage()); - if (post.languages !== undefined && post.languages.indexOf(this.stateService.getLanguage()) >= 0) { + if (post.languages !== undefined && post.languages.indexOf(language) >= 0) { res.push(post); } } else { // console.log('we should not display this'); } } - - //console.log('displaying: '+res.length); - return res; + this.filteredPosts = res; } - toggleTag(tag: string) { this.stateService.toggleTag(tag); + this.updateFilteredPosts(this.stateService.getLanguage()); } isActiveTag(tag: string): boolean { diff --git a/src/app/services/dataloader.service.ts b/src/app/services/dataloader.service.ts index 6c0b703..b57745e 100644 --- a/src/app/services/dataloader.service.ts +++ b/src/app/services/dataloader.service.ts @@ -49,7 +49,7 @@ export class DataloaderService { console.log(`post with id ${post.id} has no languages defined...`); return Observable.of('You encounter a pirate without a tongue. Curious.'); } - if (post.languages.indexOf(language) !== 1) { + if (post.languages.indexOf(language) !== -1) { // language is defined! const url = `assets/post/${post.id}/full-${language}.html`; return this.http.get(url, {responseType: 'text'}); diff --git a/src/app/services/state.service.ts b/src/app/services/state.service.ts index 3875db9..4217d72 100644 --- a/src/app/services/state.service.ts +++ b/src/app/services/state.service.ts @@ -31,7 +31,7 @@ export class StateService { shouldDisplay(post: Post): boolean { - console.log('state service url: ' + this.router.url); + // console.log('state service url: ' + this.router.url); // check whether all filters are true or false: that case, just show everything let foundTrue = false; @@ -133,7 +133,7 @@ export class StateService { } } - getLanguageObservable(route: ActivatedRoute) { + getLanguageObservable() { return this.rootRoute.paramMap.map(map => map.get('language')); }