Add support to follow user modding activities

app/Http/Controllers/InterOp/BeatmapsetsController.php

···
+<?php
+
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+namespace App\Http\Controllers\InterOp;
+
+use App\Http\Controllers\Controller;
+use App\Jobs\Notifications\UserBeatmapsetNew;
+use App\Models\Beatmapset;
+
+class BeatmapsetsController extends Controller
+{
+    public function broadcastNew($id)
+    {
+        $beatmapset = Beatmapset::findOrFail($id);
+
+        (new UserBeatmapsetNew($beatmapset))->dispatch();
+
+        return response(null, 204);
+    }
+}

app/Jobs/Notifications/UserBeatmapsetNew.php

···
+<?php
+
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+namespace App\Jobs\Notifications;
+
+use App\Models\Beatmapset;
+use App\Models\Follow;
+use App\Models\Notification;
+use App\Models\UserNotificationOption;
+
+class UserBeatmapsetNew extends BroadcastNotificationBase
+{
+    const NOTIFICATION_OPTION_NAME = UserNotificationOption::BEATMAPSET_MODDING;
+
+    protected $beatmapset;
+
+    public static function getMailLink(Notification $notification): string
+    {
+        return route('beatmapsets.show', $notification->details['beatmapset_id']);
+    }
+
+    public function __construct(Beatmapset $beatmapset)
+    {
+        parent::__construct($beatmapset->user);
+
+        $this->beatmapset = $beatmapset;
+    }
+
+    public function getDetails(): array
+    {
+        return [
+            'beatmapset_id' => $this->beatmapset->getKey(),
+            'title' => $this->beatmapset->title,
+            'title_unicode' => $this->beatmapset->title_unicode,
+            'cover_url' => $this->beatmapset->coverURL('card'),
+        ];
+    }
+
+    public function getListeningUserIds(): array
+    {
+        return Follow::whereNotifiable($this->beatmapset->user)
+            ->where(['subtype' => 'mapping'])
+            ->pluck('user_id')
+            ->all();
+    }
+
+    public function getNotifiable()
+    {
+        return $this->beatmapset->user;
+    }
+}

app/Models/Follow.php

