Add pinning in Category Pages's Trending Tab (#399)

Closes https://github.com/OdyseeTeam/odysee-homepages/issues/427

ui/component/claimListDiscover/view.jsx

@@ -21,6 +21,7 @@ import { useIsLargeScreen } from 'effects/use-screensize';
 type Props = {
   uris: Array<string>,
   prefixUris?: Array<string>,
+  pins?: { urls: Array<string>, onlyPinForOrder?: string },
   name?: string,
   type: string,
   pageSize?: number,
@@ -139,6 +140,7 @@ function ClaimListDiscover(props: Props) {
     feeAmount,
     uris,
     prefixUris,
+    pins,
     tileLayout,
     hideFilters = false,
     claimIds,
@@ -466,6 +468,7 @@ function ClaimListDiscover(props: Props) {
   );
 
   const renderUris = uris || claimSearchResult;
+  injectPinUrls(renderUris, orderParam, pins);
 
   // **************************************************************************
   // Helpers
@@ -527,6 +530,25 @@ function ClaimListDiscover(props: Props) {
     return order_by;
   }
 
+  function injectPinUrls(uris, order, pins) {
+    if (!pins || !pins.urls || (pins.onlyPinForOrder && pins.onlyPinForOrder !== order)) {
+      return;
+    }
+
+    const pinUrls = pins.urls;
+    if (pinUrls && uris && uris.length > 2) {
+      pinUrls.forEach((pin) => {
+        if (uris.includes(pin)) {
+          uris.splice(uris.indexOf(pin), 1);
+        } else {
+          uris.pop();
+        }
+      });
+
+      uris.splice(2, 0, ...pinUrls);
+    }
+  }
+
   // **************************************************************************
   // **************************************************************************
 

ui/page/discover/view.jsx

@@ -28,6 +28,8 @@ const SECTION = {
 };
 
 type Props = {
+  dynamicRouteProps: RowDataItem,
+  // --- redux ---
   location: { search: string },
   followedTags: Array<Tag>,
   repostedUri: string,
@@ -35,7 +37,6 @@ type Props = {
   doToggleTagFollowDesktop: (string) => void,
   doResolveUri: (string) => void,
   isAuthenticated: boolean,
-  dynamicRouteProps: RowDataItem,
   tileLayout: boolean,
   activeLivestreams: ?LivestreamInfo,
   doFetchActiveLivestreams: (orderBy?: Array<string>, pageSize?: number, forceFetch?: boolean) => void,
@@ -130,6 +131,15 @@ function DiscoverPage(props: Props) {
     return isLargeScreen ? originalSize * (3 / 2) : originalSize;
   }
 
+  function getPins(routeProps) {
+    if (routeProps && routeProps.pinnedUrls) {
+      return {
+        urls: routeProps.pinnedUrls,
+        onlyPinForOrder: CS.ORDER_BY_TRENDING,
+      };
+    }
+  }
+
   React.useEffect(() => {
     if (repostedUri && !repostedClaimIsResolved) {
       doResolveUri(repostedUri);
@@ -222,6 +232,7 @@ function DiscoverPage(props: Props) {
 
       <ClaimListDiscover
         prefixUris={useDualList ? undefined : livestreamUris}
+        pins={useDualList ? undefined : getPins(dynamicRouteProps)}
         hideAdvancedFilter={SIMPLE_SITE}
         hideFilters={SIMPLE_SITE ? !dynamicRouteProps : undefined}
         header={useDualList ? <span /> : repostedUri ? <span /> : undefined}