convert to react

Author: notbakaneko

resources/css/bem/store-slider.less

@@ -76,18 +76,15 @@
     text-align: center;
     border-radius: 10px;
 
-    .js-store--disabled & {
+    &--active {
+      background-color: @osu-colour-pink-1;
+    }
+
+    &--disabled {
       background-color: @osu-colour-b1;
       pointer-events: none;
       cursor: default;
     }
-
-    &.js-slider-preset--active {
-      background-color: @osu-colour-pink-1;
-      .js-store--disabled & {
-        background-color: @osu-colour-b1;
-      }
-    }
   }
 
   &__presets {

resources/js/core-legacy/store-supporter-tag.tsx

@@ -32,7 +32,6 @@ import PostPreview from 'core-legacy/post-preview'
 import Search from 'core-legacy/search'
 import StickyFooter from 'core-legacy/sticky-footer'
 import { StoreCheckout } from 'core-legacy/store-checkout'
-import StoreSupporterTag from 'core-legacy/store-supporter-tag'
 import SyncHeight from 'core-legacy/sync-height'
 import TooltipDefault from 'core-legacy/tooltip-default'
 import TwitchPlayer from 'core-legacy/twitch-player'
@@ -61,7 +60,7 @@ $(document).on 'submit', 'form', (e) ->
 
 $(document).on 'turbolinks:load', ->
   BeatmapPack.initialize()
-  StoreSupporterTag.initialize()
+  # StoreSupporterTag.initialize()
   StoreCheckout.initialize()
 
 # ensure currentUser is updated early enough.

resources/js/main.coffee

@@ -25,8 +25,10 @@ import core from 'osu-core-singleton';
 import QuickSearch from 'quick-search/main';
 import QuickSearchWorker from 'quick-search/worker';
 import * as React from 'react';
+import StoreSupporterTag from 'store/store-supporter-tag';
 import { parseJson } from 'utils/json';
 import { mapBy } from 'utils/map';
+import { getInt } from 'utils/math';
 
 function reqJson<T>(input: string|undefined): T {
   // This will throw when input is missing and thus parsing empty string.
@@ -106,6 +108,15 @@ core.reactTurbolinks.register('ranking-variant-filter', () => (
   <RankingVariantFilter {...parseJson('json-variant-filter')} />
 ));
 
+core.reactTurbolinks.register('store-supporter-tag', (container) => {
+  const productId = getInt(container.dataset.productId);
+  if (productId == null) {
+    throw new Error('missing productId');
+  }
+
+  return <StoreSupporterTag productId={productId} />;
+});
+
 core.reactTurbolinks.register('user-card', (container) => (
   <UserCard
     modifiers={reqJson(container.dataset.modifiers ?? 'null')}