···
 {
     use Validatable;
 
+    const SUBTYPES = [
+        'comment' => Comment::COMMENTABLES,
+
+        'modding' => [
+            MorphMap::MAP[User::class],
+        ],
+    ];
+
     public function scopeWhereNotifiable($query, $notifiable)
     {
         $query->where([
···
             $this->validationErrors()->add('notifiable', 'required');
         }
 
-        if ($this->subtype === 'comment' && !in_array($this->notifiable_type, Comment::COMMENTABLES, true)) {
-            $this->validationErrors()->add('notifiable_type', '.invalid');
-        }
-
-        // FIXME: this should accept other types later.
-        if ($this->subtype !== 'comment') {
+        if (!in_array($this->notifiable_type, static::SUBTYPES[$this->subtype] ?? [], true)) {
             $this->validationErrors()->add('subtype', '.invalid');
         }
 

app/Models/Notification.php

···
     const COMMENT_NEW = 'comment_new';
     const FORUM_TOPIC_REPLY = 'forum_topic_reply';
     const USER_ACHIEVEMENT_UNLOCK = 'user_achievement_unlock';
+    const USER_BEATMAPSET_NEW = 'user_beatmapset_new';
 
     const NAME_TO_CATEGORY = [
         self::BEATMAPSET_DISCUSSION_LOCK => 'beatmapset_discussion',
···
         self::COMMENT_NEW => 'comment',
         self::FORUM_TOPIC_REPLY => 'forum_topic_reply',
         self::USER_ACHIEVEMENT_UNLOCK => 'user_achievement_unlock',
+        self::USER_BEATMAPSET_NEW => 'user_modding',
     ];
 
     const NOTIFIABLE_CLASSES = [

app/Models/User.php

···
     // TODO: we should rename this to currentUserJson or something.
     public function defaultJson()
     {
-        return json_item($this, 'User', ['blocks', 'friends', 'groups', 'is_admin', 'unread_pm_count', 'user_preferences']);
+        return json_item($this, 'User', [
+            'blocks',
+            'follow_user_modding',
+            'friends',
+            'groups',
+            'is_admin',
+            'unread_pm_count',
+            'user_preferences',
+        ]);
     }
 
     public function supportLength()

app/Transformers/UserCompactTransformer.php

···
 
 namespace App\Transformers;
 
+use App\Libraries\MorphMap;
 use App\Models\Beatmap;
 use App\Models\User;
 use App\Models\UserProfileCustomization;
···
         'cover',
         'current_mode_rank',
         'favourite_beatmapset_count',
+        'follow_user_modding',
         'follower_count',
         'friends',
         'graveyard_beatmapset_count',
···
         return $this->primitive($user->profileBeatmapsetsFavourite()->count());
     }
 
-    public function includeFollowerCount(User $user)
-    {
-        return $this->primitive($user->followerCount());
-    }
-
     public function includeFriends(User $user)
     {
         return $this->collection(
             $user->relations()->friends()->withMutual()->get(),
             new UserRelationTransformer()
         );
+    }
+
+    public function includeFollowUserModding(User $user)
+    {
+        return $this->primitive(
+            $user->follows()->where([
+                'notifiable_type' => MorphMap::getType($user),
+                'subtype' => 'modding',
+            ])->pluck('notifiable_id')
+        );
+    }
+
+    public function includeFollowerCount(User $user)
+    {
+        return $this->primitive($user->followerCount());
     }
 
     public function includeGraveyardBeatmapsetCount(User $user)

database/migrations/2020_11_26_055928_add_modding_and_user_to_follows.php

···
+<?php
+
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+use Illuminate\Database\Migrations\Migration;
+
+class AddModdingAndUserToFollows extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        DB::statement("ALTER TABLE follows
+                       MODIFY COLUMN notifiable_type
+                       enum('beatmapset', 'build', 'news_post', 'user')");
+        DB::statement("ALTER TABLE follows
+                       MODIFY COLUMN subtype
+                       enum('comment', 'modding')");
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        DB::statement("ALTER TABLE follows
+                       MODIFY COLUMN notifiable_type
+                       enum('beatmapset', 'build', 'news_post')");
+        DB::statement("ALTER TABLE follows
+                       MODIFY COLUMN subtype
+                       enum('comment')");
+    }
+}

resources/assets/coffee/react/profile-page/detail-bar.coffee

···
 
 import { Rank } from './rank'
 import { BlockButton } from 'block-button'
+import FollowUserModdingButton from 'follow-user-modding-button'
 import { FriendButton } from 'friend-button'
 import * as React from 'react'
 import { a, button, div, dd, dl, dt, h1, i, img, li, span, ul } from 'react-dom-factories'
···
             followers: @props.user.follower_count
             modifiers: ['profile-page']
             alwaysVisible: true
+
+        if @state.currentUser.id != @props.user.id
+          div className: "#{bn}__entry",
+            el FollowUserModdingButton, userId: @props.user.id, modifiers: ['profile-page']
+
         if @state.currentUser.id != @props.user.id && !isBlocked
           div className: "#{bn}__entry",
             a

resources/assets/less/bem/notification-popup-item.less

···
     border-radius: @border-radius-large 0 0 @border-radius-large;
     background-color: fade(#000, 60%);
 
-    .@{_top}--compact & {
+    .@{_top}--compact.@{_top}--user_achievement_unlock & {
       background-color: transparent;
     }
   }

resources/assets/lib/follow-user-modding-button.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { route } from 'laroute';
+import { without } from 'lodash';
+import * as React from 'react';
+import { Spinner } from 'spinner';
+import { classWithModifiers, Modifiers } from 'utils/css';
+
+interface Props {
+  modifiers?: Modifiers;
+  userId: number;
+}
+
+interface State {
+  follow: boolean;
+  loading: boolean;
+}
+
+const bn = 'user-action-button';
+
+export default class FollowUserModdingButton extends React.Component<Props, State> {
+  private buttonRef = React.createRef<HTMLButtonElement>();
+  private eventId = `follow-user-modding-button-${osu.uuid()}`;
+  private xhr: JQueryXHR | null = null;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      follow: currentUser.follow_user_modding.includes(this.props.userId),
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    $.subscribe(`followUserModding:refresh.${this.eventId}`, this.refresh);
+  }
+
+  componentWillUnmount() {
+    $.unsubscribe(`.${this.eventId}`);
+    this.xhr?.abort();
+  }
+
+  render() {
+    if (currentUser.id === this.props.userId) {
+      return null;
+    }
+
+    const title = osu.trans(`follows.user.modding.${this.state.follow ? 'to_0' : 'to_1'}`);
+
+    let blockClass = classWithModifiers(bn, this.props.modifiers);
+    blockClass += classWithModifiers(bn, { friend: this.state.follow }, true);
+
+    return (
+      <div title={title}>
+        <button
+          className={blockClass}
+          disabled={this.state.loading}
+          onClick={this.onClick}
+          ref={this.buttonRef}
+        >
+          {this.renderIcon()}
+        </button>
+      </div>
+    );
+  }
+
+  private onClick = () => {
+    this.setState({ loading: true }, () => {
+      const params: JQuery.AjaxSettings = {
+        data: {
+          follow: {
+            notifiable_id: this.props.userId,
+            notifiable_type: 'user',
+            subtype: 'modding',
+          },
+        },
+      };
+
+      if (this.state.follow) {
+        params.type = 'DELETE';
+        params.url = route('follows.destroy');
+      } else {
+        params.type = 'POST';
+        params.url = route('follows.store');
+      }
+
+      this.xhr = $.ajax(params)
+        .done(this.updateData)
+        .fail(osu.emitAjaxError(this.buttonRef.current))
+        .always(() => this.setState({ loading: false }));
+    });
+  }
+
+  private refresh = () => {
+    this.setState({
+      follow: currentUser.follow_user_modding.includes(this.props.userId),
+    });
+  }
+
+  private renderIcon() {
+    return (this.state.loading
+      ? <Spinner />
+      : <i className='fas fa-bell' />
+    );
+  }
+
+  private updateData = () => {
+    if (this.state.follow) {
+      currentUser.follow_user_modding = without(currentUser.follow_user_modding, this.props.userId);
+    } else {
+      currentUser.follow_user_modding = currentUser.follow_user_modding.concat(this.props.userId);
+    }
+
+    $.publish('followUserModding:refresh');
+  }
+}

resources/assets/lib/globals.d.ts

···
   unsubscribe: (eventName: string) => void;
 }
 
+type AjaxError = (xhr: JQueryXHR) => void;
+
 interface OsuCommon {
-  ajaxError: (xhr: JQueryXHR) => void;
+  ajaxError: AjaxError;
   classWithModifiers: (baseName: string, modifiers?: string[]) => string;
   diffColour: (difficultyRating?: string | null) => React.CSSProperties;
+  emitAjaxError: (el?: HTMLElement | null) => AjaxError;
   groupColour: (group?: GroupJson) => React.CSSProperties;
   isClickable: (el: HTMLElement) => boolean;
   jsonClone: (obj: any) => any;

resources/assets/lib/interfaces/current-user.ts

···
 
 export default interface CurrentUser extends UserJsonExtended {
   blocks: UserRelationJson[];
+  follow_user_modding: number[];
   follower_count?: number;
   friends: UserRelationJson[];
   groups: GroupJson[];

resources/assets/lib/notification-maps/category.ts

···
   forum_topic_reply: 'forum_topic_reply',
   legacy_pm: 'legacy_pm',
   user_achievement_unlock: 'user_achievement_unlock',
+  user_beatmapset_new: 'user_beatmapset_new',
 };

resources/assets/lib/notification-maps/icons.ts

···
   forum_topic_reply: ['fas fa-comment-medical'],
   legacy_pm: ['fas fa-envelope'],
   user_achievement_unlock: ['fas fa-medal'],
+  user_beatmapset_new: ['fas fa-music'],
 };
 
 export const nameToIcons: IconsMap = {
···
   forum_topic_reply: ['fas fa-comment-medical'],
   legacy_pm: ['fas fa-envelope'],
   user_achievement_unlock: ['fas fa-trophy'],
+  user_beatmapset_new: ['fas fa-music'],
 };
 
 export const nameToIconsCompact: IconsMap = {
···
   comment_reply: ['fas fa-reply'],
   forum_topic_reply: ['fas fa-comment-medical'],
   legacy_pm: ['fas fa-envelope'],
+  user_beatmapset_new: ['fas fa-music'],
 };

resources/assets/lib/notification-maps/message.ts

···
     return osu.trans(key, replacements);
   }
 
-  if (item.name === 'user_achievement_unlock') {
-    return osu.trans(`notifications.item.${item.displayType}.${item.category}.${item.name}_group`);
+  if (item.name === 'user_achievement_unlock' || item.name === 'user_beatmapset_new') {
+    const replacements = {
+      username: item.details.username,
+    };
+
+    return osu.trans(`notifications.item.${item.displayType}.${item.category}.${item.name}_group`, replacements);
   }
 
   return item.title;

resources/assets/lib/notification-maps/type.ts

···
     return 'user_achievement';
   }
 
+  if (item.name === 'user_beatmapset_new') {
+    return 'user_modding';
+  }
+
   return item.objectType;
 }

resources/assets/lib/notification-maps/url.ts

···
     }
   } else if (item.name === 'user_achievement_unlock') {
     return userAchievementUrl(item);
+  } else if (item.name === 'user_beatmapset_new') {
+    return `${route('users.show', { user: item.objectId })}#beatmaps`;
   }
 
   switch (item.objectType) {
···
       return route('forum.posts.show', { post: item.details.postId });
     case 'user_achievement_unlock':
       return userAchievementUrl(item);
+    case 'user_beatmapset_new':
+      return route('beatmapsets.show', { beatmapset: item.details.beatmapsetId });
   }
 }
 

