social - change og:image, description and title dynamically for snippet details

Author: 4drianMatei

documentation/gimp/og-image/codever-og-image-1200x600.jpeg

@@ -23,7 +23,7 @@ export class UserInfoService {
       key: localStorageKeys.userInfoOidc,
       cacheHours: 24,
       isSensitive: true
-    }; // cache it for a day
+    }; // cache it for a day, it gets cleaned when user logs out
 
     return this.httpClientLocalStorageService
       .get<UserInfoOidc>(options)

documentation/gimp/og-image/codever-og-image-1200x600.xcf

@@ -1,7 +1,6 @@
-<div *ngIf="(snippet$ | async) as snippet" class="mt-3">
-
+<div class="mt-3">
   <app-snippet-details
-    [snippet$]="snippet$"
+    [snippet]="snippet$ | async"
     [queryText]="queryText">
   </app-snippet-details>
 

documentation/gimp/og-image/codever-snippets-1200x627.jpeg

@@ -4,6 +4,10 @@ import { Snippet } from '../../core/model/snippet';
 import { ActivatedRoute } from '@angular/router';
 import { PersonalSnippetsService } from '../../core/personal-snippets.service';
 import { UserInfoStore } from '../../core/user/user-info.store';
+import { last, map, mergeMap, switchMap, take, withLatestFrom } from 'rxjs/operators';
+import { combineLatest } from 'rxjs';
+import { Meta, Title } from '@angular/platform-browser';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-snippet-details-page',
@@ -13,8 +17,6 @@ import { UserInfoStore } from '../../core/user/user-info.store';
 export class SnippetDetailsPageComponent implements OnInit {
 
   snippet$: Observable<Snippet>;
-  snippetId: string;
-  userId: string;
 
   popup: string;
 
@@ -24,22 +26,30 @@ export class SnippetDetailsPageComponent implements OnInit {
   @Input()
   showCloseWindowBtn: boolean;
 
+  environment = environment;
+
+  snippetTitle: string;
+
   constructor(
     private personalSnippetsService: PersonalSnippetsService,
     private userInfoStore: UserInfoStore,
-    private route: ActivatedRoute) {
+    private route: ActivatedRoute,
+    ) {
 
   }
 
   ngOnInit(): void {
     this.popup = this.route.snapshot.queryParamMap.get('popup');
-    this.snippet$ = of(window.history.state.snippet);
-    if (!window.history.state.snippet) {
-      this.userInfoStore.getUserInfoOidc$().subscribe(userInfo => {
-        this.userId = userInfo.sub;
-        this.snippetId = this.route.snapshot.paramMap.get('id');
-        this.snippet$ = this.personalSnippetsService.getPersonalSnippetById(this.userId, this.snippetId);
-      });
+    if (window.history.state.snippet) {
+      this.snippetTitle = window.history.state.snippet.title;
+      this.snippet$ = of(window.history.state.snippet);
+    } else {
+      this.snippet$ = combineLatest([this.userInfoStore.getUserId$(), this.route.paramMap] ).pipe(
+        take(1),
+        switchMap(([userId, paramMap]) => {
+          return this.personalSnippetsService.getPersonalSnippetById(userId, paramMap.get('id'));
+        })
+      );
     }
   }
 

documentation/gimp/og-image/codever-snippets-1200x627.xcf

@@ -1 +1 @@
-<app-snippet-details [snippet$]="snippet$"></app-snippet-details>
+<app-snippet-details [snippet]="snippet$ | async"></app-snippet-details>

frontend/src/app/core/user/user-info.service.ts

@@ -45,6 +45,7 @@ export class PublicSnippetsService {
   getPublicSnippetById(snippetId: string): Observable<Snippet> {
     return this.httpClient
       .get<Snippet>(`${this.publicSnippetsApiBaseUrl}/${snippetId}`).pipe(
+        shareReplay(1),
         catchError(() => {
           this.router.navigate(['/404-snippet'],
             {

frontend/src/app/my-snippets/snippet-details-page/snippet-details-page.component.html

@@ -33,7 +33,7 @@ <h2>Public bookmarks tagged [<em>{{tag}}</em>]</h2>
 
 <div *ngIf="(bookmarksForTag$ | async)?.length - counter > 0">
   <button type="button" class="btn btn-primary btn-lg btn-block" (click)="showMoreResults()"
-          [disabled]="counter>=(bookmarksForTag$ | async)?.length">Show more
+          [disabled]="counter>=(bookmarksForTag$ | async)?.length" title="Show More">Show more
   </button>
   <hr/>
 </div>