From f7beffaa06a0a8f4b89feb0200c68b10df9b9040 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 18 Apr 2022 19:04:42 +0800
Subject: [PATCH] Support callback method to inject items

1341
---
 flow-typed/gui.js                        |  6 ++++
 ui/component/claimList/view.jsx          | 15 ++++++++--
 ui/component/claimListDiscover/view.jsx  |  2 +-
 ui/component/claimTilesDiscover/view.jsx | 37 +++++++++++++++++-------
 4 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 flow-typed/gui.js

diff --git a/flow-typed/gui.js b/flow-typed/gui.js
new file mode 100644
index 000000000..cf0182478
--- /dev/null
+++ b/flow-typed/gui.js
@@ -0,0 +1,6 @@
+
+declare type ListInjectedItem = {
+  node: Node | (index: number, lastVisibleIndex: ?number, pageSize: ?number) => Node,
+  index?: number,
+  replace?: boolean
+};
diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index 43c267378..88448822c 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -41,7 +41,7 @@ type Props = {
   renderActions?: (Claim) => ?Node,
   renderProperties?: (Claim) => ?Node,
   includeSupportAction?: boolean,
-  injectedItem?: { node: Node, index?: number, replace?: boolean },
+  injectedItem?: ListInjectedItem,
   timedOutMessage?: Node,
   tileLayout?: boolean,
   searchInLanguage: boolean,
@@ -206,9 +206,18 @@ export default function ClaimList(props: Props) {
   );
 
   const getInjectedItem = (index) => {
-    if (injectedItem && injectedItem.node && lastVisibleIndex === index) {
-      return injectedItem.node;
+    if (injectedItem && injectedItem.node) {
+      if (typeof injectedItem.node === 'function') {
+        return injectedItem.node(index, lastVisibleIndex, pageSize);
+      } else {
+        if (injectedItem.index === undefined || injectedItem.index === null) {
+          return index === lastVisibleIndex ? injectedItem.node : null;
+        } else {
+          return index === injectedItem.index ? injectedItem.node : null;
+        }
+      }
     }
+
     return null;
   };
 
diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx
index acf000000..420cac9c3 100644
--- a/ui/component/claimListDiscover/view.jsx
+++ b/ui/component/claimListDiscover/view.jsx
@@ -76,7 +76,7 @@ type Props = {
   header?: Node,
   headerLabel?: string | Node,
   hiddenNsfwMessage?: Node,
-  injectedItem?: { node: Node, index?: number, replace?: boolean },
+  injectedItem?: ListInjectedItem,
   meta?: Node,
   subSection?: Node, // Additional section below [Header|Meta]
   renderProperties?: (Claim) => Node,
diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx
index 1f9477d3e..0b7d25a4c 100644
--- a/ui/component/claimTilesDiscover/view.jsx
+++ b/ui/component/claimTilesDiscover/view.jsx
@@ -32,7 +32,7 @@ type Props = {
   prefixUris?: Array<string>,
   pins?: { urls?: Array<string>, claimIds?: Array<string>, onlyPinForOrder?: string },
   uris: Array<string>,
-  injectedItem?: { node: Node, index?: number, replace?: boolean },
+  injectedItem?: ListInjectedItem,
   showNoSourceClaims?: boolean,
   renderProperties?: (Claim) => ?Node,
   fetchViewCount?: boolean,
@@ -142,6 +142,22 @@ function ClaimTilesDiscover(props: Props) {
     }
   }
 
+  const getInjectedItem = (index) => {
+    if (injectedItem && injectedItem.node) {
+      if (typeof injectedItem.node === 'function') {
+        return injectedItem.node(index, lastVisibleIndex, pageSize);
+      } else {
+        if (injectedItem.index === undefined || injectedItem.index === null) {
+          return index === lastVisibleIndex ? injectedItem.node : null;
+        } else {
+          return index === injectedItem.index ? injectedItem.node : null;
+        }
+      }
+    }
+
+    return null;
+  };
+
   // --------------------------------------------------------------------------
   // --------------------------------------------------------------------------
 
@@ -187,18 +203,17 @@ function ClaimTilesDiscover(props: Props) {
       {finalUris && finalUris.length
         ? finalUris.map((uri, i) => {
             if (uri) {
-              if (lastVisibleIndex === i && injectedItem && injectedItem.replace) {
-                return <React.Fragment key={uri}>{injectedItem.node}</React.Fragment>;
-              }
-
+              const inj = getInjectedItem(i);
               return (
                 <React.Fragment key={uri}>
-                  {lastVisibleIndex === i && injectedItem && injectedItem.node}
-                  <ClaimPreviewTile
-                    showNoSourceClaims={hasNoSource || showNoSourceClaims}
-                    uri={uri}
-                    properties={renderProperties}
-                  />
+                  {inj && inj}
+                  {(!inj || !injectedItem || !injectedItem.replace) && (
+                    <ClaimPreviewTile
+                      showNoSourceClaims={hasNoSource || showNoSourceClaims}
+                      uri={uri}
+                      properties={renderProperties}
+                    />
+                  )}
                 </React.Fragment>
               );
             } else {