From 5b28f2791b2e8e74b64ce1d195debd8ffbdd02ff Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 5 Nov 2020 14:06:56 +0100
Subject: [PATCH] Filter tips with from-query hashes (#3977)

---
 packages/page-treasury/src/Tips/Tip.tsx  |  6 +++---
 packages/page-treasury/src/Tips/Tips.tsx | 18 +++++++++++-------
 packages/react-hooks/src/useCall.ts      |  2 +-
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/page-treasury/src/Tips/Tip.tsx b/packages/page-treasury/src/Tips/Tip.tsx
index 16df421a93..69c34bf302 100644
--- a/packages/page-treasury/src/Tips/Tip.tsx
+++ b/packages/page-treasury/src/Tips/Tip.tsx
@@ -42,7 +42,7 @@ function isCurrentTip (tip: OpenTip | OpenTipTo225): tip is OpenTip {
   return !!(tip as OpenTip)?.findersFee;
 }
 
-function extractTipState (tip: OpenTip | OpenTipTo225, hash: string, allAccounts: string[]): TipState {
+function extractTipState (tip: OpenTip | OpenTipTo225, allAccounts: string[]): TipState {
   const closesAt = tip.closes.unwrapOr(null);
   let finder: AccountId | null = null;
   let deposit: Balance | null = null;
@@ -81,8 +81,8 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members,
   const { allAccounts } = useAccounts();
 
   const { closesAt, finder, isFinder, isTipped, isTipper, median } = useMemo(
-    () => extractTipState(tip, hash, allAccounts),
-    [allAccounts, hash, tip]
+    () => extractTipState(tip, allAccounts),
+    [allAccounts, tip]
   );
 
   const councilId = useMemo(
diff --git a/packages/page-treasury/src/Tips/Tips.tsx b/packages/page-treasury/src/Tips/Tips.tsx
index c64d3dac31..06bf33f985 100644
--- a/packages/page-treasury/src/Tips/Tips.tsx
+++ b/packages/page-treasury/src/Tips/Tips.tsx
@@ -25,14 +25,18 @@ interface Props {
 
 type Tip = [string, OpenTip | OpenTipTo225];
 
-function extractTips (optTips?: Option<OpenTip>[], hashes?: string[] | null): Tip[] | undefined {
-  if (!hashes || !optTips) {
+const TIP_OPTS = { withParams: true };
+
+function extractTips (tipsWithHashes?: [[string[]], Option<OpenTip>[]], inHashes?: string[] | null): Tip[] | undefined {
+  if (!tipsWithHashes || !inHashes) {
     return undefined;
   }
 
+  const [[hashes], optTips] = tipsWithHashes;
+
   return optTips
     .map((opt, index): [string, OpenTip | null] => [hashes[index], opt.unwrapOr(null)])
-    .filter((val): val is [string, OpenTip] => !!val[1])
+    .filter((val): val is [string, OpenTip] => inHashes.includes(val[0]) && !!val[1])
     .sort((a, b) =>
       a[1].closes.isNone
         ? b[1].closes.isNone
@@ -49,11 +53,11 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onRefresh
   const { api } = useApi();
   const [onlyUntipped, setOnlyUntipped] = useState(false);
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
-  const optTips = useCall<Option<OpenTip>[]>(hashes && api.query.treasury.tips.multi, [hashes]);
+  const tipsWithHashes = useCall<[[string[]], Option<OpenTip>[]]>(hashes && api.query.treasury.tips.multi, [hashes], TIP_OPTS);
 
   const tips = useMemo(
-    () => extractTips(optTips, hashes),
-    [hashes, optTips]
+    () => extractTips(tipsWithHashes, hashes),
+    [hashes, tipsWithHashes]
   );
 
   const headerRef = useRef([
@@ -82,7 +86,7 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onRefresh
       )}
       header={headerRef.current}
     >
-      {tips?.map(([hash, tip]): React.ReactNode => (
+      {tips && tips.map(([hash, tip]): React.ReactNode => (
         <Tip
           bestNumber={bestNumber}
           defaultId={defaultId}
diff --git a/packages/react-hooks/src/useCall.ts b/packages/react-hooks/src/useCall.ts
index 020390eb46..1b481b46ae 100644
--- a/packages/react-hooks/src/useCall.ts
+++ b/packages/react-hooks/src/useCall.ts
@@ -59,7 +59,7 @@ function unsubscribe (tracker: TrackerRef): void {
 
 // subscribe, trying to play nice with the browser threads
 function subscribe <T> (mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn | undefined, params: CallParams, setValue: (value: T) => void, { isSingle, transform = transformIdentity, withParams }: CallOptions<T> = {}): void {
-  const validParams = params.filter((p): boolean => !isUndefined(p));
+  const validParams = params.filter((p) => !isUndefined(p));
 
   unsubscribe(tracker);