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 {
@@ -108,16 +105,21 @@
 
   .ui-slider {
     background-color: @osu-colour-b3;
-    .js-store--disabled & {
-      .ui-slider-handle, .ui-slider-range {
-        background-color: @osu-colour-b1;
-      }
-    }
+
     .ui-slider-handle {
       background-color: @osu-colour-pink-1;
     }
+
     .ui-slider-range {
       background-color: @osu-colour-pink-1;
     }
+
+    &--disabled {
+      .ui-slider-handle, .ui-slider-range {
+        background-color: @osu-colour-b1;
+      }
+    }
+
+
   }
 }

resources/js/components/user-card-store.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 { hideLoadingOverlay, showLoadingOverlay } from 'utils/loading-overlay'
@@ -60,7 +59,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/core-legacy/store-supporter-tag.tsx

@@ -15,7 +15,6 @@ import RankingUserFilter from 'components/ranking-user-filter';
 import RankingVariantFilter from 'components/ranking-variant-filter';
 import SpotlightSelectOptions from 'components/spotlight-select-options';
 import { UserCard } from 'components/user-card';
-import { UserCardStore } from 'components/user-card-store';
 import { startListening, UserCardTooltip } from 'components/user-card-tooltip';
 import { UserCards } from 'components/user-cards';
 import { WikiSearch } from 'components/wiki-search';
@@ -25,8 +24,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,17 +107,22 @@ 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')}
     user={container.dataset.isCurrentUser === '1' ? core.currentUser : reqJson(container.dataset.user ?? 'null')}
   />
 ));
 
-core.reactTurbolinks.register('user-card-store', (container) => (
-  <UserCardStore user={reqJson(container.dataset.user)} />
-));
-
 core.reactTurbolinks.register('user-card-tooltip', (container) => (
   <UserCardTooltip
     container={container}