From c680d25dd07fff5387c28814bd4706116e07c154 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 30 Jul 2020 15:21:02 +0200
Subject: [PATCH] Fix pay toggle era filtering (#3291)

---
 .../page-staking/src/Payouts/PayToggle.tsx    | 39 ++++++++++++++-----
 packages/react-hooks/src/useOwnEraRewards.ts  | 12 +++---
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/packages/page-staking/src/Payouts/PayToggle.tsx b/packages/page-staking/src/Payouts/PayToggle.tsx
index f8e74d0052..14b9e98e6a 100644
--- a/packages/page-staking/src/Payouts/PayToggle.tsx
+++ b/packages/page-staking/src/Payouts/PayToggle.tsx
@@ -13,12 +13,34 @@ interface Props {
   selected: number;
 }
 
-function PayToggle ({ className = '', onChange, options, selected }: Props): React.ReactElement<Props> | null {
+interface ToggleProps {
+  index: number;
+  isSelected: boolean;
+  onChange: (index: number) => void;
+  text: string;
+}
+
+function ToggleIndex ({ index, isSelected, onChange, text }: ToggleProps): React.ReactElement<ToggleProps> {
   const _onClick = useCallback(
-    (index: number) => () => onChange(index),
-    [onChange]
+    () => onChange(index),
+    [index, onChange]
   );
 
+  return (
+    <Button
+      icon={isSelected ? 'check' : 'circle'}
+      isBasic
+      isSelected={isSelected}
+      key={text}
+      label={text}
+      onClick={_onClick}
+    />
+  );
+}
+
+const ToggleIndexMemo = React.memo(ToggleIndex);
+
+function PayToggle ({ className = '', onChange, options, selected }: Props): React.ReactElement<Props> | null {
   if (!options.length || !options[0].value) {
     return null;
   }
@@ -26,13 +48,12 @@ function PayToggle ({ className = '', onChange, options, selected }: Props): Rea
   return (
     <div className={`ui--ToggleButton ${className}`}>
       {options.map(({ text }, index): React.ReactNode => (
-        <Button
-          icon={selected === index ? 'check' : 'circle'}
-          isBasic
+        <ToggleIndexMemo
+          index={index}
           isSelected={selected === index}
-          key={text}
-          label={text}
-          onClick={_onClick(index)}
+          key={index}
+          onChange={onChange}
+          text={text}
         />
       ))}
     </div>
diff --git a/packages/react-hooks/src/useOwnEraRewards.ts b/packages/react-hooks/src/useOwnEraRewards.ts
index 85b8433fcb..e70a8452ca 100644
--- a/packages/react-hooks/src/useOwnEraRewards.ts
+++ b/packages/react-hooks/src/useOwnEraRewards.ts
@@ -45,17 +45,17 @@ export default function useOwnEraRewards (maxEras?: number): OwnRewards {
     setState({ isLoadingRewards: true, rewardCount: 0 });
   }, [maxEras]);
 
+  useEffect((): void => {
+    allEras && maxEras && setFilteredEras(
+      allEras.slice(-1 * maxEras)
+    );
+  }, [allEras, maxEras]);
+
   useEffect((): void => {
     mountedRef.current && available && setState(
       getRewards(available)
     );
   }, [available, mountedRef]);
 
-  useEffect((): void => {
-    allEras && maxEras && setFilteredEras(
-      allEras.reverse().filter((_, index) => index < maxEras).reverse()
-    );
-  }, [allEras, maxEras]);
-
   return state;
 }