resources/assets/lib/notification-widget/item-compact.tsx

···
         modifiers={['compact']}
         url={urlSingular(this.props.item)}
         withCategory={false}
-        withCoverImage={this.props.item.name === 'user_achievement_unlock'}
+        withCoverImage={this.props.item.name === 'user_achievement_unlock' || this.props.item.name === 'user_beatmapset_new'}
       />
     );
   }

resources/assets/lib/user-card.tsx

···
 
 import { BlockButton } from 'block-button';
 import FlagCountry from 'flag-country';
+import FollowUserModdingButton from 'follow-user-modding-button';
 import { FriendButton } from 'friend-button';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
···
           <FlagCountry country={this.user.country} />
         </a>
 
-        {
-          this.props.mode === 'card' && this.user.is_supporter ?
-          <a className='user-card__icon' href={route('support-the-game')}>
-            <SupporterIcon modifiers={['user-card']}/>
-          </a> : null
-        }
-
-        {
-          this.props.mode === 'card' ?
-          <div className='user-card__icon'>
-            <FriendButton userId={this.user.id} modifiers={['user-card']} />
-          </div> : null
-        }
+        {this.props.mode === 'card' && (
+          <>
+            {this.user.is_supporter && (
+              <a className='user-card__icon' href={route('support-the-game')}>
+                <SupporterIcon modifiers={['user-card']}/>
+              </a>
+            )}
+            <div className='user-card__icon'>
+              <FriendButton userId={this.user.id} modifiers={['user-card']} />
+            </div>
+            <div className='user-card__icon'>
+              <FollowUserModdingButton userId={this.user.id} modifiers={['user-card']} />
+            </div>
+          </>
+        )}
       </div>
     );
   }
