Add support for post pinning to frontend.

src/app/backend-api.service.ts

@@ -180,6 +180,7 @@ export class PostEntryResponse {
   InMempool: boolean;
   IsPinned: boolean;
   DiamondsFromSender?: number;
+  IsGlobalPinned: boolean;
 }
 
 export class DiamondsPost {
@@ -651,6 +652,7 @@ export class BackendApiService {
     PostExtraData: any,
     Sub: string,
     IsHidden: boolean,
+    IsPinned: boolean,
     MinFeeRateNanosPerKB: number
   ): Observable<any> {
     const request = this.post(endpoint, BackendRoutes.RoutePathSubmitPost, {
@@ -663,6 +665,7 @@ export class BackendApiService {
       PostExtraData,
       Sub,
       IsHidden,
+      IsPinned,
       MinFeeRateNanosPerKB,
     });
 
@@ -778,7 +781,8 @@ export class BackendApiService {
     ReaderPublicKeyBase58Check: string,
     LastPostHashHex: string,
     NumToFetch: number,
-    MediaRequired: boolean
+    MediaRequired: boolean,
+    MaxPinnedPosts: number,
   ): Observable<any> {
     return this.post(endpoint, BackendRoutes.RoutePathGetPostsForPublicKey, {
       PublicKeyBase58Check,
@@ -787,6 +791,7 @@ export class BackendApiService {
       LastPostHashHex,
       NumToFetch,
       MediaRequired,
+      MaxPinnedPosts,
     });
   }
 

src/app/creator-profile-page/creator-profile-posts/creator-profile-posts.component.html

@@ -20,9 +20,11 @@
         *ngIf="post.ProfileEntryResponse"
         [contentShouldLinkToThread]="true"
         [includePaddingOnPost]="true"
+        [includeVisualPin]="true"
         [post]="post"
         [afterCommentCreatedCallback]="_prependComment.bind(this, post, index)"
         [blocked]="globalVars.hasUserBlockedCreator(profile.PublicKeyBase58Check)"
+        [showLeftSelectedBorder]="post.IsPinned"
         (userBlocked)="userBlocked()"
       ></feed-post>
       <div *ngFor="let comment of post.Comments">

src/app/creator-profile-page/creator-profile-posts/creator-profile-posts.component.ts

@@ -13,6 +13,7 @@ import * as _ from "lodash";
 })
 export class CreatorProfilePostsComponent {
   static PAGE_SIZE = 10;
+  static MAX_PINNED_POSTS = 5;
   @Input() profile: ProfileEntryResponse;
   @Input() afterCommentCreatedCallback: any = null;
   @Input() showProfileAsReserved: boolean;
@@ -104,7 +105,8 @@ export class CreatorProfilePostsComponent {
         this.globalVars.loggedInUser?.PublicKeyBase58Check,
         lastPostHashHex,
         CreatorProfilePostsComponent.PAGE_SIZE,
-        false /*MediaRequired*/
+        false /*MediaRequired*/,
+        CreatorProfilePostsComponent.MAX_PINNED_POSTS,
       )
       .toPromise()
       .then((res) => {

src/app/feed/feed-create-post/feed-create-post.component.ts

@@ -171,6 +171,7 @@ export class FeedCreatePostComponent implements OnInit {
         // TODO: Should we have different values for creator basis points and stake multiple?
         // TODO: Also, it may not be reasonable to allow stake multiple to be set in the FE.
         false /*IsHidden*/,
+        false,
         this.globalVars.defaultFeeRateNanosPerKB /*MinFeeRateNanosPerKB*/
       )
       .subscribe(

src/app/feed/feed-post-dropdown/feed-post-dropdown.component.html

@@ -5,7 +5,7 @@
   <a class="js-feed-post__dropdown-toggle link--unstyled text-grey9" role="button" dropdownToggle>
     <i class="fas fa-ellipsis-h"></i>
   </a>
-  <div class="dropdown-menu dropdown-menu-right p-0" *dropdownMenu app-theme>
+  <div class="dropdown-menu dropdown-menu-right p-0" style="min-width: 11rem" *dropdownMenu app-theme>
     <a
       class="dropdown-menu-item fs-12px d-block link--unstyled p-10px feed-post__dropdown-menu-item"
       (click)="copyPostLinkToClipboard($event)"
@@ -76,5 +76,21 @@
       <i class="fas fa-undo"></i>
       Unpin From Feed
     </a>
+    <a
+      *ngIf="showPinToProfileDropdownItem()"
+      class="dropdown-menu-item d-block link--unstyled p-10px feed-post__dropdown-menu-item text-success fs-12px"
+      (click)="_pinPostToProfile($event)"
+    >
+      <i class="fas fa-thumbtack"></i>
+      Pin To Profile
+    </a>
+    <a
+      *ngIf="showUnpinFromProfileDropdownItem()"
+      class="dropdown-menu-item d-block link--unstyled p-10px feed-post__dropdown-menu-item text-danger fs-12px"
+      (click)="_pinPostToProfile($event)"
+    >
+      <i class="fas fa-undo"></i>
+      Unpin From Profile
+    </a>
   </div>
 </div>

src/app/feed/feed-post-dropdown/feed-post-dropdown.component.ts

@@ -16,7 +16,8 @@ export class FeedPostDropdownComponent {
   @Output() postHidden = new EventEmitter();
   @Output() userBlocked = new EventEmitter();
   @Output() toggleGlobalFeed = new EventEmitter();
-  @Output() togglePostPin = new EventEmitter();
+  @Output() toggleFeedPostPin = new EventEmitter();
+  @Output() toggleProfilePostPin = new EventEmitter();
 
   constructor(
     public globalVars: GlobalVarsService,
@@ -70,11 +71,21 @@ export class FeedPostDropdownComponent {
   }
 
   showPinPostToGlobalFeedDropdownItem(): boolean {
-    return this.globalFeedEligible() && !this.post.IsPinned;
+    return this.globalFeedEligible() && !this.post.IsGlobalPinned;
   }
 
   showUnpinPostFromGlobalFeedDropdownItem(): boolean {
-    return this.globalFeedEligible() && this.post.IsPinned;
+    return this.globalFeedEligible() && this.post.IsGlobalPinned;
+  }
+
+  showPinToProfileDropdownItem(): boolean {
+    return this.globalVars.loggedInUser.PublicKeyBase58Check == this.post.PosterPublicKeyBase58Check
+      && !this.post.IsPinned;
+  }
+
+  showUnpinFromProfileDropdownItem(): boolean {
+    return this.globalVars.loggedInUser.PublicKeyBase58Check == this.post.PosterPublicKeyBase58Check
+      && this.post.IsPinned;
   }
 
   hidePost() {
@@ -90,7 +101,11 @@ export class FeedPostDropdownComponent {
   }
 
   _pinPostToGlobalFeed(event: any) {
-    this.togglePostPin.emit(event);
+    this.toggleFeedPostPin.emit(event);
+  }
+
+  _pinPostToProfile(event: any) {
+    this.toggleProfilePostPin.emit(event);
   }
 
   copyPostLinkToClipboard(event) {

src/app/feed/feed-post-icon-row/feed-post-icon-row.component.ts

@@ -122,6 +122,7 @@ export class FeedPostIconRowComponent {
         {},
         "" /*Sub*/,
         false /*IsHidden*/,
+        false,
         // What should the fee rate be for this?
         this.globalVars.feeRateBitCloutPerKB * 1e9 /*feeRateNanosPerKB*/
       )
@@ -171,6 +172,7 @@ export class FeedPostIconRowComponent {
         {},
         "" /*Sub*/,
         true /*IsHidden*/,
+        false,
         // What should the fee rate be for this?
         this.globalVars.feeRateBitCloutPerKB * 1e9 /*feeRateNanosPerKB*/
       )

src/app/feed/feed-post/feed-post.component.html

@@ -180,6 +180,10 @@
             [followedPubKeyBase58Check]="postContent.ProfileEntryResponse.PublicKeyBase58Check"
           ></follow-button>
 
+          <span *ngIf="post.IsPinned && includeVisualPin" class="ml-1 text-primary pl-5px">
+            <i class="fas fa-thumbtack fa-md align-middle"></i>
+          </span>
+
           <feed-post-dropdown
             *ngIf="showDropdown && !reclouterProfile"
             class="ml-auto"
@@ -188,7 +192,8 @@
             (postHidden)="hidePost()"
             (userBlocked)="blockUser()"
             (toggleGlobalFeed)="_addPostToGlobalFeed($event)"
-            (togglePostPin)="_pinPostToGlobalFeed($event)"
+            (toggleFeedPostPin)="_pinPostToGlobalFeed($event)"
+            (toggleProfilePostPin)="pinPostToProfile($event)"
           ></feed-post-dropdown>
         </div>
 

src/app/feed/feed-post/feed-post.component.ts

@@ -87,11 +87,14 @@ export class FeedPostComponent implements OnInit {
 
   @Input() showReplyingTo = false;
 
+  @Input() includeVisualPin = false;
+
   // If the post is shown in a modal, this is used to hide the modal on post click.
   @Input() containerModalRef: any = null;
 
   // emits the PostEntryResponse
   @Output() postDeleted = new EventEmitter();
+  @Output() postPinnedToProfile = new EventEmitter();
 
   // emits the UserBlocked event
   @Output() userBlocked = new EventEmitter();
@@ -231,13 +234,14 @@ export class FeedPostComponent implements OnInit {
             this.globalVars.localNode,
             this.globalVars.loggedInUser.PublicKeyBase58Check,
             this._post.PostHashHex /*PostHashHexToModify*/,
-            "" /*ParentPostHashHex*/,
+            this._post.ParentStakeID /*ParentPostHashHex*/,
             "" /*Title*/,
             { Body: this._post.Body, ImageURLs: this._post.ImageURLs } /*BodyObj*/,
             this._post.RecloutedPostEntryResponse?.PostHashHex || "",
             {},
             "" /*Sub*/,
             true /*IsHidden*/,
+            this._post.IsPinned,
             this.globalVars.feeRateBitCloutPerKB * 1e9 /*feeRateNanosPerKB*/
           )
           .subscribe(
@@ -256,6 +260,37 @@ export class FeedPostComponent implements OnInit {
     });
   }
 
+  pinPostToProfile() {
+    this.backendApi
+      .SubmitPost(
+        this.globalVars.localNode,
+        this.globalVars.loggedInUser.PublicKeyBase58Check,
+        this._post.PostHashHex /*PostHashHexToModify*/,
+        this._post.ParentStakeID /*ParentPostHashHex*/,
+        "" /*Title*/,
+        { Body: this._post.Body, ImageURLs: this._post.ImageURLs } /*BodyObj*/,
+        this._post.RecloutedPostEntryResponse?.PostHashHex || "",
+        {},
+        "" /*Sub*/,
+        this._post.IsHidden /*IsHidden*/,
+        !this._post.IsPinned, /* We toggle whatever is set already */
+        this.globalVars.feeRateBitCloutPerKB * 1e9 /*feeRateNanosPerKB*/
+      )
+      .subscribe(
+        (response) => {
+          this._post.IsPinned = !this._post.IsPinned
+          this.globalVars.logEvent("post : profile-pin");
+          },
+        (err) => {
+          console.error(err);
+          const parsedError = this.backendApi.parsePostError(err);
+          this.globalVars.logEvent("post : profile-pin : error", { parsedError });
+          this.globalVars._alertError(parsedError);
+        }
+        );
+  }
+
+
   blockUser() {
     SwalHelper.fire({
       target: this.globalVars.getTargetComponentSelector(),

src/app/feed/feed.component.html

@@ -56,7 +56,7 @@
           [showReplyingToContent]="!!post.parentPost"
           [parentPost]="post.parentPost"
           [contentShouldLinkToThread]="true"
-          [showLeftSelectedBorder]="post.IsPinned"
+          [showLeftSelectedBorder]="post.IsGlobalPinned"
           [blocked]="globalVars.hasUserBlockedCreator(post.PosterPublicKeyBase58Check)"
           (postDeleted)="onPostHidden($event)"
           (userBlocked)="userBlocked()"

src/app/post-thread-page/post-thread/post-thread.component.html

@@ -35,6 +35,7 @@
     <feed-post
       [post]="currentPost"
       [includePaddingOnPost]="true"
+      [includeVisualPin]="true"
       [contentShouldLinkToThread]="true"
       [afterCommentCreatedCallback]="prependToCommentList.bind(this, currentPost)"
       [isParentPostInThread]="true"