From 919282850590052db8e8413874d3cf4c65ad9475 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 9 Mar 2021 14:59:38 +0800
Subject: [PATCH] Move `getChannelLevel` to a selector. Requires accompanying
 lbry-redux PR.

---
 ui/component/channelStakedIndicator/index.js |  8 +++++-
 ui/component/channelStakedIndicator/view.jsx | 27 +++-----------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/ui/component/channelStakedIndicator/index.js b/ui/component/channelStakedIndicator/index.js
index db473b24a..987683f17 100644
--- a/ui/component/channelStakedIndicator/index.js
+++ b/ui/component/channelStakedIndicator/index.js
@@ -1,9 +1,15 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import {
+  makeSelectClaimForUri,
+  makeSelectStakedLevelForChannelUri,
+  makeSelectTotalStakedAmountForChannelUri,
+} from 'lbry-redux';
 import ChannelStakedIndicator from './view';
 
 const select = (state, props) => ({
   channelClaim: makeSelectClaimForUri(props.uri)(state),
+  amount: makeSelectTotalStakedAmountForChannelUri(props.uri)(state),
+  level: makeSelectStakedLevelForChannelUri(props.uri)(state),
 });
 
 export default connect(select)(ChannelStakedIndicator);
diff --git a/ui/component/channelStakedIndicator/view.jsx b/ui/component/channelStakedIndicator/view.jsx
index b18f97356..fb6ba849f 100644
--- a/ui/component/channelStakedIndicator/view.jsx
+++ b/ui/component/channelStakedIndicator/view.jsx
@@ -10,31 +10,12 @@ import CreditAmount from 'component/common/credit-amount';
 
 type Props = {
   channelClaim: ChannelClaim,
+  amount: number,
+  level: number,
   large?: boolean,
   inline?: boolean,
 };
 
-function getChannelLevel(amount: number): number {
-  let level = 1;
-
-  switch (true) {
-    case amount >= 1 && amount < 50:
-      level = 2;
-      break;
-    case amount >= 50 && amount < 250:
-      level = 3;
-      break;
-    case amount >= 250 && amount < 1000:
-      level = 4;
-      break;
-    case amount >= 1000:
-      level = 5;
-      break;
-  }
-
-  return level;
-}
-
 function getChannelIcon(level: number): string {
   const icons = {
     '1': ICONS.CHANNEL_LEVEL_1,
@@ -48,15 +29,13 @@ function getChannelIcon(level: number): string {
 }
 
 function ChannelStakedIndicator(props: Props) {
-  const { channelClaim, large = false, inline = false } = props;
+  const { channelClaim, amount, level, large = false, inline = false } = props;
 
   if (!channelClaim || !channelClaim.meta) {
     return null;
   }
 
-  const amount = parseFloat(channelClaim.amount) + parseFloat(channelClaim.meta.support_amount) || 0;
   const isControlling = channelClaim && channelClaim.meta.is_controlling;
-  const level = getChannelLevel(amount);
   const icon = getChannelIcon(level);
 
   return (