LB-1688 Feature to thank a user for a pin/recommendation

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "[python]": {
-    "editor.defaultFormatter": "ms-python.black-formatter"
+    "editor.defaultFormatter": "ms-python.autopep8"
   },
   "python.formatting.provider": "none"
 } 

frontend/js/src/user-feed/UserFeed.tsx

@@ -6,6 +6,7 @@ import {
   faComments,
   faEye,
   faEyeSlash,
+  faHandshake,
   faHeadphones,
   faHeart,
   faPaperPlane,
@@ -62,6 +63,7 @@ export enum EventType {
   BLOCK_FOLLOW = "block_follow",
   NOTIFICATION = "notification",
   REVIEW = "critiquebrainz_review",
+  THANKS = "thanks",
 }
 
 export type UserFeedPageProps = {
@@ -86,7 +88,8 @@ function isEventListenable(event?: TimelineEvent): boolean {
     event_type === EventType.LIKE ||
     event_type === EventType.LISTEN ||
     event_type === EventType.REVIEW ||
-    event_type === EventType.PERSONAL_RECORDING_RECOMMENDATION
+    event_type === EventType.PERSONAL_RECORDING_RECOMMENDATION ||
+    event_type === EventType.THANKS
   );
 }
 
@@ -112,6 +115,8 @@ function getEventTypeIcon(eventType: EventTypeT) {
       return faComments;
     case EventType.PERSONAL_RECORDING_RECOMMENDATION:
       return faPaperPlane;
+    case EventType.THANKS:
+      return faHandshake;
     default:
       return faQuestion;
   }
@@ -148,6 +153,8 @@ function getEventTypePhrase(event: TimelineEvent): string {
     }
     case EventType.PERSONAL_RECORDING_RECOMMENDATION:
       return "personally recommended a track";
+    case EventType.THANKS:
+      return `thanked a ${event.event_type}`;
     default:
       return "";
   }
@@ -257,6 +264,33 @@ export default function UserFeedPage() {
     },
     [APIService, currentUser]
   );
+
+  const thankFeedEvent = React.useCallback(
+    async (event: TimelineEvent) => {
+      const { thankFeedEvent } = APIService;
+      try {
+        const status = await thankFeedEvent(
+          event.event_type,
+          currentUser.name,
+          currentUser.auth_token as string,
+          event.id!,
+          event.metadata?.blurb_content
+        );
+
+        if (status === 200) {
+          return event;
+        }
+      } catch (error) {
+        toast.error(
+          <ToastMsg title="Could not thank event" message={error.toString()} />,
+          { toastId: "hide-error" }
+        );
+      }
+      return undefined;
+    },
+    [APIService, currentUser]
+  );
+
   // When this mutation succeeds, modify the query cache accordingly to avoid refetching all the content
   const { mutate: hideEventMutation } = useMutation({
     mutationFn: changeEventVisibility,
@@ -411,29 +445,53 @@ export default function UserFeedPage() {
     ) {
       if (event.hidden) {
         return (
+          <>
+            <ListenControl
+              title="Thank Event"
+              text=""
+              icon={faHandshake}
+              buttonClassName="btn btn-link btn-xs"
+              // eslint-disable-next-line react/jsx-no-bind
+              action={() => {
+                thankFeedEvent(event);
+              }}
+            />
+            <ListenControl
+              title="Unhide Event"
+              text=""
+              icon={faEye}
+              buttonClassName="btn btn-link btn-xs"
+              // eslint-disable-next-line react/jsx-no-bind
+              action={() => {
+                hideEventMutation(event);
+              }}
+            />
+          </>
+        );
+      }
+      return (
+        <>
+          <ListenControl
+            title="Thank Event"
+            text=""
+            icon={faHandshake}
+            buttonClassName="btn btn-link btn-xs"
+            // eslint-disable-next-line react/jsx-no-bind
+            action={() => {
+              thankFeedEvent(event);
+            }}
+          />
           <ListenControl
-            title="Unhide Event"
+            title="Hide Event"
             text=""
-            icon={faEye}
+            icon={faEyeSlash}
             buttonClassName="btn btn-link btn-xs"
             // eslint-disable-next-line react/jsx-no-bind
             action={() => {
               hideEventMutation(event);
             }}
           />
-        );
-      }
-      return (
-        <ListenControl
-          title="Hide Event"
-          text=""
-          icon={faEyeSlash}
-          buttonClassName="btn btn-link btn-xs"
-          // eslint-disable-next-line react/jsx-no-bind
-          action={() => {
-            hideEventMutation(event);
-          }}
-        />
+        </>
       );
     }
     return null;

frontend/js/src/utils/APIService.ts

@@ -1333,6 +1333,35 @@ export default class APIService {
     return response.status;
   };
 
+  thankFeedEvent = async (
+    eventType: string,
+    username: string,
+    userToken: string,
+    event_id: number,
+    blurb_content: string
+  ): Promise<any> => {
+    if (!event_id) {
+      throw new SyntaxError("Event ID not present");
+    }
+    const query = `${this.APIBaseURI}/user/${username}/timeline-event/create/thanks`;
+    const response = await fetch(query, {
+      method: "POST",
+      headers: {
+        Authorization: `Token ${userToken}`,
+        "Content-Type": "application/json;charset=UTF-8",
+      },
+      body: JSON.stringify({
+        metadata: {
+          original_event_type: eventType,
+          original_event_id: event_id,
+          blurb_content,
+        },
+      }),
+    });
+    await this.checkStatus(response);
+    return response.status;
+  };
+
   lookupRecordingMetadata = async (
     trackName: string,
     artistName: string,

frontend/js/src/utils/types.d.ts

@@ -477,7 +477,8 @@ type EventTypeT =
   | "block_follow"
   | "notification"
   | "personal_recording_recommendation"
-  | "critiquebrainz_review";
+  | "critiquebrainz_review"
+  | "thanks";
 
 type UserRelationshipEventMetadata = {
   user_name_0: string;
@@ -486,6 +487,10 @@ type UserRelationshipEventMetadata = {
   created: number;
 };
 
+type ThanksMetadata = {
+  blurb_content: string;
+};
+
 type NotificationEventMetadata = {
   message: string;
 };
@@ -496,7 +501,8 @@ type EventMetadata =
   | PinEventMetadata
   | NotificationEventMetadata
   | UserTrackPersonalRecommendationMetadata
-  | CritiqueBrainzReview;
+  | CritiqueBrainzReview
+  | ThanksMetadata;
 
 type TimelineEvent = {
   event_type: EventTypeT;

listenbrainz/db/model/user_timeline_event.py

@@ -35,6 +35,7 @@ class UserTimelineEventType(Enum):
     RECORDING_PIN = 'recording_pin'
     CRITIQUEBRAINZ_REVIEW = 'critiquebrainz_review'
     PERSONAL_RECORDING_RECOMMENDATION = 'personal_recording_recommendation'
+    THANKS = 'thanks'
 
 
 class RecordingRecommendationMetadata(MsidMbidModel):
@@ -59,6 +60,13 @@ class NotificationMetadata(BaseModel):
     message: constr(min_length=1)
 
 
+class ThanksMetadata(MsidMbidModel):
+    original_event_id: NonNegativeInt
+    original_event_type: UserTimelineEventType
+    blurb_content: Optional[str]
+
+
+
 UserTimelineEventMetadata = Union[CBReviewTimelineMetadata, PersonalRecordingRecommendationMetadata,
                                   RecordingRecommendationMetadata, NotificationMetadata]
 

listenbrainz/db/user_timeline_event.py

@@ -27,6 +27,7 @@
     UserTimelineEvent,
     UserTimelineEventType,
     UserTimelineEventMetadata,
+    ThanksMetadata,
     RecordingRecommendationMetadata,
     NotificationMetadata,
     HiddenUserTimelineEvent,
@@ -86,6 +87,17 @@ def create_user_notification_event(db_conn, user_id: int, metadata: Notification
     )
 
 
+def create_thanks_event(db_conn, user_id: int, metadata: ThanksMetadata) -> UserTimelineEvent:
+    """ Creates a thanks event in the database and returns it.
+    """
+    return create_user_timeline_event(
+        db_conn,
+        user_id=user_id,
+        event_type=UserTimelineEventType.THANKS,
+        metadata=metadata,
+    )
+
+
 def delete_user_timeline_event(db_conn, id: int, user_id: int) -> bool:
     """ Deletes recommendation and notification event using id """
     try:
@@ -153,6 +165,38 @@ def create_personal_recommendation_event(db_conn, user_id: int, metadata: WriteP
         raise DatabaseException(str(e))
 
 
+def create_thanks_event(db_conn, user_id: int, metadata: ThanksMetadata)\
+        -> UserTimelineEvent:
+    """ Creates a thanks event in the database and returns it.
+        The User ID in the table is the person thanking meanwhile the original_event_id and original_event_type refer to
+        the event id and type being thanked respectively.
+    """
+    try:
+        result = db_conn.execute(text("""
+            INSERT INTO user_timeline_event (user_id, event_type, metadata)
+                VALUES (
+                    :user_id,
+                    'thanks',
+                    jsonb_build_object(
+                        'original_event_id', :original_event_id,
+                        'original_event_type', :original_event_type,
+                        'blurb_content', :blurb_content
+                    )
+                )
+            RETURNING id, user_id, event_type, metadata, created
+            """), {
+                'user_id': user_id,
+                'original_event_id': metadata.original_event_id,
+                'original_event_type': metadata.original_event_type,
+                'blurb_content': metadata.blurb_content
+            }
+        )
+        db_conn.commit()
+        return UserTimelineEvent(**result.mappings().first())
+    except Exception as e:
+        raise DatabaseException(str(e))
+
+
 def get_user_timeline_events(
     db_conn,
     user_ids: Iterable[int],