···
 
         <div className='user-card__icon'>
           <FriendButton userId={this.user.id} modifiers={['user-list']} />
+        </div>
+
+        <div className='user-card__icon'>
+          <FollowUserModdingButton userId={this.user.id} modifiers={['user-list']} />
         </div>
       </div>
     );

resources/assets/lib/utils/css.ts

···
 
 import { forEach } from 'lodash';
 
-type Modifiers = (string | null | undefined)[] | Record<string, boolean | null | undefined>;
+export type Modifiers = (string | null | undefined)[] | Record<string, boolean | null | undefined>;
 
-export function classWithModifiers(className: string, modifiers?: Modifiers) {
-  let ret = className;
+export function classWithModifiers(className: string, modifiers?: Modifiers, modifiersOnly = false) {
+  let ret = modifiersOnly ? '' : className;
 
   if (modifiers != null) {
     if (Array.isArray(modifiers)) {

resources/lang/en/follows.php

···
+<?php
+
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+return [
+    'user' => [
+        'modding' => [
+            'to_0' => 'stop notifying me when this user uploads new beatmap',
+            'to_1' => 'notify me when this user uploads new beatmap',
+        ],
+    ],
+];

resources/lang/en/notifications.php

···
                 'user_achievement_unlock_group' => 'Medals unlocked!',
             ],
         ],
+
+        'user_modding' => [
+            'user_beatmapset_new' => [
+                '_' => 'New beatmap',
+
+                'user_beatmapset_new' => 'New beatmap ":title" by :username',
+                'user_beatmapset_new_compact' => 'New beatmap ":title"',
+                'user_beatmapset_new_group' => 'New beatmaps by :username',
+            ],
+        ],
     ],
 
     'mail' => [
···
             'user_achievement_unlock' => [
                 'user_achievement_unlock' => ':username has unlocked a new medal, ":title"!',
                 'user_achievement_unlock_self' => 'You\'ve unlocked a new medal, ":title"!',
+            ],
+
+            'user_modding' => [
+                'user_beatmapset_new' => ':username has created new beatmaps',
             ],
         ],
     ],

routes/web.php

···
     Route::get('/news', 'LegacyInterOpController@news');
     Route::apiResource('users', 'InterOp\UsersController', ['only' => ['store']]);
 
-    Route::group(['as' => 'indexing.', 'prefix' => 'indexing'], function () {
-        Route::apiResource('bulk', 'InterOp\Indexing\BulkController', ['only' => ['store']]);
-    });
+    Route::group(['namespace' => 'InterOp'], function () {
+        Route::post('beatmapsets/{beatmapset}/broadcast-new', 'BeatmapsetsController@broadcastNew');
 
-    Route::group(['as' => 'user-groups.'], function () {
-        Route::post('user-group', 'InterOp\UserGroupsController@store')->name('store');
-        Route::delete('user-group', 'InterOp\UserGroupsController@destroy')->name('destroy');
-        Route::post('user-default-group', 'InterOp\UserGroupsController@setDefault')->name('store-default');
+        Route::group(['as' => 'indexing.', 'prefix' => 'indexing'], function () {
+            Route::apiResource('bulk', 'Indexing\BulkController', ['only' => ['store']]);
+        });
+
+        Route::group(['as' => 'user-groups.'], function () {
+            Route::post('user-group', 'UserGroupsController@store')->name('store');
+            Route::delete('user-group', 'UserGroupsController@destroy')->name('destroy');
+            Route::post('user-default-group', 'UserGroupsController@setDefault')->name('store-default');
+        });
     });